From a379680c164ac5ee86ba24e73c0503d98c0b1790 Mon Sep 17 00:00:00 2001
From: aidencao <aiden.c@nodereal.io>
Date: Mon, 11 Nov 2024 10:34:04 +0800
Subject: [PATCH 01/29] feat(canonical-bridge-server): Update keepalive timeout

---
 apps/canonical-bridge-server/src/main.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/canonical-bridge-server/src/main.ts b/apps/canonical-bridge-server/src/main.ts
index 7968ee17..793c8338 100644
--- a/apps/canonical-bridge-server/src/main.ts
+++ b/apps/canonical-bridge-server/src/main.ts
@@ -38,8 +38,8 @@ async function bootstrap() {
     logger.log('Listening on port', SERVER_PORT);
   });
 
-  server.keepAliveTimeout = 61 * 1000;
-  server.headersTimeout = 62 * 1000;
+  server.keepAliveTimeout = 121 * 1000;
+  server.headersTimeout = 122 * 1000;
 }
 
 bootstrap();

From a67b1102698a68aa32f41c730046c3d7aae0f50b Mon Sep 17 00:00:00 2001
From: wenty22 <wenty.l@nodereal.io>
Date: Mon, 11 Nov 2024 16:01:15 +0800
Subject: [PATCH 02/29] fix: Show solana native token  balance

---
 common/config/rush/pnpm-lock.yaml             | 10 ++---
 packages/canonical-bridge-widget/package.json |  2 +-
 .../aggregator/shared/getTokenBalances.ts     | 39 ++++++++++++-------
 .../transfer/components/ToAccount/index.tsx   |  2 +-
 4 files changed, 31 insertions(+), 22 deletions(-)

diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml
index 8b20f718..989428b7 100644
--- a/common/config/rush/pnpm-lock.yaml
+++ b/common/config/rush/pnpm-lock.yaml
@@ -304,8 +304,8 @@ importers:
         specifier: ~11.13.0
         version: 11.13.0(@emotion/react@11.13.3(@types/react@18.3.8)(react@18.3.1)(supports-color@9.4.0))(@types/react@18.3.8)(react@18.3.1)(supports-color@9.4.0)
       '@node-real/walletkit':
-        specifier: 2.4.1-alpha.0
-        version: 2.4.1-alpha.0(@babel/runtime@7.25.0)(@react-native-async-storage/async-storage@1.24.0)(@tanstack/react-query@5.50.1(react@18.3.1))(@types/react@18.3.8)(bs58@6.0.0)(bufferutil@4.0.8)(encoding@0.1.13)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(tslib@2.7.0)(typescript@5.5.4)(utf-8-validate@5.0.9)(viem@2.21.14(bufferutil@4.0.8)(typescript@5.5.4)(utf-8-validate@5.0.9)(zod@3.22.4))(wagmi@2.12.14(@react-native-async-storage/async-storage@1.24.0)(@tanstack/query-core@5.50.1)(@tanstack/react-query@5.50.1(react@18.3.1))(@types/react@18.3.8)(bufferutil@4.0.8)(encoding@0.1.13)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@3.29.4)(typescript@5.5.4)(utf-8-validate@5.0.9)(viem@2.21.14(bufferutil@4.0.8)(typescript@5.5.4)(utf-8-validate@5.0.9)(zod@3.22.4))(zod@3.22.4))(zod@3.22.4)
+        specifier: 2.4.1-alpha.1
+        version: 2.4.1-alpha.1(@babel/runtime@7.25.0)(@react-native-async-storage/async-storage@1.24.0)(@tanstack/react-query@5.50.1(react@18.3.1))(@types/react@18.3.8)(bs58@6.0.0)(bufferutil@4.0.8)(encoding@0.1.13)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(tslib@2.7.0)(typescript@5.5.4)(utf-8-validate@5.0.9)(viem@2.21.14(bufferutil@4.0.8)(typescript@5.5.4)(utf-8-validate@5.0.9)(zod@3.22.4))(wagmi@2.12.14(@react-native-async-storage/async-storage@1.24.0)(@tanstack/query-core@5.50.1)(@tanstack/react-query@5.50.1(react@18.3.1))(@types/react@18.3.8)(bufferutil@4.0.8)(encoding@0.1.13)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@3.29.4)(typescript@5.5.4)(utf-8-validate@5.0.9)(viem@2.21.14(bufferutil@4.0.8)(typescript@5.5.4)(utf-8-validate@5.0.9)(zod@3.22.4))(zod@3.22.4))(zod@3.22.4)
       '@tanstack/react-query':
         specifier: ~5.50.1
         version: 5.50.1(react@18.3.1)
@@ -2993,8 +2993,8 @@ packages:
       viem: ^2
       wagmi: ^2
 
-  '@node-real/walletkit@2.4.1-alpha.0':
-    resolution: {integrity: sha512-rl/uXrktICOROw4cGWXAmIdA9Hw8QlBW/GVYts2ucSJuwrST0EInM10Z7jwNCdJyn1ANDwzB5L/lA41BDJPafA==}
+  '@node-real/walletkit@2.4.1-alpha.1':
+    resolution: {integrity: sha512-1IBDDYb6b6EqytQxCqp5BdztMp3V2XR+numoyzdASYE8eoDEEEhfTv6fB8t11MFKzauIQGTWbVDHyM39hDlUxw==}
     peerDependencies:
       '@tanstack/react-query': ^5
       react: '>=17'
@@ -15978,7 +15978,7 @@ snapshots:
       - utf-8-validate
       - zod
 
-  '@node-real/walletkit@2.4.1-alpha.0(@babel/runtime@7.25.0)(@react-native-async-storage/async-storage@1.24.0)(@tanstack/react-query@5.50.1(react@18.3.1))(@types/react@18.3.8)(bs58@6.0.0)(bufferutil@4.0.8)(encoding@0.1.13)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(tslib@2.7.0)(typescript@5.5.4)(utf-8-validate@5.0.9)(viem@2.21.14(bufferutil@4.0.8)(typescript@5.5.4)(utf-8-validate@5.0.9)(zod@3.22.4))(wagmi@2.12.14(@react-native-async-storage/async-storage@1.24.0)(@tanstack/query-core@5.50.1)(@tanstack/react-query@5.50.1(react@18.3.1))(@types/react@18.3.8)(bufferutil@4.0.8)(encoding@0.1.13)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@3.29.4)(typescript@5.5.4)(utf-8-validate@5.0.9)(viem@2.21.14(bufferutil@4.0.8)(typescript@5.5.4)(utf-8-validate@5.0.9)(zod@3.22.4))(zod@3.22.4))(zod@3.22.4)':
+  '@node-real/walletkit@2.4.1-alpha.1(@babel/runtime@7.25.0)(@react-native-async-storage/async-storage@1.24.0)(@tanstack/react-query@5.50.1(react@18.3.1))(@types/react@18.3.8)(bs58@6.0.0)(bufferutil@4.0.8)(encoding@0.1.13)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(tslib@2.7.0)(typescript@5.5.4)(utf-8-validate@5.0.9)(viem@2.21.14(bufferutil@4.0.8)(typescript@5.5.4)(utf-8-validate@5.0.9)(zod@3.22.4))(wagmi@2.12.14(@react-native-async-storage/async-storage@1.24.0)(@tanstack/query-core@5.50.1)(@tanstack/react-query@5.50.1(react@18.3.1))(@types/react@18.3.8)(bufferutil@4.0.8)(encoding@0.1.13)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@3.29.4)(typescript@5.5.4)(utf-8-validate@5.0.9)(viem@2.21.14(bufferutil@4.0.8)(typescript@5.5.4)(utf-8-validate@5.0.9)(zod@3.22.4))(zod@3.22.4))(zod@3.22.4)':
     dependencies:
       '@metamask/jazzicon': 2.0.0
       '@solana/wallet-adapter-react': 0.15.35(@solana/web3.js@1.95.4(bufferutil@4.0.8)(encoding@0.1.13)(utf-8-validate@5.0.9))(bs58@6.0.0)(react@18.3.1)
diff --git a/packages/canonical-bridge-widget/package.json b/packages/canonical-bridge-widget/package.json
index 34187212..1da97e61 100644
--- a/packages/canonical-bridge-widget/package.json
+++ b/packages/canonical-bridge-widget/package.json
@@ -45,7 +45,7 @@
     "@bnb-chain/space": "workspace:*",
     "@emotion/react": "~11.13.0",
     "@emotion/styled": "~11.13.0",
-    "@node-real/walletkit": "2.4.1-alpha.0",
+    "@node-real/walletkit": "2.4.1-alpha.1",
     "@tanstack/react-query": "~5.50.1",
     "@types/lodash": "~4.17.7",
     "@types/node": "^20",
diff --git a/packages/canonical-bridge-widget/src/modules/aggregator/shared/getTokenBalances.ts b/packages/canonical-bridge-widget/src/modules/aggregator/shared/getTokenBalances.ts
index 239db51b..1f3e6002 100644
--- a/packages/canonical-bridge-widget/src/modules/aggregator/shared/getTokenBalances.ts
+++ b/packages/canonical-bridge-widget/src/modules/aggregator/shared/getTokenBalances.ts
@@ -1,7 +1,7 @@
 import { Address, Chain, createPublicClient, formatUnits, http } from 'viem';
 import { TronWeb } from 'tronweb';
 import * as SPLToken from '@solana/spl-token';
-import { Connection, PublicKey } from '@solana/web3.js';
+import { Connection, LAMPORTS_PER_SOL, PublicKey } from '@solana/web3.js';
 import { TOKEN_PROGRAM_ID } from '@solana/spl-token';
 import axios from 'axios';
 
@@ -192,24 +192,33 @@ async function getSolanaTokenBalances({
     if (!account || !tokens?.length || !connection) {
       return {};
     }
-    const balances: Record<string, string | undefined> = {};
 
     // https://stackoverflow.com/questions/69700173/solana-check-all-spl-token-balances-of-a-wallet
-    const res = await connection.getTokenAccountsByOwner(new PublicKey(account), {
-      programId: TOKEN_PROGRAM_ID,
-    });
+    const [splTokensRes, nativeTokenRes] = await Promise.allSettled([
+      connection.getTokenAccountsByOwner(new PublicKey(account), {
+        programId: TOKEN_PROGRAM_ID,
+      }),
+      connection.getBalance(new PublicKey(account!)),
+    ]);
 
-    res?.value?.forEach((e) => {
-      const accountInfo = SPLToken.AccountLayout.decode(e.account.data);
+    const balances: Record<string, string | undefined> = {};
+    if (splTokensRes.status === 'fulfilled') {
+      splTokensRes.value?.value?.forEach((e) => {
+        const accountInfo = SPLToken.AccountLayout.decode(e.account.data);
+
+        const token = tokens.find((t) => isSameAddress(t.address, accountInfo.mint.toBase58()));
+        if (token) {
+          balances[token.displaySymbol.toUpperCase()] = formatUnits(
+            accountInfo.amount,
+            token.decimals,
+          );
+        }
+      });
+    }
 
-      const token = tokens.find((t) => isSameAddress(t.address, accountInfo.mint.toBase58()));
-      if (token) {
-        balances[token.displaySymbol.toUpperCase()] = formatUnits(
-          accountInfo.amount,
-          token.decimals,
-        );
-      }
-    });
+    if (nativeTokenRes.status === 'fulfilled') {
+      balances['SOL'] = String(nativeTokenRes.value / LAMPORTS_PER_SOL);
+    }
 
     tokens.forEach((t) => {
       const key = t.displaySymbol.toUpperCase();
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/ToAccount/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/ToAccount/index.tsx
index 6d580e08..0bae50f8 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/ToAccount/index.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/ToAccount/index.tsx
@@ -60,7 +60,7 @@ export function ToAccount(props: FlexProps) {
     if (!toAccount.address) setInputValue('');
   }, [toAccount.address]);
 
-  const { isInvalid, isAvailableAccount } = useMemo(() => {
+  const { isInvalid } = useMemo(() => {
     if (isTronTransfer) {
       return {
         isInvalid:

From aeadcfe8395513c9636ca83311eb1c63f52af521 Mon Sep 17 00:00:00 2001
From: chris <leosameric@gmail.com>
Date: Thu, 7 Nov 2024 18:28:13 +1000
Subject: [PATCH 03/29] chore: Add class name WIP

---
 .../components/Button/RefreshingButton.tsx      |  1 +
 .../transfer/components/FromSection/index.tsx   | 10 +++++++++-
 .../components/NetWorkSection/index.tsx         | 16 ++++++++++++++--
 .../transfer/components/SelectButton/index.tsx  |  2 ++
 .../transfer/components/ToSection/index.tsx     | 10 +++++++++-
 .../RouteInfo/AllowedSendAmount.tsx             |  1 +
 .../RouteInfo/EstimatedArrivalTime.tsx          |  5 +++--
 .../TransferOverview/RouteInfo/FeeBreakdown.tsx |  7 ++++++-
 .../TransferOverview/RouteInfo/FeesInfo.tsx     |  3 +++
 .../RouteInfo/OtherRouteError.tsx               |  1 +
 .../RouteInfo/RouteName/BestRouteTag.tsx        |  1 +
 .../RouteInfo/RouteName/index.tsx               |  2 ++
 .../RouteInfo/RouteSkeleton.tsx                 |  1 +
 .../TransferOverview/RouteInfo/RouteTitle.tsx   | 10 +++++++++-
 .../TransferOverview/RouteInfo/RouteWrapper.tsx |  1 +
 .../RouteInfo/TokenInfoTooltip.tsx              |  2 +-
 .../components/TransferOverview/index.tsx       | 17 ++++++++++++++---
 .../TransferOverview/modal/RoutesModal.tsx      | 11 +++++++++--
 .../src/modules/transfer/index.tsx              |  2 ++
 19 files changed, 89 insertions(+), 14 deletions(-)

diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/Button/RefreshingButton.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/Button/RefreshingButton.tsx
index cae4f583..81adfeb7 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/Button/RefreshingButton.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/Button/RefreshingButton.tsx
@@ -66,6 +66,7 @@ export const RefreshingButton = (props: BoxProps) => {
 
   return transferActionInfo ? (
     <Box
+      className={'bccb-widget-refreshing-button'}
       cursor={!isGlobalFeeLoading && !isRefreshing ? 'pointer' : 'not-allowed'}
       color={theme.colors[colorMode].button.refresh.text}
       _hover={{
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/FromSection/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/FromSection/index.tsx
index 650c81c7..d79169a9 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/FromSection/index.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/FromSection/index.tsx
@@ -14,8 +14,16 @@ export function FromSection() {
   const theme = useTheme();
 
   return (
-    <Flex flexDir="column" gap={'8px'} w={'100%'} flex={1} h={'48px'}>
+    <Flex
+      className="bccb-widget-network-from"
+      flexDir="column"
+      gap={'8px'}
+      w={'100%'}
+      flex={1}
+      h={'48px'}
+    >
       <Flex
+        className="bccb-widget-network-title"
         alignItems="center"
         justifyContent={'space-between'}
         display={{ base: 'flex', md: 'none' }}
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/NetWorkSection/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/NetWorkSection/index.tsx
index b8ee4fd2..9bc31e2e 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/NetWorkSection/index.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/NetWorkSection/index.tsx
@@ -10,14 +10,25 @@ export const NetWorkSection = () => {
   const theme = useTheme();
 
   return (
-    <Flex flexDir={'column'} gap={'8px'} mb={{ base: 0, md: theme.sizes['2'] }}>
+    <Flex
+      className="bccb-widget-network"
+      flexDir={'column'}
+      gap={'8px'}
+      mb={{ base: 0, md: theme.sizes['2'] }}
+    >
       <Flex flexDir={'row'} display={{ base: 'none', md: 'flex' }}>
-        <Flex alignItems="center" justifyContent={'space-between'} flex={1}>
+        <Flex
+          className="bccb-widget-network-title"
+          alignItems="center"
+          justifyContent={'space-between'}
+          flex={1}
+        >
           <Typography variant="label" size={'md'} color={theme.colors[colorMode].text.placeholder}>
             {formatMessage({ id: 'from.section.title' })}
           </Typography>
         </Flex>
         <Flex
+          className="bccb-widget-network-title"
           alignItems="center"
           justifyContent={'space-between'}
           flex={1}
@@ -30,6 +41,7 @@ export const NetWorkSection = () => {
         </Flex>
       </Flex>{' '}
       <Flex
+        className="bccb-widget-network-row"
         flexDir={['column', 'column', 'row']}
         justifyContent={'space-between'}
         alignItems={'center'}
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/SelectButton/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/SelectButton/index.tsx
index 3c781247..8f81fd2e 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/SelectButton/index.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/SelectButton/index.tsx
@@ -17,6 +17,7 @@ export function SelectButton(props: SelectButtonProps) {
 
   return (
     <Button
+      className="bccb-widget-network-button"
       borderRadius={'8px'}
       flexShrink={0}
       h={'48px'}
@@ -45,6 +46,7 @@ export function SelectButton(props: SelectButtonProps) {
           fallbackBgColor={theme.colors[colorMode].support.primary[4]}
         />
         <Flex
+          className="bccb-widget-network-name"
           flexDir={'column'}
           alignItems={'flex-start'}
           whiteSpace="nowrap"
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/ToSection/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/ToSection/index.tsx
index a9dac1c4..c3f60f5a 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/ToSection/index.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/ToSection/index.tsx
@@ -13,8 +13,16 @@ export function ToSection() {
   const toChain = useAppSelector((state) => state.transfer.toChain);
 
   return (
-    <Flex flexDir="column" gap={'8px'} w={'100%'} flex={1} h={'48px'}>
+    <Flex
+      className="bccb-widget-network-to"
+      flexDir="column"
+      gap={'8px'}
+      w={'100%'}
+      flex={1}
+      h={'48px'}
+    >
       <Flex
+        className="bccb-widget-network-title"
         alignItems="center"
         justifyContent={'space-between'}
         display={{ base: 'flex', md: 'none' }}
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/AllowedSendAmount.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/AllowedSendAmount.tsx
index cb725ebd..f55712c6 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/AllowedSendAmount.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/AllowedSendAmount.tsx
@@ -21,6 +21,7 @@ export const AllowedSendAmount = ({
 
   return allowedSendAmount && isError ? (
     <Flex
+      className="bccb-widget-allowed-send-amount"
       flexDir={'row'}
       alignItems={'center'}
       color={
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/EstimatedArrivalTime.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/EstimatedArrivalTime.tsx
index 35971613..28ede3de 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/EstimatedArrivalTime.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/EstimatedArrivalTime.tsx
@@ -44,6 +44,7 @@ export const EstimatedArrivalTime = ({
 
   return (
     <Flex
+      className="bccb-widget-route-estimated-time"
       gap={'4px'}
       flexDir={'row'}
       alignItems={'center'}
@@ -53,11 +54,11 @@ export const EstimatedArrivalTime = ({
       {...otherProps}
     >
       <TimerIcon w={'16px'} h={'16px'} />
-      <Box fontSize={['14px']} fontWeight={400}>
+      <Box className="bccb-widget-route-info-label" fontSize={['14px']} fontWeight={400}>
         {formatMessage({ id: 'route.time.title' })}
       </Box>
       {waitingTime ? (
-        <Box fontSize={'14px'} fontWeight={500}>
+        <Box className="bccb-widget-route-info-text" fontSize={'14px'} fontWeight={500}>
           ~{formatEstimatedTime(waitingTime)}
         </Box>
       ) : (
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/FeeBreakdown.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/FeeBreakdown.tsx
index c961bde0..2fee40aa 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/FeeBreakdown.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/FeeBreakdown.tsx
@@ -4,7 +4,12 @@ export const FeeBreakdown = ({ title, value }: { title: string; value: string })
   const theme = useTheme();
   // TODO: Use colorMode
   return (
-    <Flex flexDir={'row'} color={theme.colors.light.text.primary} gap={'4px'}>
+    <Flex
+      className="bccb-widget-route-info-tooltip-fee"
+      flexDir={'row'}
+      color={theme.colors.light.text.primary}
+      gap={'4px'}
+    >
       <Box fontSize={'12px'} fontWeight={400}>
         {title}
       </Box>
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/FeesInfo.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/FeesInfo.tsx
index 1145390b..836fc034 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/FeesInfo.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/FeesInfo.tsx
@@ -18,6 +18,7 @@ export const FeesInfo = ({ summary, breakdown, bridgeType, isError }: FeesInfoPr
   const { formatMessage } = useIntl();
   return (
     <Box
+      className="bccb-widget-route-fee-info"
       color={theme.colors[colorMode].text.tertiary}
       display={'inline-block'}
       lineHeight={'16px'}
@@ -30,6 +31,7 @@ export const FeesInfo = ({ summary, breakdown, bridgeType, isError }: FeesInfoPr
     >
       <FeesIcon w={'16px'} h={'16px'} mr={'4px'} />
       <Box
+        className="bccb-widget-route-info-label"
         mr={'4px'}
         as="span"
         display={'inline'}
@@ -40,6 +42,7 @@ export const FeesInfo = ({ summary, breakdown, bridgeType, isError }: FeesInfoPr
         {formatMessage({ id: 'route.fees.title' })}
       </Box>
       <Box
+        className="bccb-widget-route-info-text"
         mr={'4px'}
         as="span"
         display={'inline'}
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/OtherRouteError.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/OtherRouteError.tsx
index f7a9276c..28c38597 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/OtherRouteError.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/OtherRouteError.tsx
@@ -15,6 +15,7 @@ export const OtherRouteError = ({ bridgeType }: OtherRouteErrorProps) => {
   const routeError = useAppSelector((state) => state.transfer.routeError);
   return routeError && routeError[bridgeType] ? (
     <Box
+      className="bccb-widget-route-error"
       position={'static'}
       color={theme.colors[colorMode].route.warning}
       lineHeight={'16px'}
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/RouteName/BestRouteTag.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/RouteName/BestRouteTag.tsx
index d87c6585..14d43b12 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/RouteName/BestRouteTag.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/RouteName/BestRouteTag.tsx
@@ -10,6 +10,7 @@ export const BestRouteTag = ({ bestMode }: TBestRouteTag) => {
   const { formatMessage } = useIntl();
   return (
     <Box
+      className={`bccb-widget-route-name-tag-${bestMode}`}
       p={'4px 8px'}
       borderRadius={'40px'}
       fontSize={'12px'}
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/RouteName/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/RouteName/index.tsx
index deba3e0b..b6d9abdf 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/RouteName/index.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/RouteName/index.tsx
@@ -28,6 +28,7 @@ export const RouteName = React.memo(
 
     return (
       <Flex
+        className="bccb-widget-route-name"
         minH={'24px'}
         flexDir={'row'}
         gap={'8px'}
@@ -78,6 +79,7 @@ export const RouteName = React.memo(
           flex={1}
         >
           <Box
+            className="bccb-widget-route-name-text"
             fontSize={['12px', '12px', '12px', '14px']}
             lineHeight={['16px', '16px', '16px', '20px']}
             fontWeight={500}
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/RouteSkeleton.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/RouteSkeleton.tsx
index 1de3d44d..6f1a7952 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/RouteSkeleton.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/RouteSkeleton.tsx
@@ -6,6 +6,7 @@ export const RouteSkeleton = () => {
 
   return (
     <Flex
+      className="bccb-widget-route-skeleton"
       p={'16px'}
       borderRadius={'8px'}
       flexDir={'column'}
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 d8feca21..19ddb29e 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
@@ -20,8 +20,15 @@ export const RouteTitle = ({ receiveAmt, toTokenInfo, isError }: RouteTitleProps
   const tokenUrl = formatTokenUrl(toChain?.tokenUrlPattern, toTokenInfo?.address);
 
   return (
-    <Flex flexDir={'row'} gap={'8px'} display={'inline'} opacity={isError ? 0.5 : 1}>
+    <Flex
+      className="bccb-widget-route-token"
+      flexDir={'row'}
+      gap={'8px'}
+      display={'inline'}
+      opacity={isError ? 0.5 : 1}
+    >
       <Flex
+        className="bccb-widget-route-title-amount"
         fontSize={'24px'}
         fontWeight={500}
         lineHeight={'32px'}
@@ -39,6 +46,7 @@ export const RouteTitle = ({ receiveAmt, toTokenInfo, isError }: RouteTitleProps
           isReceiveArea={true}
         >
           <Flex
+            className="bccb-widget-route-token-icon"
             flexDir={'row'}
             gap={'4px'}
             alignItems={'center'}
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/RouteWrapper.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/RouteWrapper.tsx
index 8f1bdcc0..222599f0 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/RouteWrapper.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/RouteWrapper.tsx
@@ -18,6 +18,7 @@ export const RouteWrapper = ({
 
   return (
     <Flex
+      className="bccb-widget-route-wrapper"
       flex={1}
       flexDir={'column'}
       gap={'4px'}
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 bfc75353..fc177be7 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
@@ -32,7 +32,7 @@ export const TokenInfoTooltip = ({
   const nativeToken = useMemo(() => isNativeToken(tokenAddress), [tokenAddress]);
 
   return (
-    <Flex display={'inline-block'} w={'auto'}>
+    <Flex className="bccb-widget-route-token-tooltip" display={'inline-block'} w={'auto'}>
       <LightMode>
         <Popover placement="top-start" trigger={'hover'} strategy={'fixed'} autoFocus={false}>
           <PopoverTrigger>{children}</PopoverTrigger>
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/index.tsx
index 0254bf20..aa0ce8d8 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/index.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/index.tsx
@@ -118,6 +118,7 @@ export function TransferOverview({ routeContentBottom }: { routeContentBottom?:
     >
       <Flex flexDir={'column'} gap={'12px'}>
         <Flex
+          className="bccb-widget-route-header"
           display={{ base: 'none', lg: 'flex' }}
           justifyContent={'space-between'}
           alignItems={'center'}
@@ -142,6 +143,7 @@ export function TransferOverview({ routeContentBottom }: { routeContentBottom?:
           ) : null}
         </Flex>
         <Box
+          className="bccb-widget-route-body"
           px={['0', '0', '0', '24px']}
           flex={1}
           overflow={'auto'}
@@ -156,7 +158,7 @@ export function TransferOverview({ routeContentBottom }: { routeContentBottom?:
               <RouteSkeleton />
             </Flex>
           ) : (
-            <Flex flexDir={'column'} gap={'12px'}>
+            <Flex className="bccb-widget-route-list" flexDir={'column'} gap={'12px'}>
               {options?.map((bridge: ReactNode) => bridge)}
             </Flex>
           )}
@@ -173,7 +175,14 @@ export function TransferOverview({ routeContentBottom }: { routeContentBottom?:
       transition={'width 0.15s'}
     >
       {cBridgeSupport && <CBridgeSendMaxMin />}
-      <Flex flexDir={'column'} gap={'12px'} ml={{ base: 0, lg: '24px' }} w={'100%'}>
+
+      <Flex
+        className="bccb-widget-route"
+        flexDir={'column'}
+        gap={'12px'}
+        ml={{ base: 0, lg: '24px' }}
+        w={'100%'}
+      >
         {!routeContentBottom ? (
           content
         ) : (
@@ -183,7 +192,9 @@ export function TransferOverview({ routeContentBottom }: { routeContentBottom?:
             </Collapse>
           </Box>
         )}
-        <Box>{routeContentBottom ? routeContentBottom : null}</Box>
+        <Box className="bccb-widget-route-bottom">
+          {routeContentBottom ? routeContentBottom : null}
+        </Box>
       </Flex>
     </Flex>
   );
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/modal/RoutesModal.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/modal/RoutesModal.tsx
index 3d715d09..268c7d26 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/modal/RoutesModal.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/modal/RoutesModal.tsx
@@ -16,8 +16,9 @@ export function RoutesModal(props: RoutesModalProps) {
 
   return (
     <Modal isOpen={isOpen} onClose={onClose} size={{ base: 'full', md: 'lg' }} isCentered>
-      <ModalOverlay w={'100%'} />
+      <ModalOverlay className="bccb-widget-modal-route-overlay" w={'100%'} />
       <ModalContent
+        className="bccb-widget-modal-route-content"
         background={theme.colors[colorMode].background.modal}
         p={0}
         h={['100vh', '100vh', '665px']}
@@ -26,6 +27,7 @@ export function RoutesModal(props: RoutesModalProps) {
         margin={0}
       >
         <Flex
+          className="bccb-widget-modal-route-header"
           h={'64px'}
           px={'20px'}
           py={0}
@@ -50,7 +52,12 @@ export function RoutesModal(props: RoutesModalProps) {
             }}
           />
         </Flex>
-        <Flex flexDir="column" p={['20px', '20px', '24px 20px 16px']} flex={1}>
+        <Flex
+          className="bccb-widget-modal-route-wrapper"
+          flexDir="column"
+          p={['20px', '20px', '24px 20px 16px']}
+          flex={1}
+        >
           <Flex flexDir="column" mt={['0', '0', '0', '24px']} flex={1} overflowY="auto">
             {children}
           </Flex>
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/index.tsx
index 09a1c4c6..aca0cf0a 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/index.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/index.tsx
@@ -35,6 +35,7 @@ export function TransferWidget() {
     <>
       <SvgDefs />
       <Flex
+        className="bccb-widget-transfer-widget"
         flexDir={['column', 'column', 'column', 'row']}
         w={['100%']}
         mb={['120px', '120px', '160px']}
@@ -42,6 +43,7 @@ export function TransferWidget() {
         justifyContent={'center'}
       >
         <Flex
+          className="bccb-widget-transfer-widget-title"
           flexDir="column"
           background={['none', 'none', theme.colors[colorMode].layer[2].default]}
           color={theme.colors[colorMode].text.primary}

From 0e35f4035e487aaee31258b53ab752323ffeffa3 Mon Sep 17 00:00:00 2001
From: chris <leosameric@gmail.com>
Date: Mon, 11 Nov 2024 12:32:37 +1000
Subject: [PATCH 04/29] chore: Add more class name

---
 .../core/components/ConfirmCheckbox/index.tsx | 69 -------------------
 .../src/core/components/CopyAddress/index.tsx |  8 ++-
 .../src/core/components/InfoTooltip/index.tsx |  1 +
 .../src/core/components/StateModal/index.tsx  | 12 +++-
 .../src/core/components/VirtualList/index.tsx |  5 +-
 .../components/icons/ConfirmCheckIcon.tsx     |  7 +-
 .../src/core/locales/en.ts                    |  1 -
 .../SelectModal/ChooseTokenModal.tsx          |  9 ++-
 .../SelectModal/DestinationNetworkModal.tsx   |  4 +-
 .../SelectModal/SourceNetworkModal.tsx        |  4 +-
 .../SelectModal/components/BaseModal.tsx      | 10 ++-
 .../SelectModal/components/ListItem.tsx       |  1 +
 .../SelectModal/components/NoResultFound.tsx  | 19 ++++-
 .../SelectModal/components/SearchInput.tsx    |  1 +
 .../components/Button/ExchangeChain.tsx       |  1 +
 .../components/Button/SwitchNetworkButton.tsx |  1 +
 .../components/Button/SwitchWalletButton.tsx  |  1 +
 .../components/Button/TransferButton.tsx      |  2 +-
 .../components/Button/WalletConnectButton.tsx |  1 +
 .../components/ExternalTokenAddress/index.tsx | 43 ------------
 .../Modal/TransactionApproveModal/index.tsx   |  2 +
 .../TransactionConfirmingModal/index.tsx      |  1 +
 .../Modal/TransactionFailedModal/index.tsx    |  1 +
 .../Modal/TransactionSubmittedModal/index.tsx |  2 +
 .../components/ReceiveInfo/ReceiveLoading.tsx |  6 +-
 .../transfer/components/ReceiveInfo/index.tsx |  8 ++-
 .../SelectButton/TokenSelectButton.tsx        |  1 +
 .../SendInput/InputValidationMessage.tsx      |  1 +
 .../transfer/components/SendInput/MaxLink.tsx |  2 +-
 .../transfer/components/SendInput/index.tsx   |  3 +-
 .../transfer/components/ToAccount/index.tsx   | 22 +++++-
 .../components/TransferButtonGroup/index.tsx  |  6 +-
 .../TransferOverview/NoRouteFound.tsx         | 13 +++-
 .../components/TransferOverview/index.tsx     |  1 +
 .../src/modules/wallet/WalletProvider.tsx     |  1 +
 .../wallet/components/ConnectButton/index.tsx |  7 +-
 .../components/Dropdown/DropdownButton.tsx    |  1 +
 .../components/Dropdown/DropdownItem.tsx      |  1 +
 .../components/Dropdown/DropdownList.tsx      |  1 +
 .../wallet/components/NetworkStatus/index.tsx |  3 +-
 .../wallet/components/ProfileMenu/index.tsx   |  4 +-
 .../components/SwitchingTipsModal/index.tsx   |  1 +
 42 files changed, 143 insertions(+), 145 deletions(-)
 delete mode 100644 packages/canonical-bridge-widget/src/core/components/ConfirmCheckbox/index.tsx
 delete mode 100644 packages/canonical-bridge-widget/src/modules/transfer/components/ExternalTokenAddress/index.tsx

diff --git a/packages/canonical-bridge-widget/src/core/components/ConfirmCheckbox/index.tsx b/packages/canonical-bridge-widget/src/core/components/ConfirmCheckbox/index.tsx
deleted file mode 100644
index 5e2ed4f9..00000000
--- a/packages/canonical-bridge-widget/src/core/components/ConfirmCheckbox/index.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import { Checkbox, CheckboxProps, theme, useColorMode } from '@bnb-chain/space';
-
-export const ConfirmCheckbox: React.FC<CheckboxProps> = (props: CheckboxProps) => {
-  const { colorMode } = useColorMode();
-
-  const { isChecked } = props;
-
-  return (
-    <Checkbox
-      _checked={{
-        '& .chakra-checkbox__control': {
-          border: `1px solid ${theme.colors[colorMode].text.brand}`,
-          color: theme.colors[colorMode].text.brand,
-        },
-        '& .chakra-text': {
-          color: theme.colors[colorMode].text.tertiary,
-        },
-      }}
-      // _hover={{
-      //   '& .chakra-text': {
-      //     color: theme.colors[colorMode].text.primary,
-      //   },
-      // }}
-      sx={{
-        alignItems: 'flex-start',
-        '&: hover': {
-          '.chakra-checkbox__control': {
-            border: isChecked
-              ? `1px solid ${theme.colors[colorMode].text.brand}`
-              : `1px solid ${theme.colors[colorMode].text.tertiary}`,
-          },
-        },
-
-        '.chakra-checkbox__control': {
-          border: `1px solid ${theme.colors[colorMode].text.tertiary}`,
-          borderRadius: '3px',
-          w: theme.sizes['4'],
-          h: theme.sizes['4'],
-          visibility: 'visible',
-          pos: 'relative',
-
-          _hover: {
-            bg: isChecked ? 'transpartent' : theme.colors[colorMode].layer['3'].hover,
-
-            '::before': {
-              content: '""',
-              w: theme.sizes['6'],
-              h: theme.sizes['6'],
-              pos: 'absolute',
-              bg: theme.colors[colorMode].layer[3].hover,
-              borderRadius: theme.sizes['2'],
-              zIndex: '-1',
-            },
-          },
-
-          _active: {
-            color: theme.colors[colorMode].text.primary,
-            bg: theme.colors[colorMode].layer['3'].active,
-          },
-
-          svg: {
-            w: '80%',
-          },
-        },
-      }}
-      {...props}
-    />
-  );
-};
diff --git a/packages/canonical-bridge-widget/src/core/components/CopyAddress/index.tsx b/packages/canonical-bridge-widget/src/core/components/CopyAddress/index.tsx
index 9bc3adee..4d30a6ff 100644
--- a/packages/canonical-bridge-widget/src/core/components/CopyAddress/index.tsx
+++ b/packages/canonical-bridge-widget/src/core/components/CopyAddress/index.tsx
@@ -27,7 +27,13 @@ export const CopyAddress = ({
     return null;
   }
   return (
-    <Flex justifyContent={'center'} alignItems={'center'} position={'relative'} {...otherProps}>
+    <Flex
+      className="bccb-widget-copy-address"
+      justifyContent={'center'}
+      alignItems={'center'}
+      position={'relative'}
+      {...otherProps}
+    >
       <CopyIcon
         boxSize={'20px'}
         cursor={'pointer'}
diff --git a/packages/canonical-bridge-widget/src/core/components/InfoTooltip/index.tsx b/packages/canonical-bridge-widget/src/core/components/InfoTooltip/index.tsx
index 8dd5a9c8..6dd4aed3 100644
--- a/packages/canonical-bridge-widget/src/core/components/InfoTooltip/index.tsx
+++ b/packages/canonical-bridge-widget/src/core/components/InfoTooltip/index.tsx
@@ -21,6 +21,7 @@ export const InfoTooltip = (props: InfoTooltipProps) => {
   return (
     <Tooltip
       hasArrow
+      className="bccb-widget-info-tooltip"
       placement="top"
       {...(isBase && {
         isOpen,
diff --git a/packages/canonical-bridge-widget/src/core/components/StateModal/index.tsx b/packages/canonical-bridge-widget/src/core/components/StateModal/index.tsx
index a55a835e..e083b1bb 100644
--- a/packages/canonical-bridge-widget/src/core/components/StateModal/index.tsx
+++ b/packages/canonical-bridge-widget/src/core/components/StateModal/index.tsx
@@ -42,6 +42,7 @@ export interface StateModalProps extends Omit<ModalProps, 'children'> {
   bodyProps?: ModalBodyProps;
   mainButtonIsDisabled?: boolean;
   closeButtonIsDisabled?: boolean;
+  className?: string;
 }
 
 export function StateModal(props: StateModalProps) {
@@ -58,6 +59,7 @@ export function StateModal(props: StateModalProps) {
     mainButtonIsDisabled = false,
     closeButtonIsDisabled = false,
     onClose,
+    className,
     mainButtonProps,
     bodyProps,
     footerProps,
@@ -76,8 +78,9 @@ export function StateModal(props: StateModalProps) {
       <LightMode>
         <ModalOverlay />
 
-        <ModalContent borderRadius={'20px'} maxW={'435px'}>
+        <ModalContent className={className} borderRadius={'20px'} maxW={'435px'}>
           <ModalCloseButton
+            className="bccb-widget-modal-close-button"
             top={'24px'}
             right={{ base: '24px', md: '24px' }}
             onClick={onBeforeClose}
@@ -86,6 +89,7 @@ export function StateModal(props: StateModalProps) {
           </ModalCloseButton>
 
           <ModalBody
+            className="bccb-widget-modal-body"
             pt={'48px'}
             px={'40px'}
             pb={'24px'}
@@ -94,8 +98,9 @@ export function StateModal(props: StateModalProps) {
             alignItems="center"
             {...bodyProps}
           >
-            <Flex>{icon}</Flex>
+            <Flex className="bccb-widget-modal-body-icon">{icon}</Flex>
             <Flex
+              className="bccb-widget-modal-body-title"
               mt={'24px'}
               fontSize={'24px'}
               fontWeight={700}
@@ -108,6 +113,7 @@ export function StateModal(props: StateModalProps) {
             </Flex>
             {description && (
               <Flex
+                className="bccb-widget-modal-body-description"
                 mt={'8px'}
                 textAlign="center"
                 color={theme.colors.light.text.tertiary}
@@ -120,6 +126,7 @@ export function StateModal(props: StateModalProps) {
           </ModalBody>
 
           <ModalFooter
+            className="bccb-widget-modal-footer"
             px={'40px'}
             pb={'40px'}
             justifyContent="center"
@@ -129,6 +136,7 @@ export function StateModal(props: StateModalProps) {
           >
             {mainButtonText && (
               <Button
+                className="bccb-widget-modal-main-button"
                 size="lg"
                 w={'100%'}
                 fontSize={'16px'}
diff --git a/packages/canonical-bridge-widget/src/core/components/VirtualList/index.tsx b/packages/canonical-bridge-widget/src/core/components/VirtualList/index.tsx
index ad43091e..91aaee50 100644
--- a/packages/canonical-bridge-widget/src/core/components/VirtualList/index.tsx
+++ b/packages/canonical-bridge-widget/src/core/components/VirtualList/index.tsx
@@ -8,10 +8,11 @@ export interface VirtualListProps<T> {
   data: T[];
   itemHeight?: number;
   children: (item: T, index: number) => React.ReactNode;
+  className?: string;
 }
 
 export function VirtualList<T>(props: VirtualListProps<T>) {
-  const { data, children } = props;
+  const { data, children, className } = props;
 
   const { isMobile } = useResponsive();
 
@@ -35,7 +36,7 @@ export function VirtualList<T>(props: VirtualListProps<T>) {
   }, [isMobile]);
 
   return (
-    <Flex boxSize="100%" sx={scrollbarStyle}>
+    <Flex className={className} boxSize="100%" sx={scrollbarStyle}>
       <Virtuoso
         style={{
           width: '100%',
diff --git a/packages/canonical-bridge-widget/src/core/components/icons/ConfirmCheckIcon.tsx b/packages/canonical-bridge-widget/src/core/components/icons/ConfirmCheckIcon.tsx
index 83260879..8f2aeff8 100644
--- a/packages/canonical-bridge-widget/src/core/components/icons/ConfirmCheckIcon.tsx
+++ b/packages/canonical-bridge-widget/src/core/components/icons/ConfirmCheckIcon.tsx
@@ -28,7 +28,12 @@ export const ToAccountCheckBox = (props: { onClick: () => void; isChecked: boole
   const { colorMode } = useColorMode();
 
   return (
-    <Box onClick={onClick} cursor={'pointer'} mt={'-6px'}>
+    <Box
+      className="bccb-widget-to-account-checkbox"
+      onClick={onClick}
+      cursor={'pointer'}
+      mt={'-6px'}
+    >
       {isChecked ? (
         <CheckedIcon height={'32px'} width={'32px'} color={theme.colors[colorMode].text.brand} />
       ) : (
diff --git a/packages/canonical-bridge-widget/src/core/locales/en.ts b/packages/canonical-bridge-widget/src/core/locales/en.ts
index 3496064d..b598c90a 100644
--- a/packages/canonical-bridge-widget/src/core/locales/en.ts
+++ b/packages/canonical-bridge-widget/src/core/locales/en.ts
@@ -2,7 +2,6 @@ export const en = {
   'seo.title': 'BNB Chain Bridge | Cross-Chain Transfer',
   'seo.description':
     'Bridge and transfer your assets between networks (Ethereum, Polygon and etc.) and BNB Chain blockchain ecosystem.',
-  'main.address.link.text': 'Token address:',
   'header.network-status.wrong': 'Wrong network',
 
   'support.stargate.soon': 'We will support Stargate soon',
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 1f7a9dfd..8d132958 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
@@ -57,6 +57,7 @@ export function ChooseTokenModal(props: ChooseTokenModalProps) {
 
   return (
     <BaseModal
+      className="bccb-widget-token-modal"
       isOpen={isOpen}
       onClose={onClose}
       title={formatMessage({ id: 'select-modal.token.title' })}
@@ -77,7 +78,7 @@ export function ChooseTokenModal(props: ChooseTokenModalProps) {
         {showBalance && <Text>{formatMessage({ id: 'select-modal.token.column.balance' })}</Text>}
       </Flex>
       <Flex flexDir="column" flex={1}>
-        <VirtualList data={data} itemHeight={64}>
+        <VirtualList className="bccb-widget-token-virtual-list" data={data} itemHeight={64}>
           {(item) => {
             const isDisabled = !isChainOrTokenCompatible(item);
             const isActive =
@@ -86,6 +87,7 @@ export function ChooseTokenModal(props: ChooseTokenModalProps) {
 
             return (
               <ListItem
+                className="bccb-widget-token-list-item"
                 key={item.address}
                 iconUrl={item.icon}
                 isActive={isActive}
@@ -122,7 +124,7 @@ export function ChooseTokenModal(props: ChooseTokenModalProps) {
                     )}
 
                     {!isMobile && (
-                      <Flex h="16px" overflow="hidden">
+                      <Flex className="bccb-widget-token-address-link" h="16px" overflow="hidden">
                         <Flex
                           flexDir="column"
                           className={isNative || isActive ? undefined : 'token-info'}
@@ -155,6 +157,7 @@ export function ChooseTokenModal(props: ChooseTokenModalProps) {
 
                   {!isDisabled && showBalance && (
                     <Flex
+                      className="bccb-widget-token-list-token-balance"
                       flexShrink={0}
                       flexDir="column"
                       alignItems="flex-end"
@@ -198,7 +201,7 @@ function TokenAddress(props: TokenAddressProps) {
   const { isMobile } = useResponsive();
 
   return (
-    <Flex>
+    <Flex className="bccb-widget-token-list-address">
       <Text
         isTruncated
         flexShrink={0}
diff --git a/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/DestinationNetworkModal.tsx b/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/DestinationNetworkModal.tsx
index abb2afa5..3fc1f776 100644
--- a/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/DestinationNetworkModal.tsx
+++ b/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/DestinationNetworkModal.tsx
@@ -42,6 +42,7 @@ export function DestinationNetworkModal(props: DestinationNetworkModalProps) {
 
   return (
     <BaseModal
+      className="bccb-widget-to-network-modal"
       isOpen={isOpen}
       onClose={onClose}
       title={formatMessage({ id: 'select-modal.destination.title' })}
@@ -49,9 +50,10 @@ export function DestinationNetworkModal(props: DestinationNetworkModalProps) {
       placeholder={formatMessage({ id: 'select-modal.destination.placeholder' })}
       isNoResult={isNoResult}
     >
-      <VirtualList data={result} itemHeight={64}>
+      <VirtualList className="bccb-widget-to-network-virtual-list" data={result} itemHeight={64}>
         {(item) => (
           <ListItem
+            className="bccb-widget-to-network-list-item"
             key={item.id}
             iconUrl={item.icon}
             isActive={toChain?.id === item.id}
diff --git a/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/SourceNetworkModal.tsx b/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/SourceNetworkModal.tsx
index 401f3ed8..934180bc 100644
--- a/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/SourceNetworkModal.tsx
+++ b/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/SourceNetworkModal.tsx
@@ -43,6 +43,7 @@ export function SourceNetworkModal(props: SourceNetworkModalProps) {
 
   return (
     <BaseModal
+      className="bccb-widget-from-network-modal"
       isOpen={isOpen}
       onClose={onClose}
       title={formatMessage({ id: 'select-modal.source.title' })}
@@ -50,9 +51,10 @@ export function SourceNetworkModal(props: SourceNetworkModalProps) {
       placeholder={formatMessage({ id: 'select-modal.source.placeholder' })}
       isNoResult={isNoResult}
     >
-      <VirtualList data={result} itemHeight={64}>
+      <VirtualList className="bccb-widget-from-network-virtual-list" data={result} itemHeight={64}>
         {(item) => (
           <ListItem
+            className="bccb-widget-from-network-list-item"
             key={item.id}
             iconUrl={item.icon}
             isActive={fromChain?.id === item.id}
diff --git a/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/components/BaseModal.tsx b/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/components/BaseModal.tsx
index f6e39f28..f60dd735 100644
--- a/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/components/BaseModal.tsx
+++ b/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/components/BaseModal.tsx
@@ -13,10 +13,11 @@ interface BaseModalProps {
   onSearch: (value: string) => void;
   placeholder: string;
   isNoResult: boolean;
+  className?: string;
 }
 
 export function BaseModal(props: BaseModalProps) {
-  const { isOpen, title, children, onClose, onSearch, placeholder, isNoResult } = props;
+  const { isOpen, title, children, onClose, onSearch, placeholder, isNoResult, className } = props;
 
   const theme = useTheme();
   const { colorMode } = useColorMode();
@@ -42,6 +43,7 @@ export function BaseModal(props: BaseModalProps) {
         marginInline={0}
       >
         <Flex
+          className={className}
           h={'64px'}
           px={'20px'}
           py={0}
@@ -68,7 +70,11 @@ export function BaseModal(props: BaseModalProps) {
         </Flex>
         <Flex flexDir="column" p="20px 0px 16px" flex={1}>
           <Flex px={'20px'} mb={'24px'}>
-            <SearchInput onChange={onSearch} placeholder={placeholder} />
+            <SearchInput
+              className="bccb-widget-modal-search"
+              onChange={onSearch}
+              placeholder={placeholder}
+            />
           </Flex>
           <Flex flexDir="column" flex={1} overflowY="auto">
             {isNoResult ? <NoResultFound /> : <>{children}</>}
diff --git a/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/components/ListItem.tsx b/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/components/ListItem.tsx
index 3c4d30a7..a9a2bf9e 100644
--- a/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/components/ListItem.tsx
+++ b/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/components/ListItem.tsx
@@ -65,6 +65,7 @@ export const ListItem = React.forwardRef((props: ListItemProps, ref: any) => {
         </Flex>
         {showTag && isDisabled && (
           <Flex
+            className="bccb-widget-select-list-item-tag"
             alignItems="center"
             flexShrink={0}
             fontSize={'12px'}
diff --git a/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/components/NoResultFound.tsx b/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/components/NoResultFound.tsx
index 0abfad4d..54809fd4 100644
--- a/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/components/NoResultFound.tsx
+++ b/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/components/NoResultFound.tsx
@@ -11,12 +11,27 @@ export function NoResultFound(props: NoResultFoundProps) {
   const { colorMode } = useColorMode();
 
   return (
-    <Flex alignItems="center" flexDir="column" maxW={347} margin="32px auto" {...restProps}>
+    <Flex
+      className="bccb-widget-modal-no-result-found"
+      alignItems="center"
+      flexDir="column"
+      maxW={347}
+      margin="32px auto"
+      {...restProps}
+    >
       <NoResultIcon />
-      <Box fontWeight={700} fontSize={'20px'} lineHeight={1.4} mt={'16px'} mb={'8px'}>
+      <Box
+        className="title"
+        fontWeight={700}
+        fontSize={'20px'}
+        lineHeight={1.4}
+        mt={'16px'}
+        mb={'8px'}
+      >
         {formatMessage({ id: 'select-modal.search.no-result.title' })}
       </Box>
       <Text
+        className="bccb-widget-modal-no-result-found-text"
         textAlign="center"
         fontSize={'14px'}
         lineHeight={'20px'}
diff --git a/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/components/SearchInput.tsx b/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/components/SearchInput.tsx
index d438371c..a87bfa75 100644
--- a/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/components/SearchInput.tsx
+++ b/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/components/SearchInput.tsx
@@ -61,6 +61,7 @@ export function SearchInput(props: SearchInputProps) {
 
       {value && (
         <InputRightElement
+          className="bccb-widget-modal-search-right-element"
           justifyContent="flex-start"
           pl={'8px'}
           color={theme.colors[colorMode].text.tertiary}
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/Button/ExchangeChain.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/Button/ExchangeChain.tsx
index f3c51b6e..ed3fe36e 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/Button/ExchangeChain.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/Button/ExchangeChain.tsx
@@ -6,6 +6,7 @@ export const ExchangeChain = () => {
   const { colorMode } = useColorMode();
   return (
     <Flex
+      className="bccb-widget-exchange-chain-icon"
       width="100%"
       alignSelf="center"
       justifyContent="center"
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/Button/SwitchNetworkButton.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/Button/SwitchNetworkButton.tsx
index 970ae716..b2e4c30b 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/Button/SwitchNetworkButton.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/Button/SwitchNetworkButton.tsx
@@ -15,6 +15,7 @@ export const SwitchNetworkButton = (props: ButtonProps) => {
 
   return (
     <Button
+      className="bccb-widget-switch-network-button"
       size="lg"
       h={'56px'}
       w="100%"
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/Button/SwitchWalletButton.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/Button/SwitchWalletButton.tsx
index f19ba1a3..ffc05867 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/Button/SwitchWalletButton.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/Button/SwitchWalletButton.tsx
@@ -15,6 +15,7 @@ export const SwitchWalletButton = (props: ButtonProps) => {
 
   return (
     <Button
+      className="bccb-widget-switch-wallet-button"
       size="lg"
       h={'56px'}
       w="100%"
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/Button/TransferButton.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/Button/TransferButton.tsx
index bcc38a43..6c9329c7 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/Button/TransferButton.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/Button/TransferButton.tsx
@@ -415,7 +415,7 @@ export function TransferButton({
   ]);
 
   return (
-    <Flex flexDir="column" w={'100%'}>
+    <Flex className="bccb-widget-transfer-button" flexDir="column" w={'100%'}>
       <Button
         bg={theme.colors[colorMode].button.brand.default}
         size={'lg'}
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/Button/WalletConnectButton.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/Button/WalletConnectButton.tsx
index 623bc182..3e1e62c0 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/Button/WalletConnectButton.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/Button/WalletConnectButton.tsx
@@ -14,6 +14,7 @@ export const WalletConnectButton = () => {
 
   return (
     <Button
+      className="bccb-widget-wallet-connect-button"
       size="lg"
       h={'56px'}
       w="100%"
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/ExternalTokenAddress/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/ExternalTokenAddress/index.tsx
deleted file mode 100644
index 3d9b4dfc..00000000
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/ExternalTokenAddress/index.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { Flex, theme, Typography, useColorMode, useIntl } from '@bnb-chain/space';
-
-import { ExLinkIcon } from '@/core/components/icons/ExLinkIcon';
-import { formatAppAddress } from '@/core/utils/address';
-
-export const ExternalAddress = ({
-  address,
-  tokenUrl,
-}: {
-  address: `0x${string}` | string;
-  tokenUrl?: string;
-}) => {
-  const { colorMode } = useColorMode();
-  const { formatMessage } = useIntl();
-
-  return (
-    <Flex gap={'4px'} alignItems={'center'} color={theme.colors[colorMode].text.placeholder}>
-      <Typography variant="body" size={'sm'} flexDir={'row'}>
-        {formatMessage({ id: 'main.address.link.text' })}
-      </Typography>
-      <Flex
-        gap={'4px'}
-        alignItems={'center'}
-        color={theme.colors[colorMode].text.placeholder}
-        cursor={'pointer'}
-        _hover={{
-          color: theme.colors[colorMode].text.primary,
-          textDecoration: 'underline',
-        }}
-        onClick={() => {
-          if (tokenUrl) {
-            window.open(tokenUrl, '_blank');
-          }
-        }}
-      >
-        <Typography variant="body" size={'sm'} flexDir={'row'} fontWeight={500}>
-          {formatAppAddress({ address, transform: 'lowerCase' })}
-        </Typography>
-        {tokenUrl && <ExLinkIcon w={'16px'} h={'16px'} />}
-      </Flex>
-    </Flex>
-  );
-};
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/Modal/TransactionApproveModal/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/Modal/TransactionApproveModal/index.tsx
index 627c8692..c78ce12d 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/Modal/TransactionApproveModal/index.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/Modal/TransactionApproveModal/index.tsx
@@ -53,6 +53,7 @@ export function TransactionApproveModal(
 
   return (
     <StateModal
+      className="bccb-widget-transaction-approve-modal"
       type="approve"
       title={formatMessage({ id: 'modal.approve.title' })}
       description={
@@ -109,6 +110,7 @@ export function TransactionApproveModal(
       }}
       closeButton={
         <Button
+          className="bccb-widget-modal-second-button"
           size="lg"
           variant={'outline'}
           w={'100%'}
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/Modal/TransactionConfirmingModal/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/Modal/TransactionConfirmingModal/index.tsx
index d003e442..d5b1ac34 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/Modal/TransactionConfirmingModal/index.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/Modal/TransactionConfirmingModal/index.tsx
@@ -9,6 +9,7 @@ export function TransactionConfirmingModal(props: Omit<StateModalProps, 'title'>
 
   return (
     <StateModal
+      className="bccb-widget-transaction-confirming-modal"
       type="confirming"
       title={formatMessage({ id: 'modal.confirm.title' })}
       description={formatMessage({ id: 'modal.confirm.desc' })}
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/Modal/TransactionFailedModal/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/Modal/TransactionFailedModal/index.tsx
index ba3e743b..b9688d26 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/Modal/TransactionFailedModal/index.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/Modal/TransactionFailedModal/index.tsx
@@ -8,6 +8,7 @@ export function TransactionFailedModal(props: Omit<StateModalProps, 'title'>) {
 
   return (
     <StateModal
+      className="bccb-widget-transaction-failed-modal"
       type="error"
       title={formatMessage({ id: 'modal.fail.title' })}
       description={formatMessage({ id: 'modal.fail.desc' })}
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/Modal/TransactionSubmittedModal/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/Modal/TransactionSubmittedModal/index.tsx
index 15cea826..faf7b5aa 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/Modal/TransactionSubmittedModal/index.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/Modal/TransactionSubmittedModal/index.tsx
@@ -18,6 +18,7 @@ export function TransactionSubmittedModal(
   const { address } = useAccount();
   return (
     <StateModal
+      className="bccb-widget-transaction-submitted-modal"
       title={formatMessage({ id: 'modal.submit.title' })}
       description={formatMessage({ id: 'modal.submit.desc' })}
       onButtonClick={() => {
@@ -47,6 +48,7 @@ export function TransactionSubmittedModal(
       mainButtonText={formatMessage({ id: 'modal.submit.button.view-tx' })}
       closeButton={
         <Button
+          className="bccb-widget-modal-second-button"
           size="lg"
           variant={'outline'}
           w={'100%'}
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/ReceiveInfo/ReceiveLoading.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/ReceiveInfo/ReceiveLoading.tsx
index edd42866..6b41a1f7 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/ReceiveInfo/ReceiveLoading.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/ReceiveInfo/ReceiveLoading.tsx
@@ -1,8 +1,8 @@
-import { Flex, Skeleton, SkeletonCircle } from '@bnb-chain/space';
+import { Box, Flex, Skeleton, SkeletonCircle } from '@bnb-chain/space';
 
 export const ReceiveLoading = () => {
   return (
-    <>
+    <Box className="bccb-widget-received-info-route-loading">
       <Flex flexDir={'column'} gap={'8px'} display={{ base: 'none', lg: 'flex' }}>
         <Flex gap={'8px'} mb={'8px'}>
           <Skeleton height={'22px'} width={'160px'} />
@@ -40,6 +40,6 @@ export const ReceiveLoading = () => {
         </Flex>
         <SkeletonCircle w={'32px'} h={'32px'} />
       </Flex>
-    </>
+    </Box>
   );
 };
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
index f6c4b025..380c8271 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/ReceiveInfo/index.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/ReceiveInfo/index.tsx
@@ -146,7 +146,7 @@ export const ReceiveInfo = ({ onOpen }: ReceiveInfoProps) => {
   }, [estimatedAmount]);
 
   return (
-    <Box mb={isHideSection ? '-24px' : 0}>
+    <Box className="bccb-widget-received-info-container" mb={isHideSection ? '-24px' : 0}>
       <Collapse in={!isHideSection} animateOpacity>
         <Flex flexDir={'column'} gap={'8px'}>
           <Flex flexDir={'row'} alignItems={'center'} justifyContent={'space-between'}>
@@ -158,12 +158,16 @@ export const ReceiveInfo = ({ onOpen }: ReceiveInfoProps) => {
               {formatMessage({ id: 'you.receive.title' })}
             </Typography>
             {!isHideRouteButton ? (
-              <Box display={{ base: 'block', lg: 'none' }}>
+              <Box
+                className="bccb-widget-received-info-route-open"
+                display={{ base: 'block', lg: 'none' }}
+              >
                 <RouteChangeButton onOpen={onOpen} />
               </Box>
             ) : null}
           </Flex>
           <Flex
+            className="bccb-widget-received-info-route-content"
             minH={'106px'}
             borderRadius={'8px'}
             p={'12px'}
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 4d0a8505..f979e143 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
@@ -25,6 +25,7 @@ export function TokenSelectButton(props: SelectButtonProps) {
 
   return (
     <Button
+      className="bccb-widget-token-select-button"
       borderRadius={'24px'}
       flexShrink={0}
       h={'32px'}
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/SendInput/InputValidationMessage.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/SendInput/InputValidationMessage.tsx
index 065c1289..22310e55 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/SendInput/InputValidationMessage.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/SendInput/InputValidationMessage.tsx
@@ -64,6 +64,7 @@ export const InputValidationMessage = () => {
 
   return error || balanceInputError ? (
     <Box
+      className="bccb-widget-transfer-input-error"
       color={theme.colors[colorMode].text.danger}
       fontSize={'14px'}
       fontWeight={400}
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/SendInput/MaxLink.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/SendInput/MaxLink.tsx
index 256c86e1..255938f8 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/SendInput/MaxLink.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/SendInput/MaxLink.tsx
@@ -43,7 +43,7 @@ export const MaxLink: React.FC = () => {
     fromChain?.chainType === walletType && balance !== undefined && !!selectedToken;
 
   return (
-    <Flex alignItems={'center'}>
+    <Flex className="bccb-widget-transfer-max" alignItems={'center'}>
       {showBalance ? (
         <Box
           onClick={setMaxAmount}
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/SendInput/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/SendInput/index.tsx
index 4454955d..79f82753 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/SendInput/index.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/SendInput/index.tsx
@@ -100,7 +100,7 @@ export const SendInput: React.FC = () => {
   }, [isGlobalFeeLoading, debouncedSendValue, sendValue]);
 
   return (
-    <Flex flexDir={'column'} position={'relative'}>
+    <Flex className="bccb-widget-transfer-input-container" flexDir={'column'} position={'relative'}>
       <Flex flexDir={'row'} justifyContent={'space-between'}>
         <Typography color={theme.colors[colorMode].text.placeholder} variant={'label'} size={'md'}>
           {formatMessage({ id: 'you.send.title' })}
@@ -150,6 +150,7 @@ export const SendInput: React.FC = () => {
         }}
       >
         <Input
+          className="bccb-widget-transfer-input"
           inputMode={'decimal'}
           value={sendValue}
           color={theme.colors[colorMode].text.primary}
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/ToAccount/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/ToAccount/index.tsx
index 29f1dabf..96840293 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/ToAccount/index.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/ToAccount/index.tsx
@@ -76,6 +76,7 @@ export function ToAccount(props: FlexProps) {
 
   return (
     <Flex
+      className="bccb-widget-to-account-container"
       flexDirection="column"
       color={theme.colors[colorMode].text.tertiary}
       fontSize={'14px'}
@@ -83,8 +84,11 @@ export function ToAccount(props: FlexProps) {
       fontWeight={400}
       {...props}
     >
-      <Box>{formatMessage({ id: 'to.section.account.label' })}</Box>
+      <Box className="bccb-widget-to-account-title">
+        {formatMessage({ id: 'to.section.account.label' })}
+      </Box>
       <InputGroup
+        className="bccb-widget-to-account-input"
         alignItems="center"
         mt={'12px'}
         _hover={{
@@ -123,12 +127,24 @@ export function ToAccount(props: FlexProps) {
       </InputGroup>
 
       {isInvalid && (
-        <Flex mt={'8px'} fontSize={'14px'} color={theme.colors[colorMode].text.danger}>
+        <Flex
+          className="bccb-widget-to-account-input-error"
+          mt={'8px'}
+          fontSize={'14px'}
+          color={theme.colors[colorMode].text.danger}
+        >
           {formatMessage({ id: 'to.section.account.invalid' })}
         </Flex>
       )}
 
-      <Flex flexDir={'row'} mt={'12px'} mb={'8px'} ml={'-6px'} gap={'2px'}>
+      <Flex
+        className="bccb-widget-to-account-confirm"
+        flexDir={'row'}
+        mt={'12px'}
+        mb={'8px'}
+        ml={'-6px'}
+        gap={'2px'}
+      >
         <ToAccountCheckBox onClick={toggleChecked} isChecked={isChecked} />
         <Box>{formatMessage({ id: 'to.section.confirm.text' })}</Box>
       </Flex>
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferButtonGroup/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferButtonGroup/index.tsx
index d0d79618..e0ce85ce 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferButtonGroup/index.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferButtonGroup/index.tsx
@@ -35,7 +35,11 @@ export const TransferButtonGroup = () => {
 
   return (
     <>
-      <Flex gap={'4px'} mt={{ base: '8px', md: '16px' }}>
+      <Flex
+        className="bccb-widget-transfer-button-container"
+        gap={'4px'}
+        mt={{ base: '8px', md: '16px' }}
+      >
         <WalletButtonWrapper>
           <TransferButton
             onOpenSubmittedModal={onOpenSubmittedModal}
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/NoRouteFound.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/NoRouteFound.tsx
index f7f82679..d41c6d66 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/NoRouteFound.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/NoRouteFound.tsx
@@ -31,6 +31,7 @@ export const NoRouteFound = ({ onOpen }: NoRouteFoundProps) => {
 
   return (
     <Flex
+      className="bccb-widget-no-route-found-container"
       flexDir={'column'}
       w={'100%'}
       gap={'8px'}
@@ -38,14 +39,21 @@ export const NoRouteFound = ({ onOpen }: NoRouteFoundProps) => {
       borderRadius={'8px'}
       p={[0, 0, 0, '0 16px']}
     >
-      <Flex justifyContent={'center'}>
+      <Flex className="bccb-widget-no-route-found-icon" justifyContent={'center'}>
         <RouteNotFoundIcon w={'40px'} h={'40px'} />
       </Flex>
-      <Typography variant="body" size={'md'} textAlign={'center'} fontWeight={500}>
+      <Typography
+        className="bccb-widget-no-route-found-title"
+        variant="body"
+        size={'md'}
+        textAlign={'center'}
+        fontWeight={500}
+      >
         {formatMessage({ id: !isNoRoute ? 'route.adjust.title' : 'route.no-found.title' })}
       </Typography>
 
       <Typography
+        className="bccb-widget-no-route-found-desc"
         variant="body"
         size={'sm'}
         mt={[0, 0, 0, '-4px']}
@@ -58,6 +66,7 @@ export const NoRouteFound = ({ onOpen }: NoRouteFoundProps) => {
       </Typography>
       {!isNoRoute && (
         <Box
+          className="bccb-widget-no-route-found-link"
           display={{ base: 'block', lg: 'none' }}
           margin={'0 auto'}
           fontSize={'14px'}
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/index.tsx
index aa0ce8d8..ccd75854 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/index.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/index.tsx
@@ -107,6 +107,7 @@ export function TransferOverview({ routeContentBottom }: { routeContentBottom?:
   const loading = !options || !options?.length || isGlobalFeeLoading;
   const content = (
     <Box
+      className="bccb-widget-route-container"
       position={'relative'}
       borderRadius={'24px'}
       py={'24px'}
diff --git a/packages/canonical-bridge-widget/src/modules/wallet/WalletProvider.tsx b/packages/canonical-bridge-widget/src/modules/wallet/WalletProvider.tsx
index 23135c49..392241bb 100644
--- a/packages/canonical-bridge-widget/src/modules/wallet/WalletProvider.tsx
+++ b/packages/canonical-bridge-widget/src/modules/wallet/WalletProvider.tsx
@@ -101,6 +101,7 @@ export function WalletProvider(props: WalletProviderProps) {
         {children}
 
         <StateModal
+          className="bccb-widget-header-preventing-modal"
           title={formatMessage({ id: 'wallet.preventing-modal.title' })}
           description={formatMessage({ id: 'wallet.preventing-modal.desc' })}
           isOpen={isOpen}
diff --git a/packages/canonical-bridge-widget/src/modules/wallet/components/ConnectButton/index.tsx b/packages/canonical-bridge-widget/src/modules/wallet/components/ConnectButton/index.tsx
index 4b8278f3..21b4e4a4 100644
--- a/packages/canonical-bridge-widget/src/modules/wallet/components/ConnectButton/index.tsx
+++ b/packages/canonical-bridge-widget/src/modules/wallet/components/ConnectButton/index.tsx
@@ -18,7 +18,12 @@ export function ConnectButton(props: ConnectButtonProps) {
   const fromChain = useAppSelector((state) => state.transfer.fromChain);
 
   return (
-    <Flex alignItems="center" gap={'16px'} {...restProps}>
+    <Flex
+      className="bccb-widget-header-wallet-connect-button"
+      alignItems="center"
+      gap={'16px'}
+      {...restProps}
+    >
       {!isConnected && (
         <Button
           variant="outline"
diff --git a/packages/canonical-bridge-widget/src/modules/wallet/components/Dropdown/DropdownButton.tsx b/packages/canonical-bridge-widget/src/modules/wallet/components/Dropdown/DropdownButton.tsx
index c0be2c6d..2600d205 100644
--- a/packages/canonical-bridge-widget/src/modules/wallet/components/Dropdown/DropdownButton.tsx
+++ b/packages/canonical-bridge-widget/src/modules/wallet/components/Dropdown/DropdownButton.tsx
@@ -28,6 +28,7 @@ export function DropdownButton(props: DropdownButtonProps) {
 
   return (
     <MenuButton
+      className="bccb-widget-header-menu-button"
       h={'40px'}
       minW={'40px'}
       pl="12px"
diff --git a/packages/canonical-bridge-widget/src/modules/wallet/components/Dropdown/DropdownItem.tsx b/packages/canonical-bridge-widget/src/modules/wallet/components/Dropdown/DropdownItem.tsx
index bc6222d6..40c12131 100644
--- a/packages/canonical-bridge-widget/src/modules/wallet/components/Dropdown/DropdownItem.tsx
+++ b/packages/canonical-bridge-widget/src/modules/wallet/components/Dropdown/DropdownItem.tsx
@@ -10,6 +10,7 @@ export function DropdownItem(props: DropdownItemProps) {
 
   return (
     <MenuItem
+      className="bccb-widget-header-menu-item"
       px="16px"
       h="40px"
       alignItems="center"
diff --git a/packages/canonical-bridge-widget/src/modules/wallet/components/Dropdown/DropdownList.tsx b/packages/canonical-bridge-widget/src/modules/wallet/components/Dropdown/DropdownList.tsx
index c8fd8c8f..33ba3a83 100644
--- a/packages/canonical-bridge-widget/src/modules/wallet/components/Dropdown/DropdownList.tsx
+++ b/packages/canonical-bridge-widget/src/modules/wallet/components/Dropdown/DropdownList.tsx
@@ -10,6 +10,7 @@ export function DropdownList(props: DropdownListProps) {
 
   return (
     <MenuList
+      className="bccb-widget-header-menu-list"
       bg={theme.colors[colorMode].popover.background}
       borderRadius={'8px'}
       maxH={'400px'}
diff --git a/packages/canonical-bridge-widget/src/modules/wallet/components/NetworkStatus/index.tsx b/packages/canonical-bridge-widget/src/modules/wallet/components/NetworkStatus/index.tsx
index c1eaeb53..45b4c9bf 100644
--- a/packages/canonical-bridge-widget/src/modules/wallet/components/NetworkStatus/index.tsx
+++ b/packages/canonical-bridge-widget/src/modules/wallet/components/NetworkStatus/index.tsx
@@ -41,7 +41,7 @@ export function NetworkStatus() {
   }, [chainId]);
 
   const switchDropdown = (onClose: () => void) => (
-    <DropdownList maxW={'240px'}>
+    <DropdownList className="bccb-widget-header-network-status" maxW={'240px'}>
       <Flex flexDir={'column'} alignItems={'center'} padding={'16px'} gap={'8px'}>
         <Typography
           color={theme.colors[colorMode].text.secondary}
@@ -101,6 +101,7 @@ export function NetworkStatus() {
           return (
             <>
               <DropdownButton
+                className="bccb-widget-header-dropdown-button"
                 bgColor={theme.colors[colorMode].layer[3].default}
                 isActive={isOpen}
                 isWarning={isOpen}
diff --git a/packages/canonical-bridge-widget/src/modules/wallet/components/ProfileMenu/index.tsx b/packages/canonical-bridge-widget/src/modules/wallet/components/ProfileMenu/index.tsx
index ed5aabf9..eb2b06a3 100644
--- a/packages/canonical-bridge-widget/src/modules/wallet/components/ProfileMenu/index.tsx
+++ b/packages/canonical-bridge-widget/src/modules/wallet/components/ProfileMenu/index.tsx
@@ -24,6 +24,7 @@ export const ProfileMenu = () => {
       {({ isOpen, onClose }) => (
         <>
           <DropdownButton
+            className="bccb-widget-header-profile-button"
             bgColor={theme.colors[colorMode].layer[3].default}
             isActive={isOpen}
             pl={{ base: '0', md: '12px' }}
@@ -61,7 +62,7 @@ export const ProfileMenu = () => {
             </Box>
           </DropdownButton>
 
-          <DropdownList overflowY="visible">
+          <DropdownList className="bccb-widget-header-profile-list" overflowY="visible">
             <Flex alignItems="center" p="16px 16px 12px">
               <Flex gap="12px">
                 <Center
@@ -89,6 +90,7 @@ export const ProfileMenu = () => {
             </Flex>
 
             <Flex
+              className="bccb-widget-header-profile-disconnect-link"
               borderTop={`1px solid ${theme.colors[colorMode].popover.separator}`}
               py="8px"
               onClick={() => {
diff --git a/packages/canonical-bridge-widget/src/modules/wallet/components/SwitchingTipsModal/index.tsx b/packages/canonical-bridge-widget/src/modules/wallet/components/SwitchingTipsModal/index.tsx
index a415145c..3245900e 100644
--- a/packages/canonical-bridge-widget/src/modules/wallet/components/SwitchingTipsModal/index.tsx
+++ b/packages/canonical-bridge-widget/src/modules/wallet/components/SwitchingTipsModal/index.tsx
@@ -24,6 +24,7 @@ export function SwitchingTipsModal() {
 
   return (
     <StateModal
+      className="bccb-widget-header-switching-tips-modal"
       title={formatMessage({ id: 'wallet.switching-modal.title' })}
       description={formatMessage({ id: 'wallet.switching-modal.desc' })}
       isOpen={isOpenSwitchingTipsModal}

From acda72ed3dc2ad20bd9cdbf046ff27864156e704 Mon Sep 17 00:00:00 2001
From: chris <leosameric@gmail.com>
Date: Mon, 11 Nov 2024 14:53:18 +1000
Subject: [PATCH 05/29] feat: Customize font family

---
 .../canonical-bridge-widget/docs/classname.md | 145 ++++++++++++++++++
 .../src/core/theme/ThemeProvider.tsx          |   4 +-
 .../src/modules/theme/internal/typography.ts  |  38 ++---
 3 files changed, 166 insertions(+), 21 deletions(-)
 create mode 100644 packages/canonical-bridge-widget/docs/classname.md

diff --git a/packages/canonical-bridge-widget/docs/classname.md b/packages/canonical-bridge-widget/docs/classname.md
new file mode 100644
index 00000000..1eb78439
--- /dev/null
+++ b/packages/canonical-bridge-widget/docs/classname.md
@@ -0,0 +1,145 @@
+This document lists all the available styling class name in the widget. Please overwrite stylings
+based on these class name.
+
+1. Widget Main
+
+- bccb-widget-transfer-widget
+- bccb-widget-transfer-widget-title
+- bccb-widget-exchange-chain-icon
+- bccb-widget-copy-address
+- bccb-widget-info-tooltip
+- bccb-widget-switch-wallet-button
+
+2. Network selection section
+
+- bccb-widget-network
+- bccb-widget-network-title
+- bccb-widget-network-row
+- bccb-widget-network-from
+- bccb-widget-network-button
+- bccb-widget-network-to
+- bccb-widget-network-name
+
+3. Bridge Route Section
+
+- bccb-widget-route
+- bccb-widget-route-bottom
+- bccb-widget-route-wrapper
+- bccb-widget-route-container
+- bccb-widget-route-name
+- bccb-widget-route-name-text
+- bccb-widget-route-name-tag-bestTime
+- bccb-widget-route-name-tag-bestReturn
+- bccb-widget-route-token
+- bccb-widget-route-token-amount
+- bccb-widget-route-token-tooltip
+- bccb-widget-route-token-icon
+- bccb-widget-route-estimated-time
+- bccb-widget-route-info-text
+- bccb-widget-route-info-label
+- bccb-widget-route-info-tooltip-fee
+- bccb-widget-allowed-send-amount
+- bccb-widget-route-error
+- bccb-widget-route-skeleton
+- bccb-widget-route-header
+- bccb-widget-route-body
+- bccb-widget-route-list
+- bccb-widget-refreshing-button
+  - mobile
+- bccb-widget-modal-route-overlay
+- bccb-widget-modal-route-content
+- bccb-widget-modal-route-header
+- bccb-widget-modal-route-wrapper
+
+4. Header
+
+- bccb-widget-header-wallet-connect-button
+- bccb-widget-header-menu-button
+- bccb-widget-header-menu-item
+- bccb-widget-header-profile-list
+- bccb-widget-header-profile-disconnect-link
+- bccb-widget-header-profile-button
+- bccb-widget-header-switching-tips-modal
+- bccb-widget-header-preventing-modal
+
+5. Token Selection Modal
+
+- bccb-widget-token-modal
+- bccb-widget-token-virtual-list
+- bccb-widget-token-list-address
+- bccb-widget-token-address-link
+- bccb-widget-token-list-item
+- bccb-widget-token-list-token-balance
+
+6. From Network Selection
+
+- bccb-widget-from-network-list-item
+- bccb-widget-from-network-virtual-list
+- bccb-widget-from-network-modal
+
+7. To Network Selection
+
+- bccb-widget-to-network-virtual-list
+- bccb-widget-to-network-list-item
+- bccb-widget-to-network-modal
+
+8. Base Modal
+
+- bccb-widget-modal-search
+- bccb-widget-modal-search-right-element
+- bccb-widget-modal-no-result-found
+- bccb-widget-modal-no-result-found-title
+- bccb-widget-modal-no-result-found-text
+- bccb-widget-select-list-item-tag
+
+9. Send Amount Input
+
+- bccb-widget-transfer-input-container
+- bccb-widget-transfer-input
+- bccb-widget-transfer-max
+- bccb-widget-transfer-input-error
+- bccb-widget-token-select-button
+
+10. To Account Input
+
+- bccb-widget-to-account-container
+- bccb-widget-to-account-title
+- bccb-widget-to-account-input-error
+- bccb-widget-to-account-input
+- bccb-widget-to-account-confirm
+- bccb-widget-to-account-checkbox
+
+11. Received Amount Information
+
+- bccb-widget-received-info-container
+- bccb-widget-received-info-route-open
+- bccb-widget-received-info-route-content
+- bccb-widget-received-info-route-loading
+- bccb-widget-no-route-found-container
+- bccb-widget-no-route-found-icon
+- bccb-widget-no-route-found-title
+- bccb-widget-no-route-found-desc
+- bccb-widget-no-route-found-link
+
+12. Transfer Button
+
+- bccb-widget-transfer-button-container
+- bccb-widget-wallet-connect-button
+- bccb-widget-switch-network-button
+- bccb-widget-transfer-button
+
+13. Transfer Modal
+
+- bccb-widget-modal-close-button
+- bccb-widget-modal-main-button
+- bccb-widget-modal-second-button
+- bccb-widget-modal-body
+- bccb-widget-modal-body-icon
+- bccb-widget-modal-body-title
+- bccb-widget-modal-body-description
+- bccb-widget-modal-footer
+- bccb-widget-transaction-submitted-modal
+- bccb-widget-transaction-failed-modal
+- bccb-widget-transaction-confirming-modal
+- bccb-widget-transaction-approve-modal
+- bccb-widget-route-bottom
diff --git a/packages/canonical-bridge-widget/src/core/theme/ThemeProvider.tsx b/packages/canonical-bridge-widget/src/core/theme/ThemeProvider.tsx
index 1cd8462f..f32aa25a 100644
--- a/packages/canonical-bridge-widget/src/core/theme/ThemeProvider.tsx
+++ b/packages/canonical-bridge-widget/src/core/theme/ThemeProvider.tsx
@@ -11,7 +11,7 @@ export interface ThemeProviderProps {
   colorMode?: ColorMode;
   children: React.ReactNode;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  themeConfig?: { dark?: any; light?: any };
+  themeConfig?: { dark?: any; light?: any; fontFamily?: string };
 }
 
 export const ThemeProvider = ({
@@ -37,7 +37,7 @@ export const ThemeProvider = ({
         global: ({ colorMode }: { colorMode: ColorMode }) => ({
           body: {
             bg: themeConfig?.[colorMode]?.background?.body ?? theme.colors[colorMode].background[3],
-            fontFamily: 'Space Grotesk',
+            fontFamily: themeConfig?.fontFamily ?? 'Space Grotesk',
           },
           ...walletStyles(colorMode),
         }),
diff --git a/packages/space/src/modules/theme/internal/typography.ts b/packages/space/src/modules/theme/internal/typography.ts
index 3a6ebbef..754785a7 100644
--- a/packages/space/src/modules/theme/internal/typography.ts
+++ b/packages/space/src/modules/theme/internal/typography.ts
@@ -1,42 +1,42 @@
 import { typography } from '../foundations/typography';
 
-const FONT_FAMILIES = {
-  ZEN_DOTS: `'Zen Dots', sans-serif`,
-  SPACE_GROTESK: `'Space Grotesk', sans-serif`,
-};
+// const FONT_FAMILIES = {
+//   ZEN_DOTS: `'Zen Dots', sans-serif`,
+//   SPACE_GROTESK: `'Space Grotesk', sans-serif`,
+// };
 
 const STYLES = {
   display: {
     lg: {
-      fontFamily: FONT_FAMILIES.ZEN_DOTS,
+      // fontFamily: FONT_FAMILIES.ZEN_DOTS,
       fontSize: typography.fontSizes['20'],
       fontWeight: '400',
       lineHeight: typography.fontSizes['22'],
       letterSpacing: typography.letterSpacings.wider,
     },
     md: {
-      fontFamily: FONT_FAMILIES.ZEN_DOTS,
+      // fontFamily: FONT_FAMILIES.ZEN_DOTS,
       fontSize: typography.fontSizes['16'],
       fontWeight: '400',
       lineHeight: typography.fontSizes['18'],
       letterSpacing: typography.letterSpacings.wider,
     },
     sm: {
-      fontFamily: FONT_FAMILIES.ZEN_DOTS,
+      // fontFamily: FONT_FAMILIES.ZEN_DOTS,
       fontSize: typography.fontSizes['12'],
       fontWeight: '400',
       lineHeight: typography.fontSizes['14'],
       letterSpacing: typography.letterSpacings.wider,
     },
     xs: {
-      fontFamily: FONT_FAMILIES.ZEN_DOTS,
+      // fontFamily: FONT_FAMILIES.ZEN_DOTS,
       fontSize: typography.fontSizes['8'],
       fontWeight: '400',
       lineHeight: typography.fontSizes['10'],
       letterSpacing: typography.letterSpacings.wider,
     },
     '2xs': {
-      fontFamily: FONT_FAMILIES.ZEN_DOTS,
+      // fontFamily: FONT_FAMILIES.ZEN_DOTS,
       fontSize: typography.fontSizes['6'],
       fontWeight: '400',
       lineHeight: typography.fontSizes['8'],
@@ -45,25 +45,25 @@ const STYLES = {
   },
   heading: {
     lg: {
-      fontFamily: FONT_FAMILIES.SPACE_GROTESK,
+      // fontFamily: FONT_FAMILIES.SPACE_GROTESK,
       fontSize: typography.fontSizes['12'],
       fontWeight: '400',
       lineHeight: typography.fontSizes['14'],
     },
     md: {
-      fontFamily: FONT_FAMILIES.SPACE_GROTESK,
+      // fontFamily: FONT_FAMILIES.SPACE_GROTESK,
       fontSize: typography.fontSizes['8'],
       fontWeight: '400',
       lineHeight: typography.fontSizes['10'],
     },
     sm: {
-      fontFamily: FONT_FAMILIES.SPACE_GROTESK,
+      // fontFamily: FONT_FAMILIES.SPACE_GROTESK,
       fontSize: typography.fontSizes['6'],
       fontWeight: '400',
       lineHeight: typography.fontSizes['8'],
     },
     xs: {
-      fontFamily: FONT_FAMILIES.SPACE_GROTESK,
+      // fontFamily: FONT_FAMILIES.SPACE_GROTESK,
       fontSize: typography.fontSizes['5'],
       fontWeight: '400',
       lineHeight: typography.fontSizes['7'],
@@ -71,19 +71,19 @@ const STYLES = {
   },
   body: {
     lg: {
-      fontFamily: FONT_FAMILIES.SPACE_GROTESK,
+      // fontFamily: FONT_FAMILIES.SPACE_GROTESK,
       fontSize: typography.fontSizes['5'],
       fontWeight: '400',
       lineHeight: typography.fontSizes['7'],
     },
     md: {
-      fontFamily: FONT_FAMILIES.SPACE_GROTESK,
+      // fontFamily: FONT_FAMILIES.SPACE_GROTESK,
       fontSize: typography.fontSizes['4'],
       fontWeight: '400',
       lineHeight: typography.fontSizes['6'],
     },
     sm: {
-      fontFamily: FONT_FAMILIES.SPACE_GROTESK,
+      // fontFamily: FONT_FAMILIES.SPACE_GROTESK,
       fontSize: typography.fontSizes['3.5'],
       fontWeight: '400',
       lineHeight: typography.fontSizes['5'],
@@ -91,19 +91,19 @@ const STYLES = {
   },
   label: {
     lg: {
-      fontFamily: FONT_FAMILIES.SPACE_GROTESK,
+      // fontFamily: FONT_FAMILIES.SPACE_GROTESK,
       fontSize: typography.fontSizes['4'],
       fontWeight: '400',
       lineHeight: typography.fontSizes['6'],
     },
     md: {
-      fontFamily: FONT_FAMILIES.SPACE_GROTESK,
+      // fontFamily: FONT_FAMILIES.SPACE_GROTESK,
       fontSize: typography.fontSizes['3.5'],
       fontWeight: '400',
       lineHeight: typography.fontSizes['4'],
     },
     sm: {
-      fontFamily: FONT_FAMILIES.SPACE_GROTESK,
+      // fontFamily: FONT_FAMILIES.SPACE_GROTESK,
       fontSize: typography.fontSizes['3'],
       fontWeight: '400',
       lineHeight: typography.fontSizes['4'],

From 369dd85595ad0a243ed4c48c951fe9b5b36f43ce Mon Sep 17 00:00:00 2001
From: chris <leosameric@gmail.com>
Date: Mon, 11 Nov 2024 16:41:38 +1000
Subject: [PATCH 06/29] chore: Add demo code

---
 .../docs/{classname.md => customThemes.md}    | 62 ++++++++++++++++++-
 .../SelectModal/components/BaseModal.tsx      |  3 +-
 2 files changed, 62 insertions(+), 3 deletions(-)
 rename packages/canonical-bridge-widget/docs/{classname.md => customThemes.md} (72%)

diff --git a/packages/canonical-bridge-widget/docs/classname.md b/packages/canonical-bridge-widget/docs/customThemes.md
similarity index 72%
rename from packages/canonical-bridge-widget/docs/classname.md
rename to packages/canonical-bridge-widget/docs/customThemes.md
index 1eb78439..aeed5b5b 100644
--- a/packages/canonical-bridge-widget/docs/classname.md
+++ b/packages/canonical-bridge-widget/docs/customThemes.md
@@ -1,5 +1,59 @@
-This document lists all the available styling class name in the widget. Please overwrite stylings
-based on these class name.
+# Widget custom themes
+
+## Usage
+
+```javascript
+import { ChakraProvider, ColorMode, createLocalStorageManager, theme } from '@bnb-chain/space';
+
+import { env } from '@/core/env';
+
+interface ThemeProviderProps {
+  children: React.ReactNode;
+}
+
+const colorModeManager = createLocalStorageManager(`${env.APP_NAME}-color-mode`);
+
+export const ThemeProvider = ({ children }: ThemeProviderProps) => {
+  const customTheme = {
+    ...theme,
+    breakpoints: {
+      ...theme.breakpoints,
+      lg: '1080px',
+    },
+    config: {
+      ...theme.config,
+      initialColorMode: 'dark',
+      useSystemColorMode: false,
+    },
+    styles: {
+      global: ({ colorMode }: { colorMode: ColorMode }) => ({
+        body: {
+          bg: theme.colors[colorMode].background[3],
+          '.bccb-widget-transfer-widget-title': {
+            borderRadius: '4px', // overwrite border radius
+          },
+        },
+      }),
+    },
+  };
+
+  return (
+    <ChakraProvider
+      colorModeManager={colorModeManager}
+      theme={customTheme}
+      toastOptions={{
+        defaultOptions: {
+          position: 'top',
+        },
+      }}
+    >
+      {children}
+    </ChakraProvider>
+  );
+};
+```
+
+## This document lists all the available styling class name in the widget. Please overwrite stylings based on these class name.
 
 1. Widget Main
 
@@ -65,6 +119,7 @@ based on these class name.
 5. Token Selection Modal
 
 - bccb-widget-token-modal
+- bccb-widget-token-modal-content
 - bccb-widget-token-virtual-list
 - bccb-widget-token-list-address
 - bccb-widget-token-address-link
@@ -76,12 +131,15 @@ based on these class name.
 - bccb-widget-from-network-list-item
 - bccb-widget-from-network-virtual-list
 - bccb-widget-from-network-modal
+- bccb-widget-from-network-modal-content
+- bccb-widget-to-network-modal-content
 
 7. To Network Selection
 
 - bccb-widget-to-network-virtual-list
 - bccb-widget-to-network-list-item
 - bccb-widget-to-network-modal
+- bccb-widget-to-network-modal-content
 
 8. Base Modal
 
diff --git a/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/components/BaseModal.tsx b/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/components/BaseModal.tsx
index f60dd735..4311eb1f 100644
--- a/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/components/BaseModal.tsx
+++ b/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/components/BaseModal.tsx
@@ -31,8 +31,9 @@ export function BaseModal(props: BaseModalProps) {
 
   return (
     <Modal isOpen={isOpen} onClose={onClose} isCentered autoFocus={false}>
-      <ModalOverlay />
+      <ModalOverlay className={`${className}-overlay`} />
       <ModalContent
+        className={`${className}-content`}
         background={theme.colors[colorMode].background.modal}
         borderRadius={{ base: '0', md: '24px' }}
         p={0}

From c686aaeb346dd1bdc48f41841d1ee69c3097b108 Mon Sep 17 00:00:00 2001
From: chris <leosameric@gmail.com>
Date: Mon, 11 Nov 2024 19:15:35 +1000
Subject: [PATCH 07/29] chore: Migrate docs

---
 .../docs/Bridge Configuration (basic).md      |  67 ++++
 .../docs/Custom Route (advanced).md           | 133 +++++++
 .../{customThemes.md => Custom Themes.md}     |   0
 .../docs/Getting Started.md                   | 328 ++++++++++++++++++
 .../docs/Introduction.md                      |  27 ++
 .../docs/Network Configuration.md             |   4 +
 .../docs/Token Configuration (advanced).md    |  83 +++++
 7 files changed, 642 insertions(+)
 create mode 100644 packages/canonical-bridge-widget/docs/Bridge Configuration (basic).md
 create mode 100644 packages/canonical-bridge-widget/docs/Custom Route (advanced).md
 rename packages/canonical-bridge-widget/docs/{customThemes.md => Custom Themes.md} (100%)
 create mode 100644 packages/canonical-bridge-widget/docs/Getting Started.md
 create mode 100644 packages/canonical-bridge-widget/docs/Introduction.md
 create mode 100644 packages/canonical-bridge-widget/docs/Network Configuration.md
 create mode 100644 packages/canonical-bridge-widget/docs/Token Configuration (advanced).md

diff --git a/packages/canonical-bridge-widget/docs/Bridge Configuration (basic).md b/packages/canonical-bridge-widget/docs/Bridge Configuration (basic).md
new file mode 100644
index 00000000..a1b3d132
--- /dev/null
+++ b/packages/canonical-bridge-widget/docs/Bridge Configuration (basic).md	
@@ -0,0 +1,67 @@
+# Bridge configuration (basic)
+
+Bridge configuration allows user to config title, theme color, multi-language and server API.
+
+```javascript
+const bridgeConfig: ICanonicalBridgeConfig = {
+  appName: 'Your-App-Name',
+  assetPrefix: '',
+  appearance: {
+    bridgeTitle: 'Bridge Title',
+    mode: 'dark',
+    theme: {
+      dark: {
+        input: {
+          background: '#1E2026',
+          title: '#8C8F9B',
+        },
+      },
+      light: {},
+    },
+    locale: 'en',
+    messages,
+  },
+  wallet: {
+    walletConnectProjectId: env.WALLET_CONNECT_PROJECT_ID,
+  },
+  http: {
+    refetchingInterval: 30 * 1000, // 30s
+    apiTimeOut: 60 * 1000, // 60s
+    deBridgeAccessToken: '',
+    serverEndpoint: env.WIDGET_SERVER_ENDPOINT,
+  },
+};
+```
+
+## appName
+
+This is the prefix of images url. The default token and chain images can be found in
+canonical-bridge-ui. Please copy these images to your /images folder.
+
+## appearance
+
+1. theme: Light and dark color configuration. For full list of available color settings
+
+2. mode: Dark/light mode. Default mode is dark
+
+3. locale: Language of your website. For example: 'fr' or 'zh-CN'.
+
+4. message: Multilingual message. You need to create individual language files, for example fr.ts .
+   Message format should look like this. Replace the message value with the language you want. <b>Do
+   not change the value within curly bracket!</b>.
+
+## wallet
+
+walletConnectProjectId: WalletConnect Cloud project identifier. You can find your projectId on your
+WalletConnect dashboard.
+
+## http
+
+1. refetchingInterval: Optional. Time interval for fetching bridge fees. Default value is 30
+   seconds. Please do not set this value to more than 30 seconds to avoid sending outdated orders,
+   which may result in transaction failure.
+
+2. apiTimeOut: Optional. Bridge API request timeout. Default value is 1 min.
+
+3. serverEndpoint: Server endpoint to fetch token price and token list. You need to deploy your
+   server API. Please check the docs.
diff --git a/packages/canonical-bridge-widget/docs/Custom Route (advanced).md b/packages/canonical-bridge-widget/docs/Custom Route (advanced).md
new file mode 100644
index 00000000..c14bd446
--- /dev/null
+++ b/packages/canonical-bridge-widget/docs/Custom Route (advanced).md	
@@ -0,0 +1,133 @@
+This widget provides several bridges or routes; deBridge, cBridge, Stargate, LayerZero and Meson. To
+enable routes you need to add route settings into transferConfig, which is prop
+of<CanonicalBridgeProvider> component. The config structure for individual route is like
+
+```javascript
+// ROUTE_NAME should be one of following name
+// cBridge | deBridge | meson | stargate | layerZero
+ROUTE_NAME: {
+  config: ROUTE_CONFIG,
+  exclude: {
+    chains: [],
+    tokens: {}
+  },
+  bridgedTokenGroups: []
+}
+```
+
+ROUTE_CONFIG contains the list of token address and bridge address. The token list structure of
+different bridge may vary, and you can check demo for more details. To enable deBridge or cBridge
+routes, there are a few ways to configure token settings.
+
+1. Deploying Your Own API Server: Fetch the cBridge and deBridge token lists by following the
+   deployment instructions
+   (https://github.com/bnb-chain/canonical-bridge/tree/main/apps/canonical-bridge-server). This is
+   our recommended approach for flexibility and control over updates.
+2. Using cBridge or deBridge APIs Directly: Obtain token and chain configurations directly from the
+   cBridge API or deBridge API and inject them into transferConfig.
+3. Downloading JSON-formatted Settings: Download token settings in JSON format from the cBridge API
+   or deBridge API and save them within your application. Be aware that you may need to update these
+   files regularly to avoid missing newly supported tokens.
+
+The first option is ideal, but due to the cost of deploying your own API server, the second or third
+options may be more feasible.
+
+## API server
+
+The instructions of API server deployment can be found
+(https://github.com/bnb-chain/canonical-bridge/tree/main/apps/canonical-bridge-server). The server
+provides endpoints /api/bridge/cbridge and /api/bridge/deBridge to retrieve token config, and it
+also supported token prices. Deploy API your own API server is highly recommended to access full
+widget functionality.
+
+After setting up the token configurations, you may wonder where this token list originates and how
+to add more tokens. For this, please check the documentation of each bridge provider. Links to these
+documentation are listed below.
+
+[deBridge](https://deswap.debridge.finance/v1.0/#/utils/AppControllerV10_getSupportedChainInfoResponse)
+
+[cBridge](https://cbridge-docs.celer.network/developer/api-reference/gateway-gettransferconfigsforall)
+
+[Stargate](https://stargateprotocol.gitbook.io/stargate/v2-developer-docs/technical-reference/mainnet-contracts)
+
+[Meson](https://meson.dev/api/endpoints/list-chains)
+
+[LayerZero V1 endpoints](https://docs.layerzero.network/v1/developers/evm/technical-reference/mainnet/mainnet-addresses)
+
+## Token Config format
+
+By adding tokens to each route please follow the below token list and network list format.
+
+Stargate:
+
+```javascript
+{
+"tokens": {
+  // chain id. 1 represents Ethereum
+  "1": [
+    {
+      "address": "0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48", // token address
+      "bridgeAddress": "0xc026395860Db2d07ee33e05fE50ed7bD583189C7", // bridge contract address
+      "decimals": 6,
+      "symbol": "USDC",
+      "endpointID": 30101, // can be found in stargate link under api server section.
+      "name": "USD Coin"
+    },
+   ]
+},
+"chains": [
+  {
+    "chainId": 1,
+    "chainName": "Ethereum"
+  }
+]
+}
+```
+
+LayerZero:
+
+```javascript
+{
+"tokens": {
+  // chain id of networks.
+  "1": [ // 1 => Ethereum
+    {
+      "address": "0x152649eA73beAb28c5b49B26eb48f7EAD6d4c898", // token address
+      "bridgeAddress": "0x152649eA73beAb28c5b49B26eb48f7EAD6d4c898", // bridge contract address
+      "decimals": 18,
+      "symbol": "CAKE",
+      "name": "Cake",
+      "endpointID": 101, // This id can be found in layerzero V1 endpoint link above
+      "version": 1 // layerzero version
+    }
+  ],
+  "56": [ // 56 => BNB smart chain
+    {
+      "address": "0x0e09fabb73bd3ade0a17ecc321fd13a19e81ce82",
+      "bridgeAddress": "0xb274202daBA6AE180c665B4fbE59857b7c3a8091",
+      "decimals": 18,
+      "symbol": "CAKE",
+      "name": "Cake",
+      "endpointID": 102,
+      "version": 1
+    }
+  ],
+},
+"chains": [
+  {
+    "chainId": 1,
+    "chainName": "Ethereum"
+  },
+  {
+    "chainId": 56,
+    "chainName": "BSC"
+  }
+]
+}
+```
+
+cBridge and deBridge config format is as same as
+[cBridge](https://cbridge-docs.celer.network/developer/api-reference/gateway-gettransferconfigsforall)
+and
+[deBridge](https://deswap.debridge.finance/v1.0/#/utils/AppControllerV10_getSupportedChainInfoResponse)
+respectively.
diff --git a/packages/canonical-bridge-widget/docs/customThemes.md b/packages/canonical-bridge-widget/docs/Custom Themes.md
similarity index 100%
rename from packages/canonical-bridge-widget/docs/customThemes.md
rename to packages/canonical-bridge-widget/docs/Custom Themes.md
diff --git a/packages/canonical-bridge-widget/docs/Getting Started.md b/packages/canonical-bridge-widget/docs/Getting Started.md
new file mode 100644
index 00000000..bb94c388
--- /dev/null
+++ b/packages/canonical-bridge-widget/docs/Getting Started.md	
@@ -0,0 +1,328 @@
+## Installation
+
+```bash
+npm install @bnb-chain/canonical-bridge-widget viem@^2
+```
+
+## Usage
+
+Before diving into the code, let's take a us quick look at the project structure of the
+canonical-bridge-ui(https://github.com/bnb-chain/canonical-bridge/tree/main/apps/canonical-bridge-ui).
+This overview will help you understand the project better and easily locate the relevant reference
+files.
+
+- core: This folder contains localization files ( e.g. en.ts) for multi-language support and theme
+  files (dark.ts and light.ts) are located.
+- pages: You can find usage example of widget provider within mainnet or testnet folders.
+- public: The folder holds image assets for token and network .
+- token-config: token-config contains token and network configuration for each route. Configuration
+  files like config.json for LayerZero, Stargate and Meson are located in this folder, along with
+  the setting file useTransferConfig.ts.
+
+The code below provides a simple example of setting up Stargate route. All token and chain settings
+are passed as props to <CanonicalBridgeProvider> component.
+
+```javascript
+// index.tsx
+import {
+  CanonicalBridgeProvider,
+  ICanonicalBridgeConfig,
+  TransferWidget,
+} from '@bnb-chain/canonical-bridge-widget';
+import { useTransferConfig } from '@/token-config/mainnet/useTransferConfig';
+import { en as messages } from '@/core/locales/en';
+
+export const bridgeConfig: ICanonicalBridgeConfig = {
+  appName: 'YOUR-APP-NAME',
+  assetPrefix: '',
+  appearance: {
+    bridgeTitle: 'Widget Title',
+    locale: 'en',
+    messages,
+    mode: 'dark',
+    theme: {
+      dark: {
+        input: {
+          background: '#1E2026',
+          title: '#8C8F9B',
+        },
+      },
+      light: {},
+    },
+  },
+  wallet: {
+    walletConnectProjectId: 'WALLET-CONNECT-PROJECT-ID',
+  },
+  http: {
+    serverEndpoint: 'YOUR-SERVER-ENDPOINT',
+  },
+};
+
+const chains = [
+  {
+    id: 1,
+    name: 'Ethereum',
+    nativeCurrency: {
+      name: 'Ether',
+      symbol: 'ETH',
+      decimals: 18,
+    },
+    rpcUrl: 'https://ethereum-rpc.publicnode.com/',
+    explorer: {
+      name: 'Etherscan',
+      url: 'https://etherscan.io',
+    },
+  },
+  {
+    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: 137,
+    name: 'Polygon',
+    nativeCurrency: {
+      name: 'MATIC',
+      symbol: 'MATIC',
+      decimals: 18,
+    },
+    rpcUrl: 'https://polygon-rpc.com',
+    explorer: {
+      name: 'polygonscan',
+      url: 'https://polygonscan.com',
+    },
+  },
+  // other networks
+];
+
+export default function MainnetPage() {
+  const transferConfig = useTransferConfig();
+
+  return (
+    <CanonicalBridgeProvider config={bridgeConfig} transferConfig={transferConfig} chains={chains}>
+      <TransferWidget />
+    </CanonicalBridgeProvider>
+  );
+}
+```
+
+```javascript
+// useTransferConfig.ts
+import { useEffect, useState } from 'react';
+import { ITransferConfig } from '@bnb-chain/canonical-bridge-widget';
+import stargateConfig from '@/token-config/mainnet/stargate/config.json';
+
+export function useTransferConfig() {
+  const [transferConfig, setTransferConfig] = useState<ITransferConfig>();
+
+  useEffect(() => {
+    const initConfig = async () => {
+
+      const transferConfig: ITransferConfig = {
+        defaultSelectedInfo: {
+          fromChainId: 1,
+          toChainId: 56,
+          tokenSymbol: 'USDT', // USDT
+          amount: '20', // 20 USDT
+        },
+        order: {
+          chains: [56, 1], // BNB smart chain then Ethereum
+          tokens: ['USDC', 'USDT', 'FDUSD'],
+        },
+        displayTokenSymbols: {
+          56: {
+            '0x2170Ed0880ac9A755fd29B2688956BD959F933F8': 'ETH',
+          },
+        },
+        stargate: {
+          config: stargateConfig,
+          exclude: {
+            chains: [137], // Polygon
+            tokens: {
+              1: ['cUSDCv3'],
+              56: [
+                '0x67d66e8ec1fd25d98b3ccd3b19b7dc4b4b7fc493',
+                '0x0000000000000000000000000000000000000000',
+              ],
+            },
+          },
+          bridgedTokenGroups: [
+            ['USDT', 'USDT.e'],
+            ['USDC', 'USDC.e'],
+          ],
+        },
+        // other route settings go here...
+      };
+
+      setTransferConfig(transferConfig);
+    };
+
+    initConfig();
+  }, []);
+
+  return transferConfig;
+}
+```
+
+```json
+// This is an token list example for Stargate route only.
+// for other routes, please refer to
+// https://github.com/bnb-chain/canonical-bridge/tree/main/apps/canonical-bridge-ui
+{
+  "tokens": {
+    "1": [
+      {
+        "address": "0x0000000000000000000000000000000000000000",
+        "bridgeAddress": "0x77b2043768d28E9C9aB44E1aBfC95944bcE57931",
+        "decimals": 18,
+        "symbol": "ETH",
+        "endpointID": 30101,
+        "name": "Ether"
+      },
+      {
+        "address": "0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48",
+        "bridgeAddress": "0xc026395860Db2d07ee33e05fE50ed7bD583189C7",
+        "decimals": 6,
+        "symbol": "USDC",
+        "endpointID": 30101,
+        "name": "USD Coin"
+      },
+      {
+        "address": "0xdac17f958d2ee523a2206206994597c13d831ec7",
+        "bridgeAddress": "0x933597a323Eb81cAe705C5bC29985172fd5A3973",
+        "decimals": 6,
+        "symbol": "USDT",
+        "endpointID": 30101,
+        "name": "Tether USD"
+      },
+      {
+        "address": "0x9e32b13ce7f2e80a01932b42553652e053d6ed8e",
+        "bridgeAddress": "0xcDafB1b2dB43f366E48e6F614b8DCCBFeeFEEcD3",
+        "decimals": 18,
+        "symbol": "METIS",
+        "endpointID": 30101,
+        "name": "Metis"
+      },
+      {
+        "address": "0xd5f7838f5c461feff7fe49ea5ebaf7728bb0adfa",
+        "bridgeAddress": "0x268Ca24DAefF1FaC2ed883c598200CcbB79E931D",
+        "decimals": 18,
+        "symbol": "mETH",
+        "endpointID": 30101,
+        "name": "Mantle Staked Ether"
+      }
+    ],
+    "56": [
+      {
+        "address": "0x55d398326f99059fF775485246999027B3197955",
+        "bridgeAddress": "0x138EB30f73BC423c6455C53df6D89CB01d9eBc63",
+        "decimals": 18,
+        "symbol": "USDT",
+        "endpointID": 30102,
+        "name": "Tether USD"
+      },
+      {
+        "address": "0x8ac76a51cc950d9822d68b83fe1ad97b32cd580d",
+        "bridgeAddress": "0x962Bd449E630b0d928f308Ce63f1A21F02576057",
+        "decimals": 18,
+        "symbol": "USDC",
+        "endpointID": 30102,
+        "name": "USD Coin"
+      }
+    ],
+    "97": [
+      {
+        "address": "0xe37bdc6f09dab6ce6e4ebc4d2e72792994ef3765",
+        "bridgeAddress": "0x0a0C1221f451Ac54Ef9F21940569E252161a2495",
+        "decimals": 6,
+        "symbol": "USDT",
+        "endpointID": 40102,
+        "network": "testnet",
+        "name": "Tether USD"
+      }
+    ],
+    "137": [
+      {
+        "address": "0x3c499c542cef5e3811e1192ce70d8cc03d5c3359",
+        "bridgeAddress": "0x9Aa02D4Fae7F58b8E8f34c66E756cC734DAc7fe4",
+        "decimals": 6,
+        "symbol": "USDC",
+        "endpointID": 30109,
+        "name": "USD Coin"
+      },
+      {
+        "address": "0xc2132d05d31c914a87c6611c10748aeb04b58e8f",
+        "bridgeAddress": "0xd47b03ee6d86Cf251ee7860FB2ACf9f91B9fD4d7",
+        "decimals": 6,
+        "symbol": "USDT",
+        "endpointID": 30109,
+        "name": "Tether USD"
+      }
+    ]
+  },
+  "chains": [
+    {
+      "chainId": 1,
+      "chainName": "Ethereum"
+    },
+    {
+      "chainId": 56,
+      "chainName": "BSC"
+    },
+    {
+      "chainId": 97,
+      "chainName": "BSC Testnet",
+      "network": "testnet"
+    },
+    {
+      "chainId": 137,
+      "chainName": "Polygon"
+    }
+  ]
+}
+```
+
+```javascript
+export const en = {
+  'select-modal.tag.incompatible': 'Incompatible',
+  'select-modal.search.no-result.title': 'No result found',
+  'select-modal.search.no-result.warning':
+    'Try adjusting your search request to find what you’re looking for',
+};
+```
+
+## Initiation steps
+
+1. Create token and chains config file for route (config.json) which will be used in
+   useTransferConfig.ts to config tokens and transfer settings.
+2. Config chains settings in index.ts. This setting is essential for wallet connections. rpcUrl and
+   id are available on ChainList.
+3. Prepare token and network icon images. The default token and chain images can be found in public
+   folder. Please copy these images to public images folder of your application. If you skip this
+   step images and network icons will be blank.
+4. Create a localization file en.ts , for multi-language support.
+5. Import CanonicalBridgeProvider, ICanonicalBridgeConfig and TransferWidget components from
+   @bnb-chain/canonical-bridge-widget and Config bridgeConfig, transferConfig and chains props
+   within <CanonicalBridgeProvider> component accordingly.
+6. Once setup is completed, you should be able to open widget UI and initiate token transfer. Ensure
+   you have sufficient tokens to activate the send button.
+
+The above demo is specific to Stargate route. Our widget also supports other routes, including
+cBridge, deBridge, LayerZero and Meson. To enable additional routes, config route in transferConfig
+is required. You can find more information in Custom Route (advanced).
+
+For available tokens and networks supported by each route, please refer to Network Configuration and
+Token Configuration. Note that token and networks settings vary across different routes. For details
+of configuration please refer to Bridge configuration (basic), Token configuration (advanced) and
+Network Configuration
+
+P.S. to enable deBridge or cBridge routes, please check Custom Route (advanced) for further details.
diff --git a/packages/canonical-bridge-widget/docs/Introduction.md b/packages/canonical-bridge-widget/docs/Introduction.md
new file mode 100644
index 00000000..866bdf04
--- /dev/null
+++ b/packages/canonical-bridge-widget/docs/Introduction.md
@@ -0,0 +1,27 @@
+# Introduction
+
+## What is BNB Chain Canonical Bridge Widget?
+
+BNB Chain canonical bridge widget is a cross chain transfer frontend widget written in React.js. It
+offers point-to-point transfers among major tokens on networks. Users can view detailed transfer
+fees and compare transfer costs and times of various routes.
+
+The bridge widget supports multiple major tokens and chains transfer through various third party
+bridge providers, allowing seamless embedding on websites without complex setup.
+
+The widget has basic settings, such as theme, supported chains, and multilingual options. It also
+has advanced configurations to meet specific needs, such as default selected chain and tokens,
+token, chain and token ordering, and hiding specific chain and tokens from network selection and
+token selection. This makes it easier for users to find specific chains and tokens.
+
+## Main features
+
+- Token transfer across popular chains.
+- Transfer fee and transfer waiting time information.
+- Route comparison and the cheapest route pre-selection.
+- Supported tokens and networks custom configuration.
+- Automatically/ manually refetch the latest fee information.
+
+## Demo
+
+https://github.com/bnb-chain/canonical-bridge/tree/main/apps/canonical-bridge-ui
diff --git a/packages/canonical-bridge-widget/docs/Network Configuration.md b/packages/canonical-bridge-widget/docs/Network Configuration.md
new file mode 100644
index 00000000..47690162
--- /dev/null
+++ b/packages/canonical-bridge-widget/docs/Network Configuration.md	
@@ -0,0 +1,4 @@
+Network configuration allows tokens to be transferred on certain networks. It also defines the
+wallet connect setting for your dApp. Please refer to
+(https://github.com/bnb-chain/canonical-bridge/blob/main/apps/canonical-bridge-ui/token-config/mainnet/chains.ts)
+for network configuration.
diff --git a/packages/canonical-bridge-widget/docs/Token Configuration (advanced).md b/packages/canonical-bridge-widget/docs/Token Configuration (advanced).md
new file mode 100644
index 00000000..852ee3e6
--- /dev/null
+++ b/packages/canonical-bridge-widget/docs/Token Configuration (advanced).md	
@@ -0,0 +1,83 @@
+Token configuration is the advanced setting to show tokens, network and routes. You can enable
+particular routes, tokens and network in the following settings.
+
+## defaultSelectedInfo
+
+default selected token symbol, source and destination network and default send token amount.
+
+```javascript
+defaultSelectedInfo: {
+   fromChainId: 1,
+   toChainId: 56,
+   tokenSymbol: 'USDT',
+   amount: '20', // 20 USDT
+ },
+```
+
+1. fromChainId: Default source chain id. 1 represents Ethereum:
+
+2. toChainId:Default selected destination chain Id. 56 represents BNB Smart Chain
+
+3. tokenSymbol: Default selected token symbol
+
+4. amount: default transfer amount. 20 for 20 USDT.
+
+## Order
+
+token and network ordering
+
+```javascript
+order: {
+   chains: [56, 204, 1], // network sorting list
+   tokens: ['USDC','USDT','FDUSD','USDC.e','ETH'], // token sorting list
+}
+```
+
+## displayTokenSymbols
+
+Set token symbol for particular address on selected chain. The below example sets symbol of
+0x2170Ed0880ac9A755fd29B2688956BD959F933F8 as ETH on BNB Smart Chain
+
+```javascript
+displayTokenSymbols: { 56: { // Network id '0x2170Ed0880ac9A755fd29B2688956BD959F933F8': 'ETH',
+} }
+```
+
+## Route configuration
+
+The route configuration is the place to setup supported tokens on route. It is able to hide
+particular tokens and chains. For some cases, token may have different symbols in different network,
+bridgedTokenGroups allows tokens with different symbols to be transferred. The following example is
+for deBridge route.
+
+```javascript
+// deBridge example
+deBridge: {
+  config: deBridgeConfig, // config from API
+  exclude: {
+    chains: [204], // hide opBNB
+    tokens: {
+      1: ['cUSDCv3'], // hide cUSDCv3 on Ethereum
+      56: [
+        '0x67d66e8ec1fd25d98b3ccd3b19b7dc4b4b7fc493',
+        '0x0000000000000000000000000000000000000000',
+      ],
+      137: ['cUSDCv3'],
+    },
+  },
+  bridgedTokenGroups: [
+    ['USDT', 'USDT.e'],
+    ['USDC', 'USDC.e'],
+    ['WETH', 'WETH.e'],
+  ],
+},
+```
+
+1. config :This is the place to setup supported token for particular route. Please check demo and
+   Custom Route (advanced) for more information.
+
+2. exclude : Hide networks or tokens on particular network. Token value could be token symbol or
+   token address.
+
+3. bridgedTokenGroups :By default, only tokens with the same symbol could be transferred across
+   different networks. Token groups setting allows tokens with different symbols to be transferred.

From bb4de209dbeb39cc7595cb4c6b80cfef64f371fb Mon Sep 17 00:00:00 2001
From: wenty22 <wenty.l@nodereal.io>
Date: Tue, 12 Nov 2024 10:45:48 +0800
Subject: [PATCH 08/29] fix: Fix token balance sorting issue

---
 .../src/modules/aggregator/shared/sortTokens.ts           | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/canonical-bridge-widget/src/modules/aggregator/shared/sortTokens.ts b/packages/canonical-bridge-widget/src/modules/aggregator/shared/sortTokens.ts
index 460514b9..7162342c 100644
--- a/packages/canonical-bridge-widget/src/modules/aggregator/shared/sortTokens.ts
+++ b/packages/canonical-bridge-widget/src/modules/aggregator/shared/sortTokens.ts
@@ -52,13 +52,15 @@ export function sortTokens({
         return 1;
       }
 
-      if (a.balance && b.balance) {
+      const aBalance = Number(a.balance);
+      const bBalance = Number(b.balance);
+      if (aBalance && bBalance) {
         return sortWithPredefinedOrders();
       }
-      if (a.balance && !b.balance) {
+      if (aBalance && !bBalance) {
         return -1;
       }
-      if (!a.balance && b.balance) {
+      if (!aBalance && bBalance) {
         return 1;
       }
     }

From a6db440886368bd3c7da615f300aaa2ce44f754e Mon Sep 17 00:00:00 2001
From: wenty22 <wenty.l@nodereal.io>
Date: Tue, 12 Nov 2024 11:52:40 +0800
Subject: [PATCH 09/29] feat: Support solana

---
 .release/.changeset/pre.json                  | 11 +++++++++++
 .release/.changeset/tasty-gifts-brush.md      |  6 ++++++
 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 +-
 6 files changed, 31 insertions(+), 2 deletions(-)
 create mode 100644 .release/.changeset/pre.json
 create mode 100644 .release/.changeset/tasty-gifts-brush.md

diff --git a/.release/.changeset/pre.json b/.release/.changeset/pre.json
new file mode 100644
index 00000000..5ad851e4
--- /dev/null
+++ b/.release/.changeset/pre.json
@@ -0,0 +1,11 @@
+{
+  "mode": "pre",
+  "tag": "alpha",
+  "initialVersions": {
+    "@bnb-chain/canonical-bridge-sdk": "0.3.3",
+    "@bnb-chain/canonical-bridge-widget": "0.4.0"
+  },
+  "changesets": [
+    "tasty-gifts-brush"
+  ]
+}
diff --git a/.release/.changeset/tasty-gifts-brush.md b/.release/.changeset/tasty-gifts-brush.md
new file mode 100644
index 00000000..9a986623
--- /dev/null
+++ b/.release/.changeset/tasty-gifts-brush.md
@@ -0,0 +1,6 @@
+---
+"@bnb-chain/canonical-bridge-widget": minor
+"@bnb-chain/canonical-bridge-sdk": minor
+---
+
+Support solana
diff --git a/packages/canonical-bridge-sdk/CHANGELOG.md b/packages/canonical-bridge-sdk/CHANGELOG.md
index 673d2031..756c1256 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.0-alpha.0
+
+### Minor Changes
+
+- Support solana
+
 ## 0.3.3
 
 ### Patch Changes
diff --git a/packages/canonical-bridge-sdk/package.json b/packages/canonical-bridge-sdk/package.json
index 88805519..e17d92c3 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.3.3",
+  "version": "0.4.0-alpha.0",
   "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 76cd5d69..b463a1a1 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.0-alpha.0
+
+### Minor Changes
+
+- Support solana
+
 ## 0.4.0
 
 ### Minor Changes
diff --git a/packages/canonical-bridge-widget/package.json b/packages/canonical-bridge-widget/package.json
index 1da97e61..9e9ece2d 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.4.0",
+  "version": "0.5.0-alpha.0",
   "description": "canonical bridge widget",
   "author": "bnb-chain",
   "private": false,

From 3b864a2c2cbb3676fdab9028d359a9c63b773ca9 Mon Sep 17 00:00:00 2001
From: chris <leosameric@gmail.com>
Date: Tue, 12 Nov 2024 17:36:49 +1000
Subject: [PATCH 10/29] chore: Update some classname

---
 apps/canonical-bridge-ui/pages/mainnet/index.tsx   |  1 +
 .../canonical-bridge-widget/docs/Custom Themes.md  |  9 +++++++++
 .../src/core/components/IconImage/index.tsx        |  1 +
 .../components/SelectModal/ChooseTokenModal.tsx    | 10 +++++++---
 .../SelectModal/DestinationNetworkModal.tsx        |  4 +++-
 .../components/SelectModal/SourceNetworkModal.tsx  |  4 +++-
 .../SelectModal/components/BaseModal.tsx           |  3 ++-
 .../components/SelectModal/components/ListItem.tsx |  5 +++--
 .../transfer/components/SendInput/MaxLink.tsx      |  1 +
 .../transfer/components/SendInput/index.tsx        |  8 +++++++-
 .../TransferOverview/RouteInfo/OtherRouteError.tsx | 11 +++++++++--
 .../RouteInfo/TokenInfoTooltip.tsx                 | 14 ++++++++++----
 .../transfer/components/TransferOverview/index.tsx |  2 +-
 .../src/modules/transfer/index.tsx                 |  3 ++-
 .../wallet/components/Dropdown/DropdownButton.tsx  |  1 -
 .../wallet/components/Dropdown/DropdownItem.tsx    |  4 ++--
 .../wallet/components/NetworkStatus/index.tsx      | 14 ++++++++++++--
 .../wallet/components/ProfileMenu/index.tsx        | 13 +++++++++++--
 18 files changed, 84 insertions(+), 24 deletions(-)

diff --git a/apps/canonical-bridge-ui/pages/mainnet/index.tsx b/apps/canonical-bridge-ui/pages/mainnet/index.tsx
index f9f48ec2..e7088d95 100644
--- a/apps/canonical-bridge-ui/pages/mainnet/index.tsx
+++ b/apps/canonical-bridge-ui/pages/mainnet/index.tsx
@@ -24,6 +24,7 @@ export const bridgeConfig: ICanonicalBridgeConfig = {
     theme: {
       dark: dark,
       light: light,
+      fontFamily: 'Georgia',
     },
   },
   wallet: {
diff --git a/packages/canonical-bridge-widget/docs/Custom Themes.md b/packages/canonical-bridge-widget/docs/Custom Themes.md
index aeed5b5b..4199a76a 100644
--- a/packages/canonical-bridge-widget/docs/Custom Themes.md	
+++ b/packages/canonical-bridge-widget/docs/Custom Themes.md	
@@ -58,6 +58,7 @@ export const ThemeProvider = ({ children }: ThemeProviderProps) => {
 1. Widget Main
 
 - bccb-widget-transfer-widget
+- bccb-widget-transfer-widget-wrapper
 - bccb-widget-transfer-widget-title
 - bccb-widget-exchange-chain-icon
 - bccb-widget-copy-address
@@ -80,6 +81,7 @@ export const ThemeProvider = ({ children }: ThemeProviderProps) => {
 - bccb-widget-route-bottom
 - bccb-widget-route-wrapper
 - bccb-widget-route-container
+- bccb-widget-route-container-inner
 - bccb-widget-route-name
 - bccb-widget-route-name-text
 - bccb-widget-route-name-tag-bestTime
@@ -110,11 +112,15 @@ export const ThemeProvider = ({ children }: ThemeProviderProps) => {
 - bccb-widget-header-wallet-connect-button
 - bccb-widget-header-menu-button
 - bccb-widget-header-menu-item
+- bccb-widget-header-profile-balance
 - bccb-widget-header-profile-list
 - bccb-widget-header-profile-disconnect-link
 - bccb-widget-header-profile-button
 - bccb-widget-header-switching-tips-modal
 - bccb-widget-header-preventing-modal
+- bccb-widget-header-network-status
+- bccb-widget-header-network-status-title
+- bccb-widget-header-network-status-network
 
 5. Token Selection Modal
 
@@ -122,8 +128,10 @@ export const ThemeProvider = ({ children }: ThemeProviderProps) => {
 - bccb-widget-token-modal-content
 - bccb-widget-token-virtual-list
 - bccb-widget-token-list-address
+- bccb-widget-token-list-symbol
 - bccb-widget-token-address-link
 - bccb-widget-token-list-item
+- bccb-widget-token-list-item-disabled
 - bccb-widget-token-list-token-balance
 
 6. From Network Selection
@@ -153,6 +161,7 @@ export const ThemeProvider = ({ children }: ThemeProviderProps) => {
 9. Send Amount Input
 
 - bccb-widget-transfer-input-container
+- bccb-widget-transfer-input-wrapper
 - bccb-widget-transfer-input
 - bccb-widget-transfer-max
 - bccb-widget-transfer-input-error
diff --git a/packages/canonical-bridge-widget/src/core/components/IconImage/index.tsx b/packages/canonical-bridge-widget/src/core/components/IconImage/index.tsx
index e1059b55..88398828 100644
--- a/packages/canonical-bridge-widget/src/core/components/IconImage/index.tsx
+++ b/packages/canonical-bridge-widget/src/core/components/IconImage/index.tsx
@@ -19,6 +19,7 @@ export function IconImage(props: IconImageProps) {
     <>
       {isError ? (
         <Circle
+          className="default-icon"
           size={boxSize}
           {...restProps}
           bg={fallbackBgColor ?? theme.colors[colorMode].support.primary[1]}
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 8d132958..6aad3a0c 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
@@ -57,7 +57,7 @@ export function ChooseTokenModal(props: ChooseTokenModalProps) {
 
   return (
     <BaseModal
-      className="bccb-widget-token-modal"
+      className="bccb-widget-token-modal-header"
       isOpen={isOpen}
       onClose={onClose}
       title={formatMessage({ id: 'select-modal.token.title' })}
@@ -66,6 +66,7 @@ export function ChooseTokenModal(props: ChooseTokenModalProps) {
       isNoResult={isNoResult}
     >
       <Flex
+        className="bccb-widget-token-modal-header"
         fontSize={'14px'}
         fontWeight={400}
         lineHeight="16px"
@@ -87,7 +88,7 @@ export function ChooseTokenModal(props: ChooseTokenModalProps) {
 
             return (
               <ListItem
-                className="bccb-widget-token-list-item"
+                className={`bccb-widget-token-list-item` + (isDisabled ? '-disabled' : '')}
                 key={item.address}
                 iconUrl={item.icon}
                 isActive={isActive}
@@ -114,7 +115,9 @@ export function ChooseTokenModal(props: ChooseTokenModalProps) {
               >
                 <Flex alignItems="center" justifyContent="space-between" w="100%" gap={'12px'}>
                   <Flex flex={1} minW={0} flexDir="column" gap={'4px'}>
-                    <Text isTruncated>{item.displaySymbol}</Text>
+                    <Text className="bccb-widget-token-list-symbol" isTruncated>
+                      {item.displaySymbol}
+                    </Text>
 
                     {isMobile && !isNative && (
                       <TokenAddress
@@ -135,6 +138,7 @@ export function ChooseTokenModal(props: ChooseTokenModalProps) {
                         >
                           {(!isActive || isNative) && (
                             <Text
+                              className="token-name"
                               isTruncated
                               flexShrink={0}
                               fontSize="12px"
diff --git a/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/DestinationNetworkModal.tsx b/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/DestinationNetworkModal.tsx
index 3fc1f776..dc22a491 100644
--- a/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/DestinationNetworkModal.tsx
+++ b/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/DestinationNetworkModal.tsx
@@ -53,7 +53,9 @@ export function DestinationNetworkModal(props: DestinationNetworkModalProps) {
       <VirtualList className="bccb-widget-to-network-virtual-list" data={result} itemHeight={64}>
         {(item) => (
           <ListItem
-            className="bccb-widget-to-network-list-item"
+            className={
+              'bccb-widget-to-network-list-item' + (toChain?.id === item.id ? '-active' : '')
+            }
             key={item.id}
             iconUrl={item.icon}
             isActive={toChain?.id === item.id}
diff --git a/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/SourceNetworkModal.tsx b/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/SourceNetworkModal.tsx
index 934180bc..9758fc16 100644
--- a/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/SourceNetworkModal.tsx
+++ b/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/SourceNetworkModal.tsx
@@ -54,7 +54,9 @@ export function SourceNetworkModal(props: SourceNetworkModalProps) {
       <VirtualList className="bccb-widget-from-network-virtual-list" data={result} itemHeight={64}>
         {(item) => (
           <ListItem
-            className="bccb-widget-from-network-list-item"
+            className={
+              'bccb-widget-from-network-list-item' + (fromChain?.id === item.id ? '-active' : '')
+            }
             key={item.id}
             iconUrl={item.icon}
             isActive={fromChain?.id === item.id}
diff --git a/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/components/BaseModal.tsx b/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/components/BaseModal.tsx
index 4311eb1f..342f5b5c 100644
--- a/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/components/BaseModal.tsx
+++ b/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/components/BaseModal.tsx
@@ -60,6 +60,7 @@ export function BaseModal(props: BaseModalProps) {
           <Flex boxSize={'24px'}></Flex>
           {title}
           <CloseIcon
+            className={`${className}-close-button`}
             boxSize={'24px'}
             onClick={onClose}
             cursor="pointer"
@@ -72,7 +73,7 @@ export function BaseModal(props: BaseModalProps) {
         <Flex flexDir="column" p="20px 0px 16px" flex={1}>
           <Flex px={'20px'} mb={'24px'}>
             <SearchInput
-              className="bccb-widget-modal-search"
+              className={`${className}-search`}
               onChange={onSearch}
               placeholder={placeholder}
             />
diff --git a/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/components/ListItem.tsx b/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/components/ListItem.tsx
index a9a2bf9e..a96a7adc 100644
--- a/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/components/ListItem.tsx
+++ b/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/components/ListItem.tsx
@@ -31,8 +31,9 @@ export const ListItem = React.forwardRef((props: ListItemProps, ref: any) => {
   const { formatMessage } = useIntl();
 
   return (
-    <Box ref={ref} p="0 20px 8px">
+    <Box className={`bccb-widget-select-list-wrapper`} ref={ref} p="0 20px 8px">
       <Flex
+        className={`bccb-widget-select-list` + isDisabled ? '-disabled' : ''}
         borderRadius={'8px'}
         px={'12px'}
         py="8px"
@@ -65,7 +66,7 @@ export const ListItem = React.forwardRef((props: ListItemProps, ref: any) => {
         </Flex>
         {showTag && isDisabled && (
           <Flex
-            className="bccb-widget-select-list-item-tag"
+            className={`bccb-widget-select-list-item-tag`}
             alignItems="center"
             flexShrink={0}
             fontSize={'12px'}
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/SendInput/MaxLink.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/SendInput/MaxLink.tsx
index 255938f8..8b2efa50 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/SendInput/MaxLink.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/SendInput/MaxLink.tsx
@@ -46,6 +46,7 @@ export const MaxLink: React.FC = () => {
     <Flex className="bccb-widget-transfer-max" alignItems={'center'}>
       {showBalance ? (
         <Box
+          className="max-text"
           onClick={setMaxAmount}
           color={theme.colors[colorMode].text.tertiary}
           textDecoration={'underline'}
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/SendInput/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/SendInput/index.tsx
index 79f82753..53e54eed 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/SendInput/index.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/SendInput/index.tsx
@@ -102,12 +102,18 @@ export const SendInput: React.FC = () => {
   return (
     <Flex className="bccb-widget-transfer-input-container" flexDir={'column'} position={'relative'}>
       <Flex flexDir={'row'} justifyContent={'space-between'}>
-        <Typography color={theme.colors[colorMode].text.placeholder} variant={'label'} size={'md'}>
+        <Typography
+          className="input-header-label"
+          color={theme.colors[colorMode].text.placeholder}
+          variant={'label'}
+          size={'md'}
+        >
           {formatMessage({ id: 'you.send.title' })}
         </Typography>
         <MaxLink />
       </Flex>
       <Flex
+        className="bccb-widget-transfer-input-wrapper"
         flex={1}
         mt={'8px'}
         flexDir={'row'}
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/OtherRouteError.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/OtherRouteError.tsx
index 28c38597..5fe1823b 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/OtherRouteError.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/OtherRouteError.tsx
@@ -25,8 +25,15 @@ export const OtherRouteError = ({ bridgeType }: OtherRouteErrorProps) => {
         },
       }}
     >
-      <InfoCircleIcon display={'inline'} w={'16px'} h={'16px'} />
-      <Box ml={'4px'} display={'inline'} lineHeight={'16px'} fontSize={'14px'} fontWeight={400}>
+      <InfoCircleIcon className="error-icon" display={'inline'} w={'16px'} h={'16px'} />
+      <Box
+        className="error-text"
+        ml={'4px'}
+        display={'inline'}
+        lineHeight={'16px'}
+        fontSize={'14px'}
+        fontWeight={400}
+      >
         {routeError[bridgeType]}
       </Box>
     </Box>
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 fc177be7..e1c7642b 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
@@ -38,14 +38,20 @@ export const TokenInfoTooltip = ({
           <PopoverTrigger>{children}</PopoverTrigger>
           <Portal>
             <PopoverContent
+              className="bccb-widget-route-token-tooltip-content"
               borderRadius={'4px'}
               maxW={'280px'}
               marginLeft={isReceiveArea ? '-36px' : ''}
               marginBottom={isReceiveArea ? '-4px' : ''}
             >
-              <PopoverArrow />
-              <PopoverBody px={'8px'} py={'7px'} onClick={(e) => e.stopPropagation()}>
-                <Box>
+              <PopoverArrow className="tooltip-arrow" />
+              <PopoverBody
+                className="bccb-widget-route-token-tooltip-body"
+                px={'8px'}
+                py={'7px'}
+                onClick={(e) => e.stopPropagation()}
+              >
+                <>
                   <Box color={theme.colors.light.text.primary} fontSize={'12px'} fontWeight={400}>
                     {nativeToken ? 'Native token' : 'Token address:'}
                   </Box>
@@ -72,7 +78,7 @@ export const TokenInfoTooltip = ({
                       )}
                     </Box>
                   )}
-                </Box>
+                </>
               </PopoverBody>
             </PopoverContent>
           </Portal>
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/index.tsx
index ccd75854..d9d684f1 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/index.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/index.tsx
@@ -117,7 +117,7 @@ export function TransferOverview({ routeContentBottom }: { routeContentBottom?:
       w={'100%'}
       overflow={['auto', 'auto', 'auto', 'hidden']}
     >
-      <Flex flexDir={'column'} gap={'12px'}>
+      <Flex className="bccb-widget-route-container-inner" flexDir={'column'} gap={'12px'}>
         <Flex
           className="bccb-widget-route-header"
           display={{ base: 'none', lg: 'flex' }}
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/index.tsx
index aca0cf0a..b6c06292 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/index.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/index.tsx
@@ -43,7 +43,7 @@ export function TransferWidget() {
         justifyContent={'center'}
       >
         <Flex
-          className="bccb-widget-transfer-widget-title"
+          className="bccb-widget-transfer-widget-wrapper"
           flexDir="column"
           background={['none', 'none', theme.colors[colorMode].layer[2].default]}
           color={theme.colors[colorMode].text.primary}
@@ -58,6 +58,7 @@ export function TransferWidget() {
         >
           {appearance.bridgeTitle && (
             <Typography
+              className="bccb-widget-transfer-widget-title"
               variant={'heading'}
               size={{ base: 'xs', md: 'sm' }}
               as="h1"
diff --git a/packages/canonical-bridge-widget/src/modules/wallet/components/Dropdown/DropdownButton.tsx b/packages/canonical-bridge-widget/src/modules/wallet/components/Dropdown/DropdownButton.tsx
index 2600d205..c0be2c6d 100644
--- a/packages/canonical-bridge-widget/src/modules/wallet/components/Dropdown/DropdownButton.tsx
+++ b/packages/canonical-bridge-widget/src/modules/wallet/components/Dropdown/DropdownButton.tsx
@@ -28,7 +28,6 @@ export function DropdownButton(props: DropdownButtonProps) {
 
   return (
     <MenuButton
-      className="bccb-widget-header-menu-button"
       h={'40px'}
       minW={'40px'}
       pl="12px"
diff --git a/packages/canonical-bridge-widget/src/modules/wallet/components/Dropdown/DropdownItem.tsx b/packages/canonical-bridge-widget/src/modules/wallet/components/Dropdown/DropdownItem.tsx
index 40c12131..40d5c122 100644
--- a/packages/canonical-bridge-widget/src/modules/wallet/components/Dropdown/DropdownItem.tsx
+++ b/packages/canonical-bridge-widget/src/modules/wallet/components/Dropdown/DropdownItem.tsx
@@ -3,14 +3,14 @@ import { MenuItemProps, MenuItem, useTheme, useColorMode } from '@bnb-chain/spac
 interface DropdownItemProps extends MenuItemProps {}
 
 export function DropdownItem(props: DropdownItemProps) {
-  const { ...restProps } = props;
+  const { className, ...restProps } = props;
 
   const theme = useTheme();
   const { colorMode } = useColorMode();
 
   return (
     <MenuItem
-      className="bccb-widget-header-menu-item"
+      className={className}
       px="16px"
       h="40px"
       alignItems="center"
diff --git a/packages/canonical-bridge-widget/src/modules/wallet/components/NetworkStatus/index.tsx b/packages/canonical-bridge-widget/src/modules/wallet/components/NetworkStatus/index.tsx
index 45b4c9bf..d85bf3ec 100644
--- a/packages/canonical-bridge-widget/src/modules/wallet/components/NetworkStatus/index.tsx
+++ b/packages/canonical-bridge-widget/src/modules/wallet/components/NetworkStatus/index.tsx
@@ -44,6 +44,7 @@ export function NetworkStatus() {
     <DropdownList className="bccb-widget-header-network-status" maxW={'240px'}>
       <Flex flexDir={'column'} alignItems={'center'} padding={'16px'} gap={'8px'}>
         <Typography
+          className="bccb-widget-header-network-status-title"
           color={theme.colors[colorMode].text.secondary}
           variant={'label'}
           size={'md'}
@@ -57,6 +58,7 @@ export function NetworkStatus() {
         <TransferToIcon w={'24px'} h={'24px'} transform={'rotate(90deg)'} />
 
         <Flex
+          className="bccb-widget-header-network-status-network"
           maxW={'100%'}
           borderRadius={'24px'}
           padding={'4px'}
@@ -101,7 +103,7 @@ export function NetworkStatus() {
           return (
             <>
               <DropdownButton
-                className="bccb-widget-header-dropdown-button"
+                className="bccb-widget-header-dropdown-button-not-connect"
                 bgColor={theme.colors[colorMode].layer[3].default}
                 isActive={isOpen}
                 isWarning={isOpen}
@@ -147,6 +149,7 @@ export function NetworkStatus() {
         return (
           <>
             <DropdownButton
+              className="bccb-widget-header-dropdown-button"
               bgColor={theme.colors[colorMode].layer[3].default}
               isActive={isOpen}
               isWarning={isOpen && isWrongNetwork}
@@ -159,7 +162,13 @@ export function NetworkStatus() {
               ) : (
                 <IconImage src={iconUrl} boxSize="24px" />
               )}
-              <Flex flexDir="column" gap="0" alignItems="flex-start" textAlign="left">
+              <Flex
+                className="chain-name"
+                flexDir="column"
+                gap="0"
+                alignItems="flex-start"
+                textAlign="left"
+              >
                 <Text fontSize="14px" noOfLines={1}>
                   {chain.name}
                 </Text>
@@ -175,6 +184,7 @@ export function NetworkStatus() {
 
                   return (
                     <DropdownItem
+                      className={`bccb-widget-header-menu-item` + (isSelected ? '-selected' : '')}
                       key={item.id}
                       color={
                         isSelected
diff --git a/packages/canonical-bridge-widget/src/modules/wallet/components/ProfileMenu/index.tsx b/packages/canonical-bridge-widget/src/modules/wallet/components/ProfileMenu/index.tsx
index eb2b06a3..3316bb03 100644
--- a/packages/canonical-bridge-widget/src/modules/wallet/components/ProfileMenu/index.tsx
+++ b/packages/canonical-bridge-widget/src/modules/wallet/components/ProfileMenu/index.tsx
@@ -56,7 +56,13 @@ export const ProfileMenu = () => {
               </Center>
             )}
             <Box display={{ base: 'none', md: 'block' }}>
-              <Typography as={'span'} variant={'label'} size={'md'} fontWeight={500}>
+              <Typography
+                className="profile-address"
+                as={'span'}
+                variant={'label'}
+                size={'md'}
+                fontWeight={500}
+              >
                 {formatAppAddress({ address })}
               </Typography>
             </Box>
@@ -81,7 +87,10 @@ export const ProfileMenu = () => {
                     <CopyAddress boxSize={'20px'} content={address} />
                   </Flex>
                   {!!balance?.formatted && (
-                    <Flex color={theme.colors[colorMode].text.secondary}>
+                    <Flex
+                      className="bccb-widget-header-profile-balance"
+                      color={theme.colors[colorMode].text.secondary}
+                    >
                       {formatNumber(Number(balance?.formatted), 4)} {balance?.symbol}
                     </Flex>
                   )}

From 785e6739c6e0de558fae21b7b5865b41929bc246 Mon Sep 17 00:00:00 2001
From: chris <leosameric@gmail.com>
Date: Tue, 12 Nov 2024 17:37:22 +1000
Subject: [PATCH 11/29] test: Test code

---
 .../core/components/ThemeProvider/index.tsx   | 320 ++++++++++++++++++
 1 file changed, 320 insertions(+)

diff --git a/apps/canonical-bridge-ui/core/components/ThemeProvider/index.tsx b/apps/canonical-bridge-ui/core/components/ThemeProvider/index.tsx
index 5e900bfb..36882505 100644
--- a/apps/canonical-bridge-ui/core/components/ThemeProvider/index.tsx
+++ b/apps/canonical-bridge-ui/core/components/ThemeProvider/index.tsx
@@ -24,6 +24,326 @@ export const ThemeProvider = ({ children }: ThemeProviderProps) => {
       global: ({ colorMode }: { colorMode: ColorMode }) => ({
         body: {
           bg: theme.colors[colorMode].background[3],
+          '.bccb-widget-transfer-widget-wrapper': {
+            bg: '#123456',
+            borderRadius: '10px',
+            padding: '100px 20px',
+          },
+          '.bccb-widget-route-wrapper': {
+            background: '#8C8F9B',
+            padding: '20px',
+            borderWidth: '5px',
+            borderRadius: '20px',
+            color: '#fff',
+          },
+          '.bccb-widget-transfer-widget-title': {
+            fontSize: '20px',
+            fontWeight: 700,
+            color: 'red',
+          },
+          '.bccb-widget-route-container-inner': {
+            borderColor: 'orange',
+          },
+          '.bccb-widget-route-estimated-time, .bccb-widget-route-fee-info, .bccb-widget-allowed-send-amount':
+            {
+              color: 'orange',
+              fontWeight: 700,
+              fontSize: '20px',
+            },
+          '.bccb-widget-route-info-tooltip-fee, .bccb-widget-route-token-tooltip-content, .bccb-widget-route-token-tooltip-content .tooltip-arrow, .bccb-widget-route-token-tooltip-body':
+            {
+              background: 'pink',
+              fontWeight: 700,
+              fontSize: '20px',
+              borderRadius: '20px',
+            },
+          '.bccb-widget-route-token-tooltip-body > div, .bccb-widget-route-info-tooltip-fee > div, .bccb-widget-route-token-tooltip > div':
+            {
+              fontWeight: 700,
+              fontSize: '20px',
+            },
+          '.bccb-widget-info-tooltip': {
+            background: 'orange',
+            borderRadius: '20px',
+            shadowBox: '0 0 10px 0 rgba(0, 0, 0, 0.1)',
+          },
+          '.bccb-widget-info-tooltip .chakra-tooltip__arrow': { background: 'orange !important' },
+          '.bccb-widget-route-name-tag-bestTime, .bccb-widget-route-name-tag-bestReturn': {
+            color: 'grey',
+            fontSize: '20px',
+          },
+          '.bccb-widget-route-token-amount': {
+            color: '#123456',
+          },
+          '.bccb-widget-received-info-container p': {
+            color: 'yellow',
+            fontSize: '20px',
+          },
+          '.bccb-widget-token-list-item': {
+            bg: 'brown',
+            border: '3px solid red',
+            padding: '30px',
+            borderRadius: '20px',
+            '&:hover': {
+              bg: 'green',
+            },
+            '> img, .default-icon': {
+              width: '50px',
+              height: '50px',
+              transform: 'rotate(125deg)',
+            },
+          },
+          '.bccb-widget-token-list-item-disabled': {
+            bg: '#fff1af',
+            opacify: 0.1,
+            border: '3px solid purple',
+            padding: '30px',
+            borderRadius: '20px',
+            '&:hover': {
+              bg: 'green',
+            },
+          },
+          '.bccb-widget-token-list-address > p': {
+            color: 'purple',
+            fontSize: '20px',
+            fontWeight: 700,
+          },
+          '.bccb-widget-token-list-token-balance': {
+            fontSize: '20px',
+            color: '#83a6ac',
+          },
+          '.bccb-widget-token-list-symbol': {
+            fontSize: '20px',
+            color: '#83a6ac',
+          },
+          '.bccb-widget-select-list-item-tag': {
+            fontSize: '20px',
+            fontWeight: 700,
+            color: '#83a6ac',
+          },
+          '.bccb-widget-from-network-modal-content': {
+            background: 'pink',
+            borderRadius: '20px',
+            padding: '20px',
+            width: '700px',
+          },
+          '.bccb-widget-token-modal-search > input, .bccb-widget-token-modal-header-search > input, .bccb-widget-from-network-modal-search > input':
+            {
+              fontSize: '35px',
+              color: 'red',
+              borderColor: '#83a6ac',
+            },
+          '.bccb-widget-token-address-link .token-name': {
+            color: 'black',
+            bg: 'white',
+          },
+          '.bccb-widget-select-list-wrapper': {
+            paddingBottom: '30px',
+          },
+          '.bccb-widget-transfer-max .max-text': {
+            fontSize: '20px',
+            color: 'red',
+          },
+          '.bccb-widget-modal-no-result-found, .bccb-widget-modal-no-result-found-text': {
+            fontSize: '25px',
+            fontWeight: 700,
+            color: 'green',
+            '& svg': {
+              width: '70px',
+              height: '70px',
+            },
+          },
+          '.bccb-widget-token-modal-search svg': {
+            height: '50px',
+            width: '50px',
+          },
+          '.bccb-widget-token-modal-header': {
+            fontSize: '20px',
+            fontWeight: 700,
+            color: '#83a6ac',
+          },
+          '.bccb-widget-transfer-input-container': {
+            '& > div': {
+              marginBottom: '20px',
+            },
+            '& .input-header-label': {
+              color: '#83a6ac',
+              fontSize: '20px',
+              fontWeight: 700,
+            },
+            '.bccb-widget-transfer-input-wrapper': {
+              '&:hover': {
+                borderColor: 'yellow',
+                borderWidth: '5px',
+                borderRadius: '4px',
+              },
+            },
+            '& input': {
+              fontSize: '15px',
+              fontWeight: 400,
+              color: 'pink',
+              borderColor: '#83a6ac',
+
+              '&:hover': {
+                borderColor: 'red',
+              },
+            },
+          },
+          '.bccb-widget-token-select-button': {
+            borderRadius: '2px',
+            height: '50px',
+            bg: 'pink',
+            color: '#83a6ac',
+            fontSize: '20px',
+            fontWeight: 700,
+          },
+          '.bccb-widget-route-error': {
+            '& .error-text': {
+              color: 'green',
+              fontSize: '20px',
+              fontWeight: 700,
+            },
+            '& svg': {
+              width: '20px',
+              height: '20px',
+            },
+          },
+          '.bccb-widget-route-name-text': {
+            color: 'white',
+            fontSize: '24px',
+            fontWeight: 700,
+          },
+          '.bccb-widget-network-button': {
+            bg: '#83a6ac',
+            color: 'white',
+            borderRadius: '20px',
+            padding: '10px 20px',
+            borderWidth: '5px',
+            '& .bccb-widget-network-name > p': {
+              fontSize: '18px',
+              fontWeight: 700,
+            },
+          },
+          '.bccb-widget-transfer-input-error': {
+            color: 'pink',
+            fontSize: '20px',
+            fontWeight: 700,
+          },
+          '.bccb-widget-from-network-list-item, .bccb-widget-to-network-list-item ': {
+            p: '30px',
+            bg: 'red',
+            borderRadius: '20px',
+            fontWeight: 700,
+            color: 'black',
+            fontSize: '20px',
+            '&:hover': {
+              bg: 'orange',
+            },
+          },
+          '.bccb-widget-from-network-list-item-active, .bccb-widget-to-network-list-item-active': {
+            borderColor: 'green',
+            borderWidth: '5px',
+            bg: '#83a6ac',
+          },
+          '.bccb-widget-transfer-button button': {
+            fontSize: '20px',
+            fontWeight: 700,
+            borderRadius: '30px',
+            borderWidth: '1px',
+            borderColor: 'red',
+          },
+          '.bccb-widget-network-title > p': {
+            color: 'pink',
+          },
+          '.bccb-widget-wallet-connect-button, .bccb-widget-switch-network-button, .bccb-widget-transfer-button':
+            {
+              fontWeight: 700,
+              fontSize: '27px',
+              borderRadius: '2px',
+              padding: '10px 20px',
+            },
+          '.bccb-widget-transaction-confirming-modal, .bccb-widget-transaction-submitted-modal, .bccb-widget-transaction-failed-modal, .bccb-widget-transaction-confirming-modal, .bccb-widget-transaction-approve-modal':
+            {
+              maxWidth: '700px',
+              borderRadius: '2px',
+              '& .bccb-widget-modal-body ': {
+                bg: 'pink',
+                '& svg': {
+                  height: '20px',
+                  width: '20px',
+                },
+              },
+              '.bccb-widget-modal-main-button': {
+                padding: '30px',
+                fontWeight: 700,
+                fontSize: '25px',
+              },
+            },
+          '.bccb-widget-route-header': {
+            fontWeight: 700,
+            fontSize: '20px',
+          },
+          '.bccb-widget-refreshing-button svg': {
+            width: '20px',
+            height: '20px',
+          },
+          '.bccb-widget-header-menu-list': {
+            padding: '20px',
+            '& .bccb-widget-header-menu-item': {
+              fontSize: '20px',
+              fontWeight: 700,
+              color: 'pink',
+              '&:hover': {
+                bg: 'orange',
+              },
+            },
+            '& .bccb-widget-header-menu-item-selected': {
+              bg: 'orange',
+            },
+          },
+          '.bccb-widget-header-menu-button, .bccb-widget-header-network-status-network, .bccb-widget-header-dropdown-button, .bccb-widget-header-dropdown-button-not-connect, .bccb-widget-header-profile-button':
+            {
+              color: 'pink',
+              borderRadius: '2px',
+              outlineColor: 'red',
+              '& button, & .profile-address': {
+                fontWeight: 700,
+                fontSize: '30px',
+              },
+              '& p': {
+                color: 'red',
+              },
+            },
+          '.bccb-widget-header-network-status': {
+            '& .bccb-widget-switch-network-button': {
+              fontSize: '10px',
+              borderRadius: '5px',
+              bg: 'white',
+            },
+          },
+          '.bccb-widget-header-network-status-title': {
+            fontSize: '20px',
+            fontWeight: 700,
+          },
+          '.bccb-widget-header-dropdown-button': {
+            fontWeight: 700,
+            fontSize: '30px',
+            color: 'green',
+            ' & .chain-name p': {
+              fontSize: '20px',
+            },
+          },
+          '.bccb-widget-header-profile-list': {
+            color: 'red',
+          },
+          '.bccb-widget-header-profile-balance': {
+            color: '#d7877d',
+          },
+          '.bccb-widget-header-profile-disconnect-link > div': {
+            bg: 'orange',
+            fontSize: '20px',
+            fontWeight: 700,
+          },
         },
       }),
     },

From 6ab36a61cadd83766c83f39a3112a0dee7f96c5f Mon Sep 17 00:00:00 2001
From: aidencao <aiden.c@nodereal.io>
Date: Tue, 12 Nov 2024 16:06:00 +0800
Subject: [PATCH 12/29] feat(canonical-bridge-widget): UI adjustment

---
 .release/.changeset/mean-falcons-yell.md      |  5 ++++
 .release/.changeset/pre.json                  |  1 +
 packages/canonical-bridge-widget/CHANGELOG.md |  6 ++++
 packages/canonical-bridge-widget/package.json |  2 +-
 .../SelectModal/ChooseTokenModal.tsx          | 30 ++++++++++---------
 .../SelectModal/DestinationNetworkModal.tsx   |  2 +-
 .../SelectModal/SourceNetworkModal.tsx        |  2 +-
 .../SelectModal/components/BaseModal.tsx      |  2 +-
 .../SelectModal/components/ListItem.tsx       | 11 +++----
 .../components/NetWorkSection/index.tsx       |  2 +-
 .../components/ReceiveInfo/ReceiveLoading.tsx |  4 +--
 .../transfer/components/ReceiveInfo/index.tsx | 17 ++++++++---
 .../SendInput/InputValidationMessage.tsx      |  6 ++--
 .../RouteInfo/RouteSkeleton.tsx               |  2 +-
 .../RouteInfo/RouteWrapper.tsx                |  2 +-
 .../components/TransferOverview/index.tsx     |  4 +--
 16 files changed, 62 insertions(+), 36 deletions(-)
 create mode 100644 .release/.changeset/mean-falcons-yell.md

diff --git a/.release/.changeset/mean-falcons-yell.md b/.release/.changeset/mean-falcons-yell.md
new file mode 100644
index 00000000..8d7def6c
--- /dev/null
+++ b/.release/.changeset/mean-falcons-yell.md
@@ -0,0 +1,5 @@
+---
+"@bnb-chain/canonical-bridge-widget": patch
+---
+
+UI adjustment
diff --git a/.release/.changeset/pre.json b/.release/.changeset/pre.json
index 5ad851e4..f32ad8d3 100644
--- a/.release/.changeset/pre.json
+++ b/.release/.changeset/pre.json
@@ -6,6 +6,7 @@
     "@bnb-chain/canonical-bridge-widget": "0.4.0"
   },
   "changesets": [
+    "mean-falcons-yell",
     "tasty-gifts-brush"
   ]
 }
diff --git a/packages/canonical-bridge-widget/CHANGELOG.md b/packages/canonical-bridge-widget/CHANGELOG.md
index b463a1a1..3c6631b2 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.0-alpha.1
+
+### Patch Changes
+
+- UI adjustment
+
 ## 0.5.0-alpha.0
 
 ### Minor Changes
diff --git a/packages/canonical-bridge-widget/package.json b/packages/canonical-bridge-widget/package.json
index 9e9ece2d..8db8d6cd 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.0-alpha.0",
+  "version": "0.5.0-alpha.1",
   "description": "canonical bridge widget",
   "author": "bnb-chain",
   "private": false,
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 1f7a9dfd..aec1dff9 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
@@ -64,20 +64,22 @@ export function ChooseTokenModal(props: ChooseTokenModalProps) {
       placeholder={formatMessage({ id: 'select-modal.token.placeholder' })}
       isNoResult={isNoResult}
     >
-      <Flex
-        fontSize={'14px'}
-        fontWeight={400}
-        lineHeight="16px"
-        color={theme.colors[colorMode].text.secondary}
-        pb={'12px'}
-        px={'20px'}
-        justifyContent="space-between"
-      >
-        <Text>{formatMessage({ id: 'select-modal.token.column.name' })}</Text>
-        {showBalance && <Text>{formatMessage({ id: 'select-modal.token.column.balance' })}</Text>}
-      </Flex>
+      {isConnected && (
+        <Flex
+          fontSize={'14px'}
+          fontWeight={400}
+          lineHeight="16px"
+          color={theme.colors[colorMode].text.secondary}
+          pb={'12px'}
+          px={'20px'}
+          justifyContent="space-between"
+        >
+          <Text>{formatMessage({ id: 'select-modal.token.column.name' })}</Text>
+          {showBalance && <Text>{formatMessage({ id: 'select-modal.token.column.balance' })}</Text>}
+        </Flex>
+      )}
       <Flex flexDir="column" flex={1}>
-        <VirtualList data={data} itemHeight={64}>
+        <VirtualList data={data} itemHeight={52}>
           {(item) => {
             const isDisabled = !isChainOrTokenCompatible(item);
             const isActive =
@@ -111,7 +113,7 @@ export function ChooseTokenModal(props: ChooseTokenModalProps) {
                 }}
               >
                 <Flex alignItems="center" justifyContent="space-between" w="100%" gap={'12px'}>
-                  <Flex flex={1} minW={0} flexDir="column" gap={'4px'}>
+                  <Flex flex={1} minW={0} flexDir="column" gap={'0'}>
                     <Text isTruncated>{item.displaySymbol}</Text>
 
                     {isMobile && !isNative && (
diff --git a/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/DestinationNetworkModal.tsx b/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/DestinationNetworkModal.tsx
index abb2afa5..783f6b10 100644
--- a/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/DestinationNetworkModal.tsx
+++ b/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/DestinationNetworkModal.tsx
@@ -49,7 +49,7 @@ export function DestinationNetworkModal(props: DestinationNetworkModalProps) {
       placeholder={formatMessage({ id: 'select-modal.destination.placeholder' })}
       isNoResult={isNoResult}
     >
-      <VirtualList data={result} itemHeight={64}>
+      <VirtualList data={result} itemHeight={52}>
         {(item) => (
           <ListItem
             key={item.id}
diff --git a/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/SourceNetworkModal.tsx b/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/SourceNetworkModal.tsx
index 401f3ed8..4be8ab8e 100644
--- a/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/SourceNetworkModal.tsx
+++ b/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/SourceNetworkModal.tsx
@@ -50,7 +50,7 @@ export function SourceNetworkModal(props: SourceNetworkModalProps) {
       placeholder={formatMessage({ id: 'select-modal.source.placeholder' })}
       isNoResult={isNoResult}
     >
-      <VirtualList data={result} itemHeight={64}>
+      <VirtualList data={result} itemHeight={52}>
         {(item) => (
           <ListItem
             key={item.id}
diff --git a/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/components/BaseModal.tsx b/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/components/BaseModal.tsx
index f6e39f28..8f6f6b7e 100644
--- a/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/components/BaseModal.tsx
+++ b/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/components/BaseModal.tsx
@@ -67,7 +67,7 @@ export function BaseModal(props: BaseModalProps) {
           />
         </Flex>
         <Flex flexDir="column" p="20px 0px 16px" flex={1}>
-          <Flex px={'20px'} mb={'24px'}>
+          <Flex px={'20px'} mb={'20px'}>
             <SearchInput onChange={onSearch} placeholder={placeholder} />
           </Flex>
           <Flex flexDir="column" flex={1} overflowY="auto">
diff --git a/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/components/ListItem.tsx b/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/components/ListItem.tsx
index 3c4d30a7..3c9f7a31 100644
--- a/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/components/ListItem.tsx
+++ b/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/components/ListItem.tsx
@@ -31,12 +31,12 @@ export const ListItem = React.forwardRef((props: ListItemProps, ref: any) => {
   const { formatMessage } = useIntl();
 
   return (
-    <Box ref={ref} p="0 20px 8px">
+    <Box ref={ref} p="0 20px 4px">
       <Flex
         borderRadius={'8px'}
-        px={'12px'}
-        py="8px"
-        h="56px"
+        px={'11px'}
+        py="7px"
+        h="48px"
         alignItems="center"
         border="1px solid"
         borderColor={isActive ? theme.colors[colorMode].border.brand : 'transparent'}
@@ -47,7 +47,7 @@ export const ListItem = React.forwardRef((props: ListItemProps, ref: any) => {
           ..._hover,
           bg: !isActive && !isDisabled ? theme.colors[colorMode].layer['3'].hover : undefined,
         }}
-        gap={'12px'}
+        gap={'8px'}
         fontSize="14px"
         lineHeight="16px"
         fontWeight={500}
@@ -55,6 +55,7 @@ export const ListItem = React.forwardRef((props: ListItemProps, ref: any) => {
         {...restProps}
       >
         <IconImage
+          boxSize="24px"
           src={iconUrl}
           filter={isDisabled ? 'grayscale(100%)' : undefined}
           opacity={isDisabled ? 0.5 : 1}
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/NetWorkSection/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/NetWorkSection/index.tsx
index b8ee4fd2..7471759b 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/NetWorkSection/index.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/NetWorkSection/index.tsx
@@ -10,7 +10,7 @@ export const NetWorkSection = () => {
   const theme = useTheme();
 
   return (
-    <Flex flexDir={'column'} gap={'8px'} mb={{ base: 0, md: theme.sizes['2'] }}>
+    <Flex flexDir={'column'} gap={'8px'}>
       <Flex flexDir={'row'} display={{ base: 'none', md: 'flex' }}>
         <Flex alignItems="center" justifyContent={'space-between'} flex={1}>
           <Typography variant="label" size={'md'} color={theme.colors[colorMode].text.placeholder}>
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/ReceiveInfo/ReceiveLoading.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/ReceiveInfo/ReceiveLoading.tsx
index edd42866..32e755b5 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/ReceiveInfo/ReceiveLoading.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/ReceiveInfo/ReceiveLoading.tsx
@@ -8,8 +8,8 @@ export const ReceiveLoading = () => {
           <Skeleton height={'22px'} width={'160px'} />
           <Skeleton height={'22px'} width={'80px'} />
         </Flex>
-        <Skeleton height={'15px'} maxW={'333px'} width={'100%'} />
-        <Skeleton height={'15px'} maxW={'371px'} width={'100%'} />
+        <Skeleton height={'13px'} maxW={'333px'} width={'100%'} />
+        <Skeleton height={'13px'} maxW={'371px'} width={'100%'} />
       </Flex>
       <Flex
         display={{ base: 'flex', lg: 'none' }}
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
index f6c4b025..1eb9fb49 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/ReceiveInfo/index.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/ReceiveInfo/index.tsx
@@ -164,11 +164,11 @@ export const ReceiveInfo = ({ onOpen }: ReceiveInfoProps) => {
             ) : null}
           </Flex>
           <Flex
-            minH={'106px'}
+            minH={'102px'}
             borderRadius={'8px'}
             p={'12px'}
             flexDir={'column'}
-            gap={'12px'}
+            gap={'8px'}
             background={theme.colors[colorMode].receive.background}
             position={'relative'}
           >
@@ -181,8 +181,17 @@ export const ReceiveInfo = ({ onOpen }: ReceiveInfoProps) => {
                     </Box>
                   }
                   {
-                    <Box display={{ base: 'block', lg: 'none' }} mb={'-12px'}>
-                      <RefreshingButton position={'absolute'} right={'16px'} top={'16px'} />
+                    <Box
+                      display={{ base: 'block', lg: 'none' }}
+                      mb={'-12px'}
+                      sx={{
+                        svg: {
+                          w: '29px',
+                          h: '29px',
+                        },
+                      }}
+                    >
+                      <RefreshingButton position={'absolute'} right={'12px'} top={'10px'} />
                     </Box>
                   }
                   {bridgeType && (
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/SendInput/InputValidationMessage.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/SendInput/InputValidationMessage.tsx
index 065c1289..d8b5c4d2 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/SendInput/InputValidationMessage.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/SendInput/InputValidationMessage.tsx
@@ -62,7 +62,9 @@ export const InputValidationMessage = () => {
     selectedToken?.displaySymbol,
   ]);
 
-  return error || balanceInputError ? (
+  const errorMsg = balanceInputError ?? error?.text;
+
+  return errorMsg ? (
     <Box
       color={theme.colors[colorMode].text.danger}
       fontSize={'14px'}
@@ -70,7 +72,7 @@ export const InputValidationMessage = () => {
       lineHeight={'16px'}
       mt={'8px'}
     >
-      {balanceInputError ?? error?.text}
+      {errorMsg}
     </Box>
   ) : null;
 };
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/RouteSkeleton.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/RouteSkeleton.tsx
index 1de3d44d..82197c5c 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/RouteSkeleton.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/RouteSkeleton.tsx
@@ -6,7 +6,7 @@ export const RouteSkeleton = () => {
 
   return (
     <Flex
-      p={'16px'}
+      p={'12px'}
       borderRadius={'8px'}
       flexDir={'column'}
       gap={'8px'}
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/RouteWrapper.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/RouteWrapper.tsx
index 8f1bdcc0..1ee93d68 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/RouteWrapper.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/RouteWrapper.tsx
@@ -30,7 +30,7 @@ export const RouteWrapper = ({
       }
       background={isSelected ? 'rgba(255, 233, 0, 0.06);' : 'none'}
       borderRadius={'8px'}
-      padding={'16px'}
+      padding={'12px'}
       position={'relative'}
       cursor={isError ? 'default' : 'pointer'}
       _hover={{
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/index.tsx
index 0254bf20..02c0bcb5 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/index.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/index.tsx
@@ -173,11 +173,11 @@ export function TransferOverview({ routeContentBottom }: { routeContentBottom?:
       transition={'width 0.15s'}
     >
       {cBridgeSupport && <CBridgeSendMaxMin />}
-      <Flex flexDir={'column'} gap={'12px'} ml={{ base: 0, lg: '24px' }} w={'100%'}>
+      <Flex flexDir={'column'} gap={'8px'} ml={{ base: 0, lg: '24px' }} w={'100%'}>
         {!routeContentBottom ? (
           content
         ) : (
-          <Box mb={showRoute ? 0 : '-12px'} borderRadius={'24px'} overflow={'hidden'}>
+          <Box mb={showRoute ? 0 : '-8px'} borderRadius={'24px'} overflow={'hidden'}>
             <Collapse in={showRoute} animateOpacity>
               {content}
             </Collapse>

From e31ab8f5c778a419e6740b7396ba401f01484c6b Mon Sep 17 00:00:00 2001
From: aidencao <aiden.c@nodereal.io>
Date: Tue, 12 Nov 2024 16:19:21 +0800
Subject: [PATCH 13/29] feat(canonical-bridge-widget): UI adjustment

---
 .release/.changeset/honest-jeans-greet.md     | 5 +++++
 .release/.changeset/pre.json                  | 1 +
 packages/canonical-bridge-widget/CHANGELOG.md | 6 ++++++
 packages/canonical-bridge-widget/package.json | 2 +-
 4 files changed, 13 insertions(+), 1 deletion(-)
 create mode 100644 .release/.changeset/honest-jeans-greet.md

diff --git a/.release/.changeset/honest-jeans-greet.md b/.release/.changeset/honest-jeans-greet.md
new file mode 100644
index 00000000..8d7def6c
--- /dev/null
+++ b/.release/.changeset/honest-jeans-greet.md
@@ -0,0 +1,5 @@
+---
+"@bnb-chain/canonical-bridge-widget": patch
+---
+
+UI adjustment
diff --git a/.release/.changeset/pre.json b/.release/.changeset/pre.json
index f32ad8d3..f97cf9b0 100644
--- a/.release/.changeset/pre.json
+++ b/.release/.changeset/pre.json
@@ -6,6 +6,7 @@
     "@bnb-chain/canonical-bridge-widget": "0.4.0"
   },
   "changesets": [
+    "honest-jeans-greet",
     "mean-falcons-yell",
     "tasty-gifts-brush"
   ]
diff --git a/packages/canonical-bridge-widget/CHANGELOG.md b/packages/canonical-bridge-widget/CHANGELOG.md
index 3c6631b2..1c735917 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.0-alpha.2
+
+### Patch Changes
+
+- UI adjustment
+
 ## 0.5.0-alpha.1
 
 ### Patch Changes
diff --git a/packages/canonical-bridge-widget/package.json b/packages/canonical-bridge-widget/package.json
index 8db8d6cd..125d73d7 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.0-alpha.1",
+  "version": "0.5.0-alpha.2",
   "description": "canonical bridge widget",
   "author": "bnb-chain",
   "private": false,

From 58ccf67f8ed332d39dac8b06fee5c64427ac5261 Mon Sep 17 00:00:00 2001
From: chris <leosameric@gmail.com>
Date: Wed, 13 Nov 2024 11:32:53 +1000
Subject: [PATCH 14/29] fix: Fix token list class name

---
 .../core/components/ThemeProvider/index.tsx                | 6 ++++++
 packages/canonical-bridge-widget/docs/Custom Themes.md     | 3 +++
 .../src/core/components/StateModal/index.tsx               | 1 +
 .../aggregator/components/SelectModal/ChooseTokenModal.tsx | 2 +-
 .../components/SelectModal/components/ListItem.tsx         | 7 ++++---
 .../src/modules/transfer/components/FromSection/index.tsx  | 2 +-
 .../src/modules/transfer/components/ToSection/index.tsx    | 2 +-
 .../src/modules/wallet/components/ConnectButton/index.tsx  | 3 ++-
 8 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/apps/canonical-bridge-ui/core/components/ThemeProvider/index.tsx b/apps/canonical-bridge-ui/core/components/ThemeProvider/index.tsx
index 36882505..1b622616 100644
--- a/apps/canonical-bridge-ui/core/components/ThemeProvider/index.tsx
+++ b/apps/canonical-bridge-ui/core/components/ThemeProvider/index.tsx
@@ -133,6 +133,12 @@ export const ThemeProvider = ({ children }: ThemeProviderProps) => {
               color: 'red',
               borderColor: '#83a6ac',
             },
+          '.bccb-widget-from-network-modal-search, .bccb-widget-token-modal-header-search': {
+            '& svg': {
+              width: '30px',
+              height: '30px',
+            },
+          },
           '.bccb-widget-token-address-link .token-name': {
             color: 'black',
             bg: 'white',
diff --git a/packages/canonical-bridge-widget/docs/Custom Themes.md b/packages/canonical-bridge-widget/docs/Custom Themes.md
index 4199a76a..e0e65840 100644
--- a/packages/canonical-bridge-widget/docs/Custom Themes.md	
+++ b/packages/canonical-bridge-widget/docs/Custom Themes.md	
@@ -71,8 +71,10 @@ export const ThemeProvider = ({ children }: ThemeProviderProps) => {
 - bccb-widget-network-title
 - bccb-widget-network-row
 - bccb-widget-network-from
+- bccb-widget-network-from-title
 - bccb-widget-network-button
 - bccb-widget-network-to
+- bccb-widget-network-to-title
 - bccb-widget-network-name
 
 3. Bridge Route Section
@@ -199,6 +201,7 @@ export const ThemeProvider = ({ children }: ThemeProviderProps) => {
 
 - bccb-widget-modal-close-button
 - bccb-widget-modal-main-button
+- bccb-widget-modal-secondary-button
 - bccb-widget-modal-second-button
 - bccb-widget-modal-body
 - bccb-widget-modal-body-icon
diff --git a/packages/canonical-bridge-widget/src/core/components/StateModal/index.tsx b/packages/canonical-bridge-widget/src/core/components/StateModal/index.tsx
index e083b1bb..7fe16fd3 100644
--- a/packages/canonical-bridge-widget/src/core/components/StateModal/index.tsx
+++ b/packages/canonical-bridge-widget/src/core/components/StateModal/index.tsx
@@ -152,6 +152,7 @@ export function StateModal(props: StateModalProps) {
               closeButton
             ) : (
               <Button
+                className="bccb-widget-modal-second-button"
                 size="lg"
                 w={'100%'}
                 fontSize={'16px'}
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 6aad3a0c..be731198 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
@@ -57,7 +57,7 @@ export function ChooseTokenModal(props: ChooseTokenModalProps) {
 
   return (
     <BaseModal
-      className="bccb-widget-token-modal-header"
+      className="bccb-widget-token-modal"
       isOpen={isOpen}
       onClose={onClose}
       title={formatMessage({ id: 'select-modal.token.title' })}
diff --git a/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/components/ListItem.tsx b/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/components/ListItem.tsx
index a96a7adc..ebe40451 100644
--- a/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/components/ListItem.tsx
+++ b/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/components/ListItem.tsx
@@ -23,6 +23,7 @@ export const ListItem = React.forwardRef((props: ListItemProps, ref: any) => {
     incompatibleTooltip,
 
     _hover,
+    className,
     ...restProps
   } = props;
 
@@ -31,9 +32,9 @@ export const ListItem = React.forwardRef((props: ListItemProps, ref: any) => {
   const { formatMessage } = useIntl();
 
   return (
-    <Box className={`bccb-widget-select-list-wrapper`} ref={ref} p="0 20px 8px">
+    <Box className={`${className}-wrapper`} ref={ref} p="0 20px 8px">
       <Flex
-        className={`bccb-widget-select-list` + isDisabled ? '-disabled' : ''}
+        className={`${className}` + isDisabled ? '-disabled' : ''}
         borderRadius={'8px'}
         px={'12px'}
         py="8px"
@@ -66,7 +67,7 @@ export const ListItem = React.forwardRef((props: ListItemProps, ref: any) => {
         </Flex>
         {showTag && isDisabled && (
           <Flex
-            className={`bccb-widget-select-list-item-tag`}
+            className={`${className}-tag`}
             alignItems="center"
             flexShrink={0}
             fontSize={'12px'}
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/FromSection/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/FromSection/index.tsx
index d79169a9..7b86d6e9 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/FromSection/index.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/FromSection/index.tsx
@@ -23,7 +23,7 @@ export function FromSection() {
       h={'48px'}
     >
       <Flex
-        className="bccb-widget-network-title"
+        className="bccb-widget-network-from-title"
         alignItems="center"
         justifyContent={'space-between'}
         display={{ base: 'flex', md: 'none' }}
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/ToSection/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/ToSection/index.tsx
index c3f60f5a..fef0c67e 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/ToSection/index.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/ToSection/index.tsx
@@ -22,7 +22,7 @@ export function ToSection() {
       h={'48px'}
     >
       <Flex
-        className="bccb-widget-network-title"
+        className="bccb-widget-network-to-title"
         alignItems="center"
         justifyContent={'space-between'}
         display={{ base: 'flex', md: 'none' }}
diff --git a/packages/canonical-bridge-widget/src/modules/wallet/components/ConnectButton/index.tsx b/packages/canonical-bridge-widget/src/modules/wallet/components/ConnectButton/index.tsx
index 21b4e4a4..31bf4703 100644
--- a/packages/canonical-bridge-widget/src/modules/wallet/components/ConnectButton/index.tsx
+++ b/packages/canonical-bridge-widget/src/modules/wallet/components/ConnectButton/index.tsx
@@ -19,13 +19,14 @@ export function ConnectButton(props: ConnectButtonProps) {
 
   return (
     <Flex
-      className="bccb-widget-header-wallet-connect-button"
+      className="bccb-widget-header-wallet-connect"
       alignItems="center"
       gap={'16px'}
       {...restProps}
     >
       {!isConnected && (
         <Button
+          className="bccb-widget-header-wallet-connect-button"
           variant="outline"
           h={'40px'}
           px={'16px'}

From 5d0ecf721146c8be06b442690ff20881e623fbf1 Mon Sep 17 00:00:00 2001
From: chris <leosameric@gmail.com>
Date: Wed, 13 Nov 2024 12:59:06 +1000
Subject: [PATCH 15/29] fix: Fix token modal class name

---
 .../aggregator/components/SelectModal/ChooseTokenModal.tsx      | 2 +-
 .../aggregator/components/SelectModal/components/BaseModal.tsx  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

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 be731198..24555abd 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
@@ -66,7 +66,7 @@ export function ChooseTokenModal(props: ChooseTokenModalProps) {
       isNoResult={isNoResult}
     >
       <Flex
-        className="bccb-widget-token-modal-header"
+        className="bccb-widget-token-modal-list-header"
         fontSize={'14px'}
         fontWeight={400}
         lineHeight="16px"
diff --git a/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/components/BaseModal.tsx b/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/components/BaseModal.tsx
index 342f5b5c..1f76449c 100644
--- a/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/components/BaseModal.tsx
+++ b/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/components/BaseModal.tsx
@@ -44,7 +44,7 @@ export function BaseModal(props: BaseModalProps) {
         marginInline={0}
       >
         <Flex
-          className={className}
+          className={`${className}-header`}
           h={'64px'}
           px={'20px'}
           py={0}

From d8aa41ffdf51534ffc67570b6a6bda9dfe169134 Mon Sep 17 00:00:00 2001
From: chris <leosameric@gmail.com>
Date: Wed, 13 Nov 2024 13:00:08 +1000
Subject: [PATCH 16/29] test: Remove test code

---
 .../core/components/ThemeProvider/index.tsx   | 326 ------------------
 1 file changed, 326 deletions(-)

diff --git a/apps/canonical-bridge-ui/core/components/ThemeProvider/index.tsx b/apps/canonical-bridge-ui/core/components/ThemeProvider/index.tsx
index 1b622616..5e900bfb 100644
--- a/apps/canonical-bridge-ui/core/components/ThemeProvider/index.tsx
+++ b/apps/canonical-bridge-ui/core/components/ThemeProvider/index.tsx
@@ -24,332 +24,6 @@ export const ThemeProvider = ({ children }: ThemeProviderProps) => {
       global: ({ colorMode }: { colorMode: ColorMode }) => ({
         body: {
           bg: theme.colors[colorMode].background[3],
-          '.bccb-widget-transfer-widget-wrapper': {
-            bg: '#123456',
-            borderRadius: '10px',
-            padding: '100px 20px',
-          },
-          '.bccb-widget-route-wrapper': {
-            background: '#8C8F9B',
-            padding: '20px',
-            borderWidth: '5px',
-            borderRadius: '20px',
-            color: '#fff',
-          },
-          '.bccb-widget-transfer-widget-title': {
-            fontSize: '20px',
-            fontWeight: 700,
-            color: 'red',
-          },
-          '.bccb-widget-route-container-inner': {
-            borderColor: 'orange',
-          },
-          '.bccb-widget-route-estimated-time, .bccb-widget-route-fee-info, .bccb-widget-allowed-send-amount':
-            {
-              color: 'orange',
-              fontWeight: 700,
-              fontSize: '20px',
-            },
-          '.bccb-widget-route-info-tooltip-fee, .bccb-widget-route-token-tooltip-content, .bccb-widget-route-token-tooltip-content .tooltip-arrow, .bccb-widget-route-token-tooltip-body':
-            {
-              background: 'pink',
-              fontWeight: 700,
-              fontSize: '20px',
-              borderRadius: '20px',
-            },
-          '.bccb-widget-route-token-tooltip-body > div, .bccb-widget-route-info-tooltip-fee > div, .bccb-widget-route-token-tooltip > div':
-            {
-              fontWeight: 700,
-              fontSize: '20px',
-            },
-          '.bccb-widget-info-tooltip': {
-            background: 'orange',
-            borderRadius: '20px',
-            shadowBox: '0 0 10px 0 rgba(0, 0, 0, 0.1)',
-          },
-          '.bccb-widget-info-tooltip .chakra-tooltip__arrow': { background: 'orange !important' },
-          '.bccb-widget-route-name-tag-bestTime, .bccb-widget-route-name-tag-bestReturn': {
-            color: 'grey',
-            fontSize: '20px',
-          },
-          '.bccb-widget-route-token-amount': {
-            color: '#123456',
-          },
-          '.bccb-widget-received-info-container p': {
-            color: 'yellow',
-            fontSize: '20px',
-          },
-          '.bccb-widget-token-list-item': {
-            bg: 'brown',
-            border: '3px solid red',
-            padding: '30px',
-            borderRadius: '20px',
-            '&:hover': {
-              bg: 'green',
-            },
-            '> img, .default-icon': {
-              width: '50px',
-              height: '50px',
-              transform: 'rotate(125deg)',
-            },
-          },
-          '.bccb-widget-token-list-item-disabled': {
-            bg: '#fff1af',
-            opacify: 0.1,
-            border: '3px solid purple',
-            padding: '30px',
-            borderRadius: '20px',
-            '&:hover': {
-              bg: 'green',
-            },
-          },
-          '.bccb-widget-token-list-address > p': {
-            color: 'purple',
-            fontSize: '20px',
-            fontWeight: 700,
-          },
-          '.bccb-widget-token-list-token-balance': {
-            fontSize: '20px',
-            color: '#83a6ac',
-          },
-          '.bccb-widget-token-list-symbol': {
-            fontSize: '20px',
-            color: '#83a6ac',
-          },
-          '.bccb-widget-select-list-item-tag': {
-            fontSize: '20px',
-            fontWeight: 700,
-            color: '#83a6ac',
-          },
-          '.bccb-widget-from-network-modal-content': {
-            background: 'pink',
-            borderRadius: '20px',
-            padding: '20px',
-            width: '700px',
-          },
-          '.bccb-widget-token-modal-search > input, .bccb-widget-token-modal-header-search > input, .bccb-widget-from-network-modal-search > input':
-            {
-              fontSize: '35px',
-              color: 'red',
-              borderColor: '#83a6ac',
-            },
-          '.bccb-widget-from-network-modal-search, .bccb-widget-token-modal-header-search': {
-            '& svg': {
-              width: '30px',
-              height: '30px',
-            },
-          },
-          '.bccb-widget-token-address-link .token-name': {
-            color: 'black',
-            bg: 'white',
-          },
-          '.bccb-widget-select-list-wrapper': {
-            paddingBottom: '30px',
-          },
-          '.bccb-widget-transfer-max .max-text': {
-            fontSize: '20px',
-            color: 'red',
-          },
-          '.bccb-widget-modal-no-result-found, .bccb-widget-modal-no-result-found-text': {
-            fontSize: '25px',
-            fontWeight: 700,
-            color: 'green',
-            '& svg': {
-              width: '70px',
-              height: '70px',
-            },
-          },
-          '.bccb-widget-token-modal-search svg': {
-            height: '50px',
-            width: '50px',
-          },
-          '.bccb-widget-token-modal-header': {
-            fontSize: '20px',
-            fontWeight: 700,
-            color: '#83a6ac',
-          },
-          '.bccb-widget-transfer-input-container': {
-            '& > div': {
-              marginBottom: '20px',
-            },
-            '& .input-header-label': {
-              color: '#83a6ac',
-              fontSize: '20px',
-              fontWeight: 700,
-            },
-            '.bccb-widget-transfer-input-wrapper': {
-              '&:hover': {
-                borderColor: 'yellow',
-                borderWidth: '5px',
-                borderRadius: '4px',
-              },
-            },
-            '& input': {
-              fontSize: '15px',
-              fontWeight: 400,
-              color: 'pink',
-              borderColor: '#83a6ac',
-
-              '&:hover': {
-                borderColor: 'red',
-              },
-            },
-          },
-          '.bccb-widget-token-select-button': {
-            borderRadius: '2px',
-            height: '50px',
-            bg: 'pink',
-            color: '#83a6ac',
-            fontSize: '20px',
-            fontWeight: 700,
-          },
-          '.bccb-widget-route-error': {
-            '& .error-text': {
-              color: 'green',
-              fontSize: '20px',
-              fontWeight: 700,
-            },
-            '& svg': {
-              width: '20px',
-              height: '20px',
-            },
-          },
-          '.bccb-widget-route-name-text': {
-            color: 'white',
-            fontSize: '24px',
-            fontWeight: 700,
-          },
-          '.bccb-widget-network-button': {
-            bg: '#83a6ac',
-            color: 'white',
-            borderRadius: '20px',
-            padding: '10px 20px',
-            borderWidth: '5px',
-            '& .bccb-widget-network-name > p': {
-              fontSize: '18px',
-              fontWeight: 700,
-            },
-          },
-          '.bccb-widget-transfer-input-error': {
-            color: 'pink',
-            fontSize: '20px',
-            fontWeight: 700,
-          },
-          '.bccb-widget-from-network-list-item, .bccb-widget-to-network-list-item ': {
-            p: '30px',
-            bg: 'red',
-            borderRadius: '20px',
-            fontWeight: 700,
-            color: 'black',
-            fontSize: '20px',
-            '&:hover': {
-              bg: 'orange',
-            },
-          },
-          '.bccb-widget-from-network-list-item-active, .bccb-widget-to-network-list-item-active': {
-            borderColor: 'green',
-            borderWidth: '5px',
-            bg: '#83a6ac',
-          },
-          '.bccb-widget-transfer-button button': {
-            fontSize: '20px',
-            fontWeight: 700,
-            borderRadius: '30px',
-            borderWidth: '1px',
-            borderColor: 'red',
-          },
-          '.bccb-widget-network-title > p': {
-            color: 'pink',
-          },
-          '.bccb-widget-wallet-connect-button, .bccb-widget-switch-network-button, .bccb-widget-transfer-button':
-            {
-              fontWeight: 700,
-              fontSize: '27px',
-              borderRadius: '2px',
-              padding: '10px 20px',
-            },
-          '.bccb-widget-transaction-confirming-modal, .bccb-widget-transaction-submitted-modal, .bccb-widget-transaction-failed-modal, .bccb-widget-transaction-confirming-modal, .bccb-widget-transaction-approve-modal':
-            {
-              maxWidth: '700px',
-              borderRadius: '2px',
-              '& .bccb-widget-modal-body ': {
-                bg: 'pink',
-                '& svg': {
-                  height: '20px',
-                  width: '20px',
-                },
-              },
-              '.bccb-widget-modal-main-button': {
-                padding: '30px',
-                fontWeight: 700,
-                fontSize: '25px',
-              },
-            },
-          '.bccb-widget-route-header': {
-            fontWeight: 700,
-            fontSize: '20px',
-          },
-          '.bccb-widget-refreshing-button svg': {
-            width: '20px',
-            height: '20px',
-          },
-          '.bccb-widget-header-menu-list': {
-            padding: '20px',
-            '& .bccb-widget-header-menu-item': {
-              fontSize: '20px',
-              fontWeight: 700,
-              color: 'pink',
-              '&:hover': {
-                bg: 'orange',
-              },
-            },
-            '& .bccb-widget-header-menu-item-selected': {
-              bg: 'orange',
-            },
-          },
-          '.bccb-widget-header-menu-button, .bccb-widget-header-network-status-network, .bccb-widget-header-dropdown-button, .bccb-widget-header-dropdown-button-not-connect, .bccb-widget-header-profile-button':
-            {
-              color: 'pink',
-              borderRadius: '2px',
-              outlineColor: 'red',
-              '& button, & .profile-address': {
-                fontWeight: 700,
-                fontSize: '30px',
-              },
-              '& p': {
-                color: 'red',
-              },
-            },
-          '.bccb-widget-header-network-status': {
-            '& .bccb-widget-switch-network-button': {
-              fontSize: '10px',
-              borderRadius: '5px',
-              bg: 'white',
-            },
-          },
-          '.bccb-widget-header-network-status-title': {
-            fontSize: '20px',
-            fontWeight: 700,
-          },
-          '.bccb-widget-header-dropdown-button': {
-            fontWeight: 700,
-            fontSize: '30px',
-            color: 'green',
-            ' & .chain-name p': {
-              fontSize: '20px',
-            },
-          },
-          '.bccb-widget-header-profile-list': {
-            color: 'red',
-          },
-          '.bccb-widget-header-profile-balance': {
-            color: '#d7877d',
-          },
-          '.bccb-widget-header-profile-disconnect-link > div': {
-            bg: 'orange',
-            fontSize: '20px',
-            fontWeight: 700,
-          },
         },
       }),
     },

From dfa318b8c0944f7755152ef491050881f10e3a26 Mon Sep 17 00:00:00 2001
From: chris <leosameric@gmail.com>
Date: Wed, 13 Nov 2024 15:46:27 +1000
Subject: [PATCH 17/29] feat: Layerzero airdrop native gas

---
 .../src/layerZero/index.ts                    | 30 ++++++++++++++-----
 .../src/layerZero/types/index.ts              |  4 +++
 2 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/packages/canonical-bridge-sdk/src/layerZero/index.ts b/packages/canonical-bridge-sdk/src/layerZero/index.ts
index a441c588..b0e5eff1 100644
--- a/packages/canonical-bridge-sdk/src/layerZero/index.ts
+++ b/packages/canonical-bridge-sdk/src/layerZero/index.ts
@@ -33,13 +33,22 @@ export class LayerZero {
     walletClient,
     gasAmount = 200000n,
     version = 1,
+    airDropGas = 0n,
+    dstAddress = '0x',
   }: ISendCakeTokenInput): Promise<Hash> {
     try {
       const address32Bytes = pad(userAddress, { size: 32 });
-      const adapterParams = encodePacked(
-        ['uint16', 'uint256'],
-        [version, gasAmount]
-      );
+      /* version 1 - send token
+       * version 2 - send token and air drop native gas on destination chain
+       * https://docs.layerzero.network/v1/developers/evm/evm-guides/advanced/relayer-adapter-parameters#airdrop
+       */
+      const adapterParams =
+        version === 1
+          ? encodePacked(['uint16', 'uint256'], [version, gasAmount])
+          : encodePacked(
+              ['uint16', 'uint', 'uint', 'address'],
+              [2, gasAmount, airDropGas, dstAddress]
+            );
       const fees = await publicClient.readContract({
         address: bridgeAddress,
         abi: CAKE_PROXY_OFT_ABI,
@@ -109,13 +118,18 @@ export class LayerZero {
     publicClient,
     gasAmount = 200000n,
     version = 1,
+    airDropGas = 0n,
+    dstAddress = '0x',
   }: IGetEstimateFeeInput) {
     try {
       const address32Bytes = pad(userAddress, { size: 32 });
-      const adapterParams = encodePacked(
-        ['uint16', 'uint256'],
-        [version, gasAmount]
-      );
+      const adapterParams =
+        version === 1
+          ? encodePacked(['uint16', 'uint256'], [version, gasAmount])
+          : encodePacked(
+              ['uint16', 'uint', 'uint', 'address'],
+              [2, gasAmount, airDropGas, dstAddress]
+            );
       const fees = await publicClient.readContract({
         address: bridgeAddress,
         abi: CAKE_PROXY_OFT_ABI,
diff --git a/packages/canonical-bridge-sdk/src/layerZero/types/index.ts b/packages/canonical-bridge-sdk/src/layerZero/types/index.ts
index de081be1..915e3672 100644
--- a/packages/canonical-bridge-sdk/src/layerZero/types/index.ts
+++ b/packages/canonical-bridge-sdk/src/layerZero/types/index.ts
@@ -11,6 +11,8 @@ export interface ISendCakeTokenInput {
   version?: number;
   publicClient: PublicClient;
   walletClient: WalletClient;
+  dstAddress?: `0x${string}`;
+  airDropGas?: bigint;
 }
 
 export interface IGetEstimateFeeInput {
@@ -21,6 +23,8 @@ export interface IGetEstimateFeeInput {
   gasAmount?: bigint;
   version?: number;
   publicClient: PublicClient;
+  dstAddress?: `0x${string}`;
+  airDropGas?: bigint;
 }
 
 export interface LayerZeroToken {

From 16a628e6ad64997d4a110de64f3b0aa10e033bd4 Mon Sep 17 00:00:00 2001
From: chris <leosameric@gmail.com>
Date: Thu, 14 Nov 2024 11:17:59 +1000
Subject: [PATCH 18/29] test: Revert font family

---
 apps/canonical-bridge-ui/pages/mainnet/index.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/apps/canonical-bridge-ui/pages/mainnet/index.tsx b/apps/canonical-bridge-ui/pages/mainnet/index.tsx
index e7088d95..f9f48ec2 100644
--- a/apps/canonical-bridge-ui/pages/mainnet/index.tsx
+++ b/apps/canonical-bridge-ui/pages/mainnet/index.tsx
@@ -24,7 +24,6 @@ export const bridgeConfig: ICanonicalBridgeConfig = {
     theme: {
       dark: dark,
       light: light,
-      fontFamily: 'Georgia',
     },
   },
   wallet: {

From 1341167ee0d6c35fcb0e0af428e0f7403b9712cb Mon Sep 17 00:00:00 2001
From: chris <leosameric@gmail.com>
Date: Thu, 14 Nov 2024 13:27:39 +1000
Subject: [PATCH 19/29] chore: Release new version

---
 .release/.changeset/new-glasses-happen.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .release/.changeset/new-glasses-happen.md

diff --git a/.release/.changeset/new-glasses-happen.md b/.release/.changeset/new-glasses-happen.md
new file mode 100644
index 00000000..4df48a33
--- /dev/null
+++ b/.release/.changeset/new-glasses-happen.md
@@ -0,0 +1,5 @@
+---
+"@bnb-chain/canonical-bridge-widget": patch
+---
+
+Add class name into components

From 63bb7253ce2dacb7ec85aed90b9fd58944411d33 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Thu, 14 Nov 2024 03:36:25 +0000
Subject: [PATCH 20/29] chore: Update versions

---
 .release/.changeset/new-glasses-happen.md     | 5 -----
 packages/canonical-bridge-widget/CHANGELOG.md | 6 ++++++
 packages/canonical-bridge-widget/package.json | 2 +-
 3 files changed, 7 insertions(+), 6 deletions(-)
 delete mode 100644 .release/.changeset/new-glasses-happen.md

diff --git a/.release/.changeset/new-glasses-happen.md b/.release/.changeset/new-glasses-happen.md
deleted file mode 100644
index 4df48a33..00000000
--- a/.release/.changeset/new-glasses-happen.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@bnb-chain/canonical-bridge-widget": patch
----
-
-Add class name into components
diff --git a/packages/canonical-bridge-widget/CHANGELOG.md b/packages/canonical-bridge-widget/CHANGELOG.md
index 76cd5d69..5cd545b7 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.4.1
+
+### Patch Changes
+
+- 1341167: Add class name into components
+
 ## 0.4.0
 
 ### Minor Changes
diff --git a/packages/canonical-bridge-widget/package.json b/packages/canonical-bridge-widget/package.json
index c7ef9823..0e7d4cd1 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.4.0",
+  "version": "0.4.1",
   "description": "canonical bridge widget",
   "author": "bnb-chain",
   "private": false,

From a5f5bd4399760add2bf5730a011d42e1e1c63bbe Mon Sep 17 00:00:00 2001
From: wenty22 <wenty.l@nodereal.io>
Date: Thu, 14 Nov 2024 12:37:11 +0800
Subject: [PATCH 21/29] feat: Update walletkit

---
 common/config/rush/pnpm-lock.yaml             | 10 +++++-----
 packages/canonical-bridge-widget/package.json |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml
index 989428b7..209977d7 100644
--- a/common/config/rush/pnpm-lock.yaml
+++ b/common/config/rush/pnpm-lock.yaml
@@ -304,8 +304,8 @@ importers:
         specifier: ~11.13.0
         version: 11.13.0(@emotion/react@11.13.3(@types/react@18.3.8)(react@18.3.1)(supports-color@9.4.0))(@types/react@18.3.8)(react@18.3.1)(supports-color@9.4.0)
       '@node-real/walletkit':
-        specifier: 2.4.1-alpha.1
-        version: 2.4.1-alpha.1(@babel/runtime@7.25.0)(@react-native-async-storage/async-storage@1.24.0)(@tanstack/react-query@5.50.1(react@18.3.1))(@types/react@18.3.8)(bs58@6.0.0)(bufferutil@4.0.8)(encoding@0.1.13)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(tslib@2.7.0)(typescript@5.5.4)(utf-8-validate@5.0.9)(viem@2.21.14(bufferutil@4.0.8)(typescript@5.5.4)(utf-8-validate@5.0.9)(zod@3.22.4))(wagmi@2.12.14(@react-native-async-storage/async-storage@1.24.0)(@tanstack/query-core@5.50.1)(@tanstack/react-query@5.50.1(react@18.3.1))(@types/react@18.3.8)(bufferutil@4.0.8)(encoding@0.1.13)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@3.29.4)(typescript@5.5.4)(utf-8-validate@5.0.9)(viem@2.21.14(bufferutil@4.0.8)(typescript@5.5.4)(utf-8-validate@5.0.9)(zod@3.22.4))(zod@3.22.4))(zod@3.22.4)
+        specifier: 2.4.1-alpha.2
+        version: 2.4.1-alpha.2(@babel/runtime@7.25.0)(@react-native-async-storage/async-storage@1.24.0)(@tanstack/react-query@5.50.1(react@18.3.1))(@types/react@18.3.8)(bs58@6.0.0)(bufferutil@4.0.8)(encoding@0.1.13)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(tslib@2.7.0)(typescript@5.5.4)(utf-8-validate@5.0.9)(viem@2.21.14(bufferutil@4.0.8)(typescript@5.5.4)(utf-8-validate@5.0.9)(zod@3.22.4))(wagmi@2.12.14(@react-native-async-storage/async-storage@1.24.0)(@tanstack/query-core@5.50.1)(@tanstack/react-query@5.50.1(react@18.3.1))(@types/react@18.3.8)(bufferutil@4.0.8)(encoding@0.1.13)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@3.29.4)(typescript@5.5.4)(utf-8-validate@5.0.9)(viem@2.21.14(bufferutil@4.0.8)(typescript@5.5.4)(utf-8-validate@5.0.9)(zod@3.22.4))(zod@3.22.4))(zod@3.22.4)
       '@tanstack/react-query':
         specifier: ~5.50.1
         version: 5.50.1(react@18.3.1)
@@ -2993,8 +2993,8 @@ packages:
       viem: ^2
       wagmi: ^2
 
-  '@node-real/walletkit@2.4.1-alpha.1':
-    resolution: {integrity: sha512-1IBDDYb6b6EqytQxCqp5BdztMp3V2XR+numoyzdASYE8eoDEEEhfTv6fB8t11MFKzauIQGTWbVDHyM39hDlUxw==}
+  '@node-real/walletkit@2.4.1-alpha.2':
+    resolution: {integrity: sha512-0j3L7z8hWG26JyT6aUg6lEl9y2+rxRfpQHk61cQ68rL4UF58h4ZTkpNvENz6IW19adeLb4Yzcjzjf4wViS9aUA==}
     peerDependencies:
       '@tanstack/react-query': ^5
       react: '>=17'
@@ -15978,7 +15978,7 @@ snapshots:
       - utf-8-validate
       - zod
 
-  '@node-real/walletkit@2.4.1-alpha.1(@babel/runtime@7.25.0)(@react-native-async-storage/async-storage@1.24.0)(@tanstack/react-query@5.50.1(react@18.3.1))(@types/react@18.3.8)(bs58@6.0.0)(bufferutil@4.0.8)(encoding@0.1.13)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(tslib@2.7.0)(typescript@5.5.4)(utf-8-validate@5.0.9)(viem@2.21.14(bufferutil@4.0.8)(typescript@5.5.4)(utf-8-validate@5.0.9)(zod@3.22.4))(wagmi@2.12.14(@react-native-async-storage/async-storage@1.24.0)(@tanstack/query-core@5.50.1)(@tanstack/react-query@5.50.1(react@18.3.1))(@types/react@18.3.8)(bufferutil@4.0.8)(encoding@0.1.13)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@3.29.4)(typescript@5.5.4)(utf-8-validate@5.0.9)(viem@2.21.14(bufferutil@4.0.8)(typescript@5.5.4)(utf-8-validate@5.0.9)(zod@3.22.4))(zod@3.22.4))(zod@3.22.4)':
+  '@node-real/walletkit@2.4.1-alpha.2(@babel/runtime@7.25.0)(@react-native-async-storage/async-storage@1.24.0)(@tanstack/react-query@5.50.1(react@18.3.1))(@types/react@18.3.8)(bs58@6.0.0)(bufferutil@4.0.8)(encoding@0.1.13)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(tslib@2.7.0)(typescript@5.5.4)(utf-8-validate@5.0.9)(viem@2.21.14(bufferutil@4.0.8)(typescript@5.5.4)(utf-8-validate@5.0.9)(zod@3.22.4))(wagmi@2.12.14(@react-native-async-storage/async-storage@1.24.0)(@tanstack/query-core@5.50.1)(@tanstack/react-query@5.50.1(react@18.3.1))(@types/react@18.3.8)(bufferutil@4.0.8)(encoding@0.1.13)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@3.29.4)(typescript@5.5.4)(utf-8-validate@5.0.9)(viem@2.21.14(bufferutil@4.0.8)(typescript@5.5.4)(utf-8-validate@5.0.9)(zod@3.22.4))(zod@3.22.4))(zod@3.22.4)':
     dependencies:
       '@metamask/jazzicon': 2.0.0
       '@solana/wallet-adapter-react': 0.15.35(@solana/web3.js@1.95.4(bufferutil@4.0.8)(encoding@0.1.13)(utf-8-validate@5.0.9))(bs58@6.0.0)(react@18.3.1)
diff --git a/packages/canonical-bridge-widget/package.json b/packages/canonical-bridge-widget/package.json
index 125d73d7..68565c26 100644
--- a/packages/canonical-bridge-widget/package.json
+++ b/packages/canonical-bridge-widget/package.json
@@ -45,7 +45,7 @@
     "@bnb-chain/space": "workspace:*",
     "@emotion/react": "~11.13.0",
     "@emotion/styled": "~11.13.0",
-    "@node-real/walletkit": "2.4.1-alpha.1",
+    "@node-real/walletkit": "2.4.1-alpha.2",
     "@tanstack/react-query": "~5.50.1",
     "@types/lodash": "~4.17.7",
     "@types/node": "^20",

From cdc4810c694820c933eb26c6b3142895dd2e92c0 Mon Sep 17 00:00:00 2001
From: wenty22 <wenty.l@nodereal.io>
Date: Thu, 14 Nov 2024 15:18:32 +0800
Subject: [PATCH 22/29] feat: Hide SOL native token address

---
 .release/.changeset/pre.json                              | 1 +
 .release/.changeset/stale-files-kick.md                   | 6 ++++++
 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 +-
 .../canonical-bridge-widget/src/core/utils/address.ts     | 7 ++++++-
 .../components/SelectModal/ChooseTokenModal.tsx           | 2 +-
 .../components/SelectButton/TokenSelectButton.tsx         | 6 +++++-
 .../components/TransferOverview/RouteInfo/RouteTitle.tsx  | 1 +
 .../TransferOverview/RouteInfo/TokenInfoTooltip.tsx       | 8 +++++++-
 .../src/modules/wallet/WalletProvider.tsx                 | 3 +--
 12 files changed, 42 insertions(+), 8 deletions(-)
 create mode 100644 .release/.changeset/stale-files-kick.md

diff --git a/.release/.changeset/pre.json b/.release/.changeset/pre.json
index f97cf9b0..37aefe77 100644
--- a/.release/.changeset/pre.json
+++ b/.release/.changeset/pre.json
@@ -8,6 +8,7 @@
   "changesets": [
     "honest-jeans-greet",
     "mean-falcons-yell",
+    "stale-files-kick",
     "tasty-gifts-brush"
   ]
 }
diff --git a/.release/.changeset/stale-files-kick.md b/.release/.changeset/stale-files-kick.md
new file mode 100644
index 00000000..3ef14dad
--- /dev/null
+++ b/.release/.changeset/stale-files-kick.md
@@ -0,0 +1,6 @@
+---
+"@bnb-chain/canonical-bridge-widget": patch
+"@bnb-chain/canonical-bridge-sdk": patch
+---
+
+Fix phantom wallet deelink issue on mobile
diff --git a/packages/canonical-bridge-sdk/CHANGELOG.md b/packages/canonical-bridge-sdk/CHANGELOG.md
index 756c1256..db437ac6 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.0-alpha.1
+
+### Patch Changes
+
+- Fix phantom wallet deelink issue on mobile
+
 ## 0.4.0-alpha.0
 
 ### Minor Changes
diff --git a/packages/canonical-bridge-sdk/package.json b/packages/canonical-bridge-sdk/package.json
index e17d92c3..9bc3edef 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.0-alpha.0",
+  "version": "0.4.0-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 1c735917..5cc0c697 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.0-alpha.3
+
+### Patch Changes
+
+- Fix phantom wallet deelink issue on mobile
+
 ## 0.5.0-alpha.2
 
 ### Patch Changes
diff --git a/packages/canonical-bridge-widget/package.json b/packages/canonical-bridge-widget/package.json
index 68565c26..44d65b39 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.0-alpha.2",
+  "version": "0.5.0-alpha.3",
   "description": "canonical bridge widget",
   "author": "bnb-chain",
   "private": false,
diff --git a/packages/canonical-bridge-widget/src/core/utils/address.ts b/packages/canonical-bridge-widget/src/core/utils/address.ts
index a1812af4..89bf1b60 100644
--- a/packages/canonical-bridge-widget/src/core/utils/address.ts
+++ b/packages/canonical-bridge-widget/src/core/utils/address.ts
@@ -1,4 +1,5 @@
 import { truncateHash } from '@/core/utils/string';
+import { ChainType } from '@/modules/aggregator';
 
 export function formatAppAddress(params: {
   address?: string;
@@ -49,7 +50,11 @@ export function isEvmAddress(address?: string) {
   return !!address && /^0x[a-f0-9]{40}$/i.test(address);
 }
 
-export function isNativeToken(tokenAddress: string) {
+export function isNativeToken(tokenAddress: string, chainType: ChainType = 'evm') {
+  if (chainType === 'solana') {
+    return tokenAddress === '11111111111111111111111111111111';
+  }
+
   return tokenAddress === '0x0000000000000000000000000000000000000000';
 }
 
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 485ddb69..52022532 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
@@ -86,7 +86,7 @@ export function ChooseTokenModal(props: ChooseTokenModalProps) {
             const isDisabled = !isChainOrTokenCompatible(item);
             const isActive =
               isSameAddress(item.address, selectedToken?.address) && isChainOrTokenCompatible(item);
-            const isNative = isNativeToken(item.address);
+            const isNative = isNativeToken(item.address, fromChain?.chainType);
 
             return (
               <ListItem
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 f979e143..59a0870b 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
@@ -41,7 +41,11 @@ export function TokenSelectButton(props: SelectButtonProps) {
       {...restProps}
     >
       <Flex gap={'8px'} alignItems={'center'} position={'relative'} overflow="hidden">
-        <TokenInfoTooltip tokenAddress={token?.address ?? ''} tokenLinkUrl={tokenUrl}>
+        <TokenInfoTooltip
+          chainType={fromChain?.chainType}
+          tokenAddress={token?.address ?? ''}
+          tokenLinkUrl={tokenUrl}
+        >
           <Box>
             <IconImage
               src={token?.icon}
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 19ddb29e..69a5423a 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
@@ -41,6 +41,7 @@ export const RouteTitle = ({ receiveAmt, toTokenInfo, isError }: RouteTitleProps
       </Flex>
       {toTokenInfo && (
         <TokenInfoTooltip
+          chainType={toChain?.chainType}
           tokenAddress={toTokenInfo.address}
           tokenLinkUrl={tokenUrl}
           isReceiveArea={true}
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 e1c7642b..fc1e6183 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
@@ -14,12 +14,14 @@ import {
 import { useMemo } from 'react';
 
 import { isNativeToken } from '@/core/utils/address.ts';
+import { ChainType } from '@/modules/aggregator';
 
 interface TokenTooltipProps {
   tokenLinkUrl: string;
   tokenAddress: string;
   children: React.ReactNode;
   isReceiveArea?: boolean;
+  chainType?: ChainType;
 }
 
 export const TokenInfoTooltip = ({
@@ -27,9 +29,13 @@ export const TokenInfoTooltip = ({
   tokenAddress,
   tokenLinkUrl,
   isReceiveArea,
+  chainType = 'evm',
 }: TokenTooltipProps) => {
   const theme = useTheme();
-  const nativeToken = useMemo(() => isNativeToken(tokenAddress), [tokenAddress]);
+  const nativeToken = useMemo(
+    () => isNativeToken(tokenAddress, chainType),
+    [chainType, tokenAddress],
+  );
 
   return (
     <Flex className="bccb-widget-route-token-tooltip" display={'inline-block'} w={'auto'}>
diff --git a/packages/canonical-bridge-widget/src/modules/wallet/WalletProvider.tsx b/packages/canonical-bridge-widget/src/modules/wallet/WalletProvider.tsx
index 19c19f56..b81c2047 100644
--- a/packages/canonical-bridge-widget/src/modules/wallet/WalletProvider.tsx
+++ b/packages/canonical-bridge-widget/src/modules/wallet/WalletProvider.tsx
@@ -18,7 +18,6 @@ import * as allChains from 'viem/chains';
 import { defaultTronConfig, tronLink } from '@node-real/walletkit/tron';
 import {
   defaultSolanaConfig,
-  trustWallet as solanaTrustWallet,
   phantomWallet as solanaPhantomWallet,
 } from '@node-real/walletkit/solana';
 import React from 'react';
@@ -53,7 +52,7 @@ export function WalletProvider(props: WalletProviderProps) {
       walletConnect(),
     ];
     const tronWallets = [tronLink()];
-    const solanaWallets = [solanaTrustWallet(), solanaPhantomWallet()];
+    const solanaWallets = [solanaPhantomWallet()];
 
     const tron = chainConfigs.find((e) => e.chainType === 'tron');
     const solana = chainConfigs.find((e) => e.chainType === 'solana');

From 634d683a0d18dd06624d6e4105b283c50c815942 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Thu, 14 Nov 2024 08:56:15 +0000
Subject: [PATCH 23/29] chore: Update versions

---
 .release/.changeset/honest-jeans-greet.md     |  5 -----
 .release/.changeset/mean-falcons-yell.md      |  5 -----
 .release/.changeset/pre.json                  | 13 -------------
 .release/.changeset/tasty-gifts-brush.md      |  6 ------
 packages/canonical-bridge-sdk/CHANGELOG.md    |  6 ++++++
 packages/canonical-bridge-sdk/package.json    |  2 +-
 packages/canonical-bridge-widget/CHANGELOG.md | 11 +++++++++++
 packages/canonical-bridge-widget/package.json |  2 +-
 8 files changed, 19 insertions(+), 31 deletions(-)
 delete mode 100644 .release/.changeset/honest-jeans-greet.md
 delete mode 100644 .release/.changeset/mean-falcons-yell.md
 delete mode 100644 .release/.changeset/pre.json
 delete mode 100644 .release/.changeset/tasty-gifts-brush.md

diff --git a/.release/.changeset/honest-jeans-greet.md b/.release/.changeset/honest-jeans-greet.md
deleted file mode 100644
index 8d7def6c..00000000
--- a/.release/.changeset/honest-jeans-greet.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@bnb-chain/canonical-bridge-widget": patch
----
-
-UI adjustment
diff --git a/.release/.changeset/mean-falcons-yell.md b/.release/.changeset/mean-falcons-yell.md
deleted file mode 100644
index 8d7def6c..00000000
--- a/.release/.changeset/mean-falcons-yell.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@bnb-chain/canonical-bridge-widget": patch
----
-
-UI adjustment
diff --git a/.release/.changeset/pre.json b/.release/.changeset/pre.json
deleted file mode 100644
index f97cf9b0..00000000
--- a/.release/.changeset/pre.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
-  "mode": "pre",
-  "tag": "alpha",
-  "initialVersions": {
-    "@bnb-chain/canonical-bridge-sdk": "0.3.3",
-    "@bnb-chain/canonical-bridge-widget": "0.4.0"
-  },
-  "changesets": [
-    "honest-jeans-greet",
-    "mean-falcons-yell",
-    "tasty-gifts-brush"
-  ]
-}
diff --git a/.release/.changeset/tasty-gifts-brush.md b/.release/.changeset/tasty-gifts-brush.md
deleted file mode 100644
index 9a986623..00000000
--- a/.release/.changeset/tasty-gifts-brush.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-"@bnb-chain/canonical-bridge-widget": minor
-"@bnb-chain/canonical-bridge-sdk": minor
----
-
-Support solana
diff --git a/packages/canonical-bridge-sdk/CHANGELOG.md b/packages/canonical-bridge-sdk/CHANGELOG.md
index 756c1256..30b501e0 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.0
+
+### Minor Changes
+
+- a6db440: Support solana
+
 ## 0.4.0-alpha.0
 
 ### Minor Changes
diff --git a/packages/canonical-bridge-sdk/package.json b/packages/canonical-bridge-sdk/package.json
index e17d92c3..221b0534 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.0-alpha.0",
+  "version": "0.4.0",
   "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 1c735917..69ba2938 100644
--- a/packages/canonical-bridge-widget/CHANGELOG.md
+++ b/packages/canonical-bridge-widget/CHANGELOG.md
@@ -1,5 +1,16 @@
 # @bnb-chain/canonical-bridge-widget
 
+## 0.5.0
+
+### Minor Changes
+
+- a6db440: Support solana
+
+### Patch Changes
+
+- e31ab8f: UI adjustment
+- 6ab36a6: UI adjustment
+
 ## 0.5.0-alpha.2
 
 ### Patch Changes
diff --git a/packages/canonical-bridge-widget/package.json b/packages/canonical-bridge-widget/package.json
index 68565c26..2478e32c 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.0-alpha.2",
+  "version": "0.5.0",
   "description": "canonical bridge widget",
   "author": "bnb-chain",
   "private": false,

From bbfec693410d41d11a3c5e493448047720669e75 Mon Sep 17 00:00:00 2001
From: wenty22 <wenty.l@nodereal.io>
Date: Thu, 14 Nov 2024 17:21:36 +0800
Subject: [PATCH 24/29] feat: Support solana

---
 .release/.changeset/hip-ladybugs-attend.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 +-
 .../src/core/constants/index.ts                  |  2 ++
 .../modules/transfer/hooks/useInputValidation.ts | 16 ++++++++++++++--
 8 files changed, 37 insertions(+), 4 deletions(-)
 create mode 100644 .release/.changeset/hip-ladybugs-attend.md

diff --git a/.release/.changeset/hip-ladybugs-attend.md b/.release/.changeset/hip-ladybugs-attend.md
new file mode 100644
index 00000000..c5d12dc5
--- /dev/null
+++ b/.release/.changeset/hip-ladybugs-attend.md
@@ -0,0 +1,6 @@
+---
+"@bnb-chain/canonical-bridge-widget": patch
+"@bnb-chain/canonical-bridge-sdk": patch
+---
+
+Solana requires wallet have at least 0.05SOL to enabled a tx.
diff --git a/.release/.changeset/pre.json b/.release/.changeset/pre.json
index 37aefe77..b65c248f 100644
--- a/.release/.changeset/pre.json
+++ b/.release/.changeset/pre.json
@@ -6,6 +6,7 @@
     "@bnb-chain/canonical-bridge-widget": "0.4.0"
   },
   "changesets": [
+    "hip-ladybugs-attend",
     "honest-jeans-greet",
     "mean-falcons-yell",
     "stale-files-kick",
diff --git a/packages/canonical-bridge-sdk/CHANGELOG.md b/packages/canonical-bridge-sdk/CHANGELOG.md
index db437ac6..d2737344 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.0-alpha.2
+
+### Patch Changes
+
+- Solana requires wallet have at least 0.05SOL to enabled a tx.
+
 ## 0.4.0-alpha.1
 
 ### Patch Changes
diff --git a/packages/canonical-bridge-sdk/package.json b/packages/canonical-bridge-sdk/package.json
index 9bc3edef..ad12d373 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.0-alpha.1",
+  "version": "0.4.0-alpha.2",
   "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 5cc0c697..3fdf5fe1 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.0-alpha.4
+
+### Patch Changes
+
+- Solana requires wallet have at least 0.05SOL to enabled a tx.
+
 ## 0.5.0-alpha.3
 
 ### Patch Changes
diff --git a/packages/canonical-bridge-widget/package.json b/packages/canonical-bridge-widget/package.json
index 44d65b39..1f7ff2cf 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.0-alpha.3",
+  "version": "0.5.0-alpha.4",
   "description": "canonical bridge widget",
   "author": "bnb-chain",
   "private": false,
diff --git a/packages/canonical-bridge-widget/src/core/constants/index.ts b/packages/canonical-bridge-widget/src/core/constants/index.ts
index 8187a38b..e5189218 100644
--- a/packages/canonical-bridge-widget/src/core/constants/index.ts
+++ b/packages/canonical-bridge-widget/src/core/constants/index.ts
@@ -40,3 +40,5 @@ export const TIME = {
 export const MIN_FEE = 0.0001;
 
 export const REFETCH_INTERVAL = 8 * 1000;
+
+export const MIN_SOL_TO_ENABLED_TX = 0.05;
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/hooks/useInputValidation.ts b/packages/canonical-bridge-widget/src/modules/transfer/hooks/useInputValidation.ts
index 84c47353..0d07a6eb 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/hooks/useInputValidation.ts
+++ b/packages/canonical-bridge-widget/src/modules/transfer/hooks/useInputValidation.ts
@@ -5,10 +5,15 @@ import { useCallback } from 'react';
 import { formatNumber } from '@/core/utils/number';
 import { useAppSelector } from '@/modules/store/StoreProvider';
 import { useCurrentWallet } from '@/modules/wallet/CurrentWalletProvider';
+import { useSolanaBalance } from '@/modules/wallet/hooks/useSolanaBalance';
+import { MIN_SOL_TO_ENABLED_TX } from '@/core/constants';
 
 export const useInputValidation = () => {
   const { chain } = useCurrentWallet();
 
+  const { data } = useSolanaBalance();
+  const solBalance = Number(data?.formatted);
+
   const fromChain = useAppSelector((state) => state.transfer.fromChain);
   const validateInput = useCallback(
     ({
@@ -49,7 +54,14 @@ export const useInputValidation = () => {
         }
 
         if (!!balance) {
-          return { text: `${formatNumber(balance)}`, isError: false };
+          if (fromChain?.chainType === 'solana' && solBalance < MIN_SOL_TO_ENABLED_TX) {
+            return {
+              text: `You should have at least ${MIN_SOL_TO_ENABLED_TX} SOL in your balance to perform this trade.`,
+              isError: true,
+            };
+          } else {
+            return { text: `${formatNumber(balance)}`, isError: false };
+          }
         } else {
           if (fromChain?.id === chain?.id && chain) {
             return { isError: true, text: 'You have insufficient balance' };
@@ -60,7 +72,7 @@ export const useInputValidation = () => {
         console.log(e);
       }
     },
-    [chain, fromChain?.id],
+    [chain, fromChain?.chainType, fromChain?.id, solBalance],
   );
 
   return {

From 098d5615f64e5ac5f776ac3cec929f780c4517df Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Thu, 14 Nov 2024 08:56:15 +0000
Subject: [PATCH 25/29] chore: Update versions

---
 .release/.changeset/honest-jeans-greet.md     |  5 -----
 .release/.changeset/mean-falcons-yell.md      |  5 -----
 .release/.changeset/tasty-gifts-brush.md      |  6 ------
 packages/canonical-bridge-sdk/CHANGELOG.md    |  8 ++++++++
 packages/canonical-bridge-sdk/package.json    |  4 ++++
 packages/canonical-bridge-widget/CHANGELOG.md | 13 +++++++++++++
 packages/canonical-bridge-widget/package.json |  4 ++++
 7 files changed, 29 insertions(+), 16 deletions(-)
 delete mode 100644 .release/.changeset/honest-jeans-greet.md
 delete mode 100644 .release/.changeset/mean-falcons-yell.md
 delete mode 100644 .release/.changeset/tasty-gifts-brush.md

diff --git a/.release/.changeset/honest-jeans-greet.md b/.release/.changeset/honest-jeans-greet.md
deleted file mode 100644
index 8d7def6c..00000000
--- a/.release/.changeset/honest-jeans-greet.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@bnb-chain/canonical-bridge-widget": patch
----
-
-UI adjustment
diff --git a/.release/.changeset/mean-falcons-yell.md b/.release/.changeset/mean-falcons-yell.md
deleted file mode 100644
index 8d7def6c..00000000
--- a/.release/.changeset/mean-falcons-yell.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@bnb-chain/canonical-bridge-widget": patch
----
-
-UI adjustment
diff --git a/.release/.changeset/tasty-gifts-brush.md b/.release/.changeset/tasty-gifts-brush.md
deleted file mode 100644
index 9a986623..00000000
--- a/.release/.changeset/tasty-gifts-brush.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-"@bnb-chain/canonical-bridge-widget": minor
-"@bnb-chain/canonical-bridge-sdk": minor
----
-
-Support solana
diff --git a/packages/canonical-bridge-sdk/CHANGELOG.md b/packages/canonical-bridge-sdk/CHANGELOG.md
index d2737344..6d089d6e 100644
--- a/packages/canonical-bridge-sdk/CHANGELOG.md
+++ b/packages/canonical-bridge-sdk/CHANGELOG.md
@@ -1,5 +1,6 @@
 # @bnb-chain/canonical-bridge-sdk
 
+<<<<<<< HEAD
 ## 0.4.0-alpha.2
 
 ### Patch Changes
@@ -11,6 +12,13 @@
 ### Patch Changes
 
 - Fix phantom wallet deelink issue on mobile
+=======
+## 0.4.0
+
+### Minor Changes
+
+- a6db440: Support solana
+>>>>>>> 634d683a (chore: Update versions)
 
 ## 0.4.0-alpha.0
 
diff --git a/packages/canonical-bridge-sdk/package.json b/packages/canonical-bridge-sdk/package.json
index ad12d373..5e30d9d1 100644
--- a/packages/canonical-bridge-sdk/package.json
+++ b/packages/canonical-bridge-sdk/package.json
@@ -1,6 +1,10 @@
 {
   "name": "@bnb-chain/canonical-bridge-sdk",
+<<<<<<< HEAD
   "version": "0.4.0-alpha.2",
+=======
+  "version": "0.4.0",
+>>>>>>> 634d683a (chore: Update versions)
   "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 3fdf5fe1..4a8c96ff 100644
--- a/packages/canonical-bridge-widget/CHANGELOG.md
+++ b/packages/canonical-bridge-widget/CHANGELOG.md
@@ -1,5 +1,6 @@
 # @bnb-chain/canonical-bridge-widget
 
+<<<<<<< HEAD
 ## 0.5.0-alpha.4
 
 ### Patch Changes
@@ -11,6 +12,18 @@
 ### Patch Changes
 
 - Fix phantom wallet deelink issue on mobile
+=======
+## 0.5.0
+
+### Minor Changes
+
+- a6db440: Support solana
+
+### Patch Changes
+
+- e31ab8f: UI adjustment
+- 6ab36a6: UI adjustment
+>>>>>>> 634d683a (chore: Update versions)
 
 ## 0.5.0-alpha.2
 
diff --git a/packages/canonical-bridge-widget/package.json b/packages/canonical-bridge-widget/package.json
index 1f7ff2cf..37fb9d2b 100644
--- a/packages/canonical-bridge-widget/package.json
+++ b/packages/canonical-bridge-widget/package.json
@@ -1,6 +1,10 @@
 {
   "name": "@bnb-chain/canonical-bridge-widget",
+<<<<<<< HEAD
   "version": "0.5.0-alpha.4",
+=======
+  "version": "0.5.0",
+>>>>>>> 634d683a (chore: Update versions)
   "description": "canonical bridge widget",
   "author": "bnb-chain",
   "private": false,

From c2f5d2095e810b56b24d9f1a65fafd948a3c29b4 Mon Sep 17 00:00:00 2001
From: wenty22 <wenty.l@nodereal.io>
Date: Thu, 14 Nov 2024 17:26:08 +0800
Subject: [PATCH 26/29] feat: Support solana

---
 packages/canonical-bridge-sdk/package.json    | 4 ----
 packages/canonical-bridge-widget/package.json | 4 ----
 2 files changed, 8 deletions(-)

diff --git a/packages/canonical-bridge-sdk/package.json b/packages/canonical-bridge-sdk/package.json
index 5e30d9d1..221b0534 100644
--- a/packages/canonical-bridge-sdk/package.json
+++ b/packages/canonical-bridge-sdk/package.json
@@ -1,10 +1,6 @@
 {
   "name": "@bnb-chain/canonical-bridge-sdk",
-<<<<<<< HEAD
-  "version": "0.4.0-alpha.2",
-=======
   "version": "0.4.0",
->>>>>>> 634d683a (chore: Update versions)
   "description": "canonical bridge sdk",
   "author": "bnb-chain",
   "private": false,
diff --git a/packages/canonical-bridge-widget/package.json b/packages/canonical-bridge-widget/package.json
index 37fb9d2b..2478e32c 100644
--- a/packages/canonical-bridge-widget/package.json
+++ b/packages/canonical-bridge-widget/package.json
@@ -1,10 +1,6 @@
 {
   "name": "@bnb-chain/canonical-bridge-widget",
-<<<<<<< HEAD
-  "version": "0.5.0-alpha.4",
-=======
   "version": "0.5.0",
->>>>>>> 634d683a (chore: Update versions)
   "description": "canonical bridge widget",
   "author": "bnb-chain",
   "private": false,

From 37ee49de1e9befb89ed26c2a3f71cc49d6659c3b Mon Sep 17 00:00:00 2001
From: wenty22 <wenty.l@nodereal.io>
Date: Thu, 14 Nov 2024 17:29:19 +0800
Subject: [PATCH 27/29] docs: Clear code

---
 packages/canonical-bridge-widget/CHANGELOG.md | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/packages/canonical-bridge-widget/CHANGELOG.md b/packages/canonical-bridge-widget/CHANGELOG.md
index 8601fcd2..1f5a5eaa 100644
--- a/packages/canonical-bridge-widget/CHANGELOG.md
+++ b/packages/canonical-bridge-widget/CHANGELOG.md
@@ -21,10 +21,6 @@
 ### Patch Changes
 
 - e31ab8f: UI adjustment
-- 6ab36a6: UI adjustment <<<<<<< HEAD
-  > > > > > > > # 634d683a (chore: Update versions)
-  > > > > > > >
-  > > > > > > > main
 
 ## 0.5.0-alpha.2
 

From 6a2623b070c098a945b0aaa312563e94b9b97877 Mon Sep 17 00:00:00 2001
From: wenty22 <wenty.l@nodereal.io>
Date: Thu, 14 Nov 2024 17:40:44 +0800
Subject: [PATCH 28/29] fix: Add tips for solana transfer

---
 .release/.changeset/stale-files-kick.md                     | 6 ------
 .../{hip-ladybugs-attend.md => tough-toes-relax.md}         | 0
 .../src/modules/wallet/hooks/useSolanaAccount.ts            | 2 +-
 3 files changed, 1 insertion(+), 7 deletions(-)
 delete mode 100644 .release/.changeset/stale-files-kick.md
 rename .release/.changeset/{hip-ladybugs-attend.md => tough-toes-relax.md} (100%)

diff --git a/.release/.changeset/stale-files-kick.md b/.release/.changeset/stale-files-kick.md
deleted file mode 100644
index 3ef14dad..00000000
--- a/.release/.changeset/stale-files-kick.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-"@bnb-chain/canonical-bridge-widget": patch
-"@bnb-chain/canonical-bridge-sdk": patch
----
-
-Fix phantom wallet deelink issue on mobile
diff --git a/.release/.changeset/hip-ladybugs-attend.md b/.release/.changeset/tough-toes-relax.md
similarity index 100%
rename from .release/.changeset/hip-ladybugs-attend.md
rename to .release/.changeset/tough-toes-relax.md
diff --git a/packages/canonical-bridge-widget/src/modules/wallet/hooks/useSolanaAccount.ts b/packages/canonical-bridge-widget/src/modules/wallet/hooks/useSolanaAccount.ts
index 8d2aa4c3..23484709 100644
--- a/packages/canonical-bridge-widget/src/modules/wallet/hooks/useSolanaAccount.ts
+++ b/packages/canonical-bridge-widget/src/modules/wallet/hooks/useSolanaAccount.ts
@@ -11,6 +11,6 @@ export function useSolanaAccount() {
   return {
     address: publicKey?.toBase58(),
     isConnected: connected,
-    chainId: solana?.id,
+    chainId: connected ? solana?.id : undefined,
   };
 }

From b5342f4a8b1e25f00721f152ba7e02eb724a8504 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Thu, 14 Nov 2024 09:47:05 +0000
Subject: [PATCH 29/29] chore: Update versions

---
 .release/.changeset/tough-toes-relax.md       | 6 ------
 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 +-
 5 files changed, 14 insertions(+), 8 deletions(-)
 delete mode 100644 .release/.changeset/tough-toes-relax.md

diff --git a/.release/.changeset/tough-toes-relax.md b/.release/.changeset/tough-toes-relax.md
deleted file mode 100644
index c5d12dc5..00000000
--- a/.release/.changeset/tough-toes-relax.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-"@bnb-chain/canonical-bridge-widget": patch
-"@bnb-chain/canonical-bridge-sdk": patch
----
-
-Solana requires wallet have at least 0.05SOL to enabled a tx.
diff --git a/packages/canonical-bridge-sdk/CHANGELOG.md b/packages/canonical-bridge-sdk/CHANGELOG.md
index a3fc7ad8..68841823 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.1
+
+### Patch Changes
+
+- 6a2623b: Solana requires wallet have at least 0.05SOL to enabled a tx.
+
 ## 0.4.0-alpha.2
 
 ### Patch Changes
diff --git a/packages/canonical-bridge-sdk/package.json b/packages/canonical-bridge-sdk/package.json
index 221b0534..cf4bb52a 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.0",
+  "version": "0.4.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 1f5a5eaa..f7ef9c59 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.1
+
+### Patch Changes
+
+- 6a2623b: Solana requires wallet have at least 0.05SOL to enabled a tx.
+
 ## 0.5.0-alpha.4
 
 ### Patch Changes
diff --git a/packages/canonical-bridge-widget/package.json b/packages/canonical-bridge-widget/package.json
index 2478e32c..3982eefb 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.0",
+  "version": "0.5.1",
   "description": "canonical bridge widget",
   "author": "bnb-chain",
   "private": false,