fix the sidebar and content loading

kadena-community · Nov 2, 2024 · 12502e4 · 12502e4
1 parent 9c4ce81
commit 12502e4
Show file tree

Hide file tree

Showing 11 changed files with 69 additions and 37 deletions.
diff --git a/packages/apps/dev-wallet/src/Components/Aside/Aside.tsx b/packages/apps/dev-wallet/src/Components/Aside/Aside.tsx
@@ -1,15 +1,39 @@
 import { FC, lazy, ReactElement, Suspense, useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 
-const importView = async (key: string) =>
-  lazy(() => import(`./views/${key}`).catch(() => import(`./views/Error`)));
+const importView = async (key: string) => {
+  switch (key) {
+    case 'AddContact':
+      return lazy(() =>
+        import(`./views/AddContact`).catch(() => import(`./views/Error`)),
+      );
+
+    case 'KeySource':
+      return lazy(() =>
+        import(`./views/KeySource`).catch(() => import(`./views/Error`)),
+      );
+
+    case 'NewAsset':
+      return lazy(() =>
+        import(`./views/NewAsset`).catch(() => import(`./views/Error`)),
+      );
+
+    case 'NextAccount':
+      return lazy(() =>
+        import(`./views/NextAccount`).catch(() => import(`./views/Error`)),
+      );
+
+    default:
+      return lazy(() => import(`./views/Error`));
+  }
+};
 
 export const Aside: FC = () => {
   const [view, setView] = useState<ReactElement | undefined>();
   const location = useLocation();
 
   const loadView = async (data: Record<string, string>) => {
-    const Result = await importView(data.aside);
+    const Result: FC<any> = await importView(data.aside);
     setView(<Result {...data} />);
   };
   useEffect(() => {

diff --git a/packages/apps/dev-wallet/src/Components/Aside/views/AddContact.tsx b/packages/apps/dev-wallet/src/Components/Aside/views/AddContact.tsx
@@ -1,9 +1,8 @@
 import { useWallet } from '@/modules/wallet/wallet.hook';
 import { ContactForm } from '@/pages/contacts/Components/ContactForm';
 import { useSideBar } from '@kadena/kode-ui/patterns';
-import { FC } from 'react';
 
-const AddContact: FC<{ contactId: string }> = ({ contactId }) => {
+const AddContact = ({ contactId }: { contactId: string }) => {
   const { handleSetAsideExpanded } = useSideBar();
   const { getContact } = useWallet();
   return (

diff --git a/packages/apps/dev-wallet/src/Components/Aside/views/Error.tsx b/packages/apps/dev-wallet/src/Components/Aside/views/Error.tsx
@@ -1,6 +1,4 @@
-import { FC } from 'react';
-
-const Error: FC = () => {
+const Error = () => {
   return <div>There was an error loading the view</div>;
 };
 

diff --git a/packages/apps/dev-wallet/src/Components/Aside/views/KeySource.tsx b/packages/apps/dev-wallet/src/Components/Aside/views/KeySource.tsx
@@ -6,9 +6,9 @@ import { useWallet } from '@/modules/wallet/wallet.hook';
 import { AddKeySourceForm } from '@/pages/keys/Components/AddKeySourceForm';
 import { Notification, Stack } from '@kadena/kode-ui';
 import { useSideBar } from '@kadena/kode-ui/patterns';
-import { FC, useState } from 'react';
+import { useState } from 'react';
 
-const KeySource: FC = () => {
+const KeySource = () => {
   const { handleSetAsideExpanded } = useSideBar();
   const { keySources, profile, askForPassword } = useWallet();
   const [error, setError] = useState<string | null>(null);

diff --git a/packages/apps/dev-wallet/src/Components/Aside/views/NewAsset.tsx b/packages/apps/dev-wallet/src/Components/Aside/views/NewAsset.tsx
@@ -1,7 +1,6 @@
 import { AddToken } from '@/Components/Assets/AddToken';
-import { FC } from 'react';
 
-const NewAsset: FC = () => {
+const NewAsset = () => {
   return (
     <div>
       <AddToken />

diff --git a/packages/apps/dev-wallet/src/Components/Aside/views/NextAccount.tsx b/packages/apps/dev-wallet/src/Components/Aside/views/NextAccount.tsx
@@ -1,6 +1,4 @@
-import { FC } from 'react';
-
-const NextAccount: FC<{ contract: string }> = ({ contract }) => {
+const NextAccount = ({ contract }: { contract: string }) => {
   return <div>new account {contract}</div>;
 };
 

diff --git a/packages/apps/dev-wallet/src/Components/Assets/Assets.tsx b/packages/apps/dev-wallet/src/Components/Assets/Assets.tsx
@@ -43,11 +43,14 @@ export function Assets({
       >
         <Heading as="h4">Your Assets</Heading>
         {showAddToken && (
-          <Link to={createAsideUrl('NewAsset')}>
-            <LinkUI variant="outlined" isCompact>
-              Add new asset
-            </LinkUI>
-          </Link>
+          <LinkUI
+            variant="outlined"
+            isCompact
+            href={createAsideUrl('NewAsset')}
+            component={Link}
+          >
+            Add new asset
+          </LinkUI>
         )}
       </Stack>
       <Stack gap={'md'}>

diff --git a/packages/apps/dev-wallet/src/pages/contacts/contacts.tsx b/packages/apps/dev-wallet/src/pages/contacts/contacts.tsx
@@ -30,11 +30,15 @@ export function Contacts() {
     <Stack flexDirection={'column'} className={panelClass} gap={'md'}>
       <Stack justifyContent={'space-between'}>
         <Heading variant="h3">Contacts</Heading>
-        <Link to={createAsideUrl('AddContact')}>
-          <LinkUI variant="outlined" isCompact>
-            Add Contact
-          </LinkUI>
-        </Link>
+
+        <LinkUI
+          component={Link}
+          href={createAsideUrl('AddContact')}
+          variant="outlined"
+          isCompact
+        >
+          Add Contact
+        </LinkUI>
       </Stack>
       <Stack flexDirection={'column'}>
         {contacts.map((contact) => (

diff --git a/packages/apps/dev-wallet/src/pages/keys/Components/Keys.tsx b/packages/apps/dev-wallet/src/pages/keys/Components/Keys.tsx
@@ -26,11 +26,15 @@ export function Keys() {
           <Stack marginBlock={'md'}>
             <Heading variant="h3">Your Keys</Heading>
           </Stack>
-          <Link to={createAsideUrl('KeySource')}>
-            <LinkUI variant="outlined" isCompact>
-              Add key Source
-            </LinkUI>
-          </Link>
+
+          <LinkUI
+            variant="outlined"
+            isCompact
+            href={createAsideUrl('KeySource')}
+            component={Link}
+          >
+            Add key Source
+          </LinkUI>
         </Stack>
 
         <Stack flexDirection={'column'} gap="md">

diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.stories.tsx b/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.stories.tsx
@@ -84,13 +84,13 @@ const InnerLayout = () => {
         url: 'https://kadena.io',
         push: console.log,
       }}
-      // topBanner={
-      //   <div
-      //     style={{ paddingBlock: '10px', background: 'green', width: '100%' }}
-      //   >
-      //     topbanner
-      //   </div>
-      // }
+      topBanner={
+        <div
+          style={{ paddingBlock: '10px', background: 'green', width: '100%' }}
+        >
+          topbanner
+        </div>
+      }
       breadcrumbs={
         <Breadcrumbs icon={<MonoAccountTree />}>
           <BreadcrumbsItem href="/accounts">He-man</BreadcrumbsItem>

diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/styles.css.ts b/packages/libs/kode-ui/src/patterns/SideBarLayout/styles.css.ts
@@ -72,6 +72,9 @@ export const layoutWrapperClass = recipe({
             "sidebarlayout-sidebar sidebarlayout-main sidebarlayout-aside"
           `,
           },
+          xl: {
+            position: 'relative',
+          },
         }),
       ],
     },
-Original file line number
+Diff line change
@@ Expand Up / @@ -72,6 +72,9 @@ export const layoutWrapperClass = recipe({ @@
                 "sidebarlayout-sidebar sidebarlayout-main sidebarlayout-aside"
               `,
               },
+              xl: {
+                position: 'relative',
+              },
             }),
           ],
         },
@@ Expand Down @@