handle first errors

kadena-community · Nov 20, 2024 · 4d95262 · 4d95262
1 parent 0c9a910
commit 4d95262
Show file tree

Hide file tree

Showing 15 changed files with 1,173 additions and 3,542 deletions.
diff --git a/.changeset/nasty-emus-compete.md b/.changeset/nasty-emus-compete.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/apps/rwa-demo/src/components/AddAgentForm/AddAgentForm.tsx b/packages/apps/rwa-demo/src/components/AddAgentForm/AddAgentForm.tsx
@@ -28,16 +28,13 @@ export const AddAgentForm: FC<IProps> = ({ onClose }) => {
   const { account, sign } = useAccount();
   const { addTransaction } = useTransactions();
   const [openModal, setOpenModal] = useState(false);
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [_, setError] = useState<string | null>(null);
   const { register, handleSubmit } = useForm<IAddAgentProps>({
     defaultValues: {
-      agent: '',
+      accountName: '',
     },
   });
 
   const onSubmit = async (data: IAddAgentProps) => {
-    setError(null);
     try {
       const tx = await addAgent(data, account!);
 
@@ -55,9 +52,7 @@ export const AddAgentForm: FC<IProps> = ({ onClose }) => {
         data: { ...res, ...data },
       });
       console.log('DONE');
-    } catch (e: any) {
-      setError(e?.message || e);
-    }
+    } catch (e: any) {}
 
     onClose();
   };
@@ -80,7 +75,7 @@ export const AddAgentForm: FC<IProps> = ({ onClose }) => {
           <RightAsideContent>
             <TextField
               label="Agent Account"
-              {...register('agent', { required: true })}
+              {...register('accountName', { required: true })}
             />
           </RightAsideContent>
           <RightAsideFooter>

diff --git a/packages/apps/rwa-demo/src/components/AddInvestorForm/AddInvestorForm.tsx b/packages/apps/rwa-demo/src/components/AddInvestorForm/AddInvestorForm.tsx
@@ -1,4 +1,5 @@
 import { useAccount } from '@/hooks/account';
+import { useTransactions } from '@/hooks/transactions';
 import type { IRegisterIdentityProps } from '@/services/registerIdentity';
 import { registerIdentity } from '@/services/registerIdentity';
 import { getClient } from '@/utils/client';
@@ -10,7 +11,6 @@ import {
   RightAsideHeader,
 } from '@kadena/kode-ui/patterns';
 import type { FC } from 'react';
-import { useState } from 'react';
 import { useForm } from 'react-hook-form';
 
 interface IProps {
@@ -20,31 +20,32 @@ interface IProps {
 export const AddInvestorForm: FC<IProps> = ({ onClose }) => {
   const { account, sign } = useAccount();
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [_, setError] = useState<string | null>(null);
+  const { addTransaction } = useTransactions();
   const { register, handleSubmit } = useForm<IRegisterIdentityProps>({
     defaultValues: {
-      investor: '',
+      accountName: '',
     },
   });
 
   const onSubmit = async (data: IRegisterIdentityProps) => {
     const newData: IRegisterIdentityProps = { ...data, agent: account! };
-    setError(null);
-    //try {
-    const tx = await registerIdentity(newData);
-    console.log(tx);
-    const signedTransaction = await sign(tx);
-    if (!signedTransaction) return;
+    try {
+      const tx = await registerIdentity(newData);
+      const signedTransaction = await sign(tx);
+      if (!signedTransaction) return;
 
-    const client = getClient();
-    const res = await client.submit(signedTransaction);
-    console.log(res);
+      const client = getClient();
+      const res = await client.submit(signedTransaction);
+      console.log(res);
 
-    await client.listen(res);
-    console.log('DONE');
-    // } catch (e: any) {
-    //   setError(e?.message || e);
-    // }
+      addTransaction({
+        ...res,
+        type: 'IDENTITY-REGISTERED',
+        data: { ...res, ...data },
+      });
+
+      console.log('DONE');
+    } catch (e: any) {}
 
     onClose();
   };
@@ -57,7 +58,7 @@ export const AddInvestorForm: FC<IProps> = ({ onClose }) => {
           <RightAsideContent>
             <TextField
               label="Investor Account"
-              {...register('investor', { required: true })}
+              {...register('accountName', { required: true })}
             />
           </RightAsideContent>
           <RightAsideFooter>

diff --git a/packages/apps/rwa-demo/src/components/InvestorList/InvestorList.tsx b/packages/apps/rwa-demo/src/components/InvestorList/InvestorList.tsx
@@ -22,7 +22,6 @@ export const InvestorList: FC = () => {
       const client = getClient();
       const res = await client.submit(signedTransaction);
 
-      console.log(res);
       await client.listen(res);
       console.log('DONE');
     } catch (e: any) {}

diff --git a/packages/apps/rwa-demo/src/components/TransactionsProvider/TransactionsProvider.tsx b/packages/apps/rwa-demo/src/components/TransactionsProvider/TransactionsProvider.tsx
@@ -9,7 +9,7 @@ import { createContext, useCallback, useState } from 'react';
 export interface ITransaction {
   requestKey: string;
   type: string;
-  data: Record<string, string | number>;
+  data: Record<string, any>;
   listener?: Promise<void | ICommandResult>;
   result?: boolean;
 }
@@ -26,6 +26,14 @@ export const TransactionsContext = createContext<ITransactionsContext>({
   getTransactions: () => [],
 });
 
+const interpretErrorMessage = (result: any, data: ITransaction): string => {
+  if (result.result.error?.message?.includes('Insert: row found for key')) {
+    return `{data.type}: This key already exists`;
+  }
+
+  return `${data.type}: ${result.result.error.message}`;
+};
+
 export const TransactionsProvider: FC<PropsWithChildren> = ({ children }) => {
   const { addNotification } = useNotifications();
   const [transactions, setTransactions] = useState<
@@ -46,12 +54,19 @@ export const TransactionsProvider: FC<PropsWithChildren> = ({ children }) => {
           addNotification({
             intent: 'negative',
             label: 'there was an error',
-            message: data.type,
+            message: interpretErrorMessage(result, data),
             url: `https://explorer.kadena.io/${activeNetwork.networkId}/transaction/${data.requestKey}`,
           });
         }
       })
-      .catch(console.log);
+      .catch((e) => {
+        addNotification({
+          intent: 'negative',
+          label: 'there was an error',
+          message: JSON.stringify(e),
+          url: `https://explorer.kadena.io/${activeNetwork.networkId}/transaction/${data.requestKey}`,
+        });
+      });
   }, []);
 
   const getTransactions = (type: string) => {

diff --git a/packages/apps/rwa-demo/src/hooks/getInvestors.ts b/packages/apps/rwa-demo/src/hooks/getInvestors.ts
@@ -81,14 +81,16 @@ export const useGetInvestors = () => {
         } as const;
       }) ?? [];
 
+    console.log({ agentsAdded, agentsRemoved });
+
     setInnerData([
       ...filterRemovedRecords([...agentsAdded, ...agentsRemoved]),
       ...promiseResults,
     ]);
   };
 
   useEffect(() => {
-    const tx = getTransactions('ADDAGENT');
+    const tx = getTransactions('IDENTITY-REGISTERED');
     // eslint-disable-next-line @typescript-eslint/no-floating-promises
     initInnerData(tx);
   }, [transactions, addedData, removedData, removedLoading, addedLoading]);

diff --git a/packages/apps/rwa-demo/src/services/addAgent.ts b/packages/apps/rwa-demo/src/services/addAgent.ts
@@ -3,7 +3,7 @@ import { getNetwork } from '@/utils/client';
 import { Pact } from '@kadena/client';
 
 export interface IAddAgentProps {
-  agent: string;
+  accountName: string;
 }
 
 const createPubKeyFromAccount = (account: string): string => {
@@ -26,9 +26,9 @@ export const addAgent = async (
       withCap(`RWA.mvp-token.ONLY-OWNER`, ''),
       withCap(`coin.GAS`),
     ])
-    .addData('agent', data.agent)
+    .addData('agent', data.accountName)
     .addData('agent_guard', {
-      keys: [createPubKeyFromAccount(data.agent)],
+      keys: [createPubKeyFromAccount(data.accountName)],
       pred: 'keys-all',
     })
 

diff --git a/packages/apps/rwa-demo/src/services/registerIdentity.ts b/packages/apps/rwa-demo/src/services/registerIdentity.ts
@@ -3,7 +3,7 @@ import { getNetwork } from '@/utils/client';
 import { Pact } from '@kadena/client';
 
 export interface IRegisterIdentityProps {
-  investor: string;
+  accountName: string;
   agent: IWalletAccount;
 }
 
@@ -19,10 +19,10 @@ export const registerIdentity = async (data: IRegisterIdentityProps) => {
       `,
     )
     .addData('investor-keyset', {
-      keys: [createPubKeyFromAccount(data.investor)],
+      keys: [createPubKeyFromAccount(data.accountName)],
       pred: 'keys-all',
     })
-    .addData('investor', data.investor)
+    .addData('investor', data.accountName)
     .addData('agent', data.agent.address)
     .setMeta({
       senderAccount: data.agent.address,

diff --git a/packages/libs/kode-ui/.storybook/main.ts b/packages/libs/kode-ui/.storybook/main.ts
@@ -26,6 +26,7 @@ const config: StorybookConfig = {
     },
     getAbsolutePath('@storybook/addon-mdx-gfm'),
     getAbsolutePath('@storybook/addon-webpack5-compiler-swc'),
+    '@chromatic-com/storybook',
   ],
   framework: {
     name: getAbsolutePath('@storybook/react-webpack5'),
@@ -36,9 +37,7 @@ const config: StorybookConfig = {
       },
     },
   },
-  docs: {
-    autodocs: true,
-  },
+  docs: {},
   // Add this for Vanilla Extract
   webpackFinal(config) {
     // Add Vanilla-Extract and MiniCssExtract Plugins

diff --git a/packages/libs/kode-ui/.storybook/preview.tsx b/packages/libs/kode-ui/.storybook/preview.tsx
@@ -58,7 +58,9 @@ const preview: Preview = {
       },
     },
   },
+
   decorators: [withCenteredStory],
+  tags: ['autodocs'],
 };
 
 export default preview;
diff --git a/packages/libs/kode-ui/package.json b/packages/libs/kode-ui/package.json
@@ -113,31 +113,32 @@
     "react-use": "^17.4.0"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^3",
     "@crackle/cli": "^0.15.1",
     "@design-sync/cli": "^0.11.3",
     "@design-sync/vanilla-extract-plugin": "^0.7.3",
-    "@etchteam/storybook-addon-status": "4.2.4",
+    "@etchteam/storybook-addon-status": "^5.0.0",
     "@kadena-dev/eslint-config": "workspace:*",
     "@kadena-dev/lint-package": "workspace:*",
     "@kadena-dev/markdown": "workspace:*",
     "@kadena-dev/shared-config": "workspace:*",
     "@react-types/shared": "^3.22.0",
     "@rushstack/eslint-config": "~3.6.9",
-    "@storybook/addon-a11y": "8.0.5",
-    "@storybook/addon-controls": "8.0.5",
-    "@storybook/addon-docs": "8.0.5",
-    "@storybook/addon-essentials": "8.0.5",
-    "@storybook/addon-interactions": "8.0.5",
-    "@storybook/addon-links": "8.0.5",
-    "@storybook/addon-mdx-gfm": "8.0.5",
-    "@storybook/addon-webpack5-compiler-swc": "1.0.2",
-    "@storybook/csf": "0.1.3",
+    "@storybook/addon-a11y": "^8.4.4",
+    "@storybook/addon-controls": "^8.4.4",
+    "@storybook/addon-docs": "^8.4.4",
+    "@storybook/addon-essentials": "^8.4.4",
+    "@storybook/addon-interactions": "^8.4.4",
+    "@storybook/addon-links": "^8.4.4",
+    "@storybook/addon-mdx-gfm": "^8.4.4",
+    "@storybook/addon-webpack5-compiler-swc": "^1.0.5",
+    "@storybook/csf": "^0.1.11",
     "@storybook/docs-mdx": "3.1.0",
-    "@storybook/manager-api": "8.0.5",
-    "@storybook/preview-api": "8.0.5",
-    "@storybook/react": "8.0.5",
-    "@storybook/react-webpack5": "8.0.5",
-    "@storybook/theming": "8.0.5",
+    "@storybook/manager-api": "^8.4.4",
+    "@storybook/preview-api": "^8.4.4",
+    "@storybook/react": "^8.4.4",
+    "@storybook/react-webpack5": "^8.4.4",
+    "@storybook/theming": "^8.4.4",
     "@testing-library/react": "~14.0.0",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "~14.5.1",
@@ -158,14 +159,14 @@
     "eslint": "^8.45.0",
     "eslint-import-resolver-typescript": "3.5.5",
     "eslint-plugin-import": "~2.27.5",
-    "eslint-plugin-storybook": "^0.8.0",
+    "eslint-plugin-storybook": "^0.11.1",
     "jiti": "^1.21.6",
     "mini-css-extract-plugin": "2.7.6",
     "prettier": "~3.2.5",
     "prop-types": "^15.8.1",
     "rimraf": "~5.0.1",
-    "storybook": "8.0.5",
-    "storybook-dark-mode": "4.0.1",
+    "storybook": "^8.4.4",
+    "storybook-dark-mode": "^4.0.2",
     "tiny-readdir-glob": "^1.2.1",
     "tsc-alias": "~1.8.7",
     "typescript": "5.4.5",

diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.stories.tsx b/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.stories.tsx
@@ -374,6 +374,7 @@ export const Primary: IStory = {
 };
 
 const NotificationsLayout = () => {
+  console.log(11, useNotifications);
   const { addNotification } = useNotifications();
   const { isExpanded, setIsRightAsideExpanded, isRightAsideExpanded } =
     useLayout();

diff --git a/.../libs/kode-ui/src/patterns/SideBarLayout/components/NotificationSlot/NotificationSlot.tsx b/.../libs/kode-ui/src/patterns/SideBarLayout/components/NotificationSlot/NotificationSlot.tsx
@@ -1,3 +1,4 @@
+import { MonoArrowOutward } from '@kadena/kode-icons/system';
 import type { FC } from 'react';
 import React from 'react';
 import { useNotifications } from '../LayoutProvider';
@@ -24,7 +25,12 @@ export const NotificationSlot: FC = () => {
             {message}
             {props.url && (
               <NotificationFooter>
-                <Link href={props.url} target="_blank">
+                <Link
+                  endVisual={<MonoArrowOutward />}
+                  variant={props.intent}
+                  href={props.url}
+                  target="_blank"
+                >
                   Explorer
                 </Link>
               </NotificationFooter>

diff --git a/...bs/kode-ui/src/patterns/SideBarLayout/components/NotificationSlot/NotificationWrapper.tsx b/...bs/kode-ui/src/patterns/SideBarLayout/components/NotificationSlot/NotificationWrapper.tsx
@@ -1,7 +1,7 @@
 import type { FC, PropsWithChildren } from 'react';
 import React, { useEffect } from 'react';
+import { useNotifications } from '../LayoutProvider';
 import type { INotificationMinimizedProps } from '../LayoutProvider/NotificationsProvider';
-import { useNotifications } from '../LayoutProvider/NotificationsProvider';
 import { Notification } from './../../../../components';
 
 type IProps = PropsWithChildren & INotificationMinimizedProps;