fix(web): use correct hooks for balance fetching

kleros · Oct 2, 2024 · d603393 · d603393
1 parent 2ee9148
commit d603393
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 17 deletions.
diff --git a/web/src/pages/MyTransactions/TransactionDetails/PreviewCardButtons/RaiseDisputeButton.tsx b/web/src/pages/MyTransactions/TransactionDetails/PreviewCardButtons/RaiseDisputeButton.tsx
@@ -38,7 +38,7 @@ const RaiseDisputeButton: React.FC<IRaiseDisputeButton> = ({ toggleModal, button
 
   const { data: payArbitrationFeeByBuyerConfig, isLoading: isLoadingBuyerConfig, isError: isErrorBuyerConfig } = useSimulateEscrowUniversalPayArbitrationFeeByBuyer({
     query: {
-      enabled: isBuyer || !insufficientBalance,
+      enabled: isBuyer && !insufficientBalance,
     },
     args: [BigInt(id)],
     value: arbitrationCost,

diff --git a/web/src/pages/NewTransaction/NavigationButtons/DepositPaymentButton.tsx b/web/src/pages/NewTransaction/NavigationButtons/DepositPaymentButton.tsx
@@ -17,6 +17,7 @@ import {
   useReadContract,
   useWriteContract,
   useSimulateContract,
+  useBalance,
 } from "wagmi";
 import { parseEther, parseUnits } from "viem";
 import { normalize } from 'viem/ens'
@@ -68,23 +69,33 @@ const DepositPaymentButton: React.FC = () => {
 
   const finalRecipientAddress = ensResult.data || sellerAddress;
 
-  const { data: balanceData } = useReadContract({
-    address: isNativeTransaction ? undefined : sendingToken?.address as `0x${string}`,
+  const { data: nativeBalance } = useBalance({
+    address: isNativeTransaction ? address as `0x${string}` : undefined,
+  });
+
+  const { data: tokenBalance } = useReadContract({
+    address: !isNativeTransaction ? sendingToken?.address as `0x${string}` : undefined,
     abi: erc20Abi,
-    functionName: "balanceOf",
+    functionName: 'balanceOf',
     args: [address as `0x${string}`],
   });
-
+  
   const insufficientBalance = useMemo(() => {
-    return BigInt(sendingQuantity.toString()) > BigInt(balanceData.toString());
-  }, [sendingQuantity, balanceData]);
+    if (isUndefined(sendingQuantity)) return true;
+
+    if (isNativeTransaction) {
+      return nativeBalance ? parseFloat(sendingQuantity) > parseFloat(nativeBalance.value.toString()) : true;
+    }
+
+    return isUndefined(tokenBalance) ? true : parseFloat(sendingQuantity) > parseFloat(tokenBalance.toString());
+  }, [sendingQuantity, tokenBalance, nativeBalance, isNativeTransaction]);
 
   const { data: allowance, refetch: refetchAllowance } = useReadContract({
     query: { enabled: !isNativeTransaction && chain?.id && !insufficientBalance },
-    address: sendingToken?.address,
+    address: sendingToken?.address as `0x${string}`,
     abi: erc20Abi,
     functionName: "allowance",
-    args: [address, escrowUniversalAddress?.[chain?.id]],
+    args: [address as `0x${string}`, escrowUniversalAddress?.[chain?.id]],
   });
 
   useEffect(() => {

diff --git a/web/src/pages/NewTransaction/Terms/Payment/GeneralTransaction/TokenAndAmount/index.tsx b/web/src/pages/NewTransaction/Terms/Payment/GeneralTransaction/TokenAndAmount/index.tsx
@@ -1,7 +1,7 @@
 import React, { useMemo, useState, useEffect } from "react";
 import styled from "styled-components";
 import { responsiveSize } from "styles/responsiveSize";
-import { useAccount, useReadContract } from "wagmi";
+import { useAccount, useReadContract, useBalance } from "wagmi";
 import { useNewTransactionContext } from "context/NewTransactionContext";
 import { getFormattedBalance } from "utils/getFormattedBalance";
 import { erc20Abi } from "viem";
@@ -34,23 +34,36 @@ const TokenAndAmount: React.FC<ITokenAndAmount> = ({ quantity, setQuantity }) =>
   const { address } = useAccount();
   const { sendingToken, setHasSufficientNativeBalance } = useNewTransactionContext();
 
-  const { data: balanceData } = useReadContract({
-    address: sendingToken?.address as `0x${string}`,
+  const isNativeTransaction = sendingToken?.address === 'native';
+
+  const { data: nativeBalance } = useBalance({
+    address: isNativeTransaction ? address as `0x${string}` : undefined,
+  });
+
+  const { data: tokenBalance } = useReadContract({
+    address: !isNativeTransaction ? sendingToken?.address as `0x${string}` : undefined,
     abi: erc20Abi,
     functionName: 'balanceOf',
     args: [address as `0x${string}`],
   });
 
   const { data: tokenDecimal } = useReadContract({
-    address: sendingToken?.address as `0x${string}`,
+    address: !isNativeTransaction ? sendingToken?.address as `0x${string}` : undefined,
     abi: erc20Abi,
     functionName: 'decimals',
   });
 
   const [error, setError] = useState("");
 
+  const balanceAmount = useMemo(() => {
+    if (isNativeTransaction) {
+      return nativeBalance ? parseFloat(formatUnits(nativeBalance.value, nativeBalance.decimals)) : 0;
+    } else {
+      return tokenBalance && tokenDecimal ? parseFloat(formatUnits(tokenBalance, tokenDecimal)) : 0;
+    }
+  }, [isNativeTransaction, nativeBalance, tokenBalance, tokenDecimal]);
+
   useEffect(() => {
-    const balanceAmount = balanceData && tokenDecimal ? parseFloat(formatUnits(balanceData, tokenDecimal)) : 0;
     const enteredAmount = parseFloat(quantity);
 
     if (quantity && balanceAmount < enteredAmount) {
@@ -63,9 +76,12 @@ const TokenAndAmount: React.FC<ITokenAndAmount> = ({ quantity, setQuantity }) =>
       setError("");
       setHasSufficientNativeBalance(true);
     }
-  }, [balanceData, quantity, setHasSufficientNativeBalance, sendingToken]);
+  }, [quantity, setHasSufficientNativeBalance, sendingToken]);
 
-  const formattedBalance = useMemo(() => getFormattedBalance(balanceData, sendingToken), [balanceData, sendingToken]);
+  const formattedBalance = useMemo(() => {
+    const balance = isNativeTransaction ? nativeBalance : tokenBalance;
+    return getFormattedBalance(balance, sendingToken);
+  }, [balanceAmount, sendingToken, isNativeTransaction, nativeBalance, tokenBalance]);
 
   return (
     <Container>
@@ -74,7 +90,7 @@ const TokenAndAmount: React.FC<ITokenAndAmount> = ({ quantity, setQuantity }) =>
         <TokenSelector />
         <MaxBalance
           formattedBalance={formattedBalance}
-          rawBalance={parseFloat(formatUnits(balanceData, tokenDecimal))}
+          rawBalance={balanceAmount}
           setQuantity={setQuantity}
         />
       </TokenSelectorAndMaxBalance>