feat(rwa): add checks to actions if there is an transaction underway …

…to the chain (#2760)
kadena-community · Dec 20, 2024 · ce9f188 · ce9f188
1 parent f45301d
commit ce9f188
Show file tree

Hide file tree

Showing 35 changed files with 502 additions and 222 deletions.
diff --git a/packages/apps/rwa-demo/src/app/(app)/(isAgent)/investors/[investorAccount]/page.tsx b/packages/apps/rwa-demo/src/app/(app)/(isAgent)/investors/[investorAccount]/page.tsx
@@ -6,6 +6,8 @@ import { InvestorForm } from '@/components/InvestorForm/InvestorForm';
 import { InvestorInfo } from '@/components/InvestorInfo/InvestorInfo';
 import { PartiallyFreezeTokensForm } from '@/components/PartiallyFreezeTokensForm/PartiallyFreezeTokensForm';
 import { SideBarBreadcrumbs } from '@/components/SideBarBreadcrumbs/SideBarBreadcrumbs';
+import { TXTYPES } from '@/components/TransactionsProvider/TransactionsProvider';
+import { TransactionTypeSpinner } from '@/components/TransactionTypeSpinner/TransactionTypeSpinner';
 import { useAddInvestor } from '@/hooks/addInvestor';
 import { useDistributeTokens } from '@/hooks/distributeTokens';
 import { useGetInvestor } from '@/hooks/getInvestor';
@@ -49,7 +51,13 @@ const InvestorPage = () => {
             investorAccount={investorAccount}
             trigger={
               <Button
-                startVisual={<MonoAdd />}
+                startVisual={
+                  <TransactionTypeSpinner
+                    type={TXTYPES.DISTRIBUTETOKENS}
+                    account={investorAccount}
+                    fallbackIcon={<MonoAdd />}
+                  />
+                }
                 isDisabled={!isDistributeTokensAllowed}
               >
                 Distribute Tokens
@@ -61,7 +69,13 @@ const InvestorPage = () => {
             investorAccount={investorAccount}
             trigger={
               <Button
-                startVisual={<MonoAdd />}
+                startVisual={
+                  <TransactionTypeSpinner
+                    type={TXTYPES.PARTIALLYFREEZETOKENS}
+                    account={investorAccount}
+                    fallbackIcon={<MonoAdd />}
+                  />
+                }
                 isDisabled={!isPartiallyFreezeTokensAllowed}
               >
                 Partially freeze tokens

diff --git a/packages/apps/rwa-demo/src/app/(app)/page.tsx b/packages/apps/rwa-demo/src/app/(app)/page.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { AssetAction } from '@/components/AssetAction/AssetAction';
+import { TransferAssetAction } from '@/components/AssetAction/TransferAssetAction';
 import { ComplianceRule } from '@/components/ComplianceRule/ComplianceRule';
 import { ContractDetails } from '@/components/ContractDetails/ContractDetails';
 import { contractDetailWrapperClass } from '@/components/ContractDetails/style.css';
@@ -13,7 +14,6 @@ import { TransferForm } from '@/components/TransferForm/TransferForm';
 import { useAccount } from '@/hooks/account';
 import { useAsset } from '@/hooks/asset';
 import { useSetCompliance } from '@/hooks/setCompliance';
-import { useTransferTokens } from '@/hooks/transferTokens';
 import { MonoAdd, MonoEditNote } from '@kadena/kode-icons';
 import { Button, Stack } from '@kadena/kode-ui';
 import {
@@ -27,7 +27,6 @@ const Home = () => {
   const { isInvestor, account } = useAccount();
   const { asset } = useAsset();
   const { isAllowed: isSetComplianceAllowed } = useSetCompliance();
-  const { isAllowed: isTransferTokensAllowed } = useTransferTokens();
 
   return (
     <>
@@ -82,15 +81,7 @@ const Home = () => {
                   }
                 />
 
-                <TransferForm
-                  trigger={
-                    <AssetAction
-                      isDisabled={!isTransferTokensAllowed}
-                      icon={<MonoAdd />}
-                      label="Transfer tokens"
-                    />
-                  }
-                />
+                <TransferForm trigger={<TransferAssetAction />} />
               </Stack>
             </SectionCardBody>
           </SectionCardContentBlock>

diff --git a/packages/apps/rwa-demo/src/components/AccountProvider/AccountProvider.tsx b/packages/apps/rwa-demo/src/components/AccountProvider/AccountProvider.tsx
@@ -76,12 +76,12 @@ export const AccountProvider: FC<PropsWithChildren> = ({ children }) => {
   const [isAgentState, setIsAgentState] = useState(false);
   const [isInvestorState, setIsInvestorState] = useState(false);
   const [isFrozenState, setIsFrozenState] = useState(false);
-  const accountRoles = useGetAgentRoles({ agent: account?.address });
+  const { ...accountRoles } = useGetAgentRoles({
+    agent: account?.address,
+  });
   const { data: balance } = useGetInvestorBalance({
     investorAccount: account?.address,
-    account,
   });
-
   const router = useRouter();
 
   const checkIsAgent = async (account: IWalletAccount) => {

diff --git a/packages/apps/rwa-demo/src/components/ActiveTransactionsList/ActiveTransaction.tsx b/packages/apps/rwa-demo/src/components/ActiveTransactionsList/ActiveTransaction.tsx
@@ -1,5 +1,4 @@
-import { env } from '@/utils/env';
-import { Tile } from '@kadena/kode-ui';
+import { Heading, maskValue, Stack, Tile } from '@kadena/kode-ui';
 import type { FC } from 'react';
 import type { ITransaction } from '../TransactionsProvider/TransactionsProvider';
 
@@ -11,13 +10,14 @@ export const ActiveTransaction: FC<IProps> = ({ transaction }) => {
   return (
     <li>
       <Tile>
-        <a
-          href={`https://explorer.kadena.io/${env.NETWORKID}/transaction/${transaction.requestKey}`}
-          target="_blank"
-          rel="noreferrer"
-        >
-          {transaction.requestKey}
-        </a>
+        <Stack flexDirection="column" width="100%" gap="md">
+          {transaction.type.name}
+
+          <Heading as="h6">Accounts</Heading>
+          {transaction.accounts?.map((account) => (
+            <li key={account}>{maskValue(account)}</li>
+          ))}
+        </Stack>
       </Tile>
     </li>
   );

diff --git a/packages/apps/rwa-demo/src/components/AgentsList/AgentsList.tsx b/packages/apps/rwa-demo/src/components/AgentsList/AgentsList.tsx
@@ -17,6 +17,8 @@ import { AgentForm } from '../AgentForm/AgentForm';
 import { Confirmation } from '../Confirmation/Confirmation';
 import { FormatAgentRoles } from '../TableFormatters/FormatAgentRoles';
 import { FormatEditAgent } from '../TableFormatters/FormatEditAgent';
+import { TXTYPES } from '../TransactionsProvider/TransactionsProvider';
+import { TransactionTypeSpinner } from '../TransactionTypeSpinner/TransactionTypeSpinner';
 
 export const AgentsList: FC = () => {
   const { isAllowed: isEditAgentAllowed } = useEditAgent();
@@ -50,6 +52,9 @@ export const AgentsList: FC = () => {
             }
           />
           <SectionCardBody>
+            <TransactionTypeSpinner
+              type={[TXTYPES.ADDAGENT, TXTYPES.REMOVEAGENT]}
+            />
             <CompactTable
               isLoading={isLoading}
               variant="open"

diff --git a/packages/apps/rwa-demo/src/components/AssetAction/TransferAssetAction.tsx b/packages/apps/rwa-demo/src/components/AssetAction/TransferAssetAction.tsx
@@ -0,0 +1,21 @@
+import { useTransferTokens } from '@/hooks/transferTokens';
+import { MonoAdd } from '@kadena/kode-icons';
+import type { ITileProps } from '@kadena/kode-ui';
+import type { FC } from 'react';
+import { AssetAction } from './AssetAction';
+
+interface IProps {
+  onPress?: ITileProps['onClick'];
+}
+
+export const TransferAssetAction: FC<IProps> = ({ onPress }) => {
+  const { isAllowed: isTransferTokensAllowed } = useTransferTokens();
+  return (
+    <AssetAction
+      onPress={onPress}
+      isDisabled={!isTransferTokensAllowed}
+      icon={<MonoAdd />}
+      label="Transfer tokens"
+    />
+  );
+};
diff --git a/packages/apps/rwa-demo/src/components/AssetForm/AssetStepperForm.tsx b/packages/apps/rwa-demo/src/components/AssetForm/AssetStepperForm.tsx
@@ -14,6 +14,7 @@ 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 { AddExistingAssetForm } from './AddExistingAssetForm';
 
 interface IProps {
@@ -32,6 +33,7 @@ export const AssetStepperForm: FC<IProps> = ({ handleDone }) => {
   const { data: namespace } = useGetPrincipalNamespace();
   const { submit: submitContract } = useCreateContract();
   const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
   const router = useRouter();
 
   const {
@@ -42,8 +44,6 @@ export const AssetStepperForm: FC<IProps> = ({ handleDone }) => {
   } = useForm<IAddContractProps>({
     values: {
       contractName: '',
-      owner: '',
-      complianceOwner: '',
       namespace: namespace ?? '',
     },
   });
@@ -53,23 +53,22 @@ export const AssetStepperForm: FC<IProps> = ({ handleDone }) => {
 
     reset({
       contractName: '',
-      owner: '',
-      complianceOwner: '',
       namespace,
     });
   }, [namespace]);
 
   const handleSave = async (data: IAddContractProps) => {
     setError('');
-
     if (!data.namespace) {
       setError('there was an issue creating the namespace');
       return;
     }
 
+    setIsLoading(true);
     const tx = await submitContract(data);
     if (tx?.result?.status === 'success') {
       setStep(STEPS.DONE);
+      setIsLoading(false);
       const asset = addAsset({
         contractName: data.contractName,
         namespace: data.namespace,
@@ -119,44 +118,35 @@ export const AssetStepperForm: FC<IProps> = ({ handleDone }) => {
       )}
 
       {step === STEPS.CREATE_CONTRACT && (
-        <form onSubmit={handleSubmit(handleSave)}>
-          <Controller
-            name="namespace"
-            control={control}
-            rules={{ required: true }}
-            render={({ field }) => (
-              <TextField label="Namespace" isDisabled {...field} />
-            )}
-          />
-
-          <Controller
-            name="contractName"
-            control={control}
-            rules={{ required: true }}
-            render={({ field }) => (
-              <TextField label="Contract Name" {...field} />
-            )}
-          />
-
-          <Controller
-            name="owner"
-            control={control}
-            rules={{ required: true }}
-            render={({ field }) => <TextField label="Owner" {...field} />}
-          />
-
-          <Controller
-            name="complianceOwner"
-            control={control}
-            rules={{ required: true }}
-            render={({ field }) => (
-              <TextField label="Compliance Owner" {...field} />
-            )}
-          />
-          <Stack>
-            <Button isDisabled={!isValid} type="submit">
-              Create the contract
-            </Button>
+        <form onSubmit={handleSubmit(handleSave)} style={{ width: '100%' }}>
+          <Stack flexDirection="column" gap="sm" width="100%">
+            <Controller
+              name="namespace"
+              control={control}
+              rules={{ required: true }}
+              render={({ field }) => (
+                <TextField label="Namespace" isDisabled {...field} />
+              )}
+            />
+
+            <Controller
+              name="contractName"
+              control={control}
+              rules={{ required: true }}
+              render={({ field }) => (
+                <TextField label="Contract Name" {...field} />
+              )}
+            />
+
+            <Stack width="100%" justifyContent="center" alignItems="center">
+              {isLoading ? (
+                <TransactionPendingIcon />
+              ) : (
+                <Button isDisabled={!isValid || isLoading} type="submit">
+                  Create the contract
+                </Button>
+              )}
+            </Stack>
           </Stack>
         </form>
       )}

diff --git a/packages/apps/rwa-demo/src/components/ComplianceRule/ComplianceRule.tsx b/packages/apps/rwa-demo/src/components/ComplianceRule/ComplianceRule.tsx
@@ -1,6 +1,9 @@
 import { MonoArrowRightAlt } from '@kadena/kode-icons';
 import { Badge, Stack, Text } from '@kadena/kode-ui';
 import type { FC } from 'react';
+import { useEffect } from 'react';
+import { TransactionTypeSpinner } from '../TransactionTypeSpinner/TransactionTypeSpinner';
+import { TXTYPES } from '../TransactionsProvider/TransactionsProvider';
 import { complianceRuleClass } from './style.css';
 
 interface IProps {
@@ -9,6 +12,8 @@ interface IProps {
 }
 
 export const ComplianceRule: FC<IProps> = ({ label, value }) => {
+  useEffect(() => {}, []);
+
   return (
     <Stack
       className={complianceRuleClass}
@@ -20,9 +25,12 @@ export const ComplianceRule: FC<IProps> = ({ label, value }) => {
         <MonoArrowRightAlt />
         <Text>{label}</Text>
       </Stack>
-      <Badge style="positive" size="sm">
-        {`${value.toString()}`}
-      </Badge>
+      <Stack alignItems="center" gap="sm">
+        <TransactionTypeSpinner type={TXTYPES.SETCOMPLIANCE} />
+        <Badge style="positive" size="sm">
+          {`${value.toString()}`}
+        </Badge>
+      </Stack>
     </Stack>
   );
 };
diff --git a/packages/apps/rwa-demo/src/components/DistributionForm/DistributionForm.tsx b/packages/apps/rwa-demo/src/components/DistributionForm/DistributionForm.tsx
@@ -84,7 +84,7 @@ export const DistributionForm: FC<IProps> = ({
     return message;
   };
 
-  const maxAmount = (asset?.maxSupply ?? 0) - balance;
+  const maxAmount = (asset?.maxBalance ?? 0) - balance;
   return (
     <>
       {isRightAsideExpanded && isOpen && (

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,8 @@ import type { FC } from 'react';
 import React, { useEffect, useState } from 'react';
 import { SendTransactionAnimation } from '../SendTransactionAnimation/SendTransactionAnimation';
 import { TransactionPendingIcon } from '../TransactionPendingIcon/TransactionPendingIcon';
+import { TXTYPES } from '../TransactionsProvider/TransactionsProvider';
+import { TransactionTypeSpinner } from '../TransactionTypeSpinner/TransactionTypeSpinner';
 
 interface IProps {
   investorAccount: string;
@@ -58,7 +60,13 @@ export const FreezeInvestor: FC<IProps> = ({
       onPress={handleFreeze}
       trigger={
         <Button
-          startVisual={getVisual(frozen, isLoading)}
+          startVisual={
+            <TransactionTypeSpinner
+              type={TXTYPES.FREEZEINVESTOR}
+              account={investorAccount}
+              fallbackIcon={getVisual(frozen, isLoading)}
+            />
+          }
           isDisabled={!isAllowed}
           isCompact={isCompact}
           variant={variant}