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]);