fix the layoutmini

kadena-community · Nov 7, 2024 · 4f11e02 · 4f11e02
1 parent f50a643
commit 4f11e02
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 49 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-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,3 +1,4 @@
+import { Stack } from '@kadena/kode-ui';
 import { SideBarLayout } from '@kadena/kode-ui/patterns';
 import { FC } from 'react';
 import { Outlet } from 'react-router-dom';
@@ -6,11 +7,10 @@ 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>