feat: Add more token info to token element

bnb-chain · Dec 23, 2024 · b930ad4 · b930ad4
1 parent 16d752a
commit b930ad4
Show file tree

Hide file tree

Showing 7 changed files with 23 additions and 8 deletions.
diff --git a/.release/.changeset/serious-cars-worry.md b/.release/.changeset/serious-cars-worry.md
@@ -0,0 +1,5 @@
+---
+"@bnb-chain/canonical-bridge-widget": patch
+---
+
+Add more token info to token element
diff --git a/apps/canonical-bridge-ui/next-env.d.ts b/apps/canonical-bridge-ui/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/apps/canonical-bridge-ui/package.json b/apps/canonical-bridge-ui/package.json
@@ -51,7 +51,6 @@
     "eslint-config-next": "14.2.3",
     "lint-staged": "~13.0.3",
     "prettier": "~2.7.1",
-    "supports-color": "8.1.1",
     "typescript": "5.5.4"
   },
   "lint-staged": {

diff --git a/...anonical-bridge-widget/src/modules/aggregator/components/SelectModal/ChooseTokenModal.tsx b/...anonical-bridge-widget/src/modules/aggregator/components/SelectModal/ChooseTokenModal.tsx
@@ -110,6 +110,9 @@ export function ChooseTokenModal(props: ChooseTokenModalProps) {
                 isActive={isActive}
                 isDisabled={isDisabled}
                 data-address={item.address}
+                data-name={item.name}
+                data-symbol={item.symbol}
+                data-display-symbol={item.displaySymbol}
                 incompatibleTooltip={formatMessage({
                   id: 'select-modal.token.incompatible.tooltip',
                 })}

diff --git a/...anonical-bridge-widget/src/modules/transfer/components/SelectButton/TokenSelectButton.tsx b/...anonical-bridge-widget/src/modules/transfer/components/SelectButton/TokenSelectButton.tsx
@@ -43,7 +43,7 @@ export function TokenSelectButton(props: SelectButtonProps) {
       <Flex gap={'8px'} alignItems={'center'} position={'relative'} overflow="hidden">
         <TokenInfoTooltip
           chainType={fromChain?.chainType}
-          tokenAddress={token?.address ?? ''}
+          tokenInfo={token}
           tokenLinkUrl={tokenUrl}
           offset={[-20, 6]}
         >

diff --git a/...l-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/RouteTitle.tsx b/...l-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/RouteTitle.tsx
@@ -53,7 +53,7 @@ export const RouteTitle = ({
       {toTokenInfo && hoverToShowTokenAddress && (
         <TokenInfoTooltip
           chainType={toChain?.chainType}
-          tokenAddress={toTokenInfo.address}
+          tokenInfo={toTokenInfo}
           tokenLinkUrl={tokenUrl}
           isReceiveArea={true}
         >
@@ -125,6 +125,9 @@ export const ToTokenInfo = React.forwardRef(
             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}
           >
             <Link
               href={tokenUrl}

diff --git a/...ge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/TokenInfoTooltip.tsx b/...ge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/TokenInfoTooltip.tsx
@@ -15,24 +15,26 @@ import {
 import { useMemo } from 'react';
 
 import { isNativeToken } from '@/core/utils/address.ts';
-import { ChainType } from '@/modules/aggregator';
+import { ChainType, IBridgeTokenBaseInfo } from '@/modules/aggregator';
 
 interface TokenTooltipProps extends PopoverProps {
   tokenLinkUrl: string;
-  tokenAddress: string;
+  tokenInfo?: IBridgeTokenBaseInfo;
   children: React.ReactNode;
   isReceiveArea?: boolean;
   chainType?: ChainType;
 }
 
 export const TokenInfoTooltip = ({
   children,
-  tokenAddress,
+  tokenInfo,
   tokenLinkUrl,
   isReceiveArea,
   chainType = 'evm',
   ...restProps
 }: TokenTooltipProps) => {
+  const tokenAddress = tokenInfo?.address ?? '';
+
   const theme = useTheme();
   const nativeToken = useMemo(
     () => isNativeToken(tokenAddress, chainType),
@@ -42,7 +44,10 @@ export const TokenInfoTooltip = ({
   return (
     <Flex
       className="bccb-widget-route-token-tooltip"
-      data-address={tokenAddress}
+      data-address={tokenInfo?.address}
+      data-name={tokenInfo?.name}
+      data-symbol={tokenInfo?.symbol}
+      data-display-symbol={tokenInfo?.displaySymbol}
       display={'inline-block'}
       w={'auto'}
     >