chore(rwa): aliases for agents and investors (#2711)

.changeset/slow-apples-think.md

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

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

@@ -2,12 +2,14 @@
 
 import { DistributionForm } from '@/components/DistributionForm/DistributionForm';
 import { FreezeInvestor } from '@/components/FreezeInvestor/FreezeInvestor';
+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 { useAsset } from '@/hooks/asset';
 import { useFreeze } from '@/hooks/freeze';
-import { MonoAdd } from '@kadena/kode-icons';
+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 { useParams } from 'next/navigation';
@@ -21,6 +23,8 @@ const InvestorPage = () => {
   const [hasOpenPartiallyFreezeForm, setHasOpenPartiallyFreezeForm] =
     useState(false);
   const investorAccount = decodeURIComponent(params.investorAccount as string);
+
+  const { data: investor } = useGetInvestor({ account: investorAccount });
   const { frozen } = useFreeze({ investorAccount });
 
   const handleDistributeTokens = () => {
@@ -32,6 +36,8 @@ const InvestorPage = () => {
     setHasOpenPartiallyFreezeForm(true);
   };
 
+  if (!investor) return null;
+
   return (
     <>
       <SideBarBreadcrumbs>
@@ -60,7 +66,7 @@ const InvestorPage = () => {
       )}
 
       <Stack width="100%" flexDirection="column">
-        <InvestorInfo investorAccount={investorAccount} />
+        <InvestorInfo account={investor} />
         <Stack gap="sm">
           <Button
             startVisual={<MonoAdd />}
@@ -79,6 +85,18 @@ const InvestorPage = () => {
           </Button>
 
           <FreezeInvestor investorAccount={investorAccount} />
+
+          <InvestorForm
+            investor={investor}
+            trigger={
+              <Button
+                isDisabled={frozen || paused}
+                endVisual={<MonoEditNote />}
+              >
+                Edit Investor
+              </Button>
+            }
+          />
         </Stack>
       </Stack>
     </>

packages/apps/rwa-demo/src/app/(app)/agents/[agentAccount]/page.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import { AgentForm } from '@/components/AgentForm/AgentForm';
+import { AgentInfo } from '@/components/AgentInfo/AgentInfo';
+import { SideBarBreadcrumbs } from '@/components/SideBarBreadcrumbs/SideBarBreadcrumbs';
+import { useAsset } from '@/hooks/asset';
+import { useGetAgent } from '@/hooks/getAgent';
+import { MonoEditNote } from '@kadena/kode-icons';
+import { Button, Stack } from '@kadena/kode-ui';
+import { SideBarBreadcrumbsItem } from '@kadena/kode-ui/patterns';
+import { useParams } from 'next/navigation';
+
+const InvestorPage = () => {
+  const { paused } = useAsset();
+  const params = useParams();
+  const agentAccount = decodeURIComponent(params.agentAccount as string);
+
+  const { data: agent } = useGetAgent({ account: agentAccount });
+
+  if (!agent) return null;
+
+  return (
+    <>
+      <SideBarBreadcrumbs>
+        <SideBarBreadcrumbsItem href={`/agents/${agentAccount}`}>
+          Agent
+        </SideBarBreadcrumbsItem>
+      </SideBarBreadcrumbs>
+
+      <Stack width="100%" flexDirection="column">
+        <AgentInfo account={agent} />
+        <Stack gap="sm">
+          <AgentForm
+            agent={agent}
+            trigger={
+              <Button isDisabled={paused} endVisual={<MonoEditNote />}>
+                Edit Agent
+              </Button>
+            }
+          />
+        </Stack>
+      </Stack>
+    </>
+  );
+};
+
+export default InvestorPage;

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

@@ -0,0 +1,95 @@
+import { useAddAgent } from '@/hooks/addAgent';
+import type { IAddAgentProps } from '@/services/addAgent';
+import type { IRecord } from '@/utils/filterRemovedRecords';
+import { Button, TextField } from '@kadena/kode-ui';
+import {
+  RightAside,
+  RightAsideContent,
+  RightAsideFooter,
+  RightAsideHeader,
+  useLayout,
+} from '@kadena/kode-ui/patterns';
+import type { FC, ReactElement } from 'react';
+import { cloneElement, useEffect, useState } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+
+interface IProps {
+  agent?: IRecord;
+  onClose?: () => void;
+  trigger: ReactElement;
+}
+
+export const AgentForm: FC<IProps> = ({ onClose, agent, trigger }) => {
+  const { submit } = useAddAgent();
+  const [isOpen, setIsOpen] = useState(false);
+  const { setIsRightAsideExpanded, isRightAsideExpanded } = useLayout();
+  const { handleSubmit, control } = useForm<IAddAgentProps>({
+    defaultValues: {
+      accountName: agent?.accountName ?? '',
+      alias: agent?.alias ?? '',
+      alreadyExists: !!agent?.accountName,
+    },
+  });
+
+  const handleOpen = () => {
+    setIsRightAsideExpanded(true);
+    setIsOpen(true);
+    if (trigger.props.onPress) trigger.props.onPress();
+  };
+
+  const handleOnClose = () => {
+    setIsOpen(false);
+    if (onClose) onClose();
+  };
+
+  const onSubmit = async (data: IAddAgentProps) => {
+    await submit(data);
+    handleOnClose();
+  };
+
+  useEffect(() => {
+    console.log('agent', isOpen);
+  }, [isOpen]);
+
+  return (
+    <>
+      {isRightAsideExpanded && isOpen && (
+        <RightAside
+          isOpen={isRightAsideExpanded && isOpen}
+          onClose={handleOnClose}
+        >
+          <form onSubmit={handleSubmit(onSubmit)}>
+            <RightAsideHeader label="Add Agent" />
+            <RightAsideContent>
+              <Controller
+                name="accountName"
+                control={control}
+                render={({ field }) => (
+                  <TextField
+                    isDisabled={!!agent?.accountName}
+                    label="AccountName"
+                    {...field}
+                  />
+                )}
+              />
+
+              <Controller
+                name="alias"
+                control={control}
+                render={({ field }) => <TextField label="Alias" {...field} />}
+              />
+            </RightAsideContent>
+            <RightAsideFooter>
+              <Button onPress={handleOnClose} variant="transparent">
+                Cancel
+              </Button>
+              <Button type="submit">Add Agent</Button>
+            </RightAsideFooter>
+          </form>
+        </RightAside>
+      )}
+
+      {cloneElement(trigger, { ...trigger.props, onPress: handleOpen })}
+    </>
+  );
+};

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

@@ -0,0 +1,28 @@
+import type { IRecord } from '@/utils/filterRemovedRecords';
+import { Heading, Stack } from '@kadena/kode-ui';
+import type { FC } from 'react';
+import React from 'react';
+import type { IWalletAccount } from '../AccountProvider/utils';
+
+interface IProps {
+  account: IRecord | IWalletAccount;
+}
+
+const getAccountName = (account: IProps['account']) => {
+  if ('accountName' in account) return account.accountName;
+  return account.address;
+};
+
+export const AgentInfo: FC<IProps> = ({ account }) => {
+  const accountName = getAccountName(account);
+
+  if (!account) return null;
+
+  return (
+    <Stack width="100%" flexDirection="column">
+      <Heading as="h3">
+        agent: {account.alias ? account.alias : accountName}
+      </Heading>
+    </Stack>
+  );
+};