From 068e8074cb0b3f807d1862b63964170d46e5b115 Mon Sep 17 00:00:00 2001 From: Wukong Sun Date: Wed, 9 Oct 2024 16:25:48 +0800 Subject: [PATCH] fix: transaction page --- .../src/SiteAdaptor/components/GasCost.tsx | 3 +- .../trader/views/BridgeConfirm.tsx | 2 + .../src/SiteAdaptor/trader/views/History.tsx | 1 + .../SiteAdaptor/trader/views/Transaction.tsx | 85 +++++++++---------- packages/plugins/Trader/src/types/trader.ts | 2 + 5 files changed, 46 insertions(+), 47 deletions(-) diff --git a/packages/plugins/Trader/src/SiteAdaptor/components/GasCost.tsx b/packages/plugins/Trader/src/SiteAdaptor/components/GasCost.tsx index 3ab0fa8ec082..42ef4bccb085 100644 --- a/packages/plugins/Trader/src/SiteAdaptor/components/GasCost.tsx +++ b/packages/plugins/Trader/src/SiteAdaptor/components/GasCost.tsx @@ -1,3 +1,4 @@ +import { NetworkPluginID } from '@masknet/shared-base' import { useNativeToken } from '@masknet/web3-hooks-base' import { type ChainId, formatWeiToEther } from '@masknet/web3-shared-evm' import { Typography, type TypographyProps } from '@mui/material' @@ -12,7 +13,7 @@ interface Props extends TypographyProps { gasFee?: BigNumber.Value } export function GasCost({ chainId, gasPrice, gasLimit, gasFee: txGasFee, ...rest }: Props) { - const { data: nativeToken } = useNativeToken() + const { data: nativeToken } = useNativeToken(NetworkPluginID.PLUGIN_EVM, { chainId }) const { gasFee, gasCost } = useGasCost(gasPrice || '0', gasLimit || '1', txGasFee) const tokenCost = `${formatWeiToEther(gasFee)} ${nativeToken?.symbol ?? '--'}` return ( diff --git a/packages/plugins/Trader/src/SiteAdaptor/trader/views/BridgeConfirm.tsx b/packages/plugins/Trader/src/SiteAdaptor/trader/views/BridgeConfirm.tsx index 5c8b28d10d0a..c933a99dc3c4 100644 --- a/packages/plugins/Trader/src/SiteAdaptor/trader/views/BridgeConfirm.tsx +++ b/packages/plugins/Trader/src/SiteAdaptor/trader/views/BridgeConfirm.tsx @@ -514,6 +514,8 @@ than estimated, and any unused funds will remain in the original address.`}> gasPrice: gasConfig.gasPrice || '0', leftSideToken: getBridgeLeftSideToken(bridge), rightSideToken: getBridgeRightSideToken(bridge), + bridgeId: router?.bridgeId, + bridgeName: router?.bridgeName, }) if (leaveRef.current) return const url = urlcat(RoutePaths.Transaction, { diff --git a/packages/plugins/Trader/src/SiteAdaptor/trader/views/History.tsx b/packages/plugins/Trader/src/SiteAdaptor/trader/views/History.tsx index ad81ea354fc0..12868acc4ef0 100644 --- a/packages/plugins/Trader/src/SiteAdaptor/trader/views/History.tsx +++ b/packages/plugins/Trader/src/SiteAdaptor/trader/views/History.tsx @@ -25,6 +25,7 @@ const useStyles = makeStyles()((theme) => ({ gap: theme.spacing(1.5), borderBottom: `1px solid ${theme.palette.maskColor.line}`, paddingBottom: theme.spacing(1.5), + contentVisibility: 'auto', }, groupHeader: { display: 'flex', diff --git a/packages/plugins/Trader/src/SiteAdaptor/trader/views/Transaction.tsx b/packages/plugins/Trader/src/SiteAdaptor/trader/views/Transaction.tsx index c9243b59315f..9eeedc6e6476 100644 --- a/packages/plugins/Trader/src/SiteAdaptor/trader/views/Transaction.tsx +++ b/packages/plugins/Trader/src/SiteAdaptor/trader/views/Transaction.tsx @@ -5,8 +5,8 @@ import { NetworkPluginID } from '@masknet/shared-base' import { LoadingBase, makeStyles, useCustomSnackbar } from '@masknet/theme' import { useAccount, useNetwork, useWeb3Connection, useWeb3Utils } from '@masknet/web3-hooks-base' import { EVMExplorerResolver, OKX } from '@masknet/web3-providers' -import { dividedBy, formatBalance, formatCompact, TransactionStatusType } from '@masknet/web3-shared-base' -import { type ChainId, formatEthereumAddress, formatEtherToWei } from '@masknet/web3-shared-evm' +import { dividedBy, formatBalance, formatCompact, leftShift, TransactionStatusType } from '@masknet/web3-shared-base' +import { type ChainId, formatEthereumAddress } from '@masknet/web3-shared-evm' import { alpha, Box, Button, Typography, Link as MuiLink } from '@mui/material' import { skipToken, useQuery } from '@tanstack/react-query' import { format } from 'date-fns' @@ -269,12 +269,8 @@ export const Transaction = memo(function Transaction() { const isSwap = tx?.kind === 'swap' const txUrl = useMemo(() => { - if (isSwap) { - return chainId && hash ? EVMExplorerResolver.transactionLink(chainId, hash) : undefined - } - if (!toChainId || !bridgeStatus?.toTxHash) return undefined - return EVMExplorerResolver.transactionLink(toChainId, bridgeStatus.toTxHash) - }, [isSwap, chainId, hash, toChainId, bridgeStatus?.toTxHash]) + return chainId && hash ? EVMExplorerResolver.transactionLink(chainId, hash) : undefined + }, [chainId, hash]) const txPending = status === TransactionStatusType.NOT_DEPEND const [expand = bridgeStatus?.status === 'PENDING', setExpand] = useState() @@ -319,11 +315,13 @@ export const Transaction = memo(function Transaction() { const txSucceed = status === TransactionStatusType.SUCCEED const txFailed = status === TransactionStatusType.FAILED - const [baseToken, targetToken] = forwardCompare ? [tx.fromToken, tx.toToken] : [tx.toToken, tx.fromToken] - const rate = - forwardCompare && tx ? - dividedBy(tx.toTokenAmount!, tx.fromTokenAmount ?? '1') - : dividedBy(tx.fromTokenAmount!, tx.toTokenAmount!) + const fromAmount = leftShift(tx.fromTokenAmount ?? 0, tx.fromToken.decimals) + const toAmount = leftShift(tx.toTokenAmount ?? 0, tx.toToken.decimals) + const [baseToken, targetToken, baseAmount, targetAmount] = + forwardCompare ? + [tx.fromToken, tx.toToken, fromAmount, toAmount] + : [tx.toToken, tx.fromToken, toAmount, fromAmount] + const rate = dividedBy(targetAmount, baseAmount) const rateNode = baseToken && targetToken ? @@ -400,7 +398,7 @@ export const Transaction = memo(function Transaction() { : '--'} {fromNetwork?.fullName ?? '--'} - {txPending || detailStatus === 'BRIDGE_PENDING' ? + {txPending || detailStatus === 'WAITING' ? Transaction in progress. Thank you for your patience. @@ -441,6 +439,15 @@ export const Transaction = memo(function Transaction() { : null} : null} + {tx.kind === 'bridge' && bridgeStatus?.status === 'PENDING' ? + + + Transferring asset across to the {toNetwork?.fullName} network via the{' '} + {tx.bridgeName} + cross-chain bridge + + + : null}
{toNetwork?.fullName ?? '--'} - {txPending || detailStatus === 'BRIDGE_PENDING' ? - - Transaction in progress. Thank you for your patience. - - : null}
- {bridgeStatus?.bridgeHash ? - - - - : null} : null}
@@ -501,8 +496,10 @@ export const Transaction = memo(function Transaction() { {toNetwork?.fullName ?? '--'}
- {txUrl ? - + {bridgeStatus?.toTxHash ? + : null} @@ -567,11 +564,7 @@ export const Transaction = memo(function Transaction() { chainId={fromChainId} gasLimit={tx.gasLimit} gasPrice={tx.gasPrice} - gasFee={ - bridgeStatus?.sourceChainGasfee ? - formatEtherToWei(bridgeStatus.sourceChainGasfee) - : undefined - } + gasFee={tx.transactionFee} />
@@ -591,7 +584,19 @@ export const Transaction = memo(function Transaction() {
- {txSucceed || txFailed ? + {txUrl && (txPending || bridgeStatus?.status === 'PENDING') ? +
+ +
+ : txSucceed || txFailed ?
- : txUrl ? -
- -
: null} ) diff --git a/packages/plugins/Trader/src/types/trader.ts b/packages/plugins/Trader/src/types/trader.ts index 5b001a5689e5..115cc15bec00 100644 --- a/packages/plugins/Trader/src/types/trader.ts +++ b/packages/plugins/Trader/src/types/trader.ts @@ -55,6 +55,8 @@ export interface OkxBridgeTransaction extends OkxBaseTransaction { toChainId: number leftSideToken?: SwapToken rightSideToken?: SwapToken + bridgeId?: number + bridgeName?: string } export type OkxTransaction = OkxSwapTransaction | OkxBridgeTransaction