feat(devwallet): style the breadcrumbs

.changeset/polite-mugs-shout.md

@@ -0,0 +1,2 @@
+---
+---

packages/apps/dev-wallet/src/App/Layout/Layout.tsx

@@ -13,16 +13,14 @@
   SideBarFooter,
   SideBarFooterItem,
   SideBarLayout,
-  useSideBar,
 } from '@kadena/kode-ui/patterns';
-import { FC, useEffect, useMemo } from 'react';
+import { FC, useMemo } from 'react';
 import { Link, Outlet, useLocation, useNavigate } from 'react-router-dom';
 import { BetaHeader } from './../BetaHeader';
 import { SideBar } from './SideBar';
 
 export const Layout: FC = () => {
   const { theme, setTheme } = useTheme();
-  const { breadCrumbs, setBreadCrumbs, setAppContext } = useSideBar();
   const location = useLocation();
   const navigate = useNavigate();
 
@@ -32,19 +30,9 @@
       hash: location.hash,
       push: navigate,
     }),
     [location],
   );
 
-  useEffect(() => {
-    if (
-      breadCrumbs.length > 0 &&
-      location.pathname !== breadCrumbs[breadCrumbs.length - 1].url
-    ) {
-      setBreadCrumbs([]);
-      setAppContext();
-    }
-  }, [location]);
-
   const toggleTheme = (): void => {
     const newTheme = theme === Themes.dark ? Themes.light : Themes.dark;
     setTheme(newTheme);

packages/apps/dev-wallet/src/App/Layout/SideBar.tsx

@@ -2,12 +2,12 @@ import {
   MonoContacts,
   MonoContrast,
   MonoDashboardCustomize,
-  MonoDataThresholding,
   MonoLogout,
   MonoNetworkCheck,
   MonoSwapHoriz,
   MonoTableRows,
   MonoWallet,
+  MonoWindow,
 } from '@kadena/kode-icons/system';
 
 import { NetworkSelector } from '@/Components/NetworkSelector/NetworkSelector';
@@ -25,14 +25,14 @@ import {
   SideBarTree,
   SideBarTreeItem,
   SideBar as SideBarUI,
-  useSideBar,
+  useLayout,
 } from '@kadena/kode-ui/patterns';
 import { FC } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 
 export const SideBar: FC = () => {
   const { theme, setTheme } = useTheme();
-  const { isExpanded } = useSideBar();
+  const { isExpanded } = useLayout();
   const navigate = useNavigate();
   const { lockProfile } = useWallet();
 
@@ -58,7 +58,7 @@ export const SideBar: FC = () => {
       navigation={
         <>
           <SideBarItem
-            visual={<MonoDataThresholding />}
+            visual={<MonoWindow />}
             label="Dashboard"
             component={Link}
             href="/"

packages/apps/dev-wallet/src/App/app.tsx

@@ -1,7 +1,7 @@
 import { DatabaseProvider } from '@/modules/db/db.provider';
 import { WalletProvider } from '@/modules/wallet/wallet.provider';
 import { MediaContextProvider } from '@kadena/kode-ui';
-import { SideBarProvider } from '@kadena/kode-ui/patterns';
+import { LayoutProvider } from '@kadena/kode-ui/patterns';
 import { useEffect } from 'react';
 import { PromptProvider } from '../Components/PromptProvider/Prompt';
 import { Routes } from './routes';
@@ -19,10 +19,10 @@ function Providers({ children }: { children: React.ReactNode }) {
         <PromptProvider>
           <DatabaseProvider>
             <WalletProvider>
-              <SideBarProvider>
+              <LayoutProvider>
                 {/* TODO: fixed the issue with prompt and remove this one in favor of the one above */}
                 <PromptProvider>{children}</PromptProvider>
-              </SideBarProvider>
+              </LayoutProvider>
             </WalletProvider>
           </DatabaseProvider>
         </PromptProvider>

packages/apps/dev-wallet/src/Components/Aside/views/AddContact.tsx

@@ -1,9 +1,9 @@
 import { useWallet } from '@/modules/wallet/wallet.hook';
 import { ContactForm } from '@/pages/contacts/Components/ContactForm';
-import { useSideBar } from '@kadena/kode-ui/patterns';
+import { useLayout } from '@kadena/kode-ui/patterns';
 
 const AddContact = ({ contactId }: { contactId: string }) => {
-  const { handleSetAsideExpanded } = useSideBar();
+  const { handleSetAsideExpanded } = useLayout();
   const { getContact } = useWallet();
   return (
     <>

packages/apps/dev-wallet/src/Components/Aside/views/KeySource.tsx

@@ -5,11 +5,11 @@
 
 import { AddKeySourceForm } from '@/pages/keys/Components/AddKeySourceForm';
 import { Notification, Stack } from '@kadena/kode-ui';
-import { useSideBar } from '@kadena/kode-ui/patterns';
+import { useLayout } from '@kadena/kode-ui/patterns';
 import { useState } from 'react';
 
 const KeySource = () => {
-  const { handleSetAsideExpanded } = useSideBar();
+  const { handleSetAsideExpanded } = useLayout();
   const { keySources, profile, askForPassword } = useWallet();
   const [error, setError] = useState<string | null>(null);
   const { createHDWallet } = useHDWallet();
@@ -71,7 +71,7 @@
                 }
               }),
             );
           } catch (error: any) {
             setError(error?.message ?? JSON.stringify(error));
           } finally {
             handleSetAsideExpanded(false);

packages/apps/dev-wallet/src/pages/BreadCrumbs/BreadCrumbs.tsx

@@ -1,21 +1,23 @@
+import { MonoWindow } from '@kadena/kode-icons/system';
 import { BreadcrumbsItem, Breadcrumbs as BreadcrumbsUI } from '@kadena/kode-ui';
-import { useSideBar } from '@kadena/kode-ui/patterns';
+import { useLayout } from '@kadena/kode-ui/patterns';
 import { FC } from 'react';
 import { Link } from 'react-router-dom';
 
 export const BreadCrumbs: FC = () => {
-  const { breadCrumbs } = useSideBar();
-
-  if (!breadCrumbs.length) return null;
+  const { breadCrumbs } = useLayout();
 
   return (
-    <BreadcrumbsUI icon={breadCrumbs[0].visual}>
+    <BreadcrumbsUI
+      icon={breadCrumbs.length ? breadCrumbs[0].visual : <MonoWindow />}
+    >
       <>
+        <BreadcrumbsItem component={Link} href="/">
+          Dashboard
+        </BreadcrumbsItem>
         {breadCrumbs.map((crumb) => (
-          <BreadcrumbsItem href={crumb.url}>
-            <Link key={crumb.label} to={crumb.url}>
-              {crumb.label}
-            </Link>
+          <BreadcrumbsItem key={crumb.url} component={Link} href={crumb.url}>
+            {crumb.label}
           </BreadcrumbsItem>
         ))}
       </>

packages/apps/dev-wallet/src/pages/backup-recovery-phrase/backup-recovery-phrase.tsx

@@ -1,8 +1,21 @@
 import { AuthCard } from '@/Components/AuthCard/AuthCard';
+import { MonoDashboardCustomize } from '@kadena/kode-icons/system';
 import { Box, Button, Heading, Stack, Text } from '@kadena/kode-ui';
+import { useLayout } from '@kadena/kode-ui/patterns';
 import { Link } from 'react-router-dom';
 
 export function BackupRecoveryPhrase() {
+  useLayout({
+    appContext: undefined,
+    breadCrumbs: [
+      {
+        label: 'Backup',
+        visual: <MonoDashboardCustomize />,
+        url: '/backup-recovery-phrase',
+      },
+    ],
+  });
+
   return (
     <>
       <AuthCard>

packages/apps/dev-wallet/src/pages/backup-recovery-phrase/write-down/write-down-recovery-phrase.tsx

@@ -1,15 +1,32 @@
 import { AuthCard } from '@/Components/AuthCard/AuthCard';
 import { BackupMnemonic } from '@/Components/BackupMnemonic/BackupMnemonic';
 import { useWallet } from '@/modules/wallet/wallet.hook';
+import { MonoDashboardCustomize } from '@kadena/kode-icons/system';
 import { Notification } from '@kadena/kode-ui';
+import { useLayout } from '@kadena/kode-ui/patterns';
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 export function WriteDownRecoveryPhrase() {
+  useLayout({
+    appContext: undefined,
+    breadCrumbs: [
+      {
+        label: 'Backup',
+        visual: <MonoDashboardCustomize />,
+        url: '/backup-recovery-phrase',
+      },
+      {
+        label: 'Recovery phrase',
+        url: '/backup-recovery-phrase/write-down',
+      },
+    ],
+  });
   const { decryptSecret, askForPassword, profile } = useWallet();
   const [mnemonic, setMnemonic] = useState('');
   const [error, setError] = useState('');
   const navigate = useNavigate();
+
   async function decryptMnemonic() {
     setError('');
     try {

packages/apps/dev-wallet/src/pages/contacts/contacts.tsx

@@ -7,6 +7,7 @@ import { createAsideUrl } from '@/utils/createAsideUrl';
 import { shorten } from '@/utils/helpers';
 import {
   MonoAccountBalanceWallet,
+  MonoContacts,
   MonoMoreVert,
 } from '@kadena/kode-icons/system';
 import {
@@ -18,10 +19,21 @@ import {
   Stack,
   Text,
 } from '@kadena/kode-ui';
+import { useLayout } from '@kadena/kode-ui/patterns';
 import { Link, useNavigate } from 'react-router-dom';
 import { panelClass } from '../home/style.css';
 
 export function Contacts() {
+  useLayout({
+    appContext: undefined,
+    breadCrumbs: [
+      {
+        label: 'Contacts',
+        visual: <MonoContacts />,
+        url: '/contacts',
+      },
+    ],
+  });
   const navigate = useNavigate();
   const { contacts } = useWallet();
   const prompt = usePrompt();

packages/apps/dev-wallet/src/pages/home/home-page.tsx

@@ -1,18 +1,22 @@
+import { AssetsCard } from '@/Components/AssetsCard/AssetsCard';
+import { transactionRepository } from '@/modules/transaction/transaction.repository';
 import { useWallet } from '@/modules/wallet/wallet.hook';
 import { panelClass } from '@/pages/home/style.css.ts';
-
-import { transactionRepository } from '@/modules/transaction/transaction.repository';
 import { useAsync } from '@/utils/useAsync';
 import { IPactCommand } from '@kadena/client';
-
-import { AssetsCard } from '@/Components/AssetsCard/AssetsCard';
 import { Box, Heading, Stack, TabItem, Tabs, Text } from '@kadena/kode-ui';
+import { useLayout } from '@kadena/kode-ui/patterns';
 import { Link } from 'react-router-dom';
 import { linkClass } from '../select-profile/select-profile.css';
 import { TransactionList } from '../transactions/transactions';
 
 export function HomePage() {
   const { profile, activeNetwork } = useWallet();
+  useLayout({
+    breadCrumbs: [],
+    appContext: undefined,
+  });
+
   console.log('activeNetwork', activeNetwork);
 
   const [transactions] = useAsync(

packages/apps/dev-wallet/src/pages/keys/keys-page.tsx

@@ -1,11 +1,29 @@
+import { createAsideUrl } from '@/utils/createAsideUrl';
 import { Mono123, MonoKey } from '@kadena/kode-icons/system';
 import { Heading, Stack, TabItem, Tabs, Text } from '@kadena/kode-ui';
-import { useParams } from 'react-router-dom';
+import { useLayout } from '@kadena/kode-ui/patterns';
+import { Link, useParams } from 'react-router-dom';
 import { Keys } from './Components/Keys';
 import { KeySets } from './Components/KeySets';
 
 export function KeysPage() {
   const { tab = 'keys' } = useParams();
+  useLayout({
+    appContext: {
+      visual: <MonoKey />,
+      label: 'Add key Source',
+      href: createAsideUrl('KeySource'),
+      component: Link,
+    },
+    breadCrumbs: [
+      {
+        label: 'Manage Your Keys',
+        visual: <MonoKey />,
+        url: '/key-management/keys',
+      },
+    ],
+  });
+
   return (
     <Stack flexDirection={'column'} gap={'lg'}>
       <Heading>Manage Your Keys</Heading>

packages/apps/dev-wallet/src/pages/networks/networks.tsx

@@ -1,18 +1,20 @@
 import { ListItem } from '@/Components/ListItem/ListItem';
 import { networkRepository } from '@/modules/network/network.repository';
 import { useWallet } from '@/modules/wallet/wallet.hook';
-import { Mono123, MonoWifiTethering } from '@kadena/kode-icons/system';
+import { createAsideUrl } from '@/utils/createAsideUrl';
+import { MonoWifiTethering, MonoWorkspaces } from '@kadena/kode-icons/system';
 import {
   Button,
   Dialog,
   DialogContent,
   DialogHeader,
   Heading,
+  Link,
   Stack,
   Text,
 } from '@kadena/kode-ui';
-import { useSideBar } from '@kadena/kode-ui/patterns';
-import { useEffect, useState } from 'react';
+import { useLayout } from '@kadena/kode-ui/patterns';
+import { useState } from 'react';
 import { panelClass } from '../home/style.css';
 import {
   INetworkWithOptionalUuid,
@@ -35,22 +37,21 @@ const getNewNetwork = (): INetworkWithOptionalUuid => ({
 
 export function Networks() {
   const { networks } = useWallet();
-  const { setAppContext, setBreadCrumbs } = useSideBar();
   const [showNetworkModal, setShowNetworkModal] = useState(false);
   const [selectedNetwork, setSelectedNetwork] =
     useState<INetworkWithOptionalUuid>(() => getNewNetwork());
-
-  useEffect(() => {
-    setAppContext({
-      visual: <Mono123 />,
-      label: 'test',
-      onPress: () => alert(111),
-    });
-
-    setBreadCrumbs([
+  useLayout({
+    appContext: {
+      visual: <MonoWorkspaces />,
+      label: 'Add Network',
+      href: createAsideUrl('KeySource'),
+      component: Link,
+    },
+    breadCrumbs: [
       { label: 'Networks', visual: <MonoWifiTethering />, url: '/networks' },
-    ]);
-  }, []);
+    ],
+  });
+
   return (
     <>
       <Stack margin="md" flexDirection={'column'}>

packages/apps/dev-wallet/src/pages/signature-builder/signature-builder.tsx

@@ -9,6 +9,7 @@ import {
 import { transactionRepository } from '@/modules/transaction/transaction.repository';
 import * as transactionService from '@/modules/transaction/transaction.service';
 import { useWallet } from '@/modules/wallet/wallet.hook';
+import { MonoDashboardCustomize } from '@kadena/kode-icons/system';
 import {
   Box,
   Button,
@@ -17,6 +18,7 @@ import {
   Stack,
   Text,
 } from '@kadena/kode-ui';
+import { useLayout } from '@kadena/kode-ui/patterns';
 import { execCodeParser } from '@kadena/pactjs-generator';
 import classNames from 'classnames';
 import { useMemo, useState } from 'react';
@@ -83,6 +85,16 @@ export function SignatureBuilder() {
   >([]);
   const { profile, activeNetwork, networks, setActiveNetwork } = useWallet();
   const navigate = useNavigate();
+  useLayout({
+    appContext: undefined,
+    breadCrumbs: [
+      {
+        label: 'Sig Builder',
+        visual: <MonoDashboardCustomize />,
+        url: '/sig-builder',
+      },
+    ],
+  });
 
   const exec =
     pactCommand && pactCommand.payload && 'exec' in pactCommand.payload