fix(rwa): update the KDA balance realtime (#2803)

Author: sstraatemans

packages/apps/rwa-demo/src/__generated__/sdk.ts

@@ -1,8 +1,8 @@
 'use client';
+import { useGetAccountKDABalance } from '@/hooks/getAccountKDABalance';
 import type { IAgentHookProps } from '@/hooks/getAgentRoles';
 import { useGetAgentRoles } from '@/hooks/getAgentRoles';
 import { useGetInvestorBalance } from '@/hooks/getInvestorBalance';
-import { accountKDABalance } from '@/services/accountKDABalance';
 import { isAgent } from '@/services/isAgent';
 import { isComplianceOwner } from '@/services/isComplianceOwner';
 import { isFrozen } from '@/services/isFrozen';
@@ -75,7 +75,9 @@ export const AccountProvider: FC<PropsWithChildren> = ({ children }) => {
   const [isAgentState, setIsAgentState] = useState(false);
   const [isInvestorState, setIsInvestorState] = useState(false);
   const [isFrozenState, setIsFrozenState] = useState(false);
-  const [kdaBalance, setKdaBalance] = useState(-1);
+  const { data: kdaBalance } = useGetAccountKDABalance({
+    accountAddress: account?.address,
+  });
   const { ...accountRoles } = useGetAgentRoles({
     agent: account?.address,
   });
@@ -88,14 +90,6 @@ export const AccountProvider: FC<PropsWithChildren> = ({ children }) => {
     const resIsAgent = await isAgent({ agent: account.address });
     setIsAgentState(!!resIsAgent);
   };
-  const checkIsGasPayable = async (account: IWalletAccount) => {
-    const res = await accountKDABalance(
-      { accountName: account.address },
-      account,
-    );
-
-    setKdaBalance(res);
-  };
   const checkIsOwner = async (account: IWalletAccount) => {
     const resIsOwner = await isOwner({ owner: account.address });
     setIsOwnerState(!!resIsOwner);
@@ -185,7 +179,6 @@ export const AccountProvider: FC<PropsWithChildren> = ({ children }) => {
 
     // eslint-disable-next-line @typescript-eslint/no-floating-promises
     Promise.allSettled([
-      checkIsGasPayable(accountProp),
       checkIsOwner(accountProp),
       checkIsComplianceOwner(accountProp),
       checkIsInvestor(accountProp),

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

@@ -1,4 +1,6 @@
+import { useAccount } from '@/hooks/account';
 import { useFaucet } from '@/hooks/faucet';
+import { useGetAccountKDABalance } from '@/hooks/getAccountKDABalance';
 import { env } from '@/utils/env';
 import { MonoMonetizationOn } from '@kadena/kode-icons';
 import {
@@ -9,13 +11,15 @@ import {
 } from '@kadena/kode-ui';
 import { useNotifications } from '@kadena/kode-ui/patterns';
 import type { FC } from 'react';
-import { useState } from 'react';
 import { TransactionTypeSpinner } from '../TransactionTypeSpinner/TransactionTypeSpinner';
 import { TXTYPES } from '../TransactionsProvider/TransactionsProvider';
 
 export const GasPayableBanner: FC = () => {
   const { submit, isAllowed } = useFaucet();
-  const [isDone, setIsDone] = useState(false);
+  const { account } = useAccount();
+  const { data } = useGetAccountKDABalance({
+    accountAddress: account?.address,
+  });
   const { addNotification } = useNotifications();
 
   const handleAddKda = async () => {
@@ -29,13 +33,11 @@ export const GasPayableBanner: FC = () => {
           label: 'KDA added to account',
           message: `We added ${env.FAUCETAMOUNT} KDA to the account`,
         });
-
-        setIsDone(true);
       },
     );
   };
 
-  if (!isAllowed || isDone) return null;
+  if (!isAllowed || data) return null;
 
   return (
     <Notification intent="warning" role="status" type="stacked">

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

@@ -0,0 +1,53 @@
+import { useEventSubscriptionFilteredSubscription } from '@/__generated__/sdk';
+import { accountKDABalance } from '@/services/accountKDABalance';
+import { useEffect, useState } from 'react';
+
+export const useGetAccountKDABalance = ({
+  accountAddress,
+}: {
+  accountAddress?: string;
+}) => {
+  const [innerData, setInnerData] = useState(0);
+  const { data: toData } = useEventSubscriptionFilteredSubscription({
+    variables: {
+      qualifiedName: `coin.TRANSFER`,
+      parametersFilter: `{\"array_contains\":\"${accountAddress}\"}`,
+    },
+  });
+
+  const init = async () => {
+    if (!accountAddress) return;
+    const res = await accountKDABalance({ accountName: accountAddress });
+    setInnerData(res);
+  };
+
+  const formatData = (data: any) => {
+    console.log({ data });
+    data?.events?.map(({ parameters }: any) => {
+      const params = JSON.parse(parameters);
+      const fromAccount = params.length > 1 && params[0];
+      const toAccount = params.length > 2 && params[1];
+      const amount = params.length >= 3 && params[2];
+
+      if (!amount) return;
+      if (fromAccount === accountAddress) {
+        setInnerData((oldValue) => oldValue - amount);
+      }
+      if (toAccount === accountAddress) {
+        setInnerData((oldValue) => oldValue + amount);
+      }
+    });
+  };
+
+  useEffect(() => {
+    if (!accountAddress) return;
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    init();
+  }, [accountAddress]);
+
+  useEffect(() => {
+    formatData(toData);
+  }, [toData]);
+
+  return { data: innerData };
+};

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

@@ -1,22 +1,18 @@
-import type { IWalletAccount } from '@/components/AccountProvider/AccountType';
 import { getClient, getNetwork } from '@/utils/client';
 import { Pact } from '@kadena/client';
 
 export interface IAccountKDABalanceProps {
   accountName: string;
 }
 
-export const accountKDABalance = async (
-  data: IAccountKDABalanceProps,
-  account: IWalletAccount,
-) => {
+export const accountKDABalance = async (data: IAccountKDABalanceProps) => {
   const client = getClient();
   const transaction = Pact.builder
     .execution(
       `(let ((details (coin.details "${data.accountName}")))(let ((principal (create-principal (at "guard" details)))){"details":details, "principal":principal}))`,
     )
     .setMeta({
-      senderAccount: account.address,
+      senderAccount: data.accountName,
       chainId: getNetwork().chainId,
     })
     .addData('account', data.accountName)

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

@@ -0,0 +1,16 @@
+import { gql } from '@apollo/client';
+import type { DocumentNode } from 'graphql';
+
+export const coreEvents: DocumentNode = gql`
+  subscription eventSubscriptionFiltered(
+    $qualifiedName: String!
+    $parametersFilter: String!
+  ) {
+    events(
+      qualifiedEventName: $qualifiedName
+      parametersFilter: $parametersFilter
+    ) {
+      parameters
+    }
+  }
+`;