fix(swapbox): update native token balance correctly

packages/icons/general/ChevronUp.tsx

@@ -4,6 +4,7 @@ export const ChevronUpIcon = createIcon(
     'ChevronUpIcon',
     <g>
         <path
+            fill="currentColor"
             d="M5.833 10.833 10 15l4.167-4.167M5.833 5 10 9.167 14.167 5"
             strokeWidth="1.25"
             strokeLinecap="round"

packages/mask/src/extension/popups/pages/Swap/SwapBox/index.tsx

@@ -3,17 +3,13 @@ import { useMemo } from 'react'
 import { useHistory, useLocation } from 'react-router-dom'
 import { useUpdateEffect } from 'react-use'
 import { Trader } from '../../../../../plugins/Trader/SNSAdaptor/trader/Trader'
-import { TradeContext, useTradeContext } from '../../../../../plugins/Trader/trader/useTradeContext'
-import { useCurrentTradeProvider } from '../../../../../plugins/Trader/trending/useCurrentTradeProvider'
 import type { Coin } from '../../../../../plugins/Trader/types'
 import { PopupRoutes } from '@masknet/shared-base'
 
 export function SwapBox() {
     const location = useLocation()
     const history = useHistory()
     const chainId = useChainId()
-    const tradeProvider = useCurrentTradeProvider(chainId)
-    const tradeContext = useTradeContext(tradeProvider)
 
     const coin = useMemo(() => {
         if (!location.search) return undefined
@@ -31,9 +27,5 @@ export function SwapBox() {
         history.replace(PopupRoutes.Swap)
     }, [chainId])
 
-    return (
-        <TradeContext.Provider value={tradeContext}>
-            <Trader coin={coin} chainId={chainId} />
-        </TradeContext.Provider>
-    )
+    return <Trader coin={coin} chainId={chainId} />
 }

packages/mask/src/plugins/Trader/SNSAdaptor/trader/TradeForm.tsx

@@ -70,6 +70,7 @@ const useStyles = makeStyles<{ isDashboard: boolean; isPopup: boolean }>()((them
             stroke: isDashboard ? theme.palette.text.primary : theme.palette.text.strong,
             transition: 'all 300ms',
             cursor: 'pointer',
+            color: theme.palette.text.primary,
         },
         reverseChevron: {
             transform: 'rotate(-180deg)',

packages/mask/src/plugins/Trader/SNSAdaptor/trader/Trader.tsx

@@ -141,35 +141,33 @@ export function Trader(props: TraderProps) {
 
     useEffect(() => {
         if (
-            inputToken &&
-            inputToken?.type !== EthereumTokenType.Native &&
-            inputTokenBalance_ &&
-            !loadingInputTokenBalance
-        )
-            dispatchTradeStore({
-                type: AllProviderTradeActionType.UPDATE_INPUT_TOKEN_BALANCE,
-                balance: inputTokenBalance_,
-            })
+            !inputToken ||
+            inputToken.type === EthereumTokenType.Native ||
+            !inputTokenBalance_ ||
+            loadingInputTokenBalance
+        ) {
+            return
+        }
+        dispatchTradeStore({
+            type: AllProviderTradeActionType.UPDATE_INPUT_TOKEN_BALANCE,
+            balance: inputTokenBalance_,
+        })
+    }, [inputToken, inputTokenBalance_, loadingInputTokenBalance])
+
+    useEffect(() => {
         if (
-            outputToken &&
-            outputToken?.type !== EthereumTokenType.Native &&
-            outputTokenBalance_ &&
-            !loadingOutputTokenBalance
+            !outputToken ||
+            outputToken.type === EthereumTokenType.Native ||
+            !outputTokenBalance_ ||
+            loadingOutputTokenBalance
         ) {
-            dispatchTradeStore({
-                type: AllProviderTradeActionType.UPDATE_OUTPUT_TOKEN_BALANCE,
-                balance: outputTokenBalance_,
-            })
+            return
         }
-    }, [
-        inputToken,
-        outputToken,
-        inputTokenBalance_,
-        outputTokenBalance_,
-        loadingInputTokenBalance,
-        loadingOutputTokenBalance,
-        NATIVE_TOKEN_ADDRESS,
-    ])
+        dispatchTradeStore({
+            type: AllProviderTradeActionType.UPDATE_OUTPUT_TOKEN_BALANCE,
+            balance: outputTokenBalance_,
+        })
+    }, [outputToken, outputTokenBalance_, loadingOutputTokenBalance])
 
     // #region select token
     const excludeTokens = [inputToken, outputToken].filter(Boolean).map((x) => x?.address) as string[]
@@ -324,7 +322,7 @@ export function Trader(props: TraderProps) {
     // #endregion
 
     // Query the balance of native tokens on target chain
-    useUpdateBalance(chainId, currentChainId)
+    useUpdateBalance(chainId)
     // #endregion
 
     // #region reset focused trade when chainId, inputToken, outputToken, inputAmount be changed

packages/mask/src/plugins/Trader/SNSAdaptor/trader/hooks/useUpdateBalance.ts

@@ -3,53 +3,53 @@ import {
     EthereumTokenType,
     isSameAddress,
     useAccount,
-    useProviderType,
+    useBalance,
     useTokenConstants,
-    useWeb3,
 } from '@masknet/web3-shared-evm'
-import { useAsync } from 'react-use'
+import { useEffect } from 'react'
 import { AllProviderTradeActionType, AllProviderTradeContext } from '../../../trader/useAllProviderTradeContext'
 
-export function useUpdateBalance(chainId: ChainId, currentChainId: ChainId) {
-    const web3 = useWeb3({ chainId })
+export function useUpdateBalance(chainId: ChainId) {
     const currentAccount = useAccount()
-    const currentProvider = useProviderType()
     const { NATIVE_TOKEN_ADDRESS } = useTokenConstants()
 
     const {
         tradeState: [{ inputToken, outputToken }, dispatchTradeStore],
     } = AllProviderTradeContext.useContainer()
+    const balance = useBalance(chainId)
 
-    return useAsync(async () => {
-        if (!currentAccount) {
-            dispatchTradeStore({
-                type: AllProviderTradeActionType.UPDATE_INPUT_TOKEN_BALANCE,
-                balance: '0',
-            })
+    useEffect(() => {
+        if (currentAccount) return
+        dispatchTradeStore({
+            type: AllProviderTradeActionType.UPDATE_INPUT_TOKEN_BALANCE,
+            balance: '0',
+        })
 
-            dispatchTradeStore({
-                type: AllProviderTradeActionType.UPDATE_OUTPUT_TOKEN_BALANCE,
-                balance: '0',
-            })
-            return
-        }
+        dispatchTradeStore({
+            type: AllProviderTradeActionType.UPDATE_OUTPUT_TOKEN_BALANCE,
+            balance: '0',
+        })
+        return
+    }, [currentAccount])
 
-        if (chainId && currentProvider && currentAccount) {
-            const balance = await web3.eth.getBalance(currentAccount)
+    useEffect(() => {
+        if (!currentAccount) return
+        const value = inputToken?.type === EthereumTokenType.Native ? balance.value : '0'
+        dispatchTradeStore({
+            type: AllProviderTradeActionType.UPDATE_INPUT_TOKEN_BALANCE,
+            balance: value || '0',
+        })
+    }, [currentAccount, inputToken?.type, balance.value])
 
-            dispatchTradeStore({
-                type: AllProviderTradeActionType.UPDATE_INPUT_TOKEN_BALANCE,
-                balance: inputToken?.type === EthereumTokenType.Native ? balance : '0',
-            })
-
-            dispatchTradeStore({
-                type: AllProviderTradeActionType.UPDATE_OUTPUT_TOKEN_BALANCE,
-                balance:
-                    isSameAddress(outputToken?.address, NATIVE_TOKEN_ADDRESS) ||
-                    outputToken?.type === EthereumTokenType.Native
-                        ? balance
-                        : '0',
-            })
-        }
-    }, [web3, inputToken, outputToken, currentAccount, currentProvider, chainId, currentChainId, NATIVE_TOKEN_ADDRESS])
+    useEffect(() => {
+        if (!currentAccount) return
+        const value =
+            outputToken?.type === EthereumTokenType.Native || isSameAddress(outputToken?.address, NATIVE_TOKEN_ADDRESS)
+                ? balance.value
+                : '0'
+        dispatchTradeStore({
+            type: AllProviderTradeActionType.UPDATE_OUTPUT_TOKEN_BALANCE,
+            balance: value || '0',
+        })
+    }, [currentAccount, outputToken?.type, outputToken?.address, balance.value])
 }

packages/mask/src/plugins/Trader/trader/useAllProviderTradeContext.ts

@@ -74,8 +74,8 @@ function reducer(state: AllProviderTradeState, action: AllProviderSwapAction): A
 export function useAllProviderTradeContext() {
     const [tradeStore, dispatchTradeStore] = useReducer(reducer, {
         inputAmount: '',
-        inputTokenBalance: '',
-        outputTokenBalance: '',
+        inputTokenBalance: '0',
+        outputTokenBalance: '0',
     })
     const [temporarySlippage, setTemporarySlippage] = useState<number | undefined>()
     const { inputAmount, inputToken, outputToken } = tradeStore

packages/web3-shared/evm/hooks/useAssetsFromChain.ts

@@ -4,7 +4,7 @@ import { Asset, ChainId, EthereumTokenType, FungibleTokenDetailed } from '../typ
 import { useTokensBalance } from './useTokensBalance'
 import { useChainDetailed } from './useChainDetailed'
 import { getChainDetailed, EMPTY_LIST } from '../utils'
-import { useBalance } from '.'
+import { useBalance } from './useBalance'
 
 export function useAssetsFromChain(tokens: FungibleTokenDetailed[], chainId?: ChainId) {
     const { value: balance = '0' } = useBalance(chainId)