chore(devwallet): stylefixes

.changeset/purple-rabbits-drum.md

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

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

@@ -15,7 +15,6 @@
 import { FC, useMemo } from 'react';
 import { Link, Outlet, useLocation, useNavigate } from 'react-router-dom';
 import { BetaHeader } from './../BetaHeader';
-import { BreadCrumbs } from './BreadCrumbs';
 import { SideBar } from './SideBar';
 
 export const Layout: FC = () => {
@@ -29,7 +28,7 @@
       hash: location.hash,
       push: navigate,
     }),
     [location],
   );
 
   const toggleTheme = (): void => {
@@ -41,7 +40,6 @@
     <>
       <SideBarLayout
         topBanner={<BetaHeader />}
-        breadcrumbs={<BreadCrumbs />}
         location={innerLocation}
         sidebar={<SideBar />}
         footer={

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

@@ -4,7 +4,6 @@ import {
   MonoDashboardCustomize,
   MonoLogout,
   MonoNetworkCheck,
-  MonoSwapHoriz,
   MonoTableRows,
   MonoWallet,
   MonoWindow,
@@ -91,13 +90,6 @@ export const SideBar: FC = () => {
             />
           </SideBarTree>
 
-          <SideBarItem
-            visual={<MonoSwapHoriz />}
-            label="Transfer"
-            component={Link}
-            href="/transfer"
-          />
-
           <SideBarItem
             visual={<MonoContacts />}
             label="Contacts"

packages/apps/dev-wallet/src/Components/SideBarBreadcrumbs/SideBarBreadcrumbs.tsx

@@ -0,0 +1,20 @@
+import { 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';
+
+export const SideBarBreadcrumbs: FC<IBreadcrumbsProps> = ({
+  children,
+  ...props
+}) => {
+  return (
+    <SideBarBreadcrumbsUI {...props}>
+      {React.Children.map(children, (child) => {
+        if (!React.isValidElement(child)) {
+          return null;
+        }
+        return React.cloneElement(child, { ...child.props, component: Link });
+      })}
+    </SideBarBreadcrumbsUI>
+  );
+};

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

@@ -15,14 +15,8 @@ import { getTransferActivities } from '@/modules/activity/activity.service';
 import * as transactionService from '@/modules/transaction/transaction.service';
 import { useAsync } from '@/utils/useAsync';
 import { ChainId } from '@kadena/client';
-import {
-  MonoKey,
-  MonoRemoveRedEye,
-  MonoTransform,
-  MonoWallet,
-} from '@kadena/kode-icons/system';
+import { MonoKey, MonoRemoveRedEye } from '@kadena/kode-icons/system';
 import { Button, Heading, Stack, TabItem, Tabs, Text } from '@kadena/kode-ui';
-import { useLayout } from '@kadena/kode-ui/patterns';
 import { useMemo, useState } from 'react';
 import { Link, useNavigate, useParams } from 'react-router-dom';
 import { noStyleLinkClass, panelClass } from '../home/style.css';
@@ -41,27 +35,6 @@ export function AccountPage() {
     watchAccounts.find((account) => account.uuid === accountId);
 
   const navigate = useNavigate();
-  useLayout({
-    breadCrumbs: [
-      {
-        label:
-          activeNetwork?.name || activeNetwork?.networkId || 'Unknown Network',
-        url: '/',
-        visual: <MonoWallet />,
-      },
-      {
-        url: `/account/${accountId || ''}`,
-        label: `Account (${account?.alias || account?.address || 'Unknown Account'})`,
-      },
-    ],
-    appContext: {
-      visual: <MonoTransform />,
-      label: 'Add Asset',
-      onPress: () => {
-        navigate('/add-asset');
-      },
-    },
-  });
 
   const keyset = account?.keyset;
   const asset = fungibles.find((f) => f.contract === account?.contract);

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

@@ -1,23 +1,22 @@
 import { AuthCard } from '@/Components/AuthCard/AuthCard';
+import { SideBarBreadcrumbs } from '@/Components/SideBarBreadcrumbs/SideBarBreadcrumbs';
 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 { SideBarBreadcrumbsItem } from '@kadena/kode-ui/patterns';
 import { Link } from 'react-router-dom';
-
+<SideBarBreadcrumbs icon={<MonoDashboardCustomize />}>
+  <SideBarBreadcrumbsItem href="/">Dashboard</SideBarBreadcrumbsItem>
+  <SideBarBreadcrumbsItem href="/terminal">Dev Console</SideBarBreadcrumbsItem>
+</SideBarBreadcrumbs>;
 export function BackupRecoveryPhrase() {
-  useLayout({
-    appContext: undefined,
-    breadCrumbs: [
-      {
-        label: 'Backup',
-        visual: <MonoDashboardCustomize />,
-        url: '/backup-recovery-phrase',
-      },
-    ],
-  });
-
   return (
     <>
+      <SideBarBreadcrumbs icon={<MonoDashboardCustomize />}>
+        <SideBarBreadcrumbsItem href="/">Dashboard</SideBarBreadcrumbsItem>
+        <SideBarBreadcrumbsItem href="/backup-recovery-phrase">
+          Backup
+        </SideBarBreadcrumbsItem>
+      </SideBarBreadcrumbs>
       <AuthCard>
         <Box margin="md">
           <Heading variant="h5">Backup the recovery phrase</Heading>

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

@@ -1,27 +1,14 @@
 import { AuthCard } from '@/Components/AuthCard/AuthCard';
 import { BackupMnemonic } from '@/Components/BackupMnemonic/BackupMnemonic';
+import { SideBarBreadcrumbs } from '@/Components/SideBarBreadcrumbs/SideBarBreadcrumbs';
 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 { SideBarBreadcrumbsItem } 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('');
@@ -55,6 +42,12 @@ export function WriteDownRecoveryPhrase() {
   }
   return (
     <>
+      <SideBarBreadcrumbs icon={<MonoDashboardCustomize />}>
+        <SideBarBreadcrumbsItem href="/">Dashboard</SideBarBreadcrumbsItem>
+        <SideBarBreadcrumbsItem href="/backup-recovery-phrase/write-down">
+          Recovery phrase
+        </SideBarBreadcrumbsItem>
+      </SideBarBreadcrumbs>
       {
         <AuthCard>
           <BackupMnemonic

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

@@ -1,6 +1,7 @@
 import { ConfirmDeletion } from '@/Components/ConfirmDeletion/ConfirmDeletion';
 import { ListItem } from '@/Components/ListItem/ListItem';
 import { usePrompt } from '@/Components/PromptProvider/Prompt';
+import { SideBarBreadcrumbs } from '@/Components/SideBarBreadcrumbs/SideBarBreadcrumbs';
 import {
   contactRepository,
   IContact,
@@ -20,28 +21,13 @@ import {
   Stack,
   Text,
 } from '@kadena/kode-ui';
-import { useLayout } from '@kadena/kode-ui/patterns';
+import { SideBarBreadcrumbsItem, useLayout } from '@kadena/kode-ui/patterns';
 import { useState } from 'react';
 import { panelClass } from '../home/style.css';
 import { ContactForm } from './Components/ContactForm';
 
 export function Contacts() {
-  const { setIsRightAsideExpanded, isRightAsideExpanded } = useLayout({
-    appContext: {
-      visual: <MonoContacts />,
-      label: 'Add Contact',
-      onPress: () => {
-        setIsRightAsideExpanded(true);
-      },
-    },
-    breadCrumbs: [
-      {
-        label: 'Contacts',
-        visual: <MonoContacts />,
-        url: '/contacts',
-      },
-    ],
-  });
+  const { setIsRightAsideExpanded, isRightAsideExpanded } = useLayout();
   const [editContact, setEditContact] = useState<IContact>();
   const { contacts } = useWallet();
   const prompt = usePrompt();
@@ -53,6 +39,13 @@ export function Contacts() {
 
   return (
     <>
+      <SideBarBreadcrumbs icon={<MonoContacts />}>
+        <SideBarBreadcrumbsItem href="/">Dashboard</SideBarBreadcrumbsItem>
+        <SideBarBreadcrumbsItem href="/contacts">
+          Contacts
+        </SideBarBreadcrumbsItem>
+      </SideBarBreadcrumbs>
+
       <ContactForm
         input={editContact}
         onClose={closeForm}

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

@@ -1,37 +1,19 @@
 import { AssetsCard } from '@/Components/AssetsCard/AssetsCard';
+import { SideBarBreadcrumbs } from '@/Components/SideBarBreadcrumbs/SideBarBreadcrumbs';
 import { transactionRepository } from '@/modules/transaction/transaction.repository';
 import { useWallet } from '@/modules/wallet/wallet.hook';
 import { panelClass } from '@/pages/home/style.css.ts';
 import { useAsync } from '@/utils/useAsync';
 import { IPactCommand } from '@kadena/client';
-import { MonoWallet, MonoWindow } from '@kadena/kode-icons/system';
+import { MonoDashboard } from '@kadena/kode-icons/system';
 import { Box, Heading, Stack, TabItem, Tabs, Text } from '@kadena/kode-ui';
-import { useLayout } from '@kadena/kode-ui/patterns';
+import { SideBarBreadcrumbsItem } 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();
-  const { setIsRightAsideExpanded } = useLayout();
-  console.log('activeNetwork?.name', activeNetwork?.name);
-  useLayout({
-    breadCrumbs: [
-      {
-        label:
-          activeNetwork?.name || activeNetwork?.networkId || 'Unknown Network',
-        url: '/',
-        visual: <MonoWindow />,
-      },
-    ],
-    appContext: {
-      visual: <MonoWallet />,
-      label: 'Add Asset',
-      onPress: () => {
-        setIsRightAsideExpanded(true);
-      },
-    },
-  });
 
   const [transactions] = useAsync(
     async (profile, activeNetwork) => {
@@ -56,28 +38,33 @@ export function HomePage() {
   );
 
   return (
-    <Box gap={'lg'}>
-      <Text>Welcome back</Text>
-      <Heading as="h1">{profile?.name} </Heading>
-      <Stack gap={'lg'} flexDirection={'column'}>
-        <AssetsCard />
-        <Stack className={panelClass} flexDirection={'column'} gap={'lg'}>
-          <Heading variant="h4">Wallet Activities</Heading>
-          <Stack>
-            <Tabs>
-              <TabItem title="Transactions">
-                <TransactionList transactions={transactions || []} />
-                <Stack paddingBlockStart={'lg'}>
-                  <Link to="/transactions" className={linkClass}>
-                    All transactions
-                  </Link>
-                </Stack>
-              </TabItem>
-              <TabItem title="Transfers">WIP: Not implemented yet</TabItem>
-            </Tabs>
+    <>
+      <SideBarBreadcrumbs icon={<MonoDashboard />}>
+        <SideBarBreadcrumbsItem href="/">Dashboard</SideBarBreadcrumbsItem>
+      </SideBarBreadcrumbs>
+      <Box gap={'lg'}>
+        <Text>Welcome back</Text>
+        <Heading as="h1">{profile?.name} </Heading>
+        <Stack gap={'lg'} flexDirection={'column'}>
+          <AssetsCard />
+          <Stack className={panelClass} flexDirection={'column'} gap={'lg'}>
+            <Heading variant="h4">Wallet Activities</Heading>
+            <Stack>
+              <Tabs>
+                <TabItem title="Transactions">
+                  <TransactionList transactions={transactions || []} />
+                  <Stack paddingBlockStart={'lg'}>
+                    <Link to="/transactions" className={linkClass}>
+                      All transactions
+                    </Link>
+                  </Stack>
+                </TabItem>
+                <TabItem title="Transfers">WIP: Not implemented yet</TabItem>
+              </Tabs>
+            </Stack>
           </Stack>
         </Stack>
-      </Stack>
-    </Box>
+      </Box>
+    </>
   );
 }