fix: swap box bug

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

@@ -23,6 +23,7 @@ const useStyles = makeStyles<{ isDashboard: boolean }>()((theme, { isDashboard }
         fontSize: 14,
         lineHeight: '20px',
         color: theme.palette.text.primary,
+        wordBreak: 'keep-all',
     },
     amount: {
         marginLeft: 10,

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

@@ -28,7 +28,7 @@ import { TradeForm } from './TradeForm'
 import { AllProviderTradeActionType, AllProviderTradeContext } from '../../trader/useAllProviderTradeContext'
 import { MINIMUM_AMOUNT, UST } from '../../constants'
 import { SelectTokenDialogEvent, WalletMessages } from '@masknet/plugin-wallet'
-import { useAsync, useUpdateEffect } from 'react-use'
+import { useAsync, useUnmount, useUpdateEffect } from 'react-use'
 import { isTwitter } from '../../../../social-network-adaptor/twitter.com/base'
 import { activatedSocialNetworkUI } from '../../../../social-network'
 import { isFacebook } from '../../../../social-network-adaptor/facebook.com/base'
@@ -99,6 +99,7 @@ export function Trader(props: TraderProps) {
     //#region if coin be changed, update output token
     useEffect(() => {
         if (!coin || currentChainId !== targetChainId) return
+
         // if coin be native token and input token also be native token, reset it
         if (
             isSameAddress(coin.contract_address, NATIVE_TOKEN_ADDRESS) &&
@@ -110,7 +111,7 @@ export function Trader(props: TraderProps) {
                 token: undefined,
             })
         }
-        if (!inputToken && !outputToken) {
+        if (!outputToken) {
             dispatchTradeStore({
                 type: AllProviderTradeActionType.UPDATE_OUTPUT_TOKEN,
                 token: coin.contract_address
@@ -129,8 +130,11 @@ export function Trader(props: TraderProps) {
 
     //#region update balance
     const { value: inputTokenBalance_, loading: loadingInputTokenBalance } = useFungibleTokenBalance(
-        inputToken?.type ?? EthereumTokenType.Native,
+        isSameAddress(inputToken?.address, NATIVE_TOKEN_ADDRESS)
+            ? EthereumTokenType.Native
+            : inputToken?.type ?? EthereumTokenType.Native,
         inputToken?.address ?? '',
+        chainId,
     )
 
     const { value: outputTokenBalance_, loading: loadingOutputTokenBalance } = useFungibleTokenBalance(
@@ -152,7 +156,12 @@ export function Trader(props: TraderProps) {
                 type: AllProviderTradeActionType.UPDATE_INPUT_TOKEN_BALANCE,
                 balance: inputTokenBalance_,
             })
-        if (outputToken && outputTokenBalance_ && !loadingOutputTokenBalance) {
+        if (
+            outputToken &&
+            outputToken?.type !== EthereumTokenType.Native &&
+            outputTokenBalance_ &&
+            !loadingOutputTokenBalance
+        ) {
             dispatchTradeStore({
                 type: AllProviderTradeActionType.UPDATE_OUTPUT_TOKEN_BALANCE,
                 balance: outputTokenBalance_,
@@ -165,10 +174,24 @@ export function Trader(props: TraderProps) {
         outputTokenBalance_,
         loadingInputTokenBalance,
         loadingOutputTokenBalance,
+        NATIVE_TOKEN_ADDRESS,
     ])
 
     // Query the balance of native tokens on target chain
     useAsync(async () => {
+        if (!currentAccount) {
+            dispatchTradeStore({
+                type: AllProviderTradeActionType.UPDATE_INPUT_TOKEN_BALANCE,
+                balance: '0',
+            })
+
+            dispatchTradeStore({
+                type: AllProviderTradeActionType.UPDATE_OUTPUT_TOKEN_BALANCE,
+                balance: '0',
+            })
+            return
+        }
+
         if (chainId && currentProvider && currentAccount) {
             const cacheBalance = currentBalancesSettings.value[currentProvider]?.[chainId]
 
@@ -273,11 +296,6 @@ export function Trader(props: TraderProps) {
             token: outputToken,
         })
 
-        dispatchTradeStore({
-            type: AllProviderTradeActionType.UPDATE_INPUT_TOKEN_BALANCE,
-            balance: '',
-        })
-
         dispatchTradeStore({
             type: AllProviderTradeActionType.UPDATE_OUTPUT_TOKEN,
             token: inputToken,
@@ -395,7 +413,7 @@ export function Trader(props: TraderProps) {
     const nativeTokenPrice = useNativeTokenPrice(chainId)
     const outputTokenPrice = useTokenPrice(chainId, outputToken?.address.toLowerCase())
     const sortedAllTradeComputed = useMemo(() => {
-        if (outputToken && outputTokenPrice) {
+        if (outputToken && (outputTokenPrice || nativeTokenPrice)) {
             return allTradeComputed
                 .map((trade) => {
                     if (
@@ -423,15 +441,15 @@ export function Trader(props: TraderProps) {
                     }
                     return trade
                 })
-                .filter(({ finalPrice }) => !!finalPrice)
+                .filter(({ value }) => !!value && !value.outputAmount.isZero())
                 .sort(({ finalPrice: a }, { finalPrice: b }) => {
                     if (a && b && isGreaterThan(a, b)) return -1
                     if (a && b && isLessThan(a, b)) return 1
                     return 0
                 })
         }
         return allTradeComputed
-            .filter(({ value }) => !!value)
+            .filter(({ value }) => !!value && !value.outputAmount.isZero())
             .sort(({ value: a }, { value: b }) => {
                 if (a?.outputAmount.isGreaterThan(b?.outputAmount ?? 0)) return -1
                 if (a?.outputAmount.isLessThan(b?.outputAmount ?? 0)) return 1
@@ -471,6 +489,13 @@ export function Trader(props: TraderProps) {
         })
     }, [])
 
+    useUnmount(() => {
+        dispatchTradeStore({
+            type: AllProviderTradeActionType.UPDATE_OUTPUT_TOKEN,
+            token: undefined,
+        })
+    })
+
     return (
         <div className={classes.root}>
             <TradeForm

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

@@ -11,7 +11,7 @@ import { useI18N } from '../../../../utils'
 import { makeStyles, MaskColorVar } from '@masknet/theme'
 import { WalletStatusBox } from '../../../../components/shared/WalletStatusBox'
 import { NetworkTab } from '../../../../components/shared/NetworkTab'
-import { useAsync } from 'react-use'
+import { useAsync, useUpdateEffect } from 'react-use'
 import { WalletRPC } from '../../../Wallet/messages'
 import { isDashboardPage } from '@masknet/shared-base'
 
@@ -92,13 +92,20 @@ export function TraderDialog({ open, onClose }: TraderDialogProps) {
         if (!chainIdValid) closeDialog()
     }, [chainIdValid, closeDialog])
 
+    useUpdateEffect(() => {
+        if (currentChainId) {
+            setChainId(currentChainId)
+        }
+    }, [currentChainId])
+
     return (
         <TargetChainIdContext.Provider>
             <AllProviderTradeContext.Provider>
                 <InjectedDialog
                     open={open || remoteOpen}
                     onClose={() => {
                         onClose?.()
+                        setTraderProps(undefined)
                         closeDialog()
                     }}
                     title={t('plugin_trader_swap')}>

packages/shared/src/UI/components/ERC20TokenList/index.tsx

@@ -48,9 +48,10 @@ const Placeholder = memo(({ message, height }: { message: string; height?: numbe
 export const ERC20TokenList = memo<ERC20TokenListProps>((props) => {
     const t = useSharedI18N()
     const account = useAccount()
-    const chainId = useChainId()
+    const currentChainId = useChainId()
+    const chainId = props.targetChainId ?? currentChainId
     const trustedERC20Tokens = useTrustedERC20Tokens()
-    const { value: nativeToken } = useNativeTokenDetailed(props.targetChainId ?? chainId)
+    const { value: nativeToken } = useNativeTokenDetailed(chainId)
     const [keyword, setKeyword] = useState('')
 
     const {
@@ -62,13 +63,14 @@ export const ERC20TokenList = memo<ERC20TokenListProps>((props) => {
         selectedTokens = [],
     } = props
 
-    const { ERC20_TOKEN_LISTS } = useEthereumConstants()
+    const { ERC20_TOKEN_LISTS } = useEthereumConstants(chainId)
 
     const { value: erc20TokensDetailed = [], loading: erc20TokensDetailedLoading } =
         useERC20TokensDetailedFromTokenLists(
             ERC20_TOKEN_LISTS,
             keyword,
             nativeToken ? [...trustedERC20Tokens, nativeToken] : trustedERC20Tokens,
+            chainId,
         )
 
     //#region add token by address
@@ -95,7 +97,10 @@ export const ERC20TokenList = memo<ERC20TokenListProps>((props) => {
         loading: assetsLoading,
         error: assetsError,
         retry: retryLoadAsset,
-    } = useAssetsByTokenList(renderTokens.filter((x) => isValidAddress(x.address)))
+    } = useAssetsByTokenList(
+        renderTokens.filter((x) => isValidAddress(x.address)),
+        chainId,
+    )
 
     useEffect(() => {
         if (assetsError) retryLoadAsset()

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

@@ -8,7 +8,8 @@ import { toHex } from 'web3-utils'
 
 /**
  * Fetch token balance from chain
- * @param token
+ * @param address
+ * @param targetChainId
  */
 export function useERC20TokenBalance(address?: string, targetChainId?: ChainId) {
     const account = useAccount()