Hubble Stats Breadcrumbs #1470
Hubble Stats Breadcrumbs #1470
Conversation
|
✅ Deploy Preview for webb hubble statistic is ready! Thanks for the contribution @devpavan04
To edit notification comments on pull requests, go to your Netlify site settings. |
apps/hubble-stats/app/layout.tsx
Outdated
| const pathname = usePathname(); | ||
|
|
||
| const breadCrumbs = useMemo(() => { | ||
| const parts = pathname.split('/'); | ||
| const activeItem = parts[parts.length - 1]; | ||
|
|
||
| const breadCrumbItems: Breadcrumb[] = [ | ||
| { | ||
| label: 'Hubble Overview', | ||
| isLast: activeItem !== '' ? false : true, | ||
| icon: ( | ||
| <ContrastLine className={activeItem !== '' ? 'fill-mono-120' : ''} /> | ||
| ), | ||
| href: '/', | ||
| }, | ||
| ]; | ||
|
|
||
| if (activeItem !== '') { | ||
| breadCrumbItems.push({ | ||
| label: activeItem, | ||
| isLast: true, | ||
| icon: <CoinIcon />, | ||
| href: '', | ||
| }); | ||
| } | ||
|
|
||
| return breadCrumbItems; | ||
| }, [pathname]); | ||
|
|
There was a problem hiding this comment.
This component should be the "server component" (or async component to fetch TVL and volume), passed fetched data into the Header component to render. Move this logic to the Header component, extract it into a React hook, and use it inside the Header client component.
There was a problem hiding this comment.
Also, consider moving static variables (items and footer in this case) outside of the component.
| return ( | ||
| <Chip | ||
| color="grey" |
There was a problem hiding this comment.
The default props should be defined in the component (isLast here), instead of using BreadcrumbsItem.defaultProps = BreadcrumbsItemsDefaultProps; as you did. You can read more about this here.
| value={volume} | ||
| isLoading={volume ? false : true} | ||
| value={volumeValue} | ||
| isLoading={volumeValue ? false : true} |
There was a problem hiding this comment.
isLoading should be applied only when we are loading the tvl and volume value, not when the tvl and volume are undefined. Maybe you can change the value prop here to "-" if those values are undefined.
AtelyPham
added
needs changes 🔧
devpavan04
added
wip 🚧
devpavan04
added
needs review 👓
|
✅ Deploy Preview for webb hubble statistic is ready! Thanks for the contribution @devpavan04
To edit notification comments on pull requests, go to your Netlify site settings. |
| @@ -1,13 +1,15 @@ | |||
| 'use client'; | |||
There was a problem hiding this comment.
You can remove 'use client' here.
Summary of changes
BreadcrumbstoHeadercomponent inhubble-statsdapp.Proposed area of change
apps/bridge-dappapps/hubble-statsapps/stats-dappapps/webbsiteapps/faucetapps/tangle-websitelibs/webb-ui-componentsReference issue to close (if applicable)
Screen Recording
CleanShot.2023-07-28.at.09.33.38.mp4