feat(rwa): add firebase (#2689)

kadena-community · Nov 27, 2024 · 5c5c747 · 5c5c747
1 parent f72ef53
commit 5c5c747
Show file tree

Hide file tree

Showing 33 changed files with 643 additions and 217 deletions.
diff --git a/.changeset/afraid-parents-sparkle.md b/.changeset/afraid-parents-sparkle.md
@@ -0,0 +1,5 @@
+---
+'@kadena/kode-ui': minor
+---
+
+add context section in the sidebar layout header
diff --git a/.changeset/tame-horses-heal.md b/.changeset/tame-horses-heal.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/apps/rwa-demo/package.json b/packages/apps/rwa-demo/package.json
@@ -32,6 +32,7 @@
     "@vanilla-extract/recipes": "0.5.1",
     "@vanilla-extract/sprinkles": "1.6.1",
     "cache-sh": "^1.2.1",
+    "firebase": "^10.8.0",
     "graphql": "~16.8.1",
     "graphql-ws": "^5.16.0",
     "next": "14.2.2",

diff --git a/packages/apps/rwa-demo/src/app/(app)/layout.tsx b/packages/apps/rwa-demo/src/app/(app)/layout.tsx
@@ -1,11 +1,22 @@
 'use client';
-import { SideBarLayout } from '@kadena/kode-ui/patterns';
+import {
+  RightAside,
+  RightAsideContent,
+  RightAsideHeader,
+  SideBarHeaderContext,
+  SideBarLayout,
+  useLayout,
+} from '@kadena/kode-ui/patterns';
 
+import { ActiveTransactionsList } from '@/components/ActiveTransactionsList/ActiveTransactionsList';
 import { AssetInfo } from '@/components/AssetInfo/AssetInfo';
 import { AssetForm } from '@/components/AssetSwitch/AssetForm';
+import { TransactionPendingIcon } from '@/components/TransactionPendingIcon/TransactionPendingIcon';
+import { useTransactions } from '@/hooks/transactions';
 import { getAsset } from '@/utils/getAsset';
-import { Heading, Link, Stack } from '@kadena/kode-ui';
-import React from 'react';
+import { MonoAccountBalanceWallet } from '@kadena/kode-icons';
+import { Button, Heading, Link, Stack } from '@kadena/kode-ui';
+import React, { useEffect, useRef, useState } from 'react';
 import { KLogo } from './KLogo';
 import { SideBar } from './SideBar';
 
@@ -14,6 +25,19 @@ const RootLayout = ({
 }: Readonly<{
   children: React.ReactNode;
 }>) => {
+  const [openTransactionsSide, setOpenTransactionsSide] = useState(false);
+  const { setIsRightAsideExpanded, isRightAsideExpanded } = useLayout();
+  const { transactions, setTxsButtonRef, setTxsAnimationRef } =
+    useTransactions();
+  const txsButtonRef = useRef<HTMLButtonElement | null>(null);
+  const transactionAnimationRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (!txsButtonRef.current || !transactionAnimationRef.current) return;
+    setTxsButtonRef(txsButtonRef.current);
+    setTxsAnimationRef(transactionAnimationRef.current);
+  }, [txsButtonRef.current, transactionAnimationRef.current]);
+
   if (!getAsset()) {
     return (
       <Stack
@@ -32,20 +56,56 @@ const RootLayout = ({
   }
 
   return (
-    <SideBarLayout
-      logo={
-        <Link href="/">
-          <KLogo height={40} />
-        </Link>
-      }
-      sidebar={<SideBar />}
-    >
-      <Stack width="100%" flexDirection="column" gap="sm">
-        <AssetInfo />
-
-        {children}
-      </Stack>
-    </SideBarLayout>
+    <>
+      <SideBarHeaderContext>
+        <Button
+          ref={txsButtonRef}
+          variant="transparent"
+          startVisual={
+            transactions.length ? (
+              <TransactionPendingIcon />
+            ) : (
+              <MonoAccountBalanceWallet />
+            )
+          }
+          onPress={() => {
+            setOpenTransactionsSide(true);
+            setIsRightAsideExpanded(true);
+          }}
+        />
+      </SideBarHeaderContext>
+
+      {isRightAsideExpanded && openTransactionsSide && (
+        <RightAside
+          isOpen
+          onClose={() => {
+            setOpenTransactionsSide(false);
+            setIsRightAsideExpanded(false);
+          }}
+        >
+          <RightAsideHeader label="Current transactions" />
+          <RightAsideContent>
+            <ActiveTransactionsList />
+          </RightAsideContent>
+        </RightAside>
+      )}
+      <SideBarLayout
+        logo={
+          <Link href="/">
+            <KLogo height={40} />
+          </Link>
+        }
+        sidebar={<SideBar />}
+      >
+        <Stack width="100%" flexDirection="column" gap="sm">
+          <AssetInfo />
+
+          {children}
+        </Stack>
+      </SideBarLayout>
+
+      <div ref={transactionAnimationRef} />
+    </>
   );
 };
 

diff --git a/packages/apps/rwa-demo/src/app/(app)/page.tsx b/packages/apps/rwa-demo/src/app/(app)/page.tsx
@@ -4,12 +4,11 @@ import { AgentRootPage } from '@/components/HomePage/AgentRootPage';
 import { InvestorRootPage } from '@/components/HomePage/InvestorRootPage';
 import { OwnerRootPage } from '@/components/HomePage/OwnerRootPage';
 import { useAccount } from '@/hooks/account';
-import { getAsset } from '@/utils/getAsset';
 
 const Home = () => {
   const { isAgent, isInvestor } = useAccount();
 
-  console.log('asset', getAsset());
+  console.log('asset', isAgent);
   return (
     <>
       {!isAgent && <OwnerRootPage />}

diff --git a/packages/apps/rwa-demo/src/components/ActiveTransactionsList/ActiveTransactionsList.tsx b/packages/apps/rwa-demo/src/components/ActiveTransactionsList/ActiveTransactionsList.tsx
@@ -0,0 +1,24 @@
+import { useTransactions } from '@/hooks/transactions';
+import { env } from '@/utils/env';
+import { Stack } from '@kadena/kode-ui';
+import type { FC } from 'react';
+
+export const ActiveTransactionsList: FC = () => {
+  const { transactions } = useTransactions();
+
+  return (
+    <Stack as="ul" width="100%" flexDirection="column">
+      {transactions.map((transaction) => (
+        <li key={transaction.requestKey}>
+          <a
+            href={`https://explorer.kadena.io/${env.NETWORKID}/transaction/${transaction.requestKey}`}
+            target="_blank"
+            rel="noreferrer"
+          >
+            {transaction.requestKey}
+          </a>
+        </li>
+      ))}
+    </Stack>
+  );
+};
diff --git a/packages/apps/rwa-demo/src/components/AddAgentForm/AddAgentForm.tsx b/packages/apps/rwa-demo/src/components/AddAgentForm/AddAgentForm.tsx
@@ -37,18 +37,15 @@ export const AddAgentForm: FC<IProps> = ({ onClose }) => {
   const onSubmit = async (data: IAddAgentProps) => {
     try {
       const tx = await addAgent(data, account!);
-
       const signedTransaction = await sign(tx);
       if (!signedTransaction) return;
 
       const client = getClient();
       const res = await client.submit(signedTransaction);
 
-      console.log({ res });
-      addTransaction({
+      await addTransaction({
         ...res,
         type: 'ADDAGENT',
-        data: { ...res, ...data },
       });
       console.log('DONE');
     } catch (e: any) {}

diff --git a/packages/apps/rwa-demo/src/components/AddInvestorForm/AddInvestorForm.tsx b/packages/apps/rwa-demo/src/components/AddInvestorForm/AddInvestorForm.tsx
@@ -38,10 +38,9 @@ export const AddInvestorForm: FC<IProps> = ({ onClose }) => {
       const res = await client.submit(signedTransaction);
       console.log(res);
 
-      addTransaction({
+      await addTransaction({
         ...res,
         type: 'IDENTITY-REGISTERED',
-        data: { ...res, ...data },
       });
 
       console.log('DONE');

diff --git a/packages/apps/rwa-demo/src/components/AgentsList/AgentsList.tsx b/packages/apps/rwa-demo/src/components/AgentsList/AgentsList.tsx
@@ -5,14 +5,20 @@ import { removeAgent } from '@/services/removeAgent';
 import { getClient } from '@/utils/client';
 import { MonoDelete } from '@kadena/kode-icons';
 import { Button, Heading } from '@kadena/kode-ui';
-import { CompactTable, CompactTableFormatters } from '@kadena/kode-ui/patterns';
+import {
+  CompactTable,
+  CompactTableFormatters,
+  useNotifications,
+} from '@kadena/kode-ui/patterns';
 import type { FC } from 'react';
 import { Confirmation } from '../Confirmation/Confirmation';
+import { interpretErrorMessage } from '../TransactionsProvider/TransactionsProvider';
 
 export const AgentsList: FC = () => {
   const { data } = useGetAgents();
   const { account, sign } = useAccount();
   const { addTransaction } = useTransactions();
+  const { addNotification } = useNotifications();
 
   const handleDelete = async (accountName: any) => {
     try {
@@ -24,16 +30,20 @@ export const AgentsList: FC = () => {
       const client = getClient();
       const res = await client.submit(signedTransaction);
 
-      console.log({ res });
-      addTransaction({
+      await addTransaction({
         ...res,
         type: 'REMOVEAGENT',
-        data: { ...res, ...data },
       });
 
       await client.listen(res);
       console.log('DONE');
-    } catch (e: any) {}
+    } catch (e: any) {
+      addNotification({
+        intent: 'negative',
+        label: 'there was an error',
+        message: interpretErrorMessage(e.message),
+      });
+    }
   };
 
   return (

diff --git a/packages/apps/rwa-demo/src/components/DistributionForm/DistributionForm.tsx b/packages/apps/rwa-demo/src/components/DistributionForm/DistributionForm.tsx
@@ -10,9 +10,12 @@ import {
   RightAsideHeader,
 } from '@kadena/kode-ui/patterns';
 import type { FC } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { AssetPausedMessage } from '../AssetPausedMessage/AssetPausedMessage';
 import { InvestorFrozenMessage } from '../InvestorFrozenMessage/InvestorFrozenMessage';
+import { SendTransactionAnimation } from '../SendTransactionAnimation/SendTransactionAnimation';
+import type { ITransaction } from '../TransactionsProvider/TransactionsProvider';
 
 interface IProps {
   onClose: () => void;
@@ -21,6 +24,8 @@ interface IProps {
 
 export const DistributionForm: FC<IProps> = ({ onClose, investorAccount }) => {
   const { frozen } = useFreeze({ investorAccount });
+  const [tx, setTx] = useState<ITransaction>();
+  const resolveRef = useRef<Function | null>(null);
   const { paused } = useAsset();
   const { submit } = useDistributeTokens();
   const { register, handleSubmit } = useForm<IDistributeTokensProps>({
@@ -31,8 +36,27 @@ export const DistributionForm: FC<IProps> = ({ onClose, investorAccount }) => {
   });
 
   const onSubmit = async (data: IDistributeTokensProps) => {
-    await submit(data);
-    onClose();
+    const transaction = await submit(data);
+    setTx(transaction);
+
+    return transaction;
+  };
+
+  useEffect(() => {
+    if (tx && resolveRef.current) {
+      resolveRef.current(tx);
+    }
+  }, [tx]);
+
+  const waitForStateChange = () => {
+    return new Promise((resolve) => {
+      resolveRef.current = resolve;
+    });
+  };
+
+  const handlePress = async () => {
+    const message = await waitForStateChange();
+    return message;
   };
 
   return (
@@ -58,9 +82,14 @@ export const DistributionForm: FC<IProps> = ({ onClose, investorAccount }) => {
             <Button onPress={onClose} variant="transparent">
               Cancel
             </Button>
-            <Button isDisabled={frozen || paused} type="submit">
-              Distribute
-            </Button>
+            <SendTransactionAnimation
+              onPress={handlePress}
+              trigger={
+                <Button isDisabled={frozen || paused} type="submit">
+                  Distribute
+                </Button>
+              }
+            />
           </RightAsideFooter>
         </form>
       </RightAside>

diff --git a/packages/apps/rwa-demo/src/components/FreezeInvestor/FreezeInvestor.tsx b/packages/apps/rwa-demo/src/components/FreezeInvestor/FreezeInvestor.tsx
@@ -7,6 +7,7 @@ import { MonoPause, MonoPlayArrow } from '@kadena/kode-icons';
 import { Button } from '@kadena/kode-ui';
 import type { FC } from 'react';
 import React, { useEffect, useState } from 'react';
+import { SendTransactionAnimation } from '../SendTransactionAnimation/SendTransactionAnimation';
 import { TransactionPendingIcon } from '../TransactionPendingIcon/TransactionPendingIcon';
 
 interface IProps {
@@ -43,14 +44,11 @@ export const FreezeInvestor: FC<IProps> = ({ investorAccount }) => {
       const client = getClient();
       const res = await client.submit(signedTransaction);
 
-      addTransaction({
+      const transaction = await addTransaction({
         ...res,
         type: 'FREEZE-ADDRESS',
-        data: {
-          ...res,
-          ...data,
-        },
       });
+      return transaction;
     } catch (e: any) {
       setIsLoading(false);
     }
@@ -61,8 +59,13 @@ export const FreezeInvestor: FC<IProps> = ({ investorAccount }) => {
   }, [frozen]);
 
   return (
-    <Button startVisual={getVisual(frozen, isLoading)} onPress={handleFreeze}>
-      Pause Account
-    </Button>
+    <SendTransactionAnimation
+      onPress={handleFreeze}
+      trigger={
+        <Button startVisual={getVisual(frozen, isLoading)}>
+          {frozen ? 'Unfreeze account' : 'Freeze account'}
+        </Button>
+      }
+    ></SendTransactionAnimation>
   );
 };
diff --git a/packages/apps/rwa-demo/src/components/HomePage/InvestorRootPage.tsx b/packages/apps/rwa-demo/src/components/HomePage/InvestorRootPage.tsx
@@ -1,4 +1,3 @@
-import { SideBarBreadcrumbs } from '@/components/SideBarBreadcrumbs/SideBarBreadcrumbs';
 import { useAccount } from '@/hooks/account';
 import { MonoCompareArrows } from '@kadena/kode-icons';
 import { Button, Stack } from '@kadena/kode-ui';
@@ -34,7 +33,6 @@ export const InvestorRootPage: FC = () => {
       <Stack width="100%" flexDirection="column" gap="md">
         <InvestorInfo investorAccount={account.address} />
 
-        <SideBarBreadcrumbs />
         <Stack gap="sm">
           <Button
             startVisual={<MonoCompareArrows />}