life data on pause and freeze

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

@@ -2,47 +2,29 @@
 
 import { DistributionForm } from '@/components/DistributionForm/DistributionForm';
 import { FreezeInvestor } from '@/components/FreezeInvestor/FreezeInvestor';
-import { InvestorBalance } from '@/components/InvestorBalance/InvestorBalance';
+import { InvestorInfo } from '@/components/InvestorInfo/InvestorInfo';
 import { SideBarBreadcrumbs } from '@/components/SideBarBreadcrumbs/SideBarBreadcrumbs';
-import { useAccount } from '@/hooks/account';
-import { isFrozen } from '@/services/isFrozen';
+import { useAsset } from '@/hooks/asset';
+import { useFreeze } from '@/hooks/freeze';
 import { MonoAdd } from '@kadena/kode-icons';
-import { Button, Heading, Stack } from '@kadena/kode-ui';
+import { Button, Stack } from '@kadena/kode-ui';
 import { SideBarBreadcrumbsItem, useLayout } from '@kadena/kode-ui/patterns';
 import { useParams } from 'next/navigation';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 const InvestorPage = () => {
   const { isRightAsideExpanded, setIsRightAsideExpanded } = useLayout();
-  const { account } = useAccount();
+  const { paused } = useAsset();
   const params = useParams();
   const [hasOpenDistributeForm, setHasOpenDistributeForm] = useState(false);
   const investorAccount = decodeURIComponent(params.investorAccount as string);
-  const [frozen, setFrozen] = useState(false);
+  const { frozen } = useFreeze({ investorAccount });
 
   const handleDistributeTokens = () => {
     setIsRightAsideExpanded(true);
     setHasOpenDistributeForm(true);
   };
 
-  const init = async () => {
-    const res = await isFrozen({
-      investorAccount: investorAccount,
-      account: account!,
-    });
-
-    if (typeof res === 'boolean') {
-      setFrozen(res);
-    }
-  };
-
-  useEffect(() => {
-    // eslint-disable-next-line @typescript-eslint/no-floating-promises
-    init();
-  }, []);
-
-  const handlePauseChange = (pausedResult: boolean) => setFrozen(pausedResult);
-
   return (
     <>
       <SideBarBreadcrumbs>
@@ -62,20 +44,16 @@ const InvestorPage = () => {
       )}
 
       <Stack width="100%" flexDirection="column">
-        <Heading>Investor: {investorAccount}</Heading>
-        <InvestorBalance investorAccount={investorAccount} />
+        <InvestorInfo investorAccount={investorAccount} />
         <Stack gap="sm">
           <Button
             startVisual={<MonoAdd />}
             onPress={handleDistributeTokens}
-            isDisabled={frozen}
+            isDisabled={frozen || paused}
           >
             Distribute Tokens
           </Button>
-          <FreezeInvestor
-            investorAccount={investorAccount}
-            onChanged={handlePauseChange}
-          />
+          <FreezeInvestor investorAccount={investorAccount} />
         </Stack>
       </Stack>
     </>

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

@@ -1,8 +1,8 @@
 'use client';
 import { SideBarLayout } from '@kadena/kode-ui/patterns';
 
+import { AssetInfo } from '@/components/AssetInfo/AssetInfo';
 import { AssetForm } from '@/components/AssetSwitch/AssetForm';
-import { SupplyCount } from '@/components/SupplyCount/SupplyCount';
 import { getAsset } from '@/utils/getAsset';
 import { Heading, Link, Stack } from '@kadena/kode-ui';
 import React from 'react';
@@ -41,7 +41,8 @@ const RootLayout = ({
       sidebar={<SideBar />}
     >
       <Stack width="100%" flexDirection="column" gap="sm">
-        <SupplyCount />
+        <AssetInfo />
+
         {children}
       </Stack>
     </SideBarLayout>

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

@@ -0,0 +1,31 @@
+import { useAsset } from '@/hooks/asset';
+import { MonoPause, MonoPlayArrow } from '@kadena/kode-icons';
+import { Button, Heading, Stack } from '@kadena/kode-ui';
+import type { FC } from 'react';
+import { SupplyCount } from '../SupplyCount/SupplyCount';
+
+export const AssetInfo: FC = () => {
+  const { paused, asset } = useAsset();
+  if (!asset) return;
+  return (
+    <Stack width="100%" flexDirection="column">
+      <Heading as="h3">{asset.name}</Heading>
+      <Stack width="100%" alignItems="center" gap="md">
+        <Button isDisabled>
+          {paused ? (
+            <Stack gap="sm" alignItems="center">
+              <MonoPause />
+              paused
+            </Stack>
+          ) : (
+            <Stack gap="sm" alignItems="center">
+              <MonoPlayArrow />
+              active
+            </Stack>
+          )}
+        </Button>
+        <SupplyCount />
+      </Stack>
+    </Stack>
+  );
+};

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

@@ -0,0 +1,14 @@
+import { useAsset } from '@/hooks/asset';
+import { Notification } from '@kadena/kode-ui';
+import type { FC } from 'react';
+
+export const AssetPausedMessage: FC = () => {
+  const { paused } = useAsset();
+
+  if (!paused) return;
+  return (
+    <Notification intent="info" role="status">
+      The asset is on pause
+    </Notification>
+  );
+};

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

@@ -1,4 +1,6 @@
+import { useAsset } from '@/hooks/asset';
 import { useDistributeTokens } from '@/hooks/distributeTokens';
+import { useFreeze } from '@/hooks/freeze';
 import type { IDistributeTokensProps } from '@/services/distributeTokens';
 import { Button, TextField } from '@kadena/kode-ui';
 import {
@@ -9,13 +11,17 @@ import {
 } from '@kadena/kode-ui/patterns';
 import type { FC } from 'react';
 import { useForm } from 'react-hook-form';
+import { AssetPausedMessage } from '../AssetPausedMessage/AssetPausedMessage';
+import { InvestorFrozenMessage } from '../InvestorFrozenMessage/InvestorFrozenMessage';
 
 interface IProps {
   onClose: () => void;
   investorAccount: string;
 }
 
 export const DistributionForm: FC<IProps> = ({ onClose, investorAccount }) => {
+  const { frozen } = useFreeze({ investorAccount });
+  const { paused } = useAsset();
   const { submit } = useDistributeTokens();
   const { register, handleSubmit } = useForm<IDistributeTokensProps>({
     values: {
@@ -41,11 +47,20 @@ export const DistributionForm: FC<IProps> = ({ onClose, investorAccount }) => {
               {...register('amount', { required: true })}
             />
           </RightAsideContent>
-          <RightAsideFooter>
+          <RightAsideFooter
+            message={
+              <>
+                <InvestorFrozenMessage investorAccount={investorAccount} />
+                <AssetPausedMessage />
+              </>
+            }
+          >
             <Button onPress={onClose} variant="transparent">
               Cancel
             </Button>
-            <Button type="submit">Distribute</Button>
+            <Button isDisabled={frozen || paused} type="submit">
+              Distribute
+            </Button>
           </RightAsideFooter>
         </form>
       </RightAside>

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

@@ -1,6 +1,6 @@
 import { useAccount } from '@/hooks/account';
+import { useFreeze } from '@/hooks/freeze';
 import { useTransactions } from '@/hooks/transactions';
-import { isFrozen } from '@/services/isFrozen';
 import { setAddressFrozen } from '@/services/setAddressFrozen';
 import { getClient } from '@/utils/client';
 import { MonoPause, MonoPlayArrow } from '@kadena/kode-icons';
@@ -11,20 +11,19 @@ import { TransactionPendingIcon } from '../TransactionPendingIcon/TransactionPen
 
 interface IProps {
   investorAccount: string;
-  onChanged: (paused: boolean) => void;
 }
 
-const getVisual = (paused?: boolean) => {
-  if (typeof paused !== 'boolean') {
+const getVisual = (frozen: boolean, isLoading: boolean) => {
+  if (isLoading) {
     return <TransactionPendingIcon />;
   }
-  return paused ? <MonoPause /> : <MonoPlayArrow />;
+  return frozen ? <MonoPause /> : <MonoPlayArrow />;
 };
 
-export const FreezeInvestor: FC<IProps> = ({ investorAccount, onChanged }) => {
+export const FreezeInvestor: FC<IProps> = ({ investorAccount }) => {
   const { account, sign } = useAccount();
   const { addTransaction } = useTransactions();
-  const [frozen, setFrozen] = useState<boolean | undefined>();
+  const { frozen } = useFreeze({ investorAccount });
   const [isLoading, setIsLoading] = useState<boolean>(true);
 
   const handleFreeze = async () => {
@@ -44,42 +43,25 @@ export const FreezeInvestor: FC<IProps> = ({ investorAccount, onChanged }) => {
       const client = getClient();
       const res = await client.submit(signedTransaction);
 
-      const transaction = addTransaction({
+      addTransaction({
         ...res,
         type: 'FREEZE-ADDRESS',
         data: {
           ...res,
           ...data,
         },
       });
-
-      await transaction.listener;
-      setFrozen(undefined);
-    } catch (e: any) {}
-  };
-
-  const fetchData = async () => {
-    const res = await isFrozen({
-      investorAccount: investorAccount,
-      account: account!,
-    });
-
-    if (typeof res === 'boolean') {
-      setFrozen(res);
-      onChanged(res);
+    } catch (e: any) {
+      setIsLoading(false);
     }
-    setIsLoading(false);
   };
 
   useEffect(() => {
-    if (isLoading) {
-      // eslint-disable-next-line @typescript-eslint/no-floating-promises
-      fetchData();
-    }
+    setIsLoading(false);
   }, [frozen]);
 
   return (
-    <Button startVisual={getVisual(frozen)} onPress={handleFreeze}>
+    <Button startVisual={getVisual(frozen, isLoading)} onPress={handleFreeze}>
       Pause Account
     </Button>
   );

packages/apps/rwa-demo/src/components/HomePage/AgentRootPage.tsx

@@ -1,5 +1,6 @@
 import { SideBarBreadcrumbs } from '@/components/SideBarBreadcrumbs/SideBarBreadcrumbs';
 import { useAccount } from '@/hooks/account';
+import { useAsset } from '@/hooks/asset';
 import { MonoAdd } from '@kadena/kode-icons';
 import { Button, Stack } from '@kadena/kode-ui';
 import { useLayout } from '@kadena/kode-ui/patterns';
@@ -11,6 +12,7 @@ import { PauseForm } from '../PauseForm/PauseForm';
 
 export const AgentRootPage: FC = () => {
   const { isAgent, account } = useAccount();
+  const { paused } = useAsset();
   const { setIsRightAsideExpanded, isRightAsideExpanded } = useLayout();
   const [hasOpenInvestorForm, setHasOpenInvestorForm] = useState(false);
 
@@ -35,7 +37,11 @@ export const AgentRootPage: FC = () => {
       )}
       <Stack gap="sm">
         <PauseForm />
-        <Button startVisual={<MonoAdd />} onPress={handleAddInvestor}>
+        <Button
+          isDisabled={paused}
+          startVisual={<MonoAdd />}
+          onPress={handleAddInvestor}
+        >
           Add Investor
         </Button>
       </Stack>

packages/apps/rwa-demo/src/components/HomePage/InvestorRootPage.tsx

@@ -5,7 +5,7 @@ import { Button, Stack } from '@kadena/kode-ui';
 import { useLayout } from '@kadena/kode-ui/patterns';
 import type { FC } from 'react';
 import { useState } from 'react';
-import { InvestorBalance } from '../InvestorBalance/InvestorBalance';
+import { InvestorInfo } from '../InvestorInfo/InvestorInfo';
 import { TransferForm } from '../TransferForm/TransferForm';
 
 export const InvestorRootPage: FC = () => {
@@ -32,8 +32,8 @@ export const InvestorRootPage: FC = () => {
       )}
 
       <Stack width="100%" flexDirection="column" gap="md">
-        investor: {account.address}
-        <InvestorBalance investorAccount={account.address!} />
+        <InvestorInfo investorAccount={account.address} />
+
         <SideBarBreadcrumbs />
         <Stack gap="sm">
           <Button

packages/apps/rwa-demo/src/components/HomePage/OwnerRootPage.tsx

@@ -3,14 +3,15 @@ import { AddAgentForm } from '@/components/AddAgentForm/AddAgentForm';
 import { AgentsList } from '@/components/AgentsList/AgentsList';
 import { SetComplianceForm } from '@/components/SetComplianceForm/SetComplianceForm';
 import { SideBarBreadcrumbs } from '@/components/SideBarBreadcrumbs/SideBarBreadcrumbs';
+import { useAsset } from '@/hooks/asset';
 import { MonoAdd } from '@kadena/kode-icons';
 import { Button, Stack } from '@kadena/kode-ui';
 import { useLayout } from '@kadena/kode-ui/patterns';
 import { useState } from 'react';
 
 export const OwnerRootPage = () => {
   const { setIsRightAsideExpanded, isRightAsideExpanded } = useLayout();
-
+  const { paused } = useAsset();
   const [hasOpenAgentForm, setHasOpenAgentForm] = useState(false);
   const [hasOpenComplianceForm, setHasOpenComplianceForm] = useState(false);
 
@@ -48,11 +49,19 @@ export const OwnerRootPage = () => {
       )}
 
       <Stack gap="sm">
-        <Button startVisual={<MonoAdd />} onClick={handleAddAgent}>
+        <Button
+          isDisabled={paused}
+          startVisual={<MonoAdd />}
+          onClick={handleAddAgent}
+        >
           Add Agent
         </Button>
 
-        <Button startVisual={<MonoAdd />} onClick={handleComplianceForm}>
+        <Button
+          isDisabled={paused}
+          startVisual={<MonoAdd />}
+          onClick={handleComplianceForm}
+        >
           Set Compliance
         </Button>
       </Stack>

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

@@ -0,0 +1,18 @@
+import { useFreeze } from '@/hooks/freeze';
+import { Notification } from '@kadena/kode-ui';
+import type { FC } from 'react';
+
+interface IProps {
+  investorAccount: string;
+}
+
+export const InvestorFrozenMessage: FC<IProps> = ({ investorAccount }) => {
+  const { frozen } = useFreeze({ investorAccount });
+
+  if (!frozen) return;
+  return (
+    <Notification intent="info" role="status">
+      The investor account is frozen
+    </Notification>
+  );
+};