Merge branch 'fix/ui-20240801' into tmp/20240731

src/ui/utils/token.ts

@@ -1,10 +1,11 @@
 import { BigNumber } from 'bignumber.js';
-import { TokenItem } from '@rabby-wallet/rabby-api/dist/types';
+import { GasLevel, TokenItem } from '@rabby-wallet/rabby-api/dist/types';
 import { Contract, providers } from 'ethers';
 import { hexToString } from 'web3-utils';
 import { AbstractPortfolioToken } from './portfolio/types';
 import { CustomTestnetToken } from '@/background/service/customTestnet';
 import { findChain } from '@/utils/chain';
+import { MINIMUM_GAS_LIMIT } from '@/constant';
 
 export const geTokenDecimals = async (
   id: string,
@@ -211,3 +212,48 @@ export const isTestnetTokenItem = (token: TokenItem) => {
     serverId: token.chain,
   })?.isTestnet;
 };
+
+function checkGasIsEnough({
+  token_balance_hex,
+  price,
+  gasLimit,
+}: {
+  token_balance_hex: TokenItem['raw_amount_hex_str'];
+  price: number;
+  gasLimit: number;
+}) {
+  return new BigNumber(token_balance_hex || 0, 16).gte(
+    new BigNumber(gasLimit).times(price)
+  );
+}
+export function checkIfTokenBalanceEnough(
+  token: TokenItem,
+  options?: {
+    gasList?: GasLevel[];
+    gasLimit?: number;
+  }
+) {
+  const { gasLimit = MINIMUM_GAS_LIMIT, gasList = [] } = options || {};
+  const normalLevel = gasList?.find((e) => e.level === 'normal');
+  const slowLevel = gasList?.find((e) => e.level === 'slow');
+  const customLevel = gasList?.find((e) => e.level === 'custom');
+
+  const isNormalEnough = checkGasIsEnough({
+    token_balance_hex: token?.raw_amount_hex_str,
+    price: normalLevel?.price || 0,
+    gasLimit,
+  });
+  const isSlowEnough = checkGasIsEnough({
+    token_balance_hex: token?.raw_amount_hex_str,
+    price: slowLevel?.price || 0,
+    gasLimit,
+  });
+
+  return {
+    normalLevel,
+    isNormalEnough,
+    isSlowEnough,
+    slowLevel,
+    customLevel,
+  };
+}

src/ui/views/SendToken/index.tsx

@@ -65,7 +65,10 @@ import { Chain } from '@debank/common';
 import IconAlertInfo from './alert-info.svg';
 import { formatTxInputDataOnERC20 } from '@/ui/utils/transaction';
 import ThemeIcon from '@/ui/component/ThemeMode/ThemeIcon';
-import { customTestnetTokenToTokenItem } from '@/ui/utils/token';
+import {
+  checkIfTokenBalanceEnough,
+  customTestnetTokenToTokenItem,
+} from '@/ui/utils/token';
 import { copyAddress } from '@/ui/utils/clipboard';
 import { MaxButton } from './components/MaxButton';
 import {
@@ -1320,6 +1323,23 @@ const SendToken = () => {
     selectedGasLevel,
   ]);
 
+  useEffect(() => {
+    if (currentToken && gasList) {
+      const result = checkIfTokenBalanceEnough(currentToken, {
+        gasList,
+        gasLimit: MINIMUM_GAS_LIMIT,
+      });
+
+      if (result.isNormalEnough && result.normalLevel) {
+        setSelectedGasLevel(result.normalLevel);
+      } else if (result.isSlowEnough && result.slowLevel) {
+        setSelectedGasLevel(result.slowLevel);
+      } else if (result.customLevel) {
+        setSelectedGasLevel(result.customLevel);
+      }
+    }
+  }, [currentToken, gasList]);
+
   return (
     <div className="send-token">
       <PageHeader onBack={handleClickBack} forceShowBack>
@@ -1614,7 +1634,7 @@ const SendToken = () => {
       <SendReserveGasPopup
         selectedItem={selectedGasLevel?.level as GasLevelType}
         chain={chain}
-        limit={MINIMUM_GAS_LIMIT}
+        limit={Math.max(estimateGas, MINIMUM_GAS_LIMIT)}
         onGasChange={(gasLevel) => {
           handleGasLevelChanged(gasLevel);
         }}