Skip to content

Commit

Permalink
fix the breadcrumbs
Browse files Browse the repository at this point in the history
  • Loading branch information
sstraatemans committed Nov 6, 2024
1 parent da167fc commit 351024e
Show file tree
Hide file tree
Showing 22 changed files with 587 additions and 557 deletions.
2 changes: 0 additions & 2 deletions packages/apps/dev-wallet/src/App/Layout/Layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import {
} from '@kadena/kode-icons/system';

import { NetworkSelector } from '@/Components/NetworkSelector/NetworkSelector';
import { BreadCrumbs } from '@/pages/BreadCrumbs/BreadCrumbs';
import { Themes, useTheme } from '@kadena/kode-ui';
import {
SideBarFooter,
Expand Down Expand Up @@ -41,7 +40,6 @@ export const Layout: FC = () => {
<>
<SideBarLayout
topBanner={<BetaHeader />}
breadcrumbs={<BreadCrumbs />}
location={innerLocation}
sidebar={<SideBar />}
footer={
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import { IBreadcrumbsProps } from '@kadena/kode-ui';
import { SideBarBreadcrumbs } from '@kadena/kode-ui/patterns';
import React, { FC } from 'react';
import { Link } from 'react-router-dom';

export const Breadcrumbs: FC<IBreadcrumbsProps> = ({ children, ...props }) => {
return (
<SideBarBreadcrumbs {...props}>
{React.Children.map(children, (child) => {
if (!React.isValidElement(child)) {
return null;
}
return React.cloneElement(child, { ...child.props, component: Link });
})}
</SideBarBreadcrumbs>
);
};
26 changes: 0 additions & 26 deletions packages/apps/dev-wallet/src/pages/BreadCrumbs/BreadCrumbs.tsx

This file was deleted.

Original file line number Diff line number Diff line change
@@ -1,22 +1,19 @@
import { AuthCard } from '@/Components/AuthCard/AuthCard';
import { Breadcrumbs } from '@/Components/Breadcrumbs/Breadcrumbs';
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';

export function BackupRecoveryPhrase() {
useLayout({
breadCrumbs: [
{
label: 'Backup',
visual: <MonoDashboardCustomize />,
url: '/backup-recovery-phrase',
},
],
});

return (
<>
<Breadcrumbs icon={<MonoDashboardCustomize />}>
<SideBarBreadcrumbsItem href="/">Dashboard</SideBarBreadcrumbsItem>
<SideBarBreadcrumbsItem href="/backup-recovery-phrase">
Backup
</SideBarBreadcrumbsItem>
</Breadcrumbs>
<AuthCard>
<Box margin="md">
<Heading variant="h5">Backup the recovery phrase</Heading>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,26 +1,14 @@
import { AuthCard } from '@/Components/AuthCard/AuthCard';
import { BackupMnemonic } from '@/Components/BackupMnemonic/BackupMnemonic';
import { Breadcrumbs } from '@/Components/Breadcrumbs/Breadcrumbs';
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({
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('');
Expand Down Expand Up @@ -54,6 +42,12 @@ export function WriteDownRecoveryPhrase() {
}
return (
<>
<Breadcrumbs icon={<MonoDashboardCustomize />}>
<SideBarBreadcrumbsItem href="/">Dashboard</SideBarBreadcrumbsItem>
<SideBarBreadcrumbsItem href="/backup-recovery-phrase/write-down">
Recovery phrase
</SideBarBreadcrumbsItem>
</Breadcrumbs>
{
<AuthCard>
<BackupMnemonic
Expand Down
20 changes: 10 additions & 10 deletions packages/apps/dev-wallet/src/pages/contacts/contacts.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { Breadcrumbs } from '@/Components/Breadcrumbs/Breadcrumbs';
import { ConfirmDeletion } from '@/Components/ConfirmDeletion/ConfirmDeletion';
import { ListItem } from '@/Components/ListItem/ListItem';
import { usePrompt } from '@/Components/PromptProvider/Prompt';
Expand All @@ -20,21 +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({
breadCrumbs: [
{
label: 'Contacts',
visual: <MonoContacts />,
url: '/contacts',
},
],
});
const { setIsRightAsideExpanded, isRightAsideExpanded } = useLayout();
const [editContact, setEditContact] = useState<IContact>();
const { contacts } = useWallet();
const prompt = usePrompt();
Expand All @@ -46,6 +39,13 @@ export function Contacts() {

return (
<>
<Breadcrumbs icon={<MonoContacts />}>
<SideBarBreadcrumbsItem href="/">Dashboard</SideBarBreadcrumbsItem>
<SideBarBreadcrumbsItem href="/contacts">
Contacts
</SideBarBreadcrumbsItem>
</Breadcrumbs>

<ContactForm
input={editContact}
onClose={closeForm}
Expand Down
55 changes: 29 additions & 26 deletions packages/apps/dev-wallet/src/pages/home/home-page.tsx
Original file line number Diff line number Diff line change
@@ -1,22 +1,20 @@
import { AssetsCard } from '@/Components/AssetsCard/AssetsCard';
import { Breadcrumbs } from '@/Components/Breadcrumbs/Breadcrumbs';
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 { 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();

useLayout({
breadCrumbs: [],
});

const [transactions] = useAsync(
async (profile, activeNetwork) => {
if (profile?.uuid && activeNetwork?.uuid) {
Expand All @@ -40,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>
<>
<Breadcrumbs icon={<MonoDashboard />}>
<SideBarBreadcrumbsItem href="/">Dashboard</SideBarBreadcrumbsItem>
</Breadcrumbs>
<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>
</>
);
}
74 changes: 37 additions & 37 deletions packages/apps/dev-wallet/src/pages/keys/keys-page.tsx
Original file line number Diff line number Diff line change
@@ -1,49 +1,49 @@
import { Breadcrumbs } from '@/Components/Breadcrumbs/Breadcrumbs';
import { Mono123, MonoKey } from '@kadena/kode-icons/system';
import { Heading, Stack, TabItem, Tabs, Text } from '@kadena/kode-ui';
import { useLayout } from '@kadena/kode-ui/patterns';
import { SideBarBreadcrumbsItem } from '@kadena/kode-ui/patterns';
import { useParams } from 'react-router-dom';
import { Keys } from './Components/Keys';
import { KeySets } from './Components/KeySets';

export function KeysPage() {
const { tab = 'keys' } = useParams();
useLayout({
breadCrumbs: [
{
label: 'Manage Your Keys',
visual: <MonoKey />,
url: '/key-management/keys',
},
],
});

return (
<Stack flexDirection={'column'} gap={'lg'}>
<Heading>Manage Your Keys</Heading>
<Tabs defaultSelectedKey={tab}>
<TabItem
key={'keys'}
title={
<Stack justifyContent={'center'} alignItems={'center'} gap={'md'}>
<MonoKey />
<Text>Your Keys</Text>
</Stack>
}
>
<Keys />
</TabItem>
<TabItem
key={'keysets'}
title={
<Stack justifyContent={'center'} alignItems={'center'} gap={'md'}>
<Mono123 />
<Text>Your Key Sets</Text>
</Stack>
}
>
<KeySets />
</TabItem>
</Tabs>
</Stack>
<>
<Breadcrumbs icon={<MonoKey />}>
<SideBarBreadcrumbsItem href="/">Dashboard</SideBarBreadcrumbsItem>
<SideBarBreadcrumbsItem href="/key-management/keys">
Manage Your Keys
</SideBarBreadcrumbsItem>
</Breadcrumbs>
<Stack flexDirection={'column'} gap={'lg'}>
<Heading>Manage Your Keys</Heading>
<Tabs defaultSelectedKey={tab}>
<TabItem
key={'keys'}
title={
<Stack justifyContent={'center'} alignItems={'center'} gap={'md'}>
<MonoKey />
<Text>Your Keys</Text>
</Stack>
}
>
<Keys />
</TabItem>
<TabItem
key={'keysets'}
title={
<Stack justifyContent={'center'} alignItems={'center'} gap={'md'}>
<Mono123 />
<Text>Your Key Sets</Text>
</Stack>
}
>
<KeySets />
</TabItem>
</Tabs>
</Stack>
</>
);
}
15 changes: 9 additions & 6 deletions packages/apps/dev-wallet/src/pages/networks/networks.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import { Breadcrumbs } from '@/Components/Breadcrumbs/Breadcrumbs';
import { ListItem } from '@/Components/ListItem/ListItem';
import { networkRepository } from '@/modules/network/network.repository';
import { useWallet } from '@/modules/wallet/wallet.hook';
import { MonoWifiTethering } from '@kadena/kode-icons/system';
import { Button, Heading, 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 {
Expand All @@ -17,14 +18,16 @@ export function Networks() {
const { setIsRightAsideExpanded, isRightAsideExpanded } = useLayout();
const [selectedNetwork, setSelectedNetwork] =
useState<INetworkWithOptionalUuid>(() => getNewNetwork());
useLayout({
breadCrumbs: [
{ label: 'Networks', visual: <MonoWifiTethering />, url: '/networks' },
],
});

return (
<>
<Breadcrumbs icon={<MonoWifiTethering />}>
<SideBarBreadcrumbsItem href="/">Dashboard</SideBarBreadcrumbsItem>
<SideBarBreadcrumbsItem href="/networks">
Networks
</SideBarBreadcrumbsItem>
</Breadcrumbs>

<Stack margin="md" flexDirection={'column'}>
<NetworkForm
isOpen={isRightAsideExpanded}
Expand Down
Loading

0 comments on commit 351024e

Please sign in to comment.