From 62047954a90e84c4f79249911a1131820f957875 Mon Sep 17 00:00:00 2001 From: nuanyang233 <528944303@qq.com> Date: Thu, 16 Dec 2021 16:23:01 +0800 Subject: [PATCH 1/6] fix: swap box bug --- .../SNSAdaptor/trader/InputTokenPanel.tsx | 1 + .../Trader/SNSAdaptor/trader/Trader.tsx | 23 +++++++++++++++++-- .../Trader/SNSAdaptor/trader/TraderDialog.tsx | 1 + 3 files changed, 23 insertions(+), 2 deletions(-) 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..0594cbfa32fb 100644 --- a/packages/mask/src/plugins/Trader/SNSAdaptor/trader/Trader.tsx +++ b/packages/mask/src/plugins/Trader/SNSAdaptor/trader/Trader.tsx @@ -98,7 +98,14 @@ export function Trader(props: TraderProps) { //#region if coin be changed, update output token useEffect(() => { - if (!coin || currentChainId !== targetChainId) return + if (currentChainId !== targetChainId) return + if (!coin) { + dispatchTradeStore({ + type: AllProviderTradeActionType.UPDATE_OUTPUT_TOKEN, + token: undefined, + }) + 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 +117,7 @@ export function Trader(props: TraderProps) { token: undefined, }) } - if (!inputToken && !outputToken) { + if (!outputToken) { dispatchTradeStore({ type: AllProviderTradeActionType.UPDATE_OUTPUT_TOKEN, token: coin.contract_address @@ -169,6 +176,18 @@ export function Trader(props: TraderProps) { // Query the balance of native tokens on target chain useAsync(async () => { + if (!wallet) { + dispatchTradeStore({ + type: AllProviderTradeActionType.UPDATE_INPUT_TOKEN_BALANCE, + balance: '0', + }) + + dispatchTradeStore({ + type: AllProviderTradeActionType.UPDATE_OUTPUT_TOKEN_BALANCE, + balance: '0', + }) + } + if (chainId && currentProvider && currentAccount) { const cacheBalance = currentBalancesSettings.value[currentProvider]?.[chainId] diff --git a/packages/mask/src/plugins/Trader/SNSAdaptor/trader/TraderDialog.tsx b/packages/mask/src/plugins/Trader/SNSAdaptor/trader/TraderDialog.tsx index c685dce15953..b6417c634705 100644 --- a/packages/mask/src/plugins/Trader/SNSAdaptor/trader/TraderDialog.tsx +++ b/packages/mask/src/plugins/Trader/SNSAdaptor/trader/TraderDialog.tsx @@ -99,6 +99,7 @@ export function TraderDialog({ open, onClose }: TraderDialogProps) { open={open || remoteOpen} onClose={() => { onClose?.() + setTraderProps(undefined) closeDialog() }} title={t('plugin_trader_swap')}> From de0bf50e9ac175d4af89c83c588dd28134e58354 Mon Sep 17 00:00:00 2001 From: nuanyang233 <528944303@qq.com> Date: Thu, 16 Dec 2021 16:43:26 +0800 Subject: [PATCH 2/6] chore: reply review --- packages/mask/src/plugins/Trader/SNSAdaptor/trader/Trader.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/mask/src/plugins/Trader/SNSAdaptor/trader/Trader.tsx b/packages/mask/src/plugins/Trader/SNSAdaptor/trader/Trader.tsx index 0594cbfa32fb..ed1d1a47a6b8 100644 --- a/packages/mask/src/plugins/Trader/SNSAdaptor/trader/Trader.tsx +++ b/packages/mask/src/plugins/Trader/SNSAdaptor/trader/Trader.tsx @@ -176,7 +176,7 @@ export function Trader(props: TraderProps) { // Query the balance of native tokens on target chain useAsync(async () => { - if (!wallet) { + if (!currentAccount) { dispatchTradeStore({ type: AllProviderTradeActionType.UPDATE_INPUT_TOKEN_BALANCE, balance: '0', @@ -186,6 +186,7 @@ export function Trader(props: TraderProps) { type: AllProviderTradeActionType.UPDATE_OUTPUT_TOKEN_BALANCE, balance: '0', }) + return } if (chainId && currentProvider && currentAccount) { From 51860edaf2bc5f9f3f5e7759188dc269956f3f9d Mon Sep 17 00:00:00 2001 From: nuanyang233 <528944303@qq.com> Date: Thu, 16 Dec 2021 17:32:26 +0800 Subject: [PATCH 3/6] fix: update chainId --- .../src/plugins/Trader/SNSAdaptor/trader/TraderDialog.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/mask/src/plugins/Trader/SNSAdaptor/trader/TraderDialog.tsx b/packages/mask/src/plugins/Trader/SNSAdaptor/trader/TraderDialog.tsx index b6417c634705..d602c5b8b09a 100644 --- a/packages/mask/src/plugins/Trader/SNSAdaptor/trader/TraderDialog.tsx +++ b/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,6 +92,12 @@ export function TraderDialog({ open, onClose }: TraderDialogProps) { if (!chainIdValid) closeDialog() }, [chainIdValid, closeDialog]) + useUpdateEffect(() => { + if (currentChainId) { + setChainId(currentChainId) + } + }, [currentChainId]) + return ( From aa14820f385f06e76e5384b4f637815c6298ea97 Mon Sep 17 00:00:00 2001 From: nuanyang233 <528944303@qq.com> Date: Fri, 17 Dec 2021 01:57:03 +0800 Subject: [PATCH 4/6] fix: tokenlist and zero output amount --- .../Trader/SNSAdaptor/trader/Trader.tsx | 23 ++++++++++--------- .../UI/components/ERC20TokenList/index.tsx | 13 +++++++---- 2 files changed, 21 insertions(+), 15 deletions(-) diff --git a/packages/mask/src/plugins/Trader/SNSAdaptor/trader/Trader.tsx b/packages/mask/src/plugins/Trader/SNSAdaptor/trader/Trader.tsx index ed1d1a47a6b8..90ca673cfb78 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' @@ -98,14 +98,8 @@ export function Trader(props: TraderProps) { //#region if coin be changed, update output token useEffect(() => { - if (currentChainId !== targetChainId) return - if (!coin) { - dispatchTradeStore({ - type: AllProviderTradeActionType.UPDATE_OUTPUT_TOKEN, - token: undefined, - }) - return - } + 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) && @@ -415,7 +409,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 ( @@ -451,7 +445,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 @@ -491,6 +485,13 @@ export function Trader(props: TraderProps) { }) }, []) + useUnmount(() => { + dispatchTradeStore({ + type: AllProviderTradeActionType.UPDATE_OUTPUT_TOKEN, + token: undefined, + }) + }) + return (
((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() From 56c9df91b803ade4e8f2fdaea8e9d16744f38b5b Mon Sep 17 00:00:00 2001 From: nuanyang233 <528944303@qq.com> Date: Fri, 17 Dec 2021 13:29:22 +0800 Subject: [PATCH 5/6] fix: show trade if it don't have estimate gas --- packages/mask/src/plugins/Trader/SNSAdaptor/trader/Trader.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mask/src/plugins/Trader/SNSAdaptor/trader/Trader.tsx b/packages/mask/src/plugins/Trader/SNSAdaptor/trader/Trader.tsx index 90ca673cfb78..c1039eefa7cc 100644 --- a/packages/mask/src/plugins/Trader/SNSAdaptor/trader/Trader.tsx +++ b/packages/mask/src/plugins/Trader/SNSAdaptor/trader/Trader.tsx @@ -437,7 +437,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 From 2805208623ab065ad583d17541f4248a41e231b4 Mon Sep 17 00:00:00 2001 From: nuanyang233 <528944303@qq.com> Date: Fri, 17 Dec 2021 14:34:43 +0800 Subject: [PATCH 6/6] fix: balance bug --- .../Trader/SNSAdaptor/trader/Trader.tsx | 18 +++++++++++------- .../evm/hooks/useERC20TokenBalance.ts | 3 ++- 2 files changed, 13 insertions(+), 8 deletions(-) diff --git a/packages/mask/src/plugins/Trader/SNSAdaptor/trader/Trader.tsx b/packages/mask/src/plugins/Trader/SNSAdaptor/trader/Trader.tsx index c1039eefa7cc..61e377c27180 100644 --- a/packages/mask/src/plugins/Trader/SNSAdaptor/trader/Trader.tsx +++ b/packages/mask/src/plugins/Trader/SNSAdaptor/trader/Trader.tsx @@ -130,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( @@ -153,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_, @@ -166,6 +174,7 @@ export function Trader(props: TraderProps) { outputTokenBalance_, loadingInputTokenBalance, loadingOutputTokenBalance, + NATIVE_TOKEN_ADDRESS, ]) // Query the balance of native tokens on target chain @@ -287,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, 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()