From c4f3ee791d045307c26f28e4fea3e53af1f83b7b Mon Sep 17 00:00:00 2001
From: wenty22 <wenty.l@nodereal.io>
Date: Wed, 25 Dec 2024 10:09:06 +0800
Subject: [PATCH] feat: Update token element's info

---
 .release/.changeset/hungry-doors-lick.md             |  6 ++++++
 .release/.changeset/pre.json                         |  1 +
 packages/canonical-bridge-sdk/CHANGELOG.md           |  6 ++++++
 packages/canonical-bridge-sdk/package.json           |  2 +-
 packages/canonical-bridge-widget/CHANGELOG.md        |  6 ++++++
 packages/canonical-bridge-widget/package.json        |  2 +-
 .../components/SelectButton/TokenSelectButton.tsx    |  4 ++++
 .../TransferOverview/RouteInfo/RouteTitle.tsx        | 12 ++++++++----
 .../TransferOverview/RouteInfo/TokenInfoTooltip.tsx  | 12 +++++-------
 9 files changed, 38 insertions(+), 13 deletions(-)
 create mode 100644 .release/.changeset/hungry-doors-lick.md

diff --git a/.release/.changeset/hungry-doors-lick.md b/.release/.changeset/hungry-doors-lick.md
new file mode 100644
index 00000000..aa293e89
--- /dev/null
+++ b/.release/.changeset/hungry-doors-lick.md
@@ -0,0 +1,6 @@
+---
+"@bnb-chain/canonical-bridge-widget": patch
+"@bnb-chain/canonical-bridge-sdk": patch
+---
+
+Update token element's info
diff --git a/.release/.changeset/pre.json b/.release/.changeset/pre.json
index bb5db7f7..46fd6fce 100644
--- a/.release/.changeset/pre.json
+++ b/.release/.changeset/pre.json
@@ -7,6 +7,7 @@
   },
   "changesets": [
     "bright-impalas-sniff",
+    "hungry-doors-lick",
     "serious-cars-worry"
   ]
 }
diff --git a/packages/canonical-bridge-sdk/CHANGELOG.md b/packages/canonical-bridge-sdk/CHANGELOG.md
index 1d30149e..34eb7732 100644
--- a/packages/canonical-bridge-sdk/CHANGELOG.md
+++ b/packages/canonical-bridge-sdk/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @bnb-chain/canonical-bridge-sdk
 
+## 0.4.6-alpha.1
+
+### Patch Changes
+
+- Update token element's info
+
 ## 0.4.6-alpha.0
 
 ### Patch Changes
diff --git a/packages/canonical-bridge-sdk/package.json b/packages/canonical-bridge-sdk/package.json
index 403cb5ea..caa3061a 100644
--- a/packages/canonical-bridge-sdk/package.json
+++ b/packages/canonical-bridge-sdk/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@bnb-chain/canonical-bridge-sdk",
-  "version": "0.4.6-alpha.0",
+  "version": "0.4.6-alpha.1",
   "description": "canonical bridge sdk",
   "author": "bnb-chain",
   "private": false,
diff --git a/packages/canonical-bridge-widget/CHANGELOG.md b/packages/canonical-bridge-widget/CHANGELOG.md
index f1e36a84..de341a27 100644
--- a/packages/canonical-bridge-widget/CHANGELOG.md
+++ b/packages/canonical-bridge-widget/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @bnb-chain/canonical-bridge-widget
 
+## 0.5.16-alpha.2
+
+### Patch Changes
+
+- Update token element's info
+
 ## 0.5.16-alpha.1
 
 ### Patch Changes
diff --git a/packages/canonical-bridge-widget/package.json b/packages/canonical-bridge-widget/package.json
index 6af890de..38406819 100644
--- a/packages/canonical-bridge-widget/package.json
+++ b/packages/canonical-bridge-widget/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@bnb-chain/canonical-bridge-widget",
-  "version": "0.5.16-alpha.1",
+  "version": "0.5.16-alpha.2",
   "description": "canonical bridge widget",
   "author": "bnb-chain",
   "private": false,
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/SelectButton/TokenSelectButton.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/SelectButton/TokenSelectButton.tsx
index 2e61c386..d88c41bc 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/SelectButton/TokenSelectButton.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/SelectButton/TokenSelectButton.tsx
@@ -46,6 +46,10 @@ export function TokenSelectButton(props: SelectButtonProps) {
           tokenInfo={token}
           tokenLinkUrl={tokenUrl}
           offset={[-20, 6]}
+          data-address={token?.address}
+          data-name={token?.name}
+          data-symbol={token?.symbol}
+          data-display-symbol={token?.displaySymbol}
         >
           <Box>
             <IconImage
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/RouteTitle.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/RouteTitle.tsx
index d14b494a..23372063 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/RouteTitle.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/RouteTitle.tsx
@@ -56,6 +56,10 @@ export const RouteTitle = ({
           tokenInfo={toTokenInfo}
           tokenLinkUrl={tokenUrl}
           isReceiveArea={true}
+          data-to-address={toTokenInfo?.address}
+          data-to-name={toTokenInfo?.name}
+          data-to-symbol={toTokenInfo?.symbol}
+          data-to-display-symbol={toTokenInfo?.displaySymbol}
         >
           <ToTokenInfo
             toTokenInfo={toTokenInfo}
@@ -124,10 +128,10 @@ export const ToTokenInfo = React.forwardRef(
             color={theme.colors[colorMode].text.tertiary}
             justifyContent="flex-start"
             className="bccb-widget-route-token-to-address"
-            data-address={toTokenInfo.address}
-            data-name={toTokenInfo.name}
-            data-symbol={toTokenInfo.symbol}
-            data-display-symbol={toTokenInfo.displaySymbol}
+            data-to-address={toTokenInfo.address}
+            data-to-name={toTokenInfo.name}
+            data-to-symbol={toTokenInfo.symbol}
+            data-to-display-symbol={toTokenInfo.displaySymbol}
           >
             <Link
               href={tokenUrl}
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/TokenInfoTooltip.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/TokenInfoTooltip.tsx
index a5c460af..77c3f1a7 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/TokenInfoTooltip.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/TokenInfoTooltip.tsx
@@ -10,19 +10,19 @@ import {
   useTheme,
   LightMode,
   Portal,
-  PopoverProps,
 } from '@bnb-chain/space';
 import { useMemo } from 'react';
 
 import { isNativeToken } from '@/core/utils/address.ts';
 import { ChainType, IBridgeTokenBaseInfo } from '@/modules/aggregator';
 
-interface TokenTooltipProps extends PopoverProps {
+interface TokenTooltipProps {
   tokenLinkUrl: string;
   tokenInfo?: IBridgeTokenBaseInfo;
   children: React.ReactNode;
   isReceiveArea?: boolean;
   chainType?: ChainType;
+  offset?: [number, number];
 }
 
 export const TokenInfoTooltip = ({
@@ -31,6 +31,7 @@ export const TokenInfoTooltip = ({
   tokenLinkUrl,
   isReceiveArea,
   chainType = 'evm',
+  offset,
   ...restProps
 }: TokenTooltipProps) => {
   const tokenAddress = tokenInfo?.address ?? '';
@@ -44,12 +45,9 @@ export const TokenInfoTooltip = ({
   return (
     <Flex
       className="bccb-widget-route-token-tooltip"
-      data-address={tokenInfo?.address}
-      data-name={tokenInfo?.name}
-      data-symbol={tokenInfo?.symbol}
-      data-display-symbol={tokenInfo?.displaySymbol}
       display={'inline-block'}
       w={'auto'}
+      {...restProps}
     >
       <LightMode>
         <Popover
@@ -57,7 +55,7 @@ export const TokenInfoTooltip = ({
           trigger={'hover'}
           strategy={'fixed'}
           autoFocus={false}
-          {...restProps}
+          offset={offset}
         >
           <PopoverTrigger>{children}</PopoverTrigger>
           <Portal>