FIL-368 Fetch client remaining data cap (#152)

* FIL-368 Fetch client remaining DataCap

src/components/cards/AppInfoCard.tsx

@@ -107,6 +107,7 @@ const AppInfoCard: React.FC<ComponentProps> = ({
     mutationChangeAllowedSPsApproval,
   } = useApplicationActions(initialApplication, repo, owner)
 
+  const { getAllowanceFromClientContract } = useWallet()
   const [buttonText, setButtonText] = useState('')
   const [modalMessage, setModalMessage] = useState<ReactNode | null>(null)
   const [error, setError] = useState<boolean>(false)
@@ -199,10 +200,32 @@ const AppInfoCard: React.FC<ComponentProps> = ({
         unit: amountType,
         isDialogOpen: false,
       })
+
       const address = application.Lifecycle['On Chain Address']
-      const response = await getAllowanceForClient(address)
+
+      let clientAllowance
+
+      const contractAddress = application['Client Contract Address'] ?? address
+
+      const response = await getAllowanceForClient(contractAddress)
+
+      if (application['Client Contract Address']) {
+        clientAllowance = await getAllowanceFromClientContract(
+          address,
+          application['Client Contract Address'],
+        )
+      }
+
       if (response.success) {
-        const allowance = parseFloat(response.data ?? 0)
+        const allowanceResult = clientAllowance
+          ? Number(clientAllowance) > parseFloat(response.data)
+            ? response.data
+            : clientAllowance.toString()
+          : response.data
+
+        const allowance = parseFloat(
+          allowanceResult.length ? allowanceResult : '0',
+        )
         const lastAllocation = getLastDatacapAllocation(application)
         if (lastAllocation === undefined) return
 
@@ -252,7 +275,11 @@ const AppInfoCard: React.FC<ComponentProps> = ({
         }
       }
     })()
-  }, [application, isApplicationUpdatedLessThanOneMinuteAgo])
+  }, [
+    application,
+    isApplicationUpdatedLessThanOneMinuteAgo,
+    getAllowanceFromClientContract,
+  ])
 
   useEffect(() => {
     if (
@@ -361,7 +388,7 @@ const AppInfoCard: React.FC<ComponentProps> = ({
       return
     }
 
-    if (isApiCalling && application.Lifecycle.State !== 'ChangingSp') {
+    if (isApiCalling) {
       setButtonText('Processing...')
       return
     }

src/hooks/useWallet.ts

@@ -74,6 +74,10 @@ interface WalletState {
     clientAddress: string,
     contractAddress: string,
   ) => Promise<string[]>
+  getAllowanceFromClientContract: (
+    clientAddress: string,
+    contractAddress: string,
+  ) => Promise<bigint>
   submitClientAllowedSpsAndMaxDeviation: (
     clientAddress: string,
     contractAddress: string,
@@ -749,6 +753,41 @@ const useWallet = (): WalletState => {
     [],
   )
 
+  const getAllowanceFromClientContract = useCallback(
+    async (client: string, contractAddress: string): Promise<bigint> => {
+      const abi = parseAbi([
+        'function allowances(address client) external view returns (uint256)',
+      ])
+
+      const [evmClientAddress, evmContractAddress] = await Promise.all([
+        getEvmAddressFromFilecoinAddress(client),
+        getEvmAddressFromFilecoinAddress(contractAddress),
+      ])
+
+      const calldataHex: Hex = encodeFunctionData({
+        abi,
+        args: [evmClientAddress.data],
+      })
+
+      const response = await makeStaticEthCall(
+        evmContractAddress.data,
+        calldataHex,
+      )
+
+      if (response.error) {
+        return BigInt(0)
+      }
+
+      const decodedData = decodeFunctionResult({
+        abi,
+        data: response.data as `0x${string}`,
+      })
+
+      return decodedData
+    },
+    [],
+  )
+
   const getClientConfig = useCallback(
     async (client: string, contractAddress: string): Promise<string | null> => {
       const abi = parseAbi([
@@ -1054,6 +1093,7 @@ const useWallet = (): WalletState => {
     getClientConfig,
     getChangeSpsProposalTxs,
     sendClientIncreaseAllowance,
+    getAllowanceFromClientContract,
   }
 }