Skip to content

Commit

Permalink
fix: transaction page
Browse files Browse the repository at this point in the history
  • Loading branch information
@swkatmask
swkatmask committed Oct 9, 2024
1 parent ddf6113 commit 068e807
Show file tree
Hide file tree
Showing 5 changed files with 46 additions and 47 deletions.
3 changes: 2 additions & 1 deletion packages/plugins/Trader/src/SiteAdaptor/components/GasCost.tsx
View file
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -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 (
Expand Down
2 changes: 2 additions & 0 deletions packages/plugins/Trader/src/SiteAdaptor/trader/views/BridgeConfirm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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, {
Expand Down
1 change: 1 addition & 0 deletions packages/plugins/Trader/src/SiteAdaptor/trader/views/History.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
85 changes: 39 additions & 46 deletions packages/plugins/Trader/src/SiteAdaptor/trader/views/Transaction.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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<boolean>()
Expand Down Expand Up @@ -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 ?
Expand Down Expand Up @@ -400,7 +398,7 @@ export const Transaction = memo(function Transaction() {
: '--'}
</Typography>
<Typography className={classes.network}>{fromNetwork?.fullName ?? '--'}</Typography>
{txPending || detailStatus === 'BRIDGE_PENDING' ?
{txPending || detailStatus === 'WAITING' ?
<Typography className={classes.tip}>
<Trans>Transaction in progress. Thank you for your patience.</Trans>
</Typography>
Expand Down Expand Up @@ -441,6 +439,15 @@ export const Transaction = memo(function Transaction() {
: null}
</div>
: null}
{tx.kind === 'bridge' && bridgeStatus?.status === 'PENDING' ?
<Typography className={classes.tip} ml="38px">
<Trans>
Transferring asset across to the {toNetwork?.fullName} network via the{' '}
{tx.bridgeName}
cross-chain bridge
</Trans>
</Typography>
: null}
</div>
<div
className={cx(
Expand Down Expand Up @@ -469,19 +476,7 @@ export const Transaction = memo(function Transaction() {
{tx.rightSideToken.tokenSymbol}
</Typography>
<Typography className={classes.network}>{toNetwork?.fullName ?? '--'}</Typography>
{txPending || detailStatus === 'BRIDGE_PENDING' ?
<Typography className={classes.tip}>
<Trans>Transaction in progress. Thank you for your patience.</Trans>
</Typography>
: null}
</div>
{bridgeStatus?.bridgeHash ?
<a
href={EVMExplorerResolver.transactionLink(toChainId, bridgeStatus.bridgeHash)}
target="_blank">
<Icons.LinkOut color={theme.palette.maskColor.second} size={16} />
</a>
: null}
</div>
: null}
<div className={classes.tokenInfo}>
Expand All @@ -501,8 +496,10 @@ export const Transaction = memo(function Transaction() {
</Typography>
<Typography className={classes.network}>{toNetwork?.fullName ?? '--'}</Typography>
</div>
{txUrl ?
<a href={txUrl} target="_blank">
{bridgeStatus?.toTxHash ?
<a
href={EVMExplorerResolver.transactionLink(toChainId, bridgeStatus.toTxHash)}
target="_blank">
<Icons.LinkOut color={theme.palette.maskColor.second} size={16} />
</a>
: null}
Expand Down Expand Up @@ -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}
/>
</div>
<div className={classes.infoRow}>
Expand All @@ -591,7 +584,19 @@ export const Transaction = memo(function Transaction() {
</div>
</div>
</div>
{txSucceed || txFailed ?
{txUrl && (txPending || bridgeStatus?.status === 'PENDING') ?
<div className={classes.footer}>
<Button
className={classes.button}
fullWidth
onClick={() => {
window.open(txUrl)
}}>
<Icons.Connect />
<Trans>Check on Explorer</Trans>
</Button>
</div>
: txSucceed || txFailed ?
<div className={classes.footer}>
<Button
className={classes.button}
Expand All @@ -610,18 +615,6 @@ export const Transaction = memo(function Transaction() {
: <Trans>Try Again</Trans>}
</Button>
</div>
: txUrl ?
<div className={classes.footer}>
<Button
className={classes.button}
fullWidth
onClick={() => {
window.open(txUrl)
}}>
<Icons.Connect />
<Trans>Check on Explorer</Trans>
</Button>
</div>
: null}
</div>
)
Expand Down
2 changes: 2 additions & 0 deletions packages/plugins/Trader/src/types/trader.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,8 @@ export interface OkxBridgeTransaction extends OkxBaseTransaction {
toChainId: number
leftSideToken?: SwapToken
rightSideToken?: SwapToken
bridgeId?: number
bridgeName?: string
}

export type OkxTransaction = OkxSwapTransaction | OkxBridgeTransaction

0 comments on commit 068e807

Please sign in to comment.