fix: 3x gas fee issue

apps/web/src/app/pages/trade/supply/_components/SupplyLiquidityModal.tsx

@@ -1,9 +1,10 @@
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback, useEffect, useMemo } from 'react';
 
 import { Currency, CurrencyAmount } from '@balancednetwork/sdk-core';
 import { Trans, t } from '@lingui/macro';
 import { Box, Flex } from 'rebass/styled-components';
 import styled from 'styled-components';
+import { formatUnits } from 'viem';
 
 import { TextButton } from '@/app/components/Button';
 import { StyledButton } from '@/app/components/Button/StyledButton';
@@ -21,11 +22,13 @@ import {
   ICON_XCALL_NETWORK_ID,
   XToken,
   XTransactionStatus,
+  convertCurrencyAmount,
   getNetworkDisplayName,
   useXAddLiquidity,
   useXCallFee,
   useXTokenDepositAmount,
   useXTransactionStore,
+  xChainMap,
 } from '@balancednetwork/xwagmi';
 import { useQueryClient } from '@tanstack/react-query';
 import { AnimatePresence, motion } from 'framer-motion';
@@ -111,9 +114,22 @@ export default function SupplyLiquidityModal({ isOpen, onClose, parsedAmounts, c
     }
   };
 
-  const { formattedXCallFee } = useXCallFee(lpXChainId, ICON_XCALL_NETWORK_ID);
+  const { xCallFee } = useXCallFee(lpXChainId, ICON_XCALL_NETWORK_ID);
+  const formattedXCallFee: string = useMemo(() => {
+    return xCallFee
+      ? formatUnits(xCallFee.rollback * 3n, xChainMap[lpXChainId].nativeCurrency.decimals) +
+          ' ' +
+          xChainMap[lpXChainId].nativeCurrency.symbol
+      : '';
+  }, [xCallFee, lpXChainId]);
+
   const { isWrongChain, handleSwitchChain } = useEvmSwitchChain(lpXChainId);
-  const gasChecker = useXCallGasChecker(lpXChainId, undefined);
+  const gasChecker = useXCallGasChecker(
+    lpXChainId,
+    parsedAmounts[Field.CURRENCY_A] ? convertCurrencyAmount(lpXChainId, parsedAmounts[Field.CURRENCY_A]) : undefined,
+    3,
+  );
+
   return (
     <>
       <Modal isOpen={isOpen} onDismiss={() => undefined}>

apps/web/src/hooks/useXCallGasChecker.tsx

@@ -15,6 +15,7 @@ import { useMemo } from 'react';
 function useXCallGasChecker(
   xChainId: XChainId,
   inputAmount: CurrencyAmount<XToken> | CurrencyAmount<Currency> | undefined,
+  multiplier: number | undefined = 1,
 ): { hasEnoughGas: boolean; errorMessage: string } {
   const balances = useCrossChainWalletBalances();
 
@@ -28,8 +29,8 @@ function useXCallGasChecker(
       const nativeCurrency: XToken = xTokenMap[xChainId].find(x => x.isNativeToken)!;
 
       const gasThreshold = inputAmount?.currency.isNativeToken
-        ? xChain.gasThreshold + Number(inputAmount.toFixed())
-        : xChain.gasThreshold;
+        ? xChain.gasThreshold * multiplier + Number(inputAmount.toFixed())
+        : xChain.gasThreshold * multiplier;
 
       const hasEnoughGas =
         balances[xChainId] &&
@@ -38,7 +39,7 @@ function useXCallGasChecker(
         );
 
       const errorMessage = !hasEnoughGas
-        ? `You need at least ${formatBigNumber(new BigNumber(xChain.gasThreshold), 'currency')} ${
+        ? `You need at least ${formatBigNumber(new BigNumber(xChain.gasThreshold * multiplier), 'currency')} ${
             nativeCurrency.symbol
           } in your wallet to pay for transaction fees on ${getNetworkDisplayName(xChainId)}.`
         : '';
@@ -49,7 +50,7 @@ function useXCallGasChecker(
     }
 
     return { hasEnoughGas: false, errorMessage: 'Unknown' };
-  }, [balances, xChainId, inputAmount]);
+  }, [balances, xChainId, inputAmount, multiplier]);
 }
 
 export default useXCallGasChecker;