batch freeze unfreeze investors

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

@@ -0,0 +1,67 @@
+import { useBatchFreezeInvestors } from '@/hooks/batchFreezeInvestors';
+import type { IBatchSetAddressFrozenProps } from '@/services/batchSetAddressFrozen';
+import { MonoPause, MonoPlayArrow } from '@kadena/kode-icons';
+import { Button } from '@kadena/kode-ui';
+
+import { useAccount } from '@/hooks/account';
+import type { FC } from 'react';
+import type { UseFormHandleSubmit, UseFormReset } from 'react-hook-form';
+import { TransactionTypeSpinner } from '../TransactionTypeSpinner/TransactionTypeSpinner';
+import { TXTYPES } from '../TransactionsProvider/TransactionsProvider';
+
+interface IProps {
+  pause: boolean;
+  isDisabled: boolean;
+  handleReset: UseFormReset<{
+    select: [];
+  }>;
+  handleSubmit: UseFormHandleSubmit<
+    {
+      select: [];
+    },
+    undefined
+  >;
+}
+
+export const BadgeFreezeForm: FC<IProps> = ({
+  handleSubmit,
+  handleReset,
+  isDisabled,
+  pause,
+}) => {
+  const { account } = useAccount();
+  const { submit, isAllowed } = useBatchFreezeInvestors();
+
+  const onSubmit = async ({ select }: { select: string[] }) => {
+    const data: IBatchSetAddressFrozenProps = {
+      investorAccounts: select,
+      pause,
+    };
+    const tx = await submit(data);
+    tx?.listener.subscribe(
+      () => {},
+      () => {},
+      () => {
+        handleReset({ select: [] });
+      },
+    );
+  };
+
+  return (
+    <Button
+      isDisabled={isDisabled || !isAllowed}
+      onClick={handleSubmit(onSubmit)}
+      isCompact
+      variant="outlined"
+      endVisual={
+        <TransactionTypeSpinner
+          type={[TXTYPES.FREEZEINVESTOR]}
+          account={account?.address}
+          fallbackIcon={pause ? <MonoPlayArrow /> : <MonoPause />}
+        />
+      }
+    >
+      {pause ? 'Freeze' : 'Unfreeze'}
+    </Button>
+  );
+};

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

@@ -13,116 +13,159 @@ import {
 } from '@kadena/kode-ui/patterns';
 import { useRouter } from 'next/navigation';
 import type { FC } from 'react';
+import { useRef } from 'react';
+import { useForm } from 'react-hook-form';
+import { BadgeFreezeForm } from '../BadgeFeezeForm/BadgeFeezeForm';
 import { InvestorBatchForm } from '../InvestorBatchForm/InvestorBatchForm';
 import { InvestorForm } from '../InvestorForm/InvestorForm';
+import { FormatCheckbox } from '../TableFormatters/FormatCheckbox';
 import { FormatDeleteInvestor } from '../TableFormatters/FormatDeleteInvestor';
 import { FormatFreeze } from '../TableFormatters/FormatFreeze';
 import { FormatInvestorBalance } from '../TableFormatters/FormatInvestorBalance';
 import { TransactionTypeSpinner } from '../TransactionTypeSpinner/TransactionTypeSpinner';
 import { TXTYPES } from '../TransactionsProvider/TransactionsProvider';
 
 export const InvestorList: FC = () => {
+  const formRef = useRef<HTMLFormElement>(null);
   const { data, isLoading } = useGetInvestors();
   const router = useRouter();
   const { isAllowed: isAddInvestorAllowed } = useAddInvestor({});
 
+  const {
+    reset,
+    register,
+    handleSubmit,
+    formState: { isDirty },
+  } = useForm<{
+    select: [];
+  }>({
+    defaultValues: {
+      select: [],
+    },
+  });
+
   const handleLink = async (accountName: any) => {
     router.push(`/investors/${accountName}`);
   };
 
   return (
     <>
-      <SectionCard stack="vertical">
-        <SectionCardContentBlock>
-          <SectionCardHeader
-            title="Investors"
-            actions={
-              <>
-                <InvestorBatchForm
-                  trigger={
-                    <Button
-                      isCompact
-                      variant="outlined"
-                      isDisabled={!isAddInvestorAllowed}
-                      endVisual={<MonoAdd />}
-                    >
-                      Batch add investors
-                    </Button>
-                  }
-                />
-                <InvestorForm
-                  trigger={
-                    <Button
-                      isCompact
-                      variant="outlined"
-                      isDisabled={!isAddInvestorAllowed}
-                      endVisual={<MonoAdd />}
-                    >
-                      Add Investor
-                    </Button>
-                  }
-                />
-              </>
-            }
-          />
-          <SectionCardBody>
-            <TransactionTypeSpinner
-              type={[TXTYPES.ADDINVESTOR, TXTYPES.DELETEINVESTOR]}
-            />
-            <CompactTable
-              isLoading={isLoading}
-              variant="open"
-              fields={[
-                {
-                  label: 'Name',
-                  key: 'alias',
-                  width: '30%',
-                },
-                {
-                  label: 'Account',
-                  key: 'accountName',
-                  width: '35%',
-                  render: CompactTableFormatters.FormatAccount(),
-                },
-                {
-                  label: 'Balance',
-                  key: 'accountName',
-                  width: '20%',
-                  render: FormatInvestorBalance(),
-                },
-                {
-                  label: '',
-                  key: 'accountName',
-                  width: '5%',
-                  render: FormatFreeze(),
-                },
-                {
-                  label: '',
-                  key: 'accountName',
-                  width: '5%',
-                  render: CompactTableFormatters.FormatActions({
-                    trigger: (
+      <form ref={formRef}>
+        <SectionCard stack="vertical">
+          <SectionCardContentBlock>
+            <SectionCardHeader
+              title="Investors"
+              actions={
+                <>
+                  <BadgeFreezeForm
+                    pause={true}
+                    handleSubmit={handleSubmit}
+                    handleReset={reset}
+                    isDisabled={!isDirty}
+                  />
+                  <BadgeFreezeForm
+                    pause={false}
+                    handleSubmit={handleSubmit}
+                    handleReset={reset}
+                    isDisabled={!isDirty}
+                  />
+
+                  <InvestorBatchForm
+                    trigger={
                       <Button
                         isCompact
                         variant="outlined"
-                        startVisual={<MonoFindInPage />}
-                        onPress={handleLink}
-                      />
-                    ),
-                  }),
-                },
-                {
-                  label: '',
-                  key: 'accountName',
-                  width: '5%',
-                  render: FormatDeleteInvestor(),
-                },
-              ]}
-              data={isLoading ? loadingData : data}
+                        isDisabled={!isAddInvestorAllowed}
+                        endVisual={<MonoAdd />}
+                      >
+                        Batch add investors
+                      </Button>
+                    }
+                  />
+                  <InvestorForm
+                    trigger={
+                      <Button
+                        isCompact
+                        variant="outlined"
+                        isDisabled={!isAddInvestorAllowed}
+                        endVisual={<MonoAdd />}
+                      >
+                        Add Investor
+                      </Button>
+                    }
+                  />
+                </>
+              }
             />
-          </SectionCardBody>
-        </SectionCardContentBlock>
-      </SectionCard>
+            <SectionCardBody>
+              <TransactionTypeSpinner
+                type={[TXTYPES.ADDINVESTOR, TXTYPES.DELETEINVESTOR]}
+              />
+
+              <CompactTable
+                isLoading={isLoading}
+                variant="open"
+                fields={[
+                  {
+                    key: 'accountName',
+                    label: '',
+                    width: '10%',
+                    render: FormatCheckbox({
+                      register,
+                      name: 'select',
+                    }),
+                  },
+                  {
+                    label: 'Name',
+                    key: 'alias',
+                    width: '20%',
+                  },
+                  {
+                    label: 'Account',
+                    key: 'accountName',
+                    width: '35%',
+                    render: CompactTableFormatters.FormatAccount(),
+                  },
+                  {
+                    label: 'Balance',
+                    key: 'accountName',
+                    width: '20%',
+                    render: FormatInvestorBalance(),
+                  },
+                  {
+                    label: '',
+                    key: 'accountName',
+                    width: '5%',
+                    render: FormatFreeze(),
+                  },
+                  {
+                    label: '',
+                    key: 'accountName',
+                    width: '5%',
+                    render: CompactTableFormatters.FormatActions({
+                      trigger: (
+                        <Button
+                          isCompact
+                          variant="outlined"
+                          startVisual={<MonoFindInPage />}
+                          onPress={handleLink}
+                        />
+                      ),
+                    }),
+                  },
+                  {
+                    label: '',
+                    key: 'accountName',
+                    width: '5%',
+                    render: FormatDeleteInvestor(),
+                  },
+                ]}
+                data={isLoading ? loadingData : data}
+              />
+            </SectionCardBody>
+          </SectionCardContentBlock>
+        </SectionCard>
+      </form>
     </>
   );
 };

packages/apps/rwa-demo/src/components/TableFormatters/FormatCheckbox.tsx

@@ -0,0 +1,26 @@
+import type { ICompactTableFormatterProps } from '@kadena/kode-ui/patterns';
+import React from 'react';
+import type { UseFormRegister } from 'react-hook-form';
+
+export interface IActionProps {
+  name: 'select';
+  register: UseFormRegister<{
+    select: [];
+  }>;
+}
+
+export const FormatCheckbox = ({ name, register }: IActionProps) => {
+  const Component = ({ value }: ICompactTableFormatterProps) => {
+    return (
+      <input
+        {...register(name, {})}
+        type="checkbox"
+        name={name}
+        data-value={value}
+        id={name}
+        value={value}
+      />
+    );
+  };
+  return Component;
+};

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

@@ -163,7 +163,7 @@ export const TransactionsProvider: FC<PropsWithChildren> = ({ children }) => {
         },
       );
 
-      return 2222;
+      return r;
     },
     [],
   );