diff --git a/.release/.changeset/gold-zebras-greet.md b/.release/.changeset/gold-zebras-greet.md new file mode 100644 index 00000000..03e07e24 --- /dev/null +++ b/.release/.changeset/gold-zebras-greet.md @@ -0,0 +1,5 @@ +--- +"@bnb-chain/canonical-bridge-widget": patch +--- + +fix: Fix to token display issue diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/Modal/TransactionSummaryModal/TransferSummary.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/Modal/TransactionSummaryModal/TransferSummary.tsx index c45865f6..66b4d9b0 100644 --- a/packages/canonical-bridge-widget/src/modules/transfer/components/Modal/TransactionSummaryModal/TransferSummary.tsx +++ b/packages/canonical-bridge-widget/src/modules/transfer/components/Modal/TransactionSummaryModal/TransferSummary.tsx @@ -1,5 +1,6 @@ import { Flex, Link, useBreakpointValue, useColorMode, useIntl, useTheme } from '@bnb-chain/space'; import { useMemo } from 'react'; +import { BridgeType } from '@bnb-chain/canonical-bridge-sdk'; import { useAppSelector } from '@/modules/store/StoreProvider'; import { useGetReceiveAmount } from '@/modules/transfer/hooks/useGetReceiveAmount'; @@ -22,21 +23,28 @@ export const TransferSummary = () => { const selectedToken = useAppSelector((state) => state.transfer.selectedToken); const sendValue = useAppSelector((state) => state.transfer.sendValue); const transferActionInfo = useAppSelector((state) => state.transfer.transferActionInfo); - const { toTokenInfo } = useToTokenInfo(); + const { getToTokenAddress, toTokenInfo, getToTokenSymbol } = useToTokenInfo(); + const bridgeType = useMemo( + () => transferActionInfo?.bridgeType, + [transferActionInfo], + ) as BridgeType; const receiveAmt = useMemo(() => { if (!Number(sendValue)) return null; - if (transferActionInfo && transferActionInfo.bridgeType) { - const bridgeType = transferActionInfo.bridgeType; + if (bridgeType) { const receiveValue = getSortedReceiveAmount(); return Number(receiveValue[bridgeType].value); } return null; - }, [getSortedReceiveAmount, transferActionInfo, sendValue]); + }, [getSortedReceiveAmount, bridgeType, sendValue]); + + const toTokenAddress = useMemo(() => { + return bridgeType ? getToTokenAddress()[bridgeType] : ''; + }, [bridgeType, getToTokenAddress]); const isNative = useMemo( - () => isNativeToken(toTokenInfo?.address, toChain?.chainType), - [toTokenInfo?.address, toChain?.chainType], + () => isNativeToken(toTokenAddress, toChain?.chainType), + [toTokenAddress, toChain?.chainType], ); return ( @@ -77,25 +85,27 @@ export const TransferSummary = () => { {formatMessage({ id: 'transfer.warning.confirm.to.address' })} - - {isBase - ? formatAppAddress({ address: toTokenInfo?.address, isTruncated: true }) - : toTokenInfo?.address} - + {toTokenAddress ? ( + + {isBase + ? formatAppAddress({ address: toTokenAddress, isTruncated: true }) + : toTokenAddress} + + ) : null} ) : ( <> {formatMessage({ id: 'transfer.warning.confirm.to.native.token.address' })} - {toTokenInfo?.symbol?.toUpperCase()} + {getToTokenSymbol()?.[bridgeType]?.toUpperCase() ?? ''} )} diff --git a/packages/canonical-bridge-widget/src/modules/transfer/hooks/useToTokenInfo.ts b/packages/canonical-bridge-widget/src/modules/transfer/hooks/useToTokenInfo.ts index 77a848ca..c4279d62 100644 --- a/packages/canonical-bridge-widget/src/modules/transfer/hooks/useToTokenInfo.ts +++ b/packages/canonical-bridge-widget/src/modules/transfer/hooks/useToTokenInfo.ts @@ -21,7 +21,7 @@ export const useToTokenInfo = () => { deBridge: toTokenInfo?.deBridge?.raw?.address || '', stargate: toTokenInfo?.stargate?.raw?.token?.address || '', layerZero: toTokenInfo?.layerZero?.raw?.address || '', - meson: toTokenInfo?.meson?.raw?.addr || 0, + meson: toTokenInfo?.meson?.raw?.addr || '', }; }, [toTokenInfo]);