Merge pull request #171 from bnb-chain/wenty/search1206

feat: Show token address on `You Receive`
bnb-chain · Dec 6, 2024 · d5eac0c · d5eac0c
2 parents 22fbff8 + f86dcd0
commit d5eac0c
Show file tree

Hide file tree

Showing 15 changed files with 250 additions and 64 deletions.
diff --git a/.release/.changeset/light-emus-switch.md b/.release/.changeset/light-emus-switch.md
@@ -0,0 +1,5 @@
+---
+'@bnb-chain/canonical-bridge-widget': patch
+---
+
+Show token address on `You Receive`
diff --git a/.release/.changeset/pre.json b/.release/.changeset/pre.json
@@ -0,0 +1,13 @@
+{
+  "mode": "pre",
+  "tag": "alpha",
+  "initialVersions": {
+    "@bnb-chain/canonical-bridge-sdk": "0.4.2",
+    "@bnb-chain/canonical-bridge-widget": "0.5.7"
+  },
+  "changesets": [
+    "light-emus-switch",
+    "sharp-dryers-hear",
+    "slimy-crabs-know"
+  ]
+}
diff --git a/.release/.changeset/sharp-dryers-hear.md b/.release/.changeset/sharp-dryers-hear.md
@@ -0,0 +1,5 @@
+---
+"@bnb-chain/canonical-bridge-widget": patch
+---
+
+Support searching token by address
diff --git a/.release/.changeset/slimy-crabs-know.md b/.release/.changeset/slimy-crabs-know.md
@@ -0,0 +1,5 @@
+---
+"@bnb-chain/canonical-bridge-widget": patch
+---
+
+Show token address on `You Receive`
diff --git a/apps/canonical-bridge-ui/token-config/mainnet/chains.ts b/apps/canonical-bridge-ui/token-config/mainnet/chains.ts
@@ -1,6 +1,20 @@
 import { IChainConfig } from '@bnb-chain/canonical-bridge-widget';
 
 export const chains: IChainConfig[] = [
+  {
+    id: 56,
+    name: 'BNB Smart Chain',
+    nativeCurrency: {
+      name: 'BNB Chain Native Token',
+      symbol: 'BNB',
+      decimals: 18,
+    },
+    rpcUrl: 'https://bsc-dataseed.bnbchain.org',
+    explorer: {
+      name: 'bscscan',
+      url: 'https://bscscan.com',
+    },
+  },
   {
     id: 1,
     name: 'Ethereum',
@@ -71,20 +85,6 @@ export const chains: IChainConfig[] = [
       url: 'https://crab-scan.darwinia.network',
     },
   },
-  {
-    id: 56,
-    name: 'BNB Smart Chain',
-    nativeCurrency: {
-      name: 'BNB Chain Native Token',
-      symbol: 'BNB',
-      decimals: 18,
-    },
-    rpcUrl: 'https://bsc-dataseed.bnbchain.org',
-    explorer: {
-      name: 'bscscan',
-      url: 'https://bscscan.com',
-    },
-  },
   {
     id: 57,
     name: 'Syscoin',

diff --git a/apps/canonical-bridge-ui/token-config/mainnet/useTransferConfig.ts b/apps/canonical-bridge-ui/token-config/mainnet/useTransferConfig.ts
@@ -125,7 +125,7 @@ export function useTransferConfig() {
           exclude: {
             chains: [],
             tokens: {
-              1: ['cUSDCv3'],
+              1: ['cUSDCv3', '0x5e21d1ee5cf0077b314c381720273ae82378d613'],
               56: [
                 '0x67d66e8ec1fd25d98b3ccd3b19b7dc4b4b7fc493',
                 '0x0000000000000000000000000000000000000000',

diff --git a/packages/canonical-bridge-widget/CHANGELOG.md b/packages/canonical-bridge-widget/CHANGELOG.md
@@ -1,5 +1,36 @@
 # @bnb-chain/canonical-bridge-widget
 
+## 0.5.8-alpha.4
+
+### Patch Changes
+
+- Show token address on `You Receive`
+
+## 0.5.8-alpha.3
+
+### Patch Changes
+
+- Show token address on `You Receive`
+
+## 0.5.8-alpha.2
+
+### Patch Changes
+
+- Support searching token by address
+
+## 0.5.8-alpha.1
+
+### Patch Changes
+
+- Show token address on `You Receive`
+- Show token address on `You Receive`
+
+## 0.5.8-alpha.0
+
+### Patch Changes
+
+- Show token address on `You Recivce`
+
 ## 0.5.7
 
 ### Patch Changes

diff --git 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.7",
+  "version": "0.5.8-alpha.4",
   "description": "canonical bridge widget",
   "author": "bnb-chain",
   "private": false,

diff --git a/packages/canonical-bridge-widget/src/core/components/InfoTooltip/index.tsx b/packages/canonical-bridge-widget/src/core/components/InfoTooltip/index.tsx
@@ -6,17 +6,32 @@ import {
   useBreakpointValue,
   useDisclosure,
 } from '@bnb-chain/space';
+import React from 'react';
+import { useMemo } from 'react';
 
 interface InfoTooltipProps extends Omit<TooltipProps, 'children'> {
   iconProps?: IconProps;
+  children?: React.ReactElement;
 }
 
 export const InfoTooltip = (props: InfoTooltipProps) => {
-  const { iconProps, ...restProps } = props;
+  const { iconProps, children, ...restProps } = props;
   // Make tooltip controlled on mobile devices, default tooltip doesn't work.
   const isBase = useBreakpointValue({ base: true, md: false }) ?? false;
   const { isOpen, onOpen, onToggle, onClose } = useDisclosure();
 
+  const clone = useMemo(() => {
+    const element = children || <InfoCircleIcon display={'inline'} w={'16px'} h={'16px'} />;
+    return React.cloneElement(element, {
+      ...iconProps,
+      ...(isBase && {
+        onMouseEnter: onOpen,
+        onMouseLeave: onClose,
+        onClick: onToggle,
+      }),
+    });
+  }, [children, iconProps, isBase, onClose, onOpen, onToggle]);
+
   if (!restProps.label) return null;
   return (
     <Tooltip
@@ -28,17 +43,7 @@ export const InfoTooltip = (props: InfoTooltipProps) => {
       })}
       {...restProps}
     >
-      <InfoCircleIcon
-        display={'inline'}
-        w={'16px'}
-        h={'16px'}
-        {...(isBase && {
-          onMouseEnter: onOpen,
-          onMouseLeave: onClose,
-          onClick: onToggle,
-        })}
-        {...iconProps}
-      />
+      {clone}
     </Tooltip>
   );
 };
diff --git a/packages/canonical-bridge-widget/src/core/components/icons/AlertIcon.tsx b/packages/canonical-bridge-widget/src/core/components/icons/AlertIcon.tsx
@@ -0,0 +1,27 @@
+import { Icon, IconProps } from '@bnb-chain/space';
+
+export function AlertIcon(props: IconProps) {
+  return (
+    <Icon width="16px" height="17px" viewBox="0 0 16 17" fill="none" {...props}>
+      <mask
+        id="mask0_4487_75756"
+        style={{
+          maskType: 'alpha',
+        }}
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="16"
+        height="17"
+      >
+        <rect y="0.5" width="16" height="16" fill="#D9D9D9" />
+      </mask>
+      <g mask="url(#mask0_4487_75756)">
+        <path
+          d="M1.81669 14.5C1.69447 14.5 1.58336 14.4694 1.48336 14.4083C1.38336 14.3472 1.30558 14.2667 1.25002 14.1667C1.19447 14.0667 1.16391 13.9583 1.15836 13.8417C1.1528 13.725 1.18336 13.6111 1.25002 13.5L7.41669 2.83333C7.48336 2.72222 7.56947 2.63889 7.67502 2.58333C7.78058 2.52778 7.88891 2.5 8.00002 2.5C8.11113 2.5 8.21947 2.52778 8.32502 2.58333C8.43058 2.63889 8.51669 2.72222 8.58336 2.83333L14.75 13.5C14.8167 13.6111 14.8472 13.725 14.8417 13.8417C14.8361 13.9583 14.8056 14.0667 14.75 14.1667C14.6945 14.2667 14.6167 14.3472 14.5167 14.4083C14.4167 14.4694 14.3056 14.5 14.1834 14.5H1.81669ZM2.96669 13.1667H13.0334L8.00002 4.5L2.96669 13.1667ZM8.00002 12.5C8.18891 12.5 8.34725 12.4361 8.47502 12.3083C8.6028 12.1806 8.66669 12.0222 8.66669 11.8333C8.66669 11.6444 8.6028 11.4861 8.47502 11.3583C8.34725 11.2306 8.18891 11.1667 8.00002 11.1667C7.81113 11.1667 7.6528 11.2306 7.52502 11.3583C7.39724 11.4861 7.33336 11.6444 7.33336 11.8333C7.33336 12.0222 7.39724 12.1806 7.52502 12.3083C7.6528 12.4361 7.81113 12.5 8.00002 12.5ZM8.00002 10.5C8.18891 10.5 8.34725 10.4361 8.47502 10.3083C8.6028 10.1806 8.66669 10.0222 8.66669 9.83333V7.83333C8.66669 7.64444 8.6028 7.48611 8.47502 7.35833C8.34725 7.23056 8.18891 7.16667 8.00002 7.16667C7.81113 7.16667 7.6528 7.23056 7.52502 7.35833C7.39724 7.48611 7.33336 7.64444 7.33336 7.83333V9.83333C7.33336 10.0222 7.39724 10.1806 7.52502 10.3083C7.6528 10.4361 7.81113 10.5 8.00002 10.5Z"
+          fill="#FFE900"
+        />
+      </g>
+    </Icon>
+  );
+}
diff --git a/packages/canonical-bridge-widget/src/core/locales/en.ts b/packages/canonical-bridge-widget/src/core/locales/en.ts
@@ -24,6 +24,8 @@ export const en = {
   'route.fees.title': 'Fees:',
   'route.time.title': 'Time:',
   'route.allowed-send-amount': 'Your send amount should be between {min} to {max} {symbol}',
+  'route.token-address.tips':
+    'Please double check the received token address before making the transaction.',
 
   'route.no-found.title': 'No Available Routes',
   'route.no-found.desc': `Low liquidity, small input, or incompatible network/token. Adjust and retry.`,
@@ -84,7 +86,7 @@ export const en = {
     'Try adjusting your search request to find what you’re looking for',
 
   'select-modal.token.title': 'Choose Token',
-  'select-modal.token.placeholder': 'Search token by name',
+  'select-modal.token.placeholder': 'Search token by name or address',
   'select-modal.token.column.name': 'Name',
   'select-modal.token.column.balance': 'Wallet Balance',
   'select-modal.token.incompatible.tooltip':

diff --git a/packages/canonical-bridge-widget/src/core/utils/address.ts b/packages/canonical-bridge-widget/src/core/utils/address.ts
@@ -50,7 +50,7 @@ export function isEvmAddress(address?: string) {
   return !!address && /^0x[a-f0-9]{40}$/i.test(address);
 }
 
-export function isNativeToken(tokenAddress: string, chainType: ChainType = 'evm') {
+export function isNativeToken(tokenAddress?: string, chainType: ChainType = 'evm') {
   if (chainType === 'solana') {
     return tokenAddress === '11111111111111111111111111111111';
   }

diff --git a/...anonical-bridge-widget/src/modules/aggregator/components/SelectModal/ChooseTokenModal.tsx b/...anonical-bridge-widget/src/modules/aggregator/components/SelectModal/ChooseTokenModal.tsx
@@ -48,7 +48,8 @@ export function ChooseTokenModal(props: ChooseTokenModalProps) {
     filter: (item, keyword) => {
       return (
         item.displaySymbol?.toLowerCase().includes(keyword) ||
-        item.name?.toLowerCase().includes(keyword)
+        item.name?.toLowerCase().includes(keyword) ||
+        isSameAddress(item.address, keyword)
       );
     },
   });
@@ -146,24 +147,22 @@ export function ChooseTokenModal(props: ChooseTokenModalProps) {
                       <Flex className="bccb-widget-token-address-link" h="16px" overflow="hidden">
                         <Flex
                           flexDir="column"
-                          className={isNative || isActive ? undefined : 'token-info'}
+                          className={isNative ? undefined : 'token-info'}
                           transitionDuration="normal"
                           whiteSpace="nowrap"
                           w="100%"
                           color={theme.colors[colorMode].text.secondary}
                         >
-                          {(!isActive || isNative) && (
-                            <Text
-                              className="token-name"
-                              isTruncated
-                              flexShrink={0}
-                              fontSize="12px"
-                              fontWeight={500}
-                              lineHeight="16px"
-                            >
-                              {item.name}
-                            </Text>
-                          )}
+                          <Text
+                            className="token-name"
+                            isTruncated
+                            flexShrink={0}
+                            fontSize="12px"
+                            fontWeight={500}
+                            lineHeight="16px"
+                          >
+                            {item.name}
+                          </Text>
                           {!isNative && (
                             <TokenAddress
                               tokenUrlPattern={fromChain?.tokenUrlPattern}

diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/ReceiveInfo/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/ReceiveInfo/index.tsx
@@ -209,6 +209,7 @@ export const ReceiveInfo = ({ onOpen }: ReceiveInfoProps) => {
                         receiveAmt ? formatNumber(Number(Number(receiveAmt)), 8) : undefined
                       }
                       toTokenInfo={toTokenInfo?.[bridgeType]}
+                      hoverToShowTokenAddress={false}
                     />
                   )}
                   <Flex flexDir={'column'} gap={'4px'}>