fix(dw): bread crumbs

kadena-community · Dec 2, 2024 · 9301530 · 9301530
1 parent 7c7cb09
commit 9301530
Show file tree

Hide file tree

Showing 9 changed files with 32 additions and 23 deletions.
diff --git a/packages/apps/dev-wallet/src/App/Layout/SideBar.tsx b/packages/apps/dev-wallet/src/App/Layout/SideBar.tsx
@@ -76,7 +76,7 @@ export const SideBar: FC = () => {
         <>
           <SideBarItem
             visual={<MonoWallet />}
-            label="Assets"
+            label="Your Assets"
             component={Link}
             href="/"
           />
@@ -89,17 +89,17 @@ export const SideBar: FC = () => {
           />
 
           <SideBarItem
-            visual={<MonoSignature />}
-            label="Sig Builder"
+            visual={<MonoTableRows />}
+            label="Transactions"
             component={Link}
-            href="/sig-builder"
+            href="/transactions"
           />
 
           <SideBarItem
-            visual={<MonoTableRows />}
-            label="Transactions"
+            visual={<MonoSignature />}
+            label="Sig Builder"
             component={Link}
-            href="/transactions"
+            href="/sig-builder"
           />
 
           <SideBarItem

diff --git a/packages/apps/dev-wallet/src/Components/SideBarBreadcrumbs/SideBarBreadcrumbs.tsx b/packages/apps/dev-wallet/src/Components/SideBarBreadcrumbs/SideBarBreadcrumbs.tsx
@@ -4,17 +4,19 @@ import { SideBarBreadcrumbs as SideBarBreadcrumbsUI } from '@kadena/kode-ui/patt
 import React, { FC } from 'react';
 import { Link } from 'react-router-dom';
 
-export const SideBarBreadcrumbs: FC<IBreadcrumbsProps> = ({
-  children,
-  ...props
-}) => {
+export const SideBarBreadcrumbs: FC<
+  IBreadcrumbsProps & { isGlobal?: boolean }
+> = ({ children, isGlobal, ...props }) => {
   const { activeNetwork } = useWallet();
 
   return (
     <SideBarBreadcrumbsUI
       {...props}
       badge={
-        <Badge size="sm" style="highContrast">{`${activeNetwork?.name}`}</Badge>
+        <Badge
+          size="sm"
+          style="highContrast"
+        >{`${isGlobal ? 'Global' : activeNetwork?.name}`}</Badge>
       }
     >
       {React.Children.map(children, (child) => {

diff --git a/packages/apps/dev-wallet/src/pages/account/account.tsx b/packages/apps/dev-wallet/src/pages/account/account.tsx
@@ -110,9 +110,14 @@ export function AccountPage() {
   return (
     <Stack flexDirection={'column'} gap={'lg'}>
       <SideBarBreadcrumbs icon={<MonoWallet />}>
-        <SideBarBreadcrumbsItem href="/">Dashboard</SideBarBreadcrumbsItem>
+        <SideBarBreadcrumbsItem href="/">Your Assets</SideBarBreadcrumbsItem>
+        <SideBarBreadcrumbsItem href="/">
+          {account.contract}
+        </SideBarBreadcrumbsItem>
         <SideBarBreadcrumbsItem href={`/account/${accountId}`}>
-          Account ({account.alias || account.address})
+          {account.alias
+            ? `${account.alias} (${account.address})`
+            : account.address}
         </SideBarBreadcrumbsItem>
       </SideBarBreadcrumbs>
       <AliasForm show={isRightAsideExpanded} account={account} />

diff --git a/packages/apps/dev-wallet/src/pages/contacts/contacts.tsx b/packages/apps/dev-wallet/src/pages/contacts/contacts.tsx
@@ -38,8 +38,7 @@ export function Contacts() {
 
   return (
     <>
-      <SideBarBreadcrumbs icon={<MonoContacts />}>
-        <SideBarBreadcrumbsItem href="/">Dashboard</SideBarBreadcrumbsItem>
+      <SideBarBreadcrumbs icon={<MonoContacts />} isGlobal>
         <SideBarBreadcrumbsItem href="/contacts">
           Contacts
         </SideBarBreadcrumbsItem>

diff --git a/packages/apps/dev-wallet/src/pages/keys/keys-page.tsx b/packages/apps/dev-wallet/src/pages/keys/keys-page.tsx
@@ -11,8 +11,7 @@ export function KeysPage() {
 
   return (
     <>
-      <SideBarBreadcrumbs icon={<MonoKey />}>
-        <SideBarBreadcrumbsItem href="/">Dashboard</SideBarBreadcrumbsItem>
+      <SideBarBreadcrumbs icon={<MonoKey />} isGlobal>
         <SideBarBreadcrumbsItem href="/key-management/keys">
           Manage Your Keys
         </SideBarBreadcrumbsItem>

diff --git a/packages/apps/dev-wallet/src/pages/settings/settings.tsx b/packages/apps/dev-wallet/src/pages/settings/settings.tsx
@@ -1,13 +1,15 @@
+import { SideBarBreadcrumbs } from '@/Components/SideBarBreadcrumbs/SideBarBreadcrumbs';
 import { dbService } from '@/modules/db/db.service';
 import {
   MonoDownload,
   MonoPassword,
   MonoPerson,
   MonoRemoveRedEye,
+  MonoSettings,
   MonoSettingsBackupRestore,
 } from '@kadena/kode-icons/system';
 import { Button, Heading, Stack, Link as UiLink } from '@kadena/kode-ui';
-import { useLayout } from '@kadena/kode-ui/patterns';
+import { SideBarBreadcrumbsItem, useLayout } from '@kadena/kode-ui/patterns';
 import { Link } from 'react-router-dom';
 import { isFileSystemAccessSupported } from '../../modules/backup/fileApi';
 import { ProfileNameColorForm } from './components/ProfileNameColorForm';
@@ -17,6 +19,11 @@ export function Settings() {
   const { isRightAsideExpanded, setIsRightAsideExpanded } = useLayout();
   return (
     <Stack flexDirection={'column'} gap={'md'} alignItems={'flex-start'}>
+      <SideBarBreadcrumbs icon={<MonoSettings />} isGlobal>
+        <SideBarBreadcrumbsItem href="/settings">
+          Settings
+        </SideBarBreadcrumbsItem>
+      </SideBarBreadcrumbs>
       <Heading variant="h3">Settings</Heading>
       <ProfileNameColorForm isOpen={isRightAsideExpanded} />
       <Button

diff --git a/packages/apps/dev-wallet/src/pages/signature-builder/signature-builder.tsx b/packages/apps/dev-wallet/src/pages/signature-builder/signature-builder.tsx
@@ -172,8 +172,7 @@ export function SignatureBuilder() {
 
   return (
     <>
-      <SideBarBreadcrumbs icon={<MonoDashboardCustomize />}>
-        <SideBarBreadcrumbsItem href="/">Dashboard</SideBarBreadcrumbsItem>
+      <SideBarBreadcrumbs icon={<MonoDashboardCustomize />} isGlobal>
         <SideBarBreadcrumbsItem href="/sig-builder">
           Sig Builder
         </SideBarBreadcrumbsItem>

diff --git a/packages/apps/dev-wallet/src/pages/transactions/transactions.tsx b/packages/apps/dev-wallet/src/pages/transactions/transactions.tsx
@@ -47,7 +47,6 @@ export function Transactions() {
   return (
     <>
       <SideBarBreadcrumbs icon={<MonoSwapHoriz />}>
-        <SideBarBreadcrumbsItem href="/">Dashboard</SideBarBreadcrumbsItem>
         <SideBarBreadcrumbsItem href="/transactions">
           Transactions
         </SideBarBreadcrumbsItem>

diff --git a/packages/apps/dev-wallet/src/pages/transfer-v2/transfer-v2.tsx b/packages/apps/dev-wallet/src/pages/transfer-v2/transfer-v2.tsx
@@ -258,7 +258,6 @@ export function TransferV2() {
   return (
     <>
       <SideBarBreadcrumbs icon={<MonoSwapHoriz />}>
-        <SideBarBreadcrumbsItem href="/">Dashboard</SideBarBreadcrumbsItem>
         <SideBarBreadcrumbsItem href="/transfer">
           Transfer
         </SideBarBreadcrumbsItem>