feat(dcellar-web-ui): enhance gas fee estimation for max feature on t…

…ransferin with TW (#331)

apps/dcellar-web-ui/src/modules/wallet/components/Amount.tsx

@@ -11,7 +11,7 @@ import {
   Text,
 } from '@totejs/uikit';
 import { useCallback, useMemo } from 'react';
-import { useNetwork } from 'wagmi';
+import { useAccount, useNetwork } from 'wagmi';
 import { isEmpty } from 'lodash-es';
 import BigNumber from 'bignumber.js';
 import { FieldErrors, UseFormRegister, UseFormSetValue, UseFormWatch } from 'react-hook-form';
@@ -103,6 +103,7 @@ export const Amount = ({
   const { gasFee, relayerFee } = feeData;
   const { isLoading } = useChainsBalance();
   const { chain } = useNetwork();
+  const { connector } = useAccount();
   const isShowMaxButton = useMemo(() => {
     return isRightChain(chain?.id, curInfo?.chainId);
   }, [chain?.id, curInfo?.chainId]);
@@ -141,7 +142,8 @@ export const Amount = ({
       const [realTimeFee, error] = await refreshFee(
         BN(balance).minus(DefaultTransferFee.transfer_in.total).toString(),
       );
-      realTimeFee && setMaxAmount(balance, realTimeFee, setValue);
+      const isTwTransferMax = connector && connector.id.toLowerCase() === 'trust';
+      realTimeFee && setMaxAmount(balance, realTimeFee, setValue, isTwTransferMax);
       return;
     }
 

apps/dcellar-web-ui/src/modules/wallet/utils/common.ts

@@ -3,9 +3,13 @@ import { TFeeData, TWalletFromValues } from '../type';
 import { CRYPTOCURRENCY_DISPLAY_PRECISION } from '../constants';
 import { UseFormSetValue } from 'react-hook-form';
 
-export const setMaxAmount = (balance: string, feeData: TFeeData, setValue: UseFormSetValue<TWalletFromValues>) => {
+
+// When logging in through TW and using the "max" functionality for the "transfer in" operation, please be aware that the gas fee calculated in the TW wallet interface may be higher than the actual fee. Therefore, we have included a safety value to ensure successful transactions. If you prefer to use the max functionality with a more accurate gas fee estimation, we recommend using MetaMask.
+const TW_GAS_FEE_SAFETY_MULTIPLIER = 1.6;
+export const setMaxAmount = (balance: string, feeData: TFeeData, setValue: UseFormSetValue<TWalletFromValues>, isTwTransferMax?: boolean) => {
+  const gasFee = isTwTransferMax ? BN(feeData.gasFee).times(TW_GAS_FEE_SAFETY_MULTIPLIER) : feeData.gasFee;
   const availableBalance = BN(balance)
-    .minus(feeData.gasFee)
+    .minus(gasFee)
     .minus(feeData.relayerFee)
     .dp(CRYPTOCURRENCY_DISPLAY_PRECISION, 1)
     .toNumber();