feat(rwa): show notifications on layout when logged in (#2805)

kadena-community · Jan 17, 2025 · 1280df7 · 1280df7
1 parent b62fd47
commit 1280df7
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 23 deletions.
diff --git a/packages/apps/rwa-demo/src/app/(loggedout)/layout.tsx b/packages/apps/rwa-demo/src/app/(loggedout)/layout.tsx
@@ -3,6 +3,7 @@
 import { CookieConsent } from '@/components/CookieConsent/CookieConsent';
 import { GasPayableBanner } from '@/components/GasPayableBanner/GasPayableBanner';
 import { Card, Stack, Text } from '@kadena/kode-ui';
+import { NotificationSlot } from '@kadena/kode-ui/patterns';
 import React from 'react';
 import {
   cardClass,
@@ -24,6 +25,7 @@ const RootLayout = ({
       alignItems="center"
       className={wrapperClass}
     >
+      <NotificationSlot />
       <Stack flexDirection="column" className={cardWrapperClass}>
         <Card className={cardClass}>
           <CookieConsent />

diff --git a/packages/apps/rwa-demo/src/components/AssetForm/AssetStepperForm.tsx b/packages/apps/rwa-demo/src/components/AssetForm/AssetStepperForm.tsx
@@ -2,6 +2,7 @@ import { useAsset } from '@/hooks/asset';
 import { useCreateContract } from '@/hooks/createContract';
 import { useGetPrincipalNamespace } from '@/hooks/getPrincipalNamespace';
 import type { IAddContractProps } from '@/services/createContract';
+import { MonoAdd } from '@kadena/kode-icons';
 import {
   Button,
   Notification,
@@ -14,7 +15,8 @@ import { useRouter } from 'next/navigation';
 import type { FC } from 'react';
 import { useEffect, useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
-import { TransactionPendingIcon } from '../TransactionPendingIcon/TransactionPendingIcon';
+import { TransactionTypeSpinner } from '../TransactionTypeSpinner/TransactionTypeSpinner';
+import { TXTYPES } from '../TransactionsProvider/TransactionsProvider';
 import { AddExistingAssetForm } from './AddExistingAssetForm';
 
 interface IProps {
@@ -33,7 +35,6 @@ export const AssetStepperForm: FC<IProps> = ({ handleDone }) => {
   const { data: namespace } = useGetPrincipalNamespace();
   const { submit: submitContract, isAllowed } = useCreateContract();
   const [error, setError] = useState('');
-  const [isLoading, setIsLoading] = useState(false);
   const router = useRouter();
 
   const {
@@ -61,12 +62,12 @@ export const AssetStepperForm: FC<IProps> = ({ handleDone }) => {
     setError('');
     if (!data.namespace) {
       setError('there was an issue creating the namespace');
-      setIsLoading(false);
+
       return;
     }
 
-    setIsLoading(true);
     const tx = await submitContract(data);
+
     if (tx?.result?.status === 'success') {
       setStep(STEPS.DONE);
       const asset = addAsset({
@@ -77,7 +78,6 @@ export const AssetStepperForm: FC<IProps> = ({ handleDone }) => {
       setAsset(asset);
       window.location.href = '/';
     }
-    setIsLoading(false);
   };
 
   return (
@@ -149,16 +149,18 @@ export const AssetStepperForm: FC<IProps> = ({ handleDone }) => {
             />
 
             <Stack width="100%" justifyContent="center" alignItems="center">
-              {isLoading ? (
-                <TransactionPendingIcon />
-              ) : (
-                <Button
-                  isDisabled={!isValid || isLoading || !isAllowed}
-                  type="submit"
-                >
-                  Create the contract
-                </Button>
-              )}
+              <Button
+                isDisabled={!isValid || !isAllowed}
+                type="submit"
+                startVisual={
+                  <TransactionTypeSpinner
+                    type={TXTYPES.CREATECONTRACT}
+                    fallbackIcon={<MonoAdd />}
+                  />
+                }
+              >
+                Create the contract
+              </Button>
             </Stack>
           </Stack>
         </form>

diff --git a/packages/apps/rwa-demo/src/components/TransactionsProvider/TransactionsProvider.tsx b/packages/apps/rwa-demo/src/components/TransactionsProvider/TransactionsProvider.tsx
@@ -122,7 +122,6 @@ export const TransactionsProvider: FC<PropsWithChildren> = ({ children }) => {
     useState<HTMLDivElement | null>(null);
   const [txsButtonRef, setTxsButtonRefData] =
     useState<HTMLButtonElement | null>(null);
-
   const { activeNetwork } = useNetwork();
 
   const addListener = useCallback(
@@ -134,6 +133,23 @@ export const TransactionsProvider: FC<PropsWithChildren> = ({ children }) => {
 
       r.subscribe(
         (nextData: any) => {
+          if (!nextData.data.transaction) {
+            addNotification({
+              intent: 'negative',
+              label: 'there was an error',
+              message: interpretErrorMessage(
+                nextData?.errors
+                  ? JSON.stringify(nextData?.errors)
+                  : JSON.parse(
+                      nextData?.data.transaction?.result?.badResult ?? '{}',
+                    ).message,
+              ),
+              url: `https://explorer.kadena.io/${activeNetwork.networkId}/transaction/${data.requestKey}`,
+            });
+
+            // eslint-disable-next-line @typescript-eslint/no-floating-promises
+            store.removeTransaction(data);
+          }
           if (
             nextData?.errors?.length !== undefined ||
             nextData?.data?.transaction?.result.badResult
@@ -253,6 +269,8 @@ export const TransactionsProvider: FC<PropsWithChildren> = ({ children }) => {
     setTxsAnimationRefData(ref);
   };
 
+  console.log({ transactions });
+
   return (
     <TransactionsContext.Provider
       value={{

diff --git a/packages/apps/rwa-demo/src/hooks/createContract.ts b/packages/apps/rwa-demo/src/hooks/createContract.ts
@@ -28,6 +28,12 @@ export const useCreateContract = () => {
       const client = getClient();
       const res = await client.submit(signedTransaction);
 
+      await addTransaction({
+        ...res,
+        type: TXTYPES.CREATECONTRACT,
+        accounts: [account?.address!],
+      });
+
       const dataResult = await client.listen(res);
 
       // if the contract already exists, go to that contract
@@ -40,13 +46,6 @@ export const useCreateContract = () => {
         window.location.href = `/assets/create/${data.namespace}/${data.contractName}`;
         return;
       }
-
-      return addTransaction({
-        ...res,
-        type: TXTYPES.CREATECONTRACT,
-        accounts: [account?.address!],
-        result: dataResult.result,
-      });
     } catch (e: any) {
       addNotification({
         intent: 'negative',

diff --git a/packages/libs/kode-ui/src/patterns/index.ts b/packages/libs/kode-ui/src/patterns/index.ts
@@ -51,6 +51,8 @@ export {
 
 export type { iRightAsideHeader } from './SideBarLayout/components/RightAside';
 
+export { NotificationSlot } from './SideBarLayout/components/NotificationSlot/NotificationSlot';
+
 export {
   SectionCard,
   SectionCardBody,