breadcrumbs with a network badge

kadena-community · Nov 7, 2024 · 3e03fab · 3e03fab
1 parent 780e1b7
commit 3e03fab
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 8 deletions.
diff --git a/packages/apps/dev-wallet/src/Components/SideBarBreadcrumbs/SideBarBreadcrumbs.tsx b/packages/apps/dev-wallet/src/Components/SideBarBreadcrumbs/SideBarBreadcrumbs.tsx
@@ -1,4 +1,5 @@
-import { IBreadcrumbsProps } from '@kadena/kode-ui';
+import { useWallet } from '@/modules/wallet/wallet.hook';
+import { Badge, IBreadcrumbsProps } from '@kadena/kode-ui';
 import { SideBarBreadcrumbs as SideBarBreadcrumbsUI } from '@kadena/kode-ui/patterns';
 import React, { FC } from 'react';
 import { Link } from 'react-router-dom';
@@ -7,14 +8,19 @@ export const SideBarBreadcrumbs: FC<IBreadcrumbsProps> = ({
   children,
   ...props
 }) => {
+  const { activeNetwork } = useWallet();
+
   return (
     <SideBarBreadcrumbsUI {...props}>
-      {React.Children.map(children, (child) => {
-        if (!React.isValidElement(child)) {
-          return null;
-        }
-        return React.cloneElement(child, { ...child.props, component: Link });
-      })}
+      <>
+        <Badge size="sm" style="highContrast">{`${activeNetwork?.name}`}</Badge>
+        {React.Children.map(children, (child) => {
+          if (!React.isValidElement(child)) {
+            return null;
+          }
+          return React.cloneElement(child, { ...child.props, component: Link });
+        })}
+      </>
     </SideBarBreadcrumbsUI>
   );
 };
diff --git a/packages/libs/kode-ui/src/components/Breadcrumbs/Breadcrumbs.css.ts b/packages/libs/kode-ui/src/components/Breadcrumbs/Breadcrumbs.css.ts
@@ -68,5 +68,4 @@ export const navClass = style([
 
 globalStyle(`${navClass} svg`, {
   width: '20px',
-  color: token('color.text.gray.default'),
 });