diff --git a/packages/mask/src/plugins/Trader/SNSAdaptor/trader/InputTokenPanel.tsx b/packages/mask/src/plugins/Trader/SNSAdaptor/trader/InputTokenPanel.tsx index 2068c15fa765..722de799b0dc 100644 --- a/packages/mask/src/plugins/Trader/SNSAdaptor/trader/InputTokenPanel.tsx +++ b/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, diff --git a/packages/mask/src/plugins/Trader/SNSAdaptor/trader/Trader.tsx b/packages/mask/src/plugins/Trader/SNSAdaptor/trader/Trader.tsx index 8f32d0f20300..61e377c27180 100644 --- a/packages/mask/src/plugins/Trader/SNSAdaptor/trader/Trader.tsx +++ b/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,7 +441,7 @@ 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 @@ -431,7 +449,7 @@ export function Trader(props: TraderProps) { }) } 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 (
{ + if (currentChainId) { + setChainId(currentChainId) + } + }, [currentChainId]) + return ( @@ -99,6 +105,7 @@ export function TraderDialog({ open, onClose }: TraderDialogProps) { open={open || remoteOpen} onClose={() => { onClose?.() + setTraderProps(undefined) closeDialog() }} title={t('plugin_trader_swap')}> diff --git a/packages/shared/src/UI/components/ERC20TokenList/index.tsx b/packages/shared/src/UI/components/ERC20TokenList/index.tsx index bc9a94e663a1..e46e30ec072b 100644 --- a/packages/shared/src/UI/components/ERC20TokenList/index.tsx +++ b/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((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((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((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() diff --git a/packages/web3-shared/evm/hooks/useERC20TokenBalance.ts b/packages/web3-shared/evm/hooks/useERC20TokenBalance.ts index 37fba479cfa6..49587dc6a146 100644 --- a/packages/web3-shared/evm/hooks/useERC20TokenBalance.ts +++ b/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()