Merge pull request #272 from bnb-chain/hotfix/toTokenAddrIssue

fix: Fix to token display issue
bnb-chain · Jan 8, 2025 · 4ab9537 · 4ab9537
2 parents 2c24e80 + e57b843
commit 4ab9537
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 20 deletions.
diff --git a/.release/.changeset/gold-zebras-greet.md 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/...-widget/src/modules/transfer/components/Modal/TransactionSummaryModal/TransferSummary.tsx b/...-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 = () => {
                 <span style={{ marginRight: '2px' }}>
                   {formatMessage({ id: 'transfer.warning.confirm.to.address' })}
                 </span>
-                <Link
-                  isExternal
-                  href={formatTokenUrl(toChain?.tokenUrlPattern, toTokenInfo?.address)}
-                  display="inline-block"
-                  overflowWrap={'break-word'}
-                  pointerEvents={'all'}
-                  color="currentColor"
-                >
-                  {isBase
-                    ? formatAppAddress({ address: toTokenInfo?.address, isTruncated: true })
-                    : toTokenInfo?.address}
-                </Link>
+                {toTokenAddress ? (
+                  <Link
+                    isExternal
+                    href={formatTokenUrl(toChain?.tokenUrlPattern, toTokenAddress)}
+                    display="inline-block"
+                    overflowWrap={'break-word'}
+                    pointerEvents={'all'}
+                    color="currentColor"
+                  >
+                    {isBase
+                      ? formatAppAddress({ address: toTokenAddress, isTruncated: true })
+                      : toTokenAddress}
+                  </Link>
+                ) : null}
               </>
             ) : (
               <>
                 <span style={{ marginRight: '2px' }}>
                   {formatMessage({ id: 'transfer.warning.confirm.to.native.token.address' })}
                 </span>
-                <span>{toTokenInfo?.symbol?.toUpperCase()}</span>
+                <span>{getToTokenSymbol()?.[bridgeType]?.toUpperCase() ?? ''}</span>
               </>
             )}
           </span>

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