add investor page

.changeset/quiet-baboons-obey.md

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

packages/apps/dev-wallet/src/pages/contacts/Components/ContactForm.tsx

@@ -126,7 +126,6 @@ export function ContactForm({
                 rules={{ required: true }}
                 defaultValue={getValues('discoverdAccount')}
                 render={({ field }) => {
-                  console.log({ field });
                   return (
                     <Stack flexDirection={'column'} gap={'sm'}>
                       <AccountInput

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

@@ -0,0 +1,52 @@
+'use client';
+
+import { DistributionForm } from '@/components/DistributionForm/DistributionForm';
+import { SideBarBreadcrumbs } from '@/components/SideBarBreadcrumbs/SideBarBreadcrumbs';
+import { MonoAdd } from '@kadena/kode-icons';
+import { Button, Heading, Stack } from '@kadena/kode-ui';
+import { SideBarBreadcrumbsItem, useLayout } from '@kadena/kode-ui/patterns';
+import { useParams } from 'next/navigation';
+import { useState } from 'react';
+
+const InvestorPage = () => {
+  const { isRightAsideExpanded, setIsRightAsideExpanded } = useLayout();
+  const params = useParams();
+  const [hasOpenDistributeForm, setHasOpenDistributeForm] = useState(false);
+  const investorAccount = decodeURIComponent(params.investorAccount as string);
+
+  const handleDistributeTokens = () => {
+    setIsRightAsideExpanded(true);
+    setHasOpenDistributeForm(true);
+  };
+
+  return (
+    <>
+      <SideBarBreadcrumbs>
+        <SideBarBreadcrumbsItem href={`/investors/${investorAccount}`}>
+          Investor
+        </SideBarBreadcrumbsItem>
+      </SideBarBreadcrumbs>
+
+      {isRightAsideExpanded && hasOpenDistributeForm && (
+        <DistributionForm
+          investorAccount={investorAccount}
+          onClose={() => {
+            setIsRightAsideExpanded(false);
+            setHasOpenDistributeForm(false);
+          }}
+        />
+      )}
+
+      <Stack width="100%" flexDirection="column">
+        <Heading>Investor: {investorAccount}</Heading>
+        <Stack gap="sm">
+          <Button startVisual={<MonoAdd />} onPress={handleDistributeTokens}>
+            Distribute Tokens
+          </Button>
+        </Stack>
+      </Stack>
+    </>
+  );
+};
+
+export default InvestorPage;

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

@@ -0,0 +1,58 @@
+import { useDistributeTokens } from '@/hooks/distributeTokens';
+import type { IDistributeTokensProps } from '@/services/distributeTokens';
+import { Button, TextField } from '@kadena/kode-ui';
+import {
+  RightAside,
+  RightAsideContent,
+  RightAsideFooter,
+  RightAsideHeader,
+} from '@kadena/kode-ui/patterns';
+import type { FC } from 'react';
+import { useForm } from 'react-hook-form';
+
+interface IProps {
+  onClose: () => void;
+  investorAccount: string;
+}
+
+export const DistributionForm: FC<IProps> = ({ onClose, investorAccount }) => {
+  const { submit } = useDistributeTokens();
+  const { register, handleSubmit } = useForm<IDistributeTokensProps>({
+    defaultValues: {
+      amount: '',
+      investorAccount,
+    },
+    values: {
+      investorAccount,
+    },
+  });
+
+  const onSubmit = async (data: IDistributeTokensProps) => {
+    await submit(data);
+
+    onClose();
+  };
+
+  return (
+    <>
+      <RightAside isOpen onClose={onClose}>
+        <form onSubmit={handleSubmit(onSubmit)}>
+          <RightAsideHeader label="Distribute Tokens" />
+          <RightAsideContent>
+            <TextField
+              label="Amount"
+              type="number"
+              {...register('amount', { required: true })}
+            />
+          </RightAsideContent>
+          <RightAsideFooter>
+            <Button onPress={onClose} variant="transparent">
+              Cancel
+            </Button>
+            <Button type="submit">Distribute</Button>
+          </RightAsideFooter>
+        </form>
+      </RightAside>
+    </>
+  );
+};

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

@@ -5,6 +5,7 @@ import { getClient } from '@/utils/client';
 import { MonoDelete } from '@kadena/kode-icons';
 import { Button } from '@kadena/kode-ui';
 import { CompactTable, CompactTableFormatters } from '@kadena/kode-ui/patterns';
+import Link from 'next/link';
 import type { FC } from 'react';
 
 export const InvestorList: FC = () => {
@@ -39,7 +40,15 @@ export const InvestorList: FC = () => {
           width: '10%',
           render: CompactTableFormatters.FormatStatus(),
         },
-        { label: 'Account', key: 'accountName', width: '50%' },
+        {
+          label: 'Account',
+          key: 'accountName',
+          width: '50%',
+          render: CompactTableFormatters.FormatLinkWrapper({
+            url: '/investors/:value',
+            linkComponent: Link,
+          }),
+        },
         { label: 'Requestkey', key: 'requestKey', width: '30%' },
         {
           label: '',

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

@@ -8,7 +8,6 @@ import {
   RightAsideHeader,
 } from '@kadena/kode-ui/patterns';
 import type { FC } from 'react';
-import { useState } from 'react';
 import { useForm } from 'react-hook-form';
 
 interface IProps {
@@ -17,8 +16,6 @@ interface IProps {
 
 export const SetComplianceForm: FC<IProps> = ({ onClose }) => {
   const { submit } = useSetCompliance();
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [_, setError] = useState<string | null>(null);
   const { register, handleSubmit } = useForm<ISetComplianceProps>({
     defaultValues: {
       maxBalance: 0,

packages/apps/rwa-demo/src/hooks/distributeTokens.ts

@@ -0,0 +1,40 @@
+import type { IDistributeTokensProps } from '@/services/distributeTokens';
+import { distributeTokens } from '@/services/distributeTokens';
+import { getClient } from '@/utils/client';
+import { useState } from 'react';
+import { useAccount } from './account';
+import { useTransactions } from './transactions';
+
+export const useDistributeTokens = () => {
+  const [error, setError] = useState<string | null>(null);
+  const { account, sign } = useAccount();
+  const { addTransaction } = useTransactions();
+
+  const submit = async (data: IDistributeTokensProps) => {
+    setError(null);
+    try {
+      const tx = await distributeTokens(data, account!);
+
+      console.log(tx);
+
+      const signedTransaction = await sign(tx);
+      if (!signedTransaction) return;
+
+      const client = getClient();
+      const res = await client.submit(signedTransaction);
+
+      addTransaction({
+        ...res,
+        type: 'DISTRIBUTETOKENS',
+        data: { ...res, ...data },
+      });
+
+      console.log({ res });
+      console.log('DONE');
+    } catch (e: any) {
+      setError(e?.message || e);
+    }
+  };
+
+  return { submit, error };
+};

packages/apps/rwa-demo/src/services/distributeTokens.ts

@@ -0,0 +1,48 @@
+import type { IWalletAccount } from '@/components/AccountProvider/utils';
+import { getNetwork } from '@/utils/client';
+import { Pact } from '@kadena/client';
+import { PactNumber } from '@kadena/pactjs';
+
+export interface IDistributeTokensProps {
+  amount: number;
+  investorAccount: string;
+}
+
+const createPubKeyFromAccount = (account: string): string => {
+  return account.replace('k:', '').replace('r:', '');
+};
+
+export const distributeTokens = async (
+  data: IDistributeTokensProps,
+  account: IWalletAccount,
+) => {
+  console.log(new PactNumber(data.amount).toPrecision(2));
+  return Pact.builder
+    .execution(
+      `
+       (RWA.mvp-token.mint (read-string 'investor) ${new PactNumber(data.amount).toPactDecimal().decimal} (read-string 'agent))`,
+    )
+    .addData('agent', account.address)
+    .addData('investor', data.investorAccount)
+    .addData('investor-keyset', {
+      keys: [createPubKeyFromAccount(data.investorAccount)],
+      pred: 'keys-all',
+    })
+    .setMeta({
+      senderAccount: account.address,
+      chainId: getNetwork().chainId,
+    })
+    .addSigner(account.keyset.guard.keys[0], (withCap) => [
+      withCap(`RWA.agent-role.ONLY-AGENT`, account.address),
+      withCap(
+        `RWA.mvp-token.TRANSFER`,
+        'c:soLScugf2M-6r5L-leMUCGvgddyB1qaKh9s7ka4upGU',
+        data.investorAccount,
+
+        { decimal: data.amount },
+      ),
+      withCap(`coin.GAS`),
+    ])
+    .setNetworkId(getNetwork().networkId)
+    .createTransaction();
+};

packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/FormatLinkWrapper.tsx

@@ -41,8 +41,6 @@ export const FormatLinkWrapper = ({
       <LinkWrapper
         href={formatURL(url, valueToString(value))}
         to={formatURL(url, valueToString(value))}
-        passHref
-        legacyBehavior
         className={linkClass}
       >
         <Text variant="code" className={dataFieldClass}>