From bf307d858259186fc17f5a73b1d80accc7270a37 Mon Sep 17 00:00:00 2001 From: Wukong Sun Date: Thu, 7 Nov 2024 13:38:28 +0800 Subject: [PATCH] fix: swap and bridge (#11908) * fix: swap and bridge mf-6474 mf-6475 mf-6476 * fix: run codegen --------- Co-authored-by: swkatmask --- .../Wallet/WalletGuard/useMessageGuard.ts | 3 ++- .../plugins/Trader/src/SiteAdaptor/storage.ts | 25 ++++++++----------- .../SiteAdaptor/trader/hooks/useApprove.ts | 4 +-- .../trader/views/BridgeConfirm.tsx | 6 ++--- .../src/SiteAdaptor/trader/views/Confirm.tsx | 10 +++----- .../src/SiteAdaptor/trader/views/History.tsx | 6 ++--- .../SiteAdaptor/trader/views/Trade/index.tsx | 22 ++++++++++++---- packages/plugins/Trader/src/locale/en-US.po | 1 + packages/plugins/Trader/src/locale/ja-JP.po | 1 + packages/plugins/Trader/src/locale/ko-KR.po | 1 + packages/plugins/Trader/src/locale/zh-CN.po | 1 + packages/plugins/Trader/src/locale/zh-TW.po | 1 + .../src/Web3/EVM/apis/Web3StateAPI.ts | 2 ++ .../evm/src/helpers/addGasMargin.ts | 4 +-- 14 files changed, 51 insertions(+), 36 deletions(-) diff --git a/packages/mask/popups/pages/Wallet/WalletGuard/useMessageGuard.ts b/packages/mask/popups/pages/Wallet/WalletGuard/useMessageGuard.ts index 72d93523d0a4..c89240ce59dd 100644 --- a/packages/mask/popups/pages/Wallet/WalletGuard/useMessageGuard.ts +++ b/packages/mask/popups/pages/Wallet/WalletGuard/useMessageGuard.ts @@ -8,6 +8,7 @@ import { useMessages } from '@masknet/web3-hooks-base' export function useMessageGuard() { const matchInteraction = useMatch(PopupRoutes.ContractInteraction) const messages = useMessages() + const nonSilentMessages = messages.filter((x) => !x.request.options.silent) - return !matchInteraction && messages.length > 0 + return !matchInteraction && nonSilentMessages.length > 0 } diff --git a/packages/plugins/Trader/src/SiteAdaptor/storage.ts b/packages/plugins/Trader/src/SiteAdaptor/storage.ts index 5b43877e79b8..c8cd8e31e3ed 100644 --- a/packages/plugins/Trader/src/SiteAdaptor/storage.ts +++ b/packages/plugins/Trader/src/SiteAdaptor/storage.ts @@ -1,6 +1,8 @@ import { EMPTY_LIST, type ScopedStorage } from '@masknet/shared-base' -import { useQuery } from '@tanstack/react-query' +import { queryClient } from '@masknet/shared-base-ui' import { sortBy } from 'lodash-es' +import { useMemo } from 'react' +import { useSubscription } from 'use-subscription' import type { OkxTransaction } from '../types/trader.js' export interface StorageOptions { @@ -14,18 +16,12 @@ export function setupStorage(initialized: ScopedStorage) { } export function useTradeHistory(address: string) { - return useQuery({ - enabled: storage.storage.transactions.initialized, - queryKey: ['trade-history', address], - refetchOnMount: 'always', - queryFn: async () => { - return storage.storage.transactions.value - }, - select(data) { - const addr = address.toLowerCase() - return sortBy(data[addr], (x) => -x.timestamp) || EMPTY_LIST - }, - }) + const transactions = useSubscription(storage.storage.transactions.subscription) + return useMemo(() => { + if (!storage.storage.transactions.initialized) return null + const addr = address.toLowerCase() + return sortBy(transactions[addr], (x) => -x.timestamp) || EMPTY_LIST + }, [transactions]) } export async function addTransaction(address: string, transaction: T) { @@ -38,6 +34,7 @@ export async function addTransaction(address: string, ...txObject.value, [addr]: [...transactions, transaction], }) + queryClient.refetchQueries({ queryKey: ['trade-history'] }) } export async function updateTransaction( @@ -61,6 +58,6 @@ export async function updateTransaction( } export function useTransaction(address: string, hash: string | null) { - const { data: txes } = useTradeHistory(address) + const txes = useTradeHistory(address) return hash && txes ? txes.find((x) => x.hash === hash) : null } diff --git a/packages/plugins/Trader/src/SiteAdaptor/trader/hooks/useApprove.ts b/packages/plugins/Trader/src/SiteAdaptor/trader/hooks/useApprove.ts index 95a30da85e17..ba603a56ae71 100644 --- a/packages/plugins/Trader/src/SiteAdaptor/trader/hooks/useApprove.ts +++ b/packages/plugins/Trader/src/SiteAdaptor/trader/hooks/useApprove.ts @@ -58,8 +58,8 @@ export function useApprove() { const hash = await Web3.sendTransaction( { to: tokenAddress, - // gas provided by API for Arbitrum is too low, let wallet estimate itself - gas: chainId === ChainId.Arbitrum ? undefined : addGasMargin(approveInfo.gasLimit).toFixed(0), + // Add more gas margin for Arbitrum, since gas for Arbitrum that provided by API is too low. + gas: addGasMargin(approveInfo.gasLimit, chainId === ChainId.Arbitrum ? 1 : 0.3), gasPrice: approveInfo.gasPrice, data: approveInfo.data, }, diff --git a/packages/plugins/Trader/src/SiteAdaptor/trader/views/BridgeConfirm.tsx b/packages/plugins/Trader/src/SiteAdaptor/trader/views/BridgeConfirm.tsx index df9f5a5ca7dc..0690e923255c 100644 --- a/packages/plugins/Trader/src/SiteAdaptor/trader/views/BridgeConfirm.tsx +++ b/packages/plugins/Trader/src/SiteAdaptor/trader/views/BridgeConfirm.tsx @@ -1,4 +1,5 @@ import { msg, Select, Trans } from '@lingui/macro' +import { useLingui } from '@lingui/react' import { Icons } from '@masknet/icons' import { CopyButton, LoadingStatus, NetworkIcon, PluginWalletStatusBar, ProgressiveText } from '@masknet/shared' import { NetworkPluginID, Sniffings } from '@masknet/shared-base' @@ -20,7 +21,7 @@ import { multipliedBy, rightShift, } from '@masknet/web3-shared-base' -import { ChainId, formatEthereumAddress, formatWeiToEther } from '@masknet/web3-shared-evm' +import { addGasMargin, ChainId, formatEthereumAddress, formatWeiToEther } from '@masknet/web3-shared-evm' import { Box, Link as MuiLink, Typography } from '@mui/material' import { useQueryClient } from '@tanstack/react-query' import { BigNumber } from 'bignumber.js' @@ -41,7 +42,6 @@ import { useBridgeData } from '../hooks/useBridgeData.js' import { useLeave } from '../hooks/useLeave.js' import { useToken } from '../hooks/useToken.js' import { useTokenPrice } from '../hooks/useTokenPrice.js' -import { useLingui } from '@lingui/react' const useStyles = makeStyles()((theme) => ({ container: { @@ -261,7 +261,7 @@ export const BridgeConfirm = memo(function BridgeConfirm() { from: account, value: transaction.value, gasPrice: gasConfig.gasPrice ?? transaction.gasPrice, - gas: fromChainId !== ChainId.Arbitrum && gas ? multipliedBy(gas, 1.2).toFixed(0) : undefined, + gas: gas ? addGasMargin(gas, fromChainId === ChainId.Arbitrum ? 1 : 0.3) : undefined, maxPriorityFeePerGas: 'maxPriorityFeePerGas' in gasConfig && gasConfig.maxFeePerGas ? gasConfig.maxFeePerGas diff --git a/packages/plugins/Trader/src/SiteAdaptor/trader/views/Confirm.tsx b/packages/plugins/Trader/src/SiteAdaptor/trader/views/Confirm.tsx index dee67055548f..5d9938b327e3 100644 --- a/packages/plugins/Trader/src/SiteAdaptor/trader/views/Confirm.tsx +++ b/packages/plugins/Trader/src/SiteAdaptor/trader/views/Confirm.tsx @@ -1,4 +1,5 @@ import { msg, Select, Trans } from '@lingui/macro' +import { useLingui } from '@lingui/react' import { Icons } from '@masknet/icons' import { LoadingStatus, PluginWalletStatusBar, ProgressiveText, TokenIcon } from '@masknet/shared' import { EMPTY_LIST, NetworkPluginID, Sniffings } from '@masknet/shared-base' @@ -10,10 +11,9 @@ import { formatCompact, GasOptionType, leftShift, - multipliedBy, rightShift, } from '@masknet/web3-shared-base' -import { ChainId, formatWeiToEther } from '@masknet/web3-shared-evm' +import { addGasMargin, ChainId, formatWeiToEther } from '@masknet/web3-shared-evm' import { Box, Link as MuiLink, Typography } from '@mui/material' import { useQueryClient } from '@tanstack/react-query' import { BigNumber } from 'bignumber.js' @@ -33,7 +33,6 @@ import { useLiquidityResources } from '../hooks/useLiquidityResources.js' import { useSwapData } from '../hooks/useSwapData.js' import { useSwappable } from '../hooks/useSwappable.js' import { useWaitForTransaction } from '../hooks/useWaitForTransaction.js' -import { useLingui } from '@lingui/react' const useStyles = makeStyles()((theme) => ({ container: { @@ -253,7 +252,7 @@ export const Confirm = memo(function Confirm() { from: account, value: transaction.value, gasPrice: gasConfig.gasPrice ?? transaction.gasPrice, - gas: chainId !== ChainId.Arbitrum && gas ? multipliedBy(gas, 1.2).toFixed(0) : undefined, + gas: gas ? addGasMargin(gas, chainId === ChainId.Arbitrum ? 1 : 0.3) : undefined, maxPriorityFeePerGas: 'maxPriorityFeePerGas' in gasConfig && gasConfig.maxFeePerGas ? gasConfig.maxFeePerGas @@ -270,7 +269,6 @@ export const Confirm = memo(function Confirm() { const isApproving = approveMutation.isPending const isCheckingApprove = isLoadingApproveInfo || isLoadingSpender || isLoadingAllowance - const showStale = isQuoteStale && !isSending && !isApproving const leaveRef = useLeave() const queryClient = useQueryClient() @@ -388,8 +386,8 @@ export const Confirm = memo(function Confirm() { mode, waitForTransaction, gasOptions, - approveMutation.mutateAsync, ]) + const showStale = isQuoteStale && !isSending && !isApproving && !submitting const loading = isSending || isCheckingApprove || isApproving || submitting const disabled = !isSwappable || loading || dexIdsCount === 0 diff --git a/packages/plugins/Trader/src/SiteAdaptor/trader/views/History.tsx b/packages/plugins/Trader/src/SiteAdaptor/trader/views/History.tsx index a53e3d5e8898..e32686079296 100644 --- a/packages/plugins/Trader/src/SiteAdaptor/trader/views/History.tsx +++ b/packages/plugins/Trader/src/SiteAdaptor/trader/views/History.tsx @@ -1,7 +1,7 @@ import { t } from '@lingui/macro' import { Icons } from '@masknet/icons' import { LoadingStatus, TokenIcon } from '@masknet/shared' -import { EMPTY_LIST, NetworkPluginID } from '@masknet/shared-base' +import { NetworkPluginID } from '@masknet/shared-base' import { makeStyles } from '@masknet/theme' import { useAccount, useNetworks } from '@masknet/web3-hooks-base' import { formatBalance } from '@masknet/web3-shared-base' @@ -131,10 +131,10 @@ export function HistoryView() { const { classes, theme } = useStyles() const { basePath } = useRuntime() const address = useAccount(NetworkPluginID.PLUGIN_EVM) - const { data: history = EMPTY_LIST, isLoading } = useTradeHistory(address) + const history = useTradeHistory(address) const networks = useNetworks(NetworkPluginID.PLUGIN_EVM) - if (isLoading) { + if (!history) { return (
diff --git a/packages/plugins/Trader/src/SiteAdaptor/trader/views/Trade/index.tsx b/packages/plugins/Trader/src/SiteAdaptor/trader/views/Trade/index.tsx index f3d45baca57b..e8a2e673e14d 100644 --- a/packages/plugins/Trader/src/SiteAdaptor/trader/views/Trade/index.tsx +++ b/packages/plugins/Trader/src/SiteAdaptor/trader/views/Trade/index.tsx @@ -15,7 +15,7 @@ import { trimZero, } from '@masknet/web3-shared-base' import { isNativeTokenAddress, type ChainId } from '@masknet/web3-shared-evm' -import { Box, Button, Typography } from '@mui/material' +import { Box, Button, Skeleton, Typography } from '@mui/material' import { BigNumber } from 'bignumber.js' import { useMemo, useState } from 'react' import { useNavigate } from 'react-router-dom' @@ -184,9 +184,13 @@ export function TradeView() { const toChainId = toToken?.chainId as ChainId const fromNetwork = networks.find((x) => x.chainId === fromChainId) const toNetwork = networks.find((x) => x.chainId === toChainId) - const { data: fromTokenBalance } = useFungibleTokenBalance(NetworkPluginID.PLUGIN_EVM, fromToken?.address, { - chainId: fromChainId, - }) + const { data: fromTokenBalance, isLoading: isLoadingFromTokenBalance } = useFungibleTokenBalance( + NetworkPluginID.PLUGIN_EVM, + fromToken?.address, + { + chainId: fromChainId, + }, + ) const { gasFee } = useGasManagement() const { data: toTokenBalance } = useFungibleTokenBalance(NetworkPluginID.PLUGIN_EVM, toToken?.address, { chainId: toChainId, @@ -271,7 +275,15 @@ export function TradeView() { - {fromTokenBalance ? + {isLoadingFromTokenBalance ? + + + + + + : fromTokenBalance ? diff --git a/packages/plugins/Trader/src/locale/en-US.po b/packages/plugins/Trader/src/locale/en-US.po index a3e4387cc099..a33a75cb38a4 100644 --- a/packages/plugins/Trader/src/locale/en-US.po +++ b/packages/plugins/Trader/src/locale/en-US.po @@ -297,6 +297,7 @@ msgstr "" msgid "Market Cap" msgstr "" +#: src/SiteAdaptor/trader/views/Trade/index.tsx #: src/SiteAdaptor/trader/views/Trade/index.tsx msgid "MAX" msgstr "" diff --git a/packages/plugins/Trader/src/locale/ja-JP.po b/packages/plugins/Trader/src/locale/ja-JP.po index a3e4387cc099..a33a75cb38a4 100644 --- a/packages/plugins/Trader/src/locale/ja-JP.po +++ b/packages/plugins/Trader/src/locale/ja-JP.po @@ -297,6 +297,7 @@ msgstr "" msgid "Market Cap" msgstr "" +#: src/SiteAdaptor/trader/views/Trade/index.tsx #: src/SiteAdaptor/trader/views/Trade/index.tsx msgid "MAX" msgstr "" diff --git a/packages/plugins/Trader/src/locale/ko-KR.po b/packages/plugins/Trader/src/locale/ko-KR.po index a3e4387cc099..a33a75cb38a4 100644 --- a/packages/plugins/Trader/src/locale/ko-KR.po +++ b/packages/plugins/Trader/src/locale/ko-KR.po @@ -297,6 +297,7 @@ msgstr "" msgid "Market Cap" msgstr "" +#: src/SiteAdaptor/trader/views/Trade/index.tsx #: src/SiteAdaptor/trader/views/Trade/index.tsx msgid "MAX" msgstr "" diff --git a/packages/plugins/Trader/src/locale/zh-CN.po b/packages/plugins/Trader/src/locale/zh-CN.po index a3e4387cc099..a33a75cb38a4 100644 --- a/packages/plugins/Trader/src/locale/zh-CN.po +++ b/packages/plugins/Trader/src/locale/zh-CN.po @@ -297,6 +297,7 @@ msgstr "" msgid "Market Cap" msgstr "" +#: src/SiteAdaptor/trader/views/Trade/index.tsx #: src/SiteAdaptor/trader/views/Trade/index.tsx msgid "MAX" msgstr "" diff --git a/packages/plugins/Trader/src/locale/zh-TW.po b/packages/plugins/Trader/src/locale/zh-TW.po index a3e4387cc099..a33a75cb38a4 100644 --- a/packages/plugins/Trader/src/locale/zh-TW.po +++ b/packages/plugins/Trader/src/locale/zh-TW.po @@ -297,6 +297,7 @@ msgstr "" msgid "Market Cap" msgstr "" +#: src/SiteAdaptor/trader/views/Trade/index.tsx #: src/SiteAdaptor/trader/views/Trade/index.tsx msgid "MAX" msgstr "" diff --git a/packages/web3-providers/src/Web3/EVM/apis/Web3StateAPI.ts b/packages/web3-providers/src/Web3/EVM/apis/Web3StateAPI.ts index 96f68c4d617b..e140173c9cb6 100644 --- a/packages/web3-providers/src/Web3/EVM/apis/Web3StateAPI.ts +++ b/packages/web3-providers/src/Web3/EVM/apis/Web3StateAPI.ts @@ -91,5 +91,7 @@ export async function createEVMState(context: WalletAPI.IOContext): Promise