add the remove agent function

.changeset/twelve-poets-chew.md

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

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

@@ -2,6 +2,7 @@
 import { AddAgentForm } from '@/components/AddAgentForm/AddAgentForm';
 import { AgentsList } from '@/components/AgentsList/AgentsList';
 import { InitTokenForm } from '@/components/InitTokenForm/InitTokenForm';
+import { SetComplianceForm } from '@/components/SetComplianceForm/SetComplianceForm';
 import { SideBarBreadcrumbs } from '@/components/SideBarBreadcrumbs/SideBarBreadcrumbs';
 import { MonoAdd } from '@kadena/kode-icons';
 import { Button, Stack } from '@kadena/kode-ui';
@@ -12,22 +13,42 @@ const Home = () => {
   const { setIsRightAsideExpanded, isRightAsideExpanded } = useLayout();
   const [hasOpenInitForm, setHasOpenInitForm] = useState(false);
   const [hasOpenAgentForm, setHasOpenAgentForm] = useState(false);
+  const [hasOpenComplianceForm, setHasOpenComplianceForm] = useState(false);
 
   const handleAddAgent = () => {
     setIsRightAsideExpanded(true);
+    setHasOpenInitForm(false);
     setHasOpenAgentForm(true);
+    setHasOpenComplianceForm(false);
   };
 
   const handleInitToken = () => {
     setIsRightAsideExpanded(true);
     setHasOpenInitForm(true);
+    setHasOpenComplianceForm(false);
+    setHasOpenAgentForm(false);
+  };
+
+  const handleComplianceForm = () => {
+    setIsRightAsideExpanded(true);
+    setHasOpenComplianceForm(true);
+    setHasOpenInitForm(false);
+    setHasOpenAgentForm(false);
   };
 
   return (
     <Stack width="100%" flexDirection="column" gap="md">
       <SideBarBreadcrumbs>
         <SideBarBreadcrumbsItem href="/">Tokens</SideBarBreadcrumbsItem>
       </SideBarBreadcrumbs>
+      {isRightAsideExpanded && hasOpenComplianceForm && (
+        <SetComplianceForm
+          onClose={() => {
+            setIsRightAsideExpanded(false);
+            setHasOpenAgentForm(false);
+          }}
+        />
+      )}
       {isRightAsideExpanded && hasOpenAgentForm && (
         <AddAgentForm
           onClose={() => {
@@ -50,6 +71,10 @@ const Home = () => {
           Add Agent
         </Button>
 
+        <Button startVisual={<MonoAdd />} onClick={handleComplianceForm}>
+          Set Compliance
+        </Button>
+
         <Button startVisual={<MonoAdd />} onClick={handleInitToken}>
           Init Token
         </Button>

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

@@ -1,17 +1,53 @@
+import { useAccount } from '@/hooks/account';
 import { useGetAgents } from '@/hooks/getAgents';
-import { CompactTable } from '@kadena/kode-ui/patterns';
+import { useNetwork } from '@/hooks/networks';
+import { removeAgent } from '@/services/removeAgent';
+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 type { FC } from 'react';
 
 export const AgentsList: FC = () => {
   const { data } = useGetAgents();
+  const { account, sign } = useAccount();
+  const { activeNetwork } = useNetwork();
 
-  console.log(data);
+  const handleDelete = async (accountName: any) => {
+    try {
+      const tx = await removeAgent(
+        { agent: accountName },
+        activeNetwork,
+        account!,
+      );
 
+      const signedTransaction = await sign(tx);
+      if (!signedTransaction) return;
+
+      console.log({ cmd: JSON.parse(signedTransaction.cmd) });
+      const client = getClient();
+      const res = await client.submit(signedTransaction);
+
+      await client.listen(res);
+      console.log(111, { res });
+      console.log('DONE');
+    } catch (e: any) {}
+  };
   return (
     <CompactTable
       fields={[
         { label: 'Account', key: 'accountName', width: '50%' },
-        { label: 'Requestkey', key: 'requestKey', width: '50%' },
+        { label: 'Requestkey', key: 'requestKey', width: '30%' },
+        {
+          label: '',
+          key: 'accountName',
+          width: '20%',
+          render: CompactTableFormatters.FormatActions({
+            trigger: (
+              <Button startVisual={<MonoDelete />} onPress={handleDelete} />
+            ),
+          }),
+        },
       ]}
       data={data}
     />

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

@@ -0,0 +1,77 @@
+import { useAccount } from '@/hooks/account';
+import { useNetwork } from '@/hooks/networks';
+import type { ISetComplianceProps } from '@/services/setCompliance';
+import { setCompliance } from '@/services/setCompliance';
+import { getClient } from '@/utils/client';
+import { Button, NumberField } from '@kadena/kode-ui';
+import {
+  RightAside,
+  RightAsideContent,
+  RightAsideFooter,
+  RightAsideHeader,
+} from '@kadena/kode-ui/patterns';
+import type { FC } from 'react';
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+
+interface IProps {
+  onClose: () => void;
+}
+
+export const SetComplianceForm: FC<IProps> = ({ onClose }) => {
+  const { activeNetwork } = useNetwork();
+  const { account, sign } = useAccount();
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [_, setError] = useState<string | null>(null);
+  const { register, handleSubmit } = useForm<ISetComplianceProps>({
+    defaultValues: {
+      maxBalance: 0,
+      maxSupply: 0,
+    },
+  });
+
+  const onSubmit = async (data: ISetComplianceProps) => {
+    setError(null);
+    try {
+      const tx = await setCompliance(data, activeNetwork, account!);
+
+      const signedTransaction = await sign(tx);
+      if (!signedTransaction) return;
+
+      const client = getClient();
+      const res = await client.submit(signedTransaction);
+
+      await client.listen(res);
+      console.log('DONE');
+    } catch (e: any) {
+      setError(e?.message || e);
+    }
+    onClose();
+  };
+
+  return (
+    <>
+      <RightAside isOpen onClose={onClose}>
+        <form onSubmit={handleSubmit(onSubmit)}>
+          <RightAsideHeader label="Set compliance" />
+          <RightAsideContent>
+            <NumberField
+              label="Max Balance"
+              {...register('maxBalance', { required: true })}
+            />
+            <NumberField
+              label="Max Supply"
+              {...register('maxSupply', { required: true })}
+            />
+          </RightAsideContent>
+          <RightAsideFooter>
+            <Button onPress={onClose} variant="transparent">
+              Cancel
+            </Button>
+            <Button type="submit">Set Compliance</Button>
+          </RightAsideFooter>
+        </form>
+      </RightAside>
+    </>
+  );
+};

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

@@ -11,19 +11,6 @@ const createPubKeyFromAccount = (account: string): string => {
   return account.replace('k:', '').replace('r:', '');
 };
 
-// const doSubmit = async (txArg: any) => {
-//   const client = getClient();
-
-//   // try {
-//   console.log(1);
-//   const res = await client.submit(txArg);
-//   console.log({ res });
-//   //     return;
-//   //   } catch (err: any) {
-//   //     console.log(err);
-//   //   }
-// };
-
 export const addAgent = async (
   data: IAddAgentProps,
   network: INetwork,

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

@@ -0,0 +1,28 @@
+import type { INetwork } from '@/components/NetworkProvider/NetworkProvider';
+import { ADMIN } from '@/constants';
+import { Pact } from '@kadena/client';
+import type { ConnectedAccount } from '@kadena/spirekey-sdk';
+
+export interface IRemoveAgentProps {
+  agent: string;
+}
+
+export const removeAgent = async (
+  data: IRemoveAgentProps,
+  network: INetwork,
+  account: ConnectedAccount,
+) => {
+  return Pact.builder
+    .execution(`(RWA.agent-role.remove-agent (read-string 'agent))`)
+    .setMeta({
+      senderAccount: ADMIN.account,
+      chainId: network.chainId,
+    })
+    .addSigner(ADMIN.publicKey, (withCap) => [
+      withCap(`RWA.agent-role.ONLY-OWNER`),
+      withCap(`coin.GAS`),
+    ])
+    .addData('agent', data.agent)
+    .setNetworkId(network.networkId)
+    .createTransaction();
+};

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

@@ -0,0 +1,29 @@
+import type { INetwork } from '@/components/NetworkProvider/NetworkProvider';
+import { ADMIN } from '@/constants';
+import { Pact } from '@kadena/client';
+import type { ConnectedAccount } from '@kadena/spirekey-sdk';
+
+export interface ISetComplianceProps {
+  maxBalance: number;
+  maxSupply: number;
+}
+
+export const setCompliance = async (
+  data: ISetComplianceProps,
+  network: INetwork,
+  account: ConnectedAccount,
+) => {
+  return Pact.builder
+    .execution(
+      ` (RWA.max-balance-compliance.set-max-balance 60.0)
+        (RWA.max-balance-compliance.set-max-supply 100.0)`,
+    )
+    .setMeta({
+      senderAccount: ADMIN.account,
+      chainId: network.chainId,
+    })
+    .addSigner(ADMIN.publicKey)
+
+    .setNetworkId(network.networkId)
+    .createTransaction();
+};

packages/libs/kode-ui/src/patterns/CompactTable/CompactTable.stories.tsx

@@ -1,10 +1,12 @@
+import { MonoDelete } from '@kadena/kode-icons/system';
 import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 import { onLayer2 } from '../../storyDecorators';
-import { MediaContextProvider } from './../../components';
+import { Button, MediaContextProvider } from './../../components';
 import type { ICompactTableProps } from './CompactTable';
 import { CompactTable } from './CompactTable';
 import { CompactTableFormatters } from './TableFormatters';
+import { FormatActions } from './TableFormatters/FormatActions';
 
 const meta: Meta<ICompactTableProps> = {
   title: 'Patterns/CompactTable',
@@ -303,3 +305,49 @@ export const FormatWithkeyArray: Story = {
     );
   },
 };
+
+export const FormatWithAction: Story = {
+  name: 'Format Action trigger',
+  args: {
+    isLoading: false,
+  },
+  render: ({ isLoading }) => {
+    const callAction = (value: any) => {
+      console.log({ value });
+      alert(value);
+    };
+    return (
+      <MediaContextProvider>
+        <CompactTable
+          isLoading={isLoading}
+          fields={[
+            {
+              label: 'Height',
+              key: 'node.block.height',
+              width: '15%',
+            },
+            {
+              label: 'RequestKey',
+              key: 'node.requestKey',
+              width: '36%',
+              render: CompactTableFormatters.FormatLink({
+                url: `https://kadena.io`,
+              }),
+            },
+            {
+              label: 'action',
+              key: ['node.requestKey', 'node.block.height'],
+              width: '15%',
+              render: FormatActions({
+                trigger: (
+                  <Button startVisual={<MonoDelete />} onPress={callAction} />
+                ),
+              }),
+            },
+          ]}
+          data={data}
+        />
+      </MediaContextProvider>
+    );
+  },
+};

packages/libs/kode-ui/src/patterns/CompactTable/CompactTableDesktop/styles.css.ts

@@ -5,7 +5,7 @@ export const tableClass = style({
   width: '100%',
 });
 
-globalStyle(`${tableClass} td span`, {
+globalStyle(`${tableClass} td > span`, {
   display: 'block',
   alignItems: 'center',
   contain: 'inline-size',

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

@@ -0,0 +1,17 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import type { ICompactTableFormatterProps } from './types';
+
+export interface IActionProps {
+  trigger: ReactElement;
+}
+
+export const FormatActions = ({ trigger }: IActionProps) => {
+  const Component = ({ value }: ICompactTableFormatterProps) => {
+    return React.cloneElement(trigger, {
+      ...trigger.props,
+      onPress: () => trigger.props.onPress(value),
+    });
+  };
+  return Component;
+};

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

@@ -1,4 +1,5 @@
 import { FormatAccount } from './FormatAccount';
+import { FormatActions } from './FormatActions';
 import { FormatAmount } from './FormatAmount';
 import { FormatDefault } from './FormatDefault';
 import { FormatJsonParse } from './FormatJsonParse';
@@ -13,6 +14,7 @@ import type {
 
 export const CompactTableFormatters = {
   FormatAccount,
+  FormatActions,
   FormatAmount,
   FormatDefault,
   FormatLink,