fix(devwallet): layout for pages (#2645)

kadena-community · Nov 7, 2024 · 44f7ee0 · 44f7ee0
1 parent f50a643
commit 44f7ee0
Show file tree

Hide file tree

Showing 8 changed files with 131 additions and 60 deletions.
diff --git a/.changeset/dirty-dogs-promise.md b/.changeset/dirty-dogs-promise.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/apps/dev-wallet/src/App/Layout/SideBar.tsx b/packages/apps/dev-wallet/src/App/Layout/SideBar.tsx
@@ -29,12 +29,11 @@ import {
   useLayout,
 } from '@kadena/kode-ui/patterns';
 import { FC } from 'react';
-import { Link, useNavigate } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 
 export const SideBar: FC = () => {
   const { theme, setTheme } = useTheme();
   const { isExpanded } = useLayout();
-  const navigate = useNavigate();
   const { lockProfile } = useWallet();
 
   const toggleTheme = (): void => {
@@ -123,10 +122,6 @@ export const SideBar: FC = () => {
                   </Button>
                 }
               >
-                <ContextMenuItem
-                  onClick={() => navigate('/profile')}
-                  label="Profile"
-                />
                 <ContextMenuItem
                   endVisual={<MonoLogout />}
                   label="Logout"
@@ -140,12 +135,12 @@ export const SideBar: FC = () => {
               label="Change theme"
             >
               <Button
+                isCompact
                 variant="transparent"
                 onPress={() => toggleTheme()}
                 startVisual={
                   theme === 'dark' ? <MonoDarkMode /> : <MonoLightMode />
                 }
-                isCompact={!isExpanded}
               />
             </SideBarItem>
           </SideBarItemsInline>

diff --git a/packages/apps/dev-wallet/src/App/layout-mini.css.ts b/packages/apps/dev-wallet/src/App/layout-mini.css.ts
@@ -10,11 +10,14 @@ export const headerStyle = style({
 export const containerStyle = style([
   atoms({
     padding: 'sm',
+    display: 'flex',
+    alignItems: 'center',
   }),
   {
-    width: '474px',
+    width: '500px',
     maxWidth: '100%',
     margin: '0 auto',
     textAlign: 'center',
+    height: '100dvh',
   },
 ]);
diff --git a/packages/apps/dev-wallet/src/App/layout-mini.tsx b/packages/apps/dev-wallet/src/App/layout-mini.tsx
@@ -1,16 +1,15 @@
-import { SideBarLayout } from '@kadena/kode-ui/patterns';
+import { Stack } from '@kadena/kode-ui';
 import { FC } from 'react';
 import { Outlet } from 'react-router-dom';
 import { containerStyle } from './layout-mini.css';
 
 export const LayoutMini: FC = () => {
   return (
     <>
-      <SideBarLayout variant="full">
-        <div className={containerStyle}>
-          <Outlet />
-        </div>
-      </SideBarLayout>
+      <Stack className={containerStyle}>
+        <Outlet />
+      </Stack>
+
       <div id="modalportal"></div>
     </>
   );

diff --git a/packages/apps/dev-wallet/src/pages/contacts/Components/ContactForm.tsx b/packages/apps/dev-wallet/src/pages/contacts/Components/ContactForm.tsx
@@ -15,7 +15,7 @@ import {
   RightAsideFooter,
   RightAsideHeader,
 } from '@kadena/kode-ui/patterns';
-import { useCallback, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 
 interface IContactFormData {
@@ -35,6 +35,8 @@ export function ContactForm({
   onDone: (contect: IContact) => void;
   isOpen: boolean;
 }) {
+  console.log({ input });
+
   const prompt = usePrompt();
   const { activeNetwork } = useWallet();
   const [error, setError] = useState<string | null>(null);
@@ -47,60 +49,72 @@ export function ContactForm({
     reset,
   } = useForm<IContactFormData>({
     defaultValues: input ?? {
-      name: '',
-      email: '',
+      name: undefined,
+      email: undefined,
       discoverdAccount: undefined,
     },
   });
 
   useEffect(() => {
+    console.log({ input });
+
+    if (!input) {
+      reset(
+        {
+          name: undefined,
+          email: undefined,
+        },
+        { keepValues: false },
+      );
+      return;
+    }
     reset(
       input ?? {
-        name: '',
-        email: '',
+        name: undefined,
+        email: undefined,
         discoverdAccount: undefined,
       },
     );
   }, [input?.uuid]);
 
-  const createContact = useCallback(
-    async ({ discoverdAccount, ...data }: IContactFormData) => {
-      if (!discoverdAccount) {
-        setError('Please select an account');
-        return;
-      }
-      const account: IContact['account'] = {
-        address: discoverdAccount.address,
-        contract: 'coin',
-        keyset: {
-          keys: discoverdAccount.keyset.guard.keys.map((item) =>
-            typeof item === 'string' ? item : item.pubKey,
-          ),
-          pred: discoverdAccount.keyset.guard.pred,
-        },
-        networkUUID: activeNetwork!.uuid,
-      };
-      const contact = {
-        ...data,
-        account,
-        uuid: input?.uuid ?? crypto.randomUUID(),
-      };
-      try {
-        if (contact.name && contact.account) {
-          if (input?.uuid) {
-            await contactRepository.updateContact(contact);
-          } else {
-            await contactRepository.addContact(contact);
-          }
-          onDone(contact);
+  const createContact = async ({
+    discoverdAccount,
+    ...data
+  }: IContactFormData) => {
+    if (!discoverdAccount) {
+      setError('Please select an account');
+      return;
+    }
+    const account: IContact['account'] = {
+      address: discoverdAccount.address,
+      contract: 'coin',
+      keyset: {
+        keys: discoverdAccount.keyset.guard.keys.map((item) =>
+          typeof item === 'string' ? item : item.pubKey,
+        ),
+        pred: discoverdAccount.keyset.guard.pred,
+      },
+      networkUUID: activeNetwork!.uuid,
+    };
+    const contact = {
+      ...data,
+      account,
+      uuid: input?.uuid ?? crypto.randomUUID(),
+    };
+    try {
+      if (contact.name && contact.account) {
+        if (input?.uuid) {
+          await contactRepository.updateContact(contact);
+        } else {
+          await contactRepository.addContact(contact);
         }
-      } catch (e: any) {
-        setError((e && e.message) || JSON.stringify(e));
-        console.error(e);
+        onDone(contact);
       }
-    },
-    [activeNetwork, input?.uuid, onDone],
-  );
+    } catch (e: any) {
+      setError((e && e.message) || JSON.stringify(e));
+      console.error(e);
+    }
+  };
 
   if (!activeNetwork) return null;
 

diff --git a/packages/apps/dev-wallet/src/pages/contacts/contacts.tsx b/packages/apps/dev-wallet/src/pages/contacts/contacts.tsx
@@ -28,7 +28,7 @@ import { ContactForm } from './Components/ContactForm';
 
 export function Contacts() {
   const { setIsRightAsideExpanded, isRightAsideExpanded } = useLayout();
-  const [editContact, setEditContact] = useState<IContact>();
+  const [editContact, setEditContact] = useState<IContact | undefined>();
   const { contacts } = useWallet();
   const prompt = usePrompt();
 
@@ -53,7 +53,12 @@ export function Contacts() {
         isOpen={isRightAsideExpanded}
       />
 
-      <Stack flexDirection={'column'} className={panelClass} gap={'md'}>
+      <Stack
+        width="100%"
+        flexDirection={'column'}
+        className={panelClass}
+        gap={'md'}
+      >
         <Stack justifyContent={'space-between'}>
           <Heading variant="h3">Contacts</Heading>
 

diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/aside.css.ts b/packages/libs/kode-ui/src/patterns/SideBarLayout/aside.css.ts
@@ -8,13 +8,58 @@ import {
 } from './../../styles';
 import { minHeaderHeight } from './styles.css';
 
+export const asideWrapperTempClass = recipe({
+  base: [
+    {
+      position: 'relative',
+      paddingBlockEnd: token('spacing.md'),
+      backgroundColor: token('color.background.base.default'),
+    },
+    responsiveStyle({
+      xs: {
+        display: 'none',
+      },
+
+      xxl: {
+        display: 'flex',
+        width: '370px',
+        minWidth: '370px',
+        transform: 'translateX(0%)',
+        marginInlineEnd: token('spacing.md'),
+        zIndex: 0,
+      },
+    }),
+  ],
+  variants: {
+    expanded: {
+      true: {
+        opacity: 1,
+        transform: 'translateX(0%)',
+        pointerEvents: 'auto',
+      },
+      false: [
+        {
+          opacity: 0,
+          pointerEvents: 'none',
+        },
+        responsiveStyle({
+          xxl: {
+            display: 'none',
+          },
+        }),
+      ],
+    },
+  },
+});
+
 export const asideWrapperClass = recipe({
   base: [
     {
       position: 'fixed',
       paddingBlockEnd: token('spacing.md'),
       backgroundColor: token('color.background.base.default'),
       gridRow: '2/5',
+      zIndex: 1,
     },
     responsiveStyle({
       xs: {
@@ -35,12 +80,14 @@ export const asideWrapperClass = recipe({
         maxWidth: '370px',
       },
       xxl: {
-        position: 'relative',
+        position: 'fixed',
+        top: minHeaderHeight,
         width: '370px',
         minWidth: '370px',
         transform: 'translateX(0%)',
         marginInlineEnd: token('spacing.md'),
         zIndex: 0,
+        height: `calc(100dvh - ${minHeaderHeight})`,
       },
     }),
   ],

diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarAside.tsx b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarAside.tsx
@@ -7,6 +7,7 @@ import {
   asideHeaderCloseButtonWrapperClass,
   asideHeadingClass,
   asideWrapperClass,
+  asideWrapperTempClass,
   menuBackdropClass,
 } from '../aside.css';
 import type { ISideBarLayoutLocation } from '../types';
@@ -35,8 +36,8 @@ export const SideBarAside: FC<{
   }, [ref.current]);
 
   useEffect(() => {
-    setIsRightAsideExpanded(!!location?.hash);
-  }, [location?.hash]);
+    setIsRightAsideExpanded(false);
+  }, [location.url]);
 
   return (
     <>
@@ -47,6 +48,11 @@ export const SideBarAside: FC<{
         })}
         onClick={handleExpand}
       />
+      <Stack
+        className={asideWrapperTempClass({
+          expanded: isRightAsideExpanded,
+        })}
+      ></Stack>
       <aside
         className={asideWrapperClass({
           expanded: isRightAsideExpanded,