fix(rwa): investor form now signed by investor (#2692)

.changeset/wise-clocks-kick.md

@@ -0,0 +1,2 @@
+---
+---

packages/apps/rwa-demo/src/app/(app)/(isAgent)/investors/[investorAccount]/page.tsx

@@ -2,52 +2,28 @@
 
 import { DistributionForm } from '@/components/DistributionForm/DistributionForm';
 import { FreezeInvestor } from '@/components/FreezeInvestor/FreezeInvestor';
-import { InvestorBalance } from '@/components/InvestorBalance/InvestorBalance';
+import { InvestorInfo } from '@/components/InvestorInfo/InvestorInfo';
 import { SideBarBreadcrumbs } from '@/components/SideBarBreadcrumbs/SideBarBreadcrumbs';
-import { TransferForm } from '@/components/TransferForm/TransferForm';
-import { useAccount } from '@/hooks/account';
-import { isFrozen } from '@/services/isFrozen';
-import { MonoAdd, MonoCompareArrows } from '@kadena/kode-icons';
-import { Button, Heading, Stack } from '@kadena/kode-ui';
+import { useAsset } from '@/hooks/asset';
+import { useFreeze } from '@/hooks/freeze';
+import { MonoAdd } from '@kadena/kode-icons';
+import { Button, Stack } from '@kadena/kode-ui';
 import { SideBarBreadcrumbsItem, useLayout } from '@kadena/kode-ui/patterns';
 import { useParams } from 'next/navigation';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 const InvestorPage = () => {
   const { isRightAsideExpanded, setIsRightAsideExpanded } = useLayout();
-  const { account } = useAccount();
+  const { paused } = useAsset();
   const params = useParams();
   const [hasOpenDistributeForm, setHasOpenDistributeForm] = useState(false);
-  const [hasOpenTransferForm, setHasOpenTransferForm] = useState(false);
   const investorAccount = decodeURIComponent(params.investorAccount as string);
-  const [frozen, setFrozen] = useState(false);
+  const { frozen } = useFreeze({ investorAccount });
 
   const handleDistributeTokens = () => {
     setIsRightAsideExpanded(true);
     setHasOpenDistributeForm(true);
   };
-  const handleTransferTokens = () => {
-    setIsRightAsideExpanded(true);
-    setHasOpenTransferForm(true);
-  };
-
-  const init = async () => {
-    const res = await isFrozen({
-      investorAccount: investorAccount,
-      account: account!,
-    });
-
-    if (typeof res === 'boolean') {
-      setFrozen(res);
-    }
-  };
-
-  useEffect(() => {
-    // eslint-disable-next-line @typescript-eslint/no-floating-promises
-    init();
-  }, []);
-
-  const handlePauseChange = (pausedResult: boolean) => setFrozen(pausedResult);
 
   return (
     <>
@@ -66,38 +42,18 @@ const InvestorPage = () => {
           }}
         />
       )}
-      {isRightAsideExpanded && hasOpenTransferForm && (
-        <TransferForm
-          investorAccount={investorAccount}
-          onClose={() => {
-            setIsRightAsideExpanded(false);
-            setHasOpenTransferForm(false);
-          }}
-        />
-      )}
 
       <Stack width="100%" flexDirection="column">
-        <Heading>Investor: {investorAccount}</Heading>
-        <InvestorBalance investorAccount={investorAccount} />
+        <InvestorInfo investorAccount={investorAccount} />
         <Stack gap="sm">
-          <Button
-            startVisual={<MonoCompareArrows />}
-            onPress={handleTransferTokens}
-            isDisabled={frozen}
-          >
-            Transfer tokens
-          </Button>
           <Button
             startVisual={<MonoAdd />}
             onPress={handleDistributeTokens}
-            isDisabled={frozen}
+            isDisabled={frozen || paused}
           >
             Distribute Tokens
           </Button>
-          <FreezeInvestor
-            investorAccount={investorAccount}
-            onChanged={handlePauseChange}
-          />
+          <FreezeInvestor investorAccount={investorAccount} />
         </Stack>
       </Stack>
     </>

packages/apps/rwa-demo/src/app/(app)/layout.tsx

@@ -1,8 +1,8 @@
 'use client';
 import { SideBarLayout } from '@kadena/kode-ui/patterns';
 
+import { AssetInfo } from '@/components/AssetInfo/AssetInfo';
 import { AssetForm } from '@/components/AssetSwitch/AssetForm';
-import { SupplyCount } from '@/components/SupplyCount/SupplyCount';
 import { getAsset } from '@/utils/getAsset';
 import { Heading, Link, Stack } from '@kadena/kode-ui';
 import React from 'react';
@@ -41,7 +41,8 @@ const RootLayout = ({
       sidebar={<SideBar />}
     >
       <Stack width="100%" flexDirection="column" gap="sm">
-        <SupplyCount />
+        <AssetInfo />
+
         {children}
       </Stack>
     </SideBarLayout>

packages/apps/rwa-demo/src/app/(app)/page.tsx

@@ -1,18 +1,20 @@
 'use client';
 
 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 } = useAccount();
+  const { isAgent, isInvestor } = useAccount();
 
   console.log('asset', getAsset());
   return (
     <>
       {!isAgent && <OwnerRootPage />}
       {isAgent && <AgentRootPage />}
+      {isInvestor && <InvestorRootPage />}
     </>
   );
 };

packages/apps/rwa-demo/src/components/AccountProvider/AccountProvider.tsx

@@ -1,5 +1,8 @@
 'use client';
+import { getBalance as getBalanceFnc } from '@/services/getBalance';
 import { isAgent } from '@/services/isAgent';
+import { isFrozen } from '@/services/isFrozen';
+import { isInvestor } from '@/services/isInvestor';
 import { getAccountCookieName } from '@/utils/getAccountCookieName';
 import type { ICommand, IUnsignedCommand } from '@kadena/client';
 import { useRouter } from 'next/navigation';
@@ -21,7 +24,10 @@ export interface IAccountContext {
   logout: () => void;
   sign: (tx: IUnsignedCommand) => Promise<ICommand | undefined>;
   isAgent: boolean;
+  isInvestor: boolean;
+  isFrozen: boolean;
   selectAccount: (account: IWalletAccount) => void;
+  getBalance: () => Promise<number>;
 }
 
 export const AccountContext = createContext<IAccountContext>({
@@ -32,21 +38,40 @@ export const AccountContext = createContext<IAccountContext>({
   logout: () => {},
   sign: async () => undefined,
   isAgent: false,
+  isInvestor: false,
+  isFrozen: false,
   selectAccount: () => {},
+  getBalance: async () => 0,
 });
 
 export const AccountProvider: FC<PropsWithChildren> = ({ children }) => {
   const [account, setAccount] = useState<IWalletAccount>();
   const [accounts, setAccounts] = useState<IWalletAccount[]>();
   const [isMounted, setIsMounted] = useState(false);
   const [isAgentState, setIsAgentState] = useState(false);
+  const [isInvestorState, setIsInvestorState] = useState(false);
+  const [isFrozenState, setIsFrozenState] = useState(false);
 
   const router = useRouter();
 
   const checkIsAgent = async (account: IWalletAccount) => {
     const resIsAgent = await isAgent({ agent: account.address });
     setIsAgentState(!!resIsAgent);
   };
+  const checkIsInvestor = async (account: IWalletAccount) => {
+    const resIsInvestor = await isInvestor({ account });
+    setIsInvestorState(!!resIsInvestor);
+  };
+  const checkIsFrozen = async (account: IWalletAccount) => {
+    const res = await isFrozen({
+      investorAccount: account.address,
+      account: account!,
+    });
+
+    if (typeof res === 'boolean') {
+      setIsFrozenState(res);
+    }
+  };
 
   const selectAccount = (account: IWalletAccount) => {
     setAccount(account);
@@ -76,7 +101,12 @@ export const AccountProvider: FC<PropsWithChildren> = ({ children }) => {
 
     setAccounts(undefined);
     setAccount(payload.accounts[0]);
+    localStorage.setItem(
+      getAccountCookieName(),
+      JSON.stringify(payload.accounts[0]),
+    );
     close();
+    router.replace('/');
   }, [router]);
 
   const logout = useCallback(() => {
@@ -102,11 +132,16 @@ export const AccountProvider: FC<PropsWithChildren> = ({ children }) => {
   useEffect(() => {
     if (!account) {
       setIsAgentState(false);
+      setIsInvestorState(false);
       return;
     }
 
     // eslint-disable-next-line @typescript-eslint/no-floating-promises
     checkIsAgent(account);
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    checkIsInvestor(account);
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    checkIsFrozen(account);
   }, [account]);
 
   const sign = async (tx: IUnsignedCommand): Promise<ICommand | undefined> => {
@@ -121,6 +156,17 @@ export const AccountProvider: FC<PropsWithChildren> = ({ children }) => {
     return payload.transaction;
   };
 
+  const getBalance = async () => {
+    if (!account) return 0;
+    const res = await getBalanceFnc({
+      investorAccount: account.address,
+      account,
+    });
+
+    if (typeof res !== 'number') return 0;
+    return res;
+  };
+
   return (
     <AccountContext.Provider
       value={{
@@ -131,7 +177,10 @@ export const AccountProvider: FC<PropsWithChildren> = ({ children }) => {
         sign,
         isMounted,
         isAgent: isAgentState,
+        isInvestor: isInvestorState,
+        isFrozen: isFrozenState,
         selectAccount,
+        getBalance,
       }}
     >
       {children}

packages/apps/rwa-demo/src/components/AgentsList/AgentsList.tsx

@@ -1,15 +1,18 @@
 import { useAccount } from '@/hooks/account';
 import { useGetAgents } from '@/hooks/getAgents';
+import { useTransactions } from '@/hooks/transactions';
 import { removeAgent } from '@/services/removeAgent';
 import { getClient } from '@/utils/client';
 import { MonoDelete } from '@kadena/kode-icons';
-import { Button } from '@kadena/kode-ui';
+import { Button, Heading } from '@kadena/kode-ui';
 import { CompactTable, CompactTableFormatters } from '@kadena/kode-ui/patterns';
 import type { FC } from 'react';
+import { Confirmation } from '../Confirmation/Confirmation';
 
 export const AgentsList: FC = () => {
   const { data } = useGetAgents();
   const { account, sign } = useAccount();
+  const { addTransaction } = useTransactions();
 
   const handleDelete = async (accountName: any) => {
     try {
@@ -21,34 +24,49 @@ export const AgentsList: FC = () => {
       const client = getClient();
       const res = await client.submit(signedTransaction);
 
+      console.log({ res });
+      addTransaction({
+        ...res,
+        type: 'REMOVEAGENT',
+        data: { ...res, ...data },
+      });
+
       await client.listen(res);
       console.log('DONE');
     } catch (e: any) {}
   };
 
   return (
-    <CompactTable
-      fields={[
-        {
-          label: 'status',
-          key: 'result',
-          width: '10%',
-          render: CompactTableFormatters.FormatStatus(),
-        },
-        { label: 'Account', key: 'accountName', width: '50%' },
-        { label: 'Requestkey', key: 'requestKey', width: '30%' },
-        {
-          label: '',
-          key: 'accountName',
-          width: '10%',
-          render: CompactTableFormatters.FormatActions({
-            trigger: (
-              <Button startVisual={<MonoDelete />} onPress={handleDelete} />
-            ),
-          }),
-        },
-      ]}
-      data={data}
-    />
+    <>
+      <Heading as="h3">Agents</Heading>
+      <CompactTable
+        fields={[
+          {
+            label: 'status',
+            key: 'result',
+            width: '10%',
+            render: CompactTableFormatters.FormatStatus(),
+          },
+          { label: 'Account', key: 'accountName', width: '50%' },
+          { label: 'Requestkey', key: 'requestKey', width: '30%' },
+          {
+            label: '',
+            key: 'accountName',
+            width: '10%',
+            render: CompactTableFormatters.FormatActions({
+              trigger: (
+                <Confirmation
+                  onPress={handleDelete}
+                  trigger={<Button startVisual={<MonoDelete />} />}
+                >
+                  Are you sure you want to delete this agent?
+                </Confirmation>
+              ),
+            }),
+          },
+        ]}
+        data={data}
+      />
+    </>
   );
 };

packages/apps/rwa-demo/src/components/AssetInfo/AssetInfo.tsx

@@ -0,0 +1,31 @@
+import { useAsset } from '@/hooks/asset';
+import { MonoPause, MonoPlayArrow } from '@kadena/kode-icons';
+import { Button, Heading, Stack } from '@kadena/kode-ui';
+import type { FC } from 'react';
+import { SupplyCount } from '../SupplyCount/SupplyCount';
+
+export const AssetInfo: FC = () => {
+  const { paused, asset } = useAsset();
+  if (!asset) return;
+  return (
+    <Stack width="100%" flexDirection="column">
+      <Heading as="h3">{asset.name}</Heading>
+      <Stack width="100%" alignItems="center" gap="md">
+        <Button isDisabled>
+          {paused ? (
+            <Stack gap="sm" alignItems="center">
+              <MonoPause />
+              paused
+            </Stack>
+          ) : (
+            <Stack gap="sm" alignItems="center">
+              <MonoPlayArrow />
+              active
+            </Stack>
+          )}
+        </Button>
+        <SupplyCount />
+      </Stack>
+    </Stack>
+  );
+};