feat(rwa): show maxsupply numbers (#2717)

.changeset/twenty-cherries-study.md

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

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

@@ -11,31 +11,17 @@ import { useFreeze } from '@/hooks/freeze';
 import { useGetInvestor } from '@/hooks/getInvestor';
 import { MonoAdd, MonoEditNote } from '@kadena/kode-icons';
 import { Button, Stack } from '@kadena/kode-ui';
-import { SideBarBreadcrumbsItem, useLayout } from '@kadena/kode-ui/patterns';
+import { SideBarBreadcrumbsItem } from '@kadena/kode-ui/patterns';
 import { useParams } from 'next/navigation';
-import { useState } from 'react';
 
 const InvestorPage = () => {
-  const { isRightAsideExpanded, setIsRightAsideExpanded } = useLayout();
   const { paused } = useAsset();
   const params = useParams();
-  const [hasOpenDistributeForm, setHasOpenDistributeForm] = useState(false);
-  const [hasOpenPartiallyFreezeForm, setHasOpenPartiallyFreezeForm] =
-    useState(false);
   const investorAccount = decodeURIComponent(params.investorAccount as string);
 
   const { data: investor } = useGetInvestor({ account: investorAccount });
   const { frozen } = useFreeze({ investorAccount });
 
-  const handleDistributeTokens = () => {
-    setIsRightAsideExpanded(true);
-    setHasOpenDistributeForm(true);
-  };
-  const handlePartiallyFreezeTokens = () => {
-    setIsRightAsideExpanded(true);
-    setHasOpenPartiallyFreezeForm(true);
-  };
-
   if (!investor) return null;
 
   return (
@@ -46,43 +32,26 @@ const InvestorPage = () => {
         </SideBarBreadcrumbsItem>
       </SideBarBreadcrumbs>
 
-      {isRightAsideExpanded && hasOpenDistributeForm && (
-        <DistributionForm
-          investorAccount={investorAccount}
-          onClose={() => {
-            setIsRightAsideExpanded(false);
-            setHasOpenDistributeForm(false);
-          }}
-        />
-      )}
-      {isRightAsideExpanded && hasOpenPartiallyFreezeForm && (
-        <PartiallyFreezeTokensForm
-          investorAccount={investorAccount}
-          onClose={() => {
-            setIsRightAsideExpanded(false);
-            setHasOpenPartiallyFreezeForm(false);
-          }}
-        />
-      )}
-
       <Stack width="100%" flexDirection="column">
         <InvestorInfo account={investor} />
         <Stack gap="sm">
-          <Button
-            startVisual={<MonoAdd />}
-            onPress={handleDistributeTokens}
-            isDisabled={frozen || paused}
-          >
-            Distribute Tokens
-          </Button>
+          <DistributionForm
+            investorAccount={investorAccount}
+            trigger={
+              <Button startVisual={<MonoAdd />} isDisabled={frozen || paused}>
+                Distribute Tokens
+              </Button>
+            }
+          />
 
-          <Button
-            startVisual={<MonoAdd />}
-            onPress={handlePartiallyFreezeTokens}
-            isDisabled={frozen || paused}
-          >
-            Partially freeze tokens
-          </Button>
+          <PartiallyFreezeTokensForm
+            investorAccount={investorAccount}
+            trigger={
+              <Button startVisual={<MonoAdd />} isDisabled={frozen || paused}>
+                Partially freeze tokens
+              </Button>
+            }
+          />
 
           <FreezeInvestor investorAccount={investorAccount} />
 

packages/apps/rwa-demo/src/app/(app)/assets/[uuid]/page.tsx

@@ -1,17 +1,28 @@
 'use client';
+import type { IWalletAccount } from '@/components/AccountProvider/utils';
+import type { IAsset } from '@/components/AssetProvider/AssetProvider';
+import { useAccount } from '@/hooks/account';
 import { useAsset } from '@/hooks/asset';
 import { useParams } from 'next/navigation';
-import { useMemo } from 'react';
+import { useEffect, useState } from 'react';
 
 const Assets = () => {
   const { getAsset } = useAsset();
+  const { account } = useAccount();
+  const [asset, setAsset] = useState<IAsset | undefined>();
   const { uuid } = useParams();
-  const asset = useMemo(() => {
-    return getAsset(uuid as string);
-  }, [uuid]);
 
-  console.log({ asset });
+  const initData = async (uuid: string, account: IWalletAccount) => {
+    const data = await getAsset(uuid, account);
+    setAsset(data);
+  };
+
+  useEffect(() => {
+    if (!account) return;
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    initData(uuid as string, account);
+  }, [uuid, account?.address]);
+
   return <pre>{JSON.stringify(asset, null, 2)}</pre>;
 };
-
 export default Assets;

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

@@ -1,7 +1,8 @@
-import { useAddAgent } from '@/hooks/addAgent';
+import { useEditAgent } from '@/hooks/editAgent';
 import type { IAddAgentProps } from '@/services/addAgent';
+import { AGENTROLES } from '@/services/addAgent';
 import type { IRecord } from '@/utils/filterRemovedRecords';
-import { Button, TextField } from '@kadena/kode-ui';
+import { Button, CheckboxGroup, TextField } from '@kadena/kode-ui';
 import {
   RightAside,
   RightAsideContent,
@@ -20,24 +21,40 @@ interface IProps {
 }
 
 export const AgentForm: FC<IProps> = ({ onClose, agent, trigger }) => {
-  const { submit } = useAddAgent();
+  const { submit } = useEditAgent();
   const [isOpen, setIsOpen] = useState(false);
   const { setIsRightAsideExpanded, isRightAsideExpanded } = useLayout();
-  const { handleSubmit, control } = useForm<IAddAgentProps>({
+  const {
+    handleSubmit,
+    control,
+    register,
+    formState: { isValid },
+    reset,
+  } = useForm<IAddAgentProps>({
     defaultValues: {
       accountName: agent?.accountName ?? '',
       alias: agent?.alias ?? '',
       alreadyExists: !!agent?.accountName,
+      roles: [],
     },
   });
 
+  useEffect(() => {
+    reset({
+      accountName: agent?.accountName,
+      alias: agent?.alias,
+      alreadyExists: !!agent?.accountName,
+    });
+  }, [agent?.accountName]);
+
   const handleOpen = () => {
     setIsRightAsideExpanded(true);
     setIsOpen(true);
     if (trigger.props.onPress) trigger.props.onPress();
   };
 
   const handleOnClose = () => {
+    setIsRightAsideExpanded(false);
     setIsOpen(false);
     if (onClose) onClose();
   };
@@ -47,10 +64,6 @@ export const AgentForm: FC<IProps> = ({ onClose, agent, trigger }) => {
     handleOnClose();
   };
 
-  useEffect(() => {
-    console.log('agent', isOpen);
-  }, [isOpen]);
-
   return (
     <>
       {isRightAsideExpanded && isOpen && (
@@ -59,11 +72,14 @@ export const AgentForm: FC<IProps> = ({ onClose, agent, trigger }) => {
           onClose={handleOnClose}
         >
           <form onSubmit={handleSubmit(onSubmit)}>
-            <RightAsideHeader label="Add Agent" />
+            <RightAsideHeader
+              label={agent?.accountName ? 'Edit Agent' : 'Add Agent'}
+            />
             <RightAsideContent>
               <Controller
                 name="accountName"
                 control={control}
+                rules={{ required: true }}
                 render={({ field }) => (
                   <TextField
                     isDisabled={!!agent?.accountName}
@@ -78,12 +94,29 @@ export const AgentForm: FC<IProps> = ({ onClose, agent, trigger }) => {
                 control={control}
                 render={({ field }) => <TextField label="Alias" {...field} />}
               />
+
+              <CheckboxGroup direction="column" label="Roles" name="roles">
+                {Object.entries(AGENTROLES).map(([key, val]) => {
+                  return (
+                    <label key={key}>
+                      <input
+                        type="checkbox"
+                        value={key}
+                        {...register('roles')}
+                      />
+                      {val}
+                    </label>
+                  );
+                })}
+              </CheckboxGroup>
             </RightAsideContent>
             <RightAsideFooter>
               <Button onPress={handleOnClose} variant="transparent">
                 Cancel
               </Button>
-              <Button type="submit">Add Agent</Button>
+              <Button isDisabled={!isValid} type="submit">
+                {agent?.accountName ? 'Edit Agent' : 'Add Agent'}
+              </Button>
             </RightAsideFooter>
           </form>
         </RightAside>

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

@@ -24,6 +24,8 @@ export const AssetInfo: FC = () => {
             </Stack>
           )}
         </Button>
+        <div>maxSupply: {asset.maxSupply}</div>
+        <div>maxBalance: {asset.maxBalance}</div>
         <SupplyCount />
       </Stack>
     </Stack>

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

@@ -4,31 +4,40 @@ import {
   LOCALSTORAGE_ASSETS_SELECTED_KEY,
 } from '@/constants';
 import { usePaused } from '@/hooks/paused';
+import { useSupply } from '@/hooks/supply';
+import type { IGetAssetMaxSupplyBalanceResult } from '@/services/getAssetMaxSupplyBalance';
+import { getAssetMaxSupplyBalance } from '@/services/getAssetMaxSupplyBalance';
+import { supply as supplyService } from '@/services/supply';
 import { getFullAsset } from '@/utils/getAsset';
 import { getLocalStorageKey } from '@/utils/getLocalStorageKey';
 import { useRouter } from 'next/navigation';
 
 import type { FC, PropsWithChildren } from 'react';
 import { createContext, useEffect, useState } from 'react';
+import type { IWalletAccount } from '../AccountProvider/utils';
 
-export interface IAsset {
+export interface IAsset extends IGetAssetMaxSupplyBalanceResult {
   uuid: string;
   name: string;
+  supply: number;
 }
 
 export interface IAssetContext {
   asset?: IAsset;
   assets: IAsset[];
   paused: boolean;
   setAsset: (asset: IAsset) => void;
-  getAsset: (uuid: string) => IAsset | undefined;
+  getAsset: (
+    uuid: string,
+    account: IWalletAccount,
+  ) => Promise<IAsset | undefined>;
 }
 
 export const AssetContext = createContext<IAssetContext>({
   assets: [],
   paused: false,
   setAsset: () => {},
-  getAsset: (uuid: string) => undefined,
+  getAsset: async () => undefined,
 });
 
 export const AssetProvider: FC<PropsWithChildren> = ({ children }) => {
@@ -40,6 +49,7 @@ export const AssetProvider: FC<PropsWithChildren> = ({ children }) => {
   const selectedKey =
     getLocalStorageKey(LOCALSTORAGE_ASSETS_SELECTED_KEY) ?? '';
   const { paused } = usePaused();
+  const { data: supply } = useSupply();
 
   const getAssets = (): IAsset[] => {
     const result = localStorage.getItem(storageKey);
@@ -56,15 +66,25 @@ export const AssetProvider: FC<PropsWithChildren> = ({ children }) => {
 
   const handleSelectAsset = (data: IAsset) => {
     localStorage.setItem(selectedKey, JSON.stringify(data));
-    setAsset(data);
+    setAsset((old) => ({ ...old, ...data }));
 
     router.replace('/');
     router.refresh();
   };
 
-  const getAsset = (uuid: string) => {
+  const getAsset = async (
+    uuid: string,
+    account: IWalletAccount,
+  ): Promise<IAsset | undefined> => {
     const data = getAssets().find((a) => a.uuid === uuid);
-    return data;
+    const extraAssetData = await getAssetMaxSupplyBalance();
+
+    const supplyResult = (await supplyService({
+      account: account!,
+    })) as number;
+
+    if (!data) return;
+    return { ...data, ...extraAssetData, supply: supplyResult ?? 0 };
   };
 
   useEffect(() => {
@@ -78,6 +98,12 @@ export const AssetProvider: FC<PropsWithChildren> = ({ children }) => {
     };
   }, []);
 
+  const loadAssetData = async () => {
+    const data = await getAssetMaxSupplyBalance();
+
+    setAsset((old) => old && { ...old, ...data });
+  };
+
   useEffect(() => {
     const asset = getFullAsset();
     setAsset(asset);
@@ -86,6 +112,18 @@ export const AssetProvider: FC<PropsWithChildren> = ({ children }) => {
     }
   }, []);
 
+  useEffect(() => {
+    if (!asset) return;
+
+    setAsset((old) => old && { ...old, supply });
+  }, [asset?.name, supply]);
+
+  useEffect(() => {
+    if (!asset) return;
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    loadAssetData();
+  }, [asset?.uuid]);
+
   return (
     <AssetContext.Provider
       value={{ asset, assets, setAsset: handleSelectAsset, getAsset, paused }}