fix: checking if gas is insufficient (#3584)

DimensionDev · Dec 24, 2024 · 65b0c9c · 65b0c9c
1 parent ddd185f
commit 65b0c9c
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 12 deletions.
diff --git a/src/hooks/useAvailableBalance.ts b/src/hooks/useAvailableBalance.ts
@@ -5,13 +5,18 @@ import { useBalance, useEstimateFeesPerGas } from 'wagmi';
 
 import { config } from '@/configs/wagmiClient.js';
 import { formatBalance } from '@/helpers/formatBalance.js';
-import { multipliedBy, ZERO } from '@/helpers/number.js';
+import { isGreaterThan, multipliedBy, ZERO } from '@/helpers/number.js';
 import { type ChainContextOverride, useChainContext } from '@/hooks/useChainContext.js';
 
 export function useAvailableBalance(address: `0x${string}`, gas: number, override?: ChainContextOverride) {
     const isNativeToken = isNativeTokenAddress(address);
     const { chainId, isEIP1559, account } = useChainContext(override);
 
+    const { data: nativeBalance } = useBalance({
+        address: account as `0x${string}`,
+        config,
+        chainId,
+    });
     const { data: balance } = useBalance({
         token: !isNativeToken ? address : undefined,
         address: account as `0x${string}`,
@@ -35,6 +40,7 @@ export function useAvailableBalance(address: `0x${string}`, gas: number, overrid
                 ...balance,
                 origin: balance,
                 gasFee,
+                insufficientGas: isGreaterThan(gasFee, nativeBalance?.value.toString() ?? 0),
             };
 
         const result = balance.value - BigInt(gasFee.toNumber());
@@ -44,6 +50,7 @@ export function useAvailableBalance(address: `0x${string}`, gas: number, overrid
             value: result < 0 ? 0 : result,
             gasFee,
             origin: balance,
+            insufficientGas: result < 0,
         };
-    }, [isNativeToken, balance, isEIP1559, gas, gasPrice, maxFeePerGas]);
+    }, [isNativeToken, balance, isEIP1559, gas, gasPrice, maxFeePerGas, nativeBalance?.value]);
 }
diff --git a/src/modals/RedPacketModal/MainView.tsx b/src/modals/RedPacketModal/MainView.tsx
@@ -80,7 +80,7 @@ export function MainView() {
     );
 
     const balanceResult = useAvailableBalance(token.address as `0x${string}`, defaultGas.toNumber(), { chainId });
-    const { gasFee, value: balance = ZERO, origin: originBalance } = balanceResult ?? {};
+    const { gasFee, value: balance = ZERO, origin: originBalance, insufficientGas } = balanceResult ?? {};
 
     const amount = rightShift(rawAmount || '0', token?.decimals);
     const rawTotalAmount = useMemo(
@@ -129,15 +129,12 @@ export function MainView() {
     // #region validation
     const noShares = shares === 0;
     const isGteMaxShares = shares > 255;
-    const isInSufficientBalance =
+    const insufficientBalance =
         isGreaterThan(minTotalAmount, balance.toString()) || isGreaterThan(totalAmount, balance.toString());
     const noAmount = isZero(amount);
-    const isInSufficientBalanceForGas =
-        gasFee && !isZero(gasFee) && originBalance && isGreaterThan(gasFee.toString(), originBalance.value.toString());
     const isNotEnoughAllowance = !isUndefined(allowance) && !isGreaterThan(allowance.toString(), totalAmount);
 
-    const disabled =
-        noShares || isGteMaxShares || isInSufficientBalance || noAmount || !isDivisible || isInSufficientBalanceForGas;
+    const disabled = noShares || isGteMaxShares || insufficientBalance || noAmount || !isDivisible || insufficientGas;
 
     const loading = priceLoading || gasLoading || allowanceLoading;
     // #endregion
@@ -146,7 +143,7 @@ export function MainView() {
     const buttonText = useMemo(() => {
         if (noShares) return <Trans>Enter Number of Winners</Trans>;
         if (isGteMaxShares) return <Trans>At most 255 recipients</Trans>;
-        if (isInSufficientBalance) return <Trans>Insufficient Balance</Trans>;
+        if (insufficientBalance) return <Trans>Insufficient Balance</Trans>;
         if (noAmount) {
             return isRandom ? <Trans>Enter Total Amount</Trans> : <Trans>Enter Amount Each</Trans>;
         }
@@ -177,20 +174,20 @@ export function MainView() {
             );
         }
 
-        if (isInSufficientBalanceForGas) {
+        if (insufficientGas) {
             return <Trans>Insufficient Balance for Gas Fee</Trans>;
         }
 
         return <Trans>Next</Trans>;
     }, [
         noShares,
         isGteMaxShares,
-        isInSufficientBalance,
+        insufficientBalance,
         noAmount,
         isDivisible,
         token.decimals,
         token.symbol,
-        isInSufficientBalanceForGas,
+        insufficientGas,
         isNotEnoughAllowance,
         isRandom,
     ]);