From b930ad496a0fdece4ab68923c0b32948bbfd9167 Mon Sep 17 00:00:00 2001 From: wenty22 Date: Mon, 23 Dec 2024 17:57:01 +0800 Subject: [PATCH] feat: Add more token info to token element --- .release/.changeset/serious-cars-worry.md | 5 +++++ apps/canonical-bridge-ui/next-env.d.ts | 2 +- apps/canonical-bridge-ui/package.json | 1 - .../components/SelectModal/ChooseTokenModal.tsx | 3 +++ .../components/SelectButton/TokenSelectButton.tsx | 2 +- .../TransferOverview/RouteInfo/RouteTitle.tsx | 5 ++++- .../TransferOverview/RouteInfo/TokenInfoTooltip.tsx | 13 +++++++++---- 7 files changed, 23 insertions(+), 8 deletions(-) create mode 100644 .release/.changeset/serious-cars-worry.md diff --git a/.release/.changeset/serious-cars-worry.md b/.release/.changeset/serious-cars-worry.md new file mode 100644 index 00000000..910f2f9c --- /dev/null +++ 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 index a4a7b3f5..4f11a03d 100644 --- a/apps/canonical-bridge-ui/next-env.d.ts +++ b/apps/canonical-bridge-ui/next-env.d.ts @@ -2,4 +2,4 @@ /// // 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 index 01771be5..b9c0ef73 100644 --- 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/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/ChooseTokenModal.tsx b/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/ChooseTokenModal.tsx index af62c3ca..778f48de 100644 --- a/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/ChooseTokenModal.tsx +++ b/packages/canonical-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/packages/canonical-bridge-widget/src/modules/transfer/components/SelectButton/TokenSelectButton.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/SelectButton/TokenSelectButton.tsx index aea43e14..2e61c386 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 @@ -43,7 +43,7 @@ export function TokenSelectButton(props: SelectButtonProps) { 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 9aceabc9..d14b494a 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 @@ -53,7 +53,7 @@ export const RouteTitle = ({ {toTokenInfo && hoverToShowTokenAddress && ( @@ -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} > { + const tokenAddress = tokenInfo?.address ?? ''; + const theme = useTheme(); const nativeToken = useMemo( () => isNativeToken(tokenAddress, chainType), @@ -42,7 +44,10 @@ export const TokenInfoTooltip = ({ return (