feat: Validate token and bridge addresses

apps/canonical-bridge-ui/core/components/icons/SvgDefs.tsx

@@ -0,0 +1,69 @@
+import { Icon } from '@bnb-chain/space';
+
+export function SvgDefs() {
+  return (
+    <Icon
+      position={'absolute'}
+      w={0}
+      h={0}
+      viewBox="0 0 440 280"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <clipPath id="clip0_9685_21608">
+        <rect width="18" height="15" fill="white" transform="translate(3 4)" />
+      </clipPath>
+
+      <mask id="mask0_18_3" maskUnits="userSpaceOnUse" x="0" y="0" width="65" height="65">
+        <path
+          d="M7.30721 0C3.27132 0 0 3.59886 0 8.03839V56.9616C0 61.4011 3.27132 65 7.30721 65H57.6928C61.7283 65 65 61.4011 65 56.9616V8.03839C65 3.59886 61.7283 0 57.6928 0H7.30721Z"
+          fill="white"
+        />
+      </mask>
+
+      <linearGradient
+        id="paint0_linear_18_3"
+        x1="537.383"
+        y1="266.088"
+        x2="6244.77"
+        y2="6544.28"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#145ECC" />
+        <stop offset="1" stopColor="#1260CC" />
+      </linearGradient>
+
+      <clipPath id="clip0_18_3">
+        <rect width="65" height="65" fill="white" />
+      </clipPath>
+
+      <linearGradient
+        id="paint0_linear_7476_132116"
+        x1="4.77107"
+        y1="21.3854"
+        x2="7.65309"
+        y2="0.538518"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop offset="0.26" stopColor="#48FF91" />
+        <stop offset="0.66" stopColor="#0094FF" />
+        <stop offset="0.8" stopColor="#0038FF" />
+        <stop offset="0.89" stopColor="#0500FF" />
+      </linearGradient>
+
+      <linearGradient
+        id="paint1_linear_7476_132116"
+        x1="11.7182"
+        y1="21.3853"
+        x2="17.1746"
+        y2="1.64876"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop offset="0.26" stopColor="#48FF91" />
+        <stop offset="0.66" stopColor="#0094FF" />
+        <stop offset="0.8" stopColor="#0038FF" />
+        <stop offset="0.89" stopColor="#0500FF" />
+      </linearGradient>
+    </Icon>
+  );
+}

apps/canonical-bridge-ui/core/components/icons/wallets/PhantomIcon.tsx

@@ -10,11 +10,6 @@ export function PhantomIcon(props: IconProps) {
           fill="#AB9FF2"
         />
       </g>
-      <defs>
-        <clipPath id="clip0_9685_21608">
-          <rect width="18" height="15" fill="white" transform="translate(3 4)" />
-        </clipPath>
-      </defs>
     </Icon>
   );
 }

apps/canonical-bridge-ui/core/components/icons/wallets/TronLinkIcon.tsx

@@ -8,12 +8,6 @@ export function TronLinkIcon(props: IconProps) {
           d="M7.30721 0C3.27132 0 0 3.59886 0 8.03839V56.9616C0 61.4011 3.27132 65 7.30721 65H57.6928C61.7283 65 65 61.4011 65 56.9616V8.03839C65 3.59886 61.7283 0 57.6928 0H7.30721Z"
           fill="url(#paint0_linear_18_3)"
         />
-        <mask id="mask0_18_3" maskUnits="userSpaceOnUse" x="0" y="0" width="65" height="65">
-          <path
-            d="M7.30721 0C3.27132 0 0 3.59886 0 8.03839V56.9616C0 61.4011 3.27132 65 7.30721 65H57.6928C61.7283 65 65 61.4011 65 56.9616V8.03839C65 3.59886 61.7283 0 57.6928 0H7.30721Z"
-            fill="white"
-          />
-        </mask>
         <g mask="url(#mask0_18_3)">
           <path
             fillRule="evenodd"
@@ -23,22 +17,6 @@ export function TronLinkIcon(props: IconProps) {
           />
         </g>
       </g>
-      <defs>
-        <linearGradient
-          id="paint0_linear_18_3"
-          x1="537.383"
-          y1="266.088"
-          x2="6244.77"
-          y2="6544.28"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop stopColor="#145ECC" />
-          <stop offset="1" stopColor="#1260CC" />
-        </linearGradient>
-        <clipPath id="clip0_18_3">
-          <rect width="65" height="65" fill="white" />
-        </clipPath>
-      </defs>
     </Icon>
   );
 }

apps/canonical-bridge-ui/core/components/icons/wallets/TrustWalletIcon.tsx

@@ -16,34 +16,6 @@ export function TrustWalletIcon(props: IconProps) {
         d="M18.6662 6.66673L12.0003 4.5V19.5C16.7622 17.4998 18.6662 13.6665 18.6662 11.5001V6.66673Z"
         fill="url(#paint1_linear_7476_132116)"
       />
-      <defs>
-        <linearGradient
-          id="paint0_linear_7476_132116"
-          x1="4.77107"
-          y1="21.3854"
-          x2="7.65309"
-          y2="0.538518"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop offset="0.26" stopColor="#48FF91" />
-          <stop offset="0.66" stopColor="#0094FF" />
-          <stop offset="0.8" stopColor="#0038FF" />
-          <stop offset="0.89" stopColor="#0500FF" />
-        </linearGradient>
-        <linearGradient
-          id="paint1_linear_7476_132116"
-          x1="11.7182"
-          y1="21.3853"
-          x2="17.1746"
-          y2="1.64876"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop offset="0.26" stopColor="#48FF91" />
-          <stop offset="0.66" stopColor="#0094FF" />
-          <stop offset="0.8" stopColor="#0038FF" />
-          <stop offset="0.89" stopColor="#0500FF" />
-        </linearGradient>
-      </defs>
     </Icon>
   );
 }

apps/canonical-bridge-ui/pages/_app.tsx

@@ -4,6 +4,7 @@ import Head from 'next/head';
 import { AppProps } from 'next/app';
 
 import { ThemeProvider } from '@/core/components/ThemeProvider';
+import { SvgDefs } from '@/core/components/icons/SvgDefs';
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -23,6 +24,7 @@ export default function App({ Component, ...restProps }: AppProps) {
       </Head>
       <ThemeProvider>
         <QueryClientProvider client={queryClient}>
+          <SvgDefs />
           <Component {...restProps.pageProps} />
         </QueryClientProvider>
       </ThemeProvider>

packages/canonical-bridge-widget/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @bnb-chain/canonical-bridge-widget
 
+## 0.5.4
+
+### Patch Changes
+
+- 8d3b6d1: Support custom breakpoints
+- b95b3ab: Fix wallet issues
+- fb73ca4: Fix wallet issues
+- da03355: Remove delayTime for wallet
+- bcf65ef: Fix colorMode does not follow the parameter
+- 6d78c07: Fix wallet issues
+- 3146b01: Support custom connect wallet button
+- dc0fcac: Show all tokens in token list with different token address
+- cdf450d: Separate wallet component
+- 0f6c74c: Add log for solana
+
+## 0.5.4-alpha.4
+
+### Patch Changes
+
+- Fix colorMode does not follow the parameter
+
 ## 0.5.4-alpha.3
 
 ### Patch Changes

packages/canonical-bridge-widget/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bnb-chain/canonical-bridge-widget",
-  "version": "0.5.4-alpha.3",
+  "version": "0.5.4",
   "description": "canonical bridge widget",
   "author": "bnb-chain",
   "private": false,

packages/canonical-bridge-widget/src/CanonicalBridgeProvider.tsx

@@ -1,9 +1,9 @@
 import React, { useContext, useMemo } from 'react';
-import { ColorMode, IntlProvider } from '@bnb-chain/space';
+import { ColorMode, IntlProvider, theme } from '@bnb-chain/space';
 
 import { ChainType, IChainConfig, ITransferConfig } from '@/modules/aggregator/types';
 import { StoreProvider } from '@/modules/store/StoreProvider';
-import { ThemeProvider, ThemeProviderProps } from '@/core/theme/ThemeProvider';
+import { ThemeProvider } from '@/core/theme/ThemeProvider';
 import { AggregatorProvider } from '@/modules/aggregator/components/AggregatorProvider';
 import { TokenBalancesProvider } from '@/modules/aggregator/components/TokenBalancesProvider';
 import { TokenPricesProvider } from '@/modules/aggregator/components/TokenPricesProvider';
@@ -17,7 +17,12 @@ export interface ICanonicalBridgeConfig {
 
   appearance: {
     colorMode?: ColorMode;
-    theme?: ThemeProviderProps['themeConfig'];
+    theme?: {
+      dark?: any;
+      light?: any;
+      fontFamily?: string;
+      breakpoints?: Partial<typeof theme.breakpoints>;
+    };
     locale?: string;
     messages?: Record<string, string>;
     bridgeTitle?: string;
@@ -75,7 +80,7 @@ export function CanonicalBridgeProvider(props: CanonicalBridgeProviderProps) {
 
       appearance: {
         bridgeTitle: 'BNB Chain Cross-Chain Bridge',
-        mode: 'dark',
+        colorMode: 'dark',
         locale: 'en',
         messages: locales.en,
         ...config.appearance,
@@ -100,10 +105,7 @@ export function CanonicalBridgeProvider(props: CanonicalBridgeProviderProps) {
       <StoreProvider>
         <IntlProvider locale={value.appearance.locale!} messages={value.appearance.messages}>
           <AggregatorProvider transferConfig={transferConfig} chains={chains}>
-            <ThemeProvider
-              themeConfig={value.appearance.theme}
-              colorMode={value.appearance.colorMode}
-            >
+            <ThemeProvider>
               <TronAccountProvider>
                 <TokenBalancesProvider />
                 <TokenPricesProvider />

packages/canonical-bridge-widget/src/core/constants/index.ts

@@ -15,6 +15,11 @@ export const DEFAULT_ADDRESS = '0x6836CbaCbBd1E798cC56802AC7d8BDf6Da0d0980';
 export const DEFAULT_TRON_ADDRESS = 'TTb3A6ASFejJuGcM1UVcRCJA23WGiJKSiY';
 export const DEFAULT_SOLANA_ADDRESS = 'J7JYXS8PMMBgfFKP1bqUu7mGgWyWUDL9xqfYujznc61r';
 
+export const CBRIDGE_ENDPOINT = 'https://cbridge-prod2.celer.app/v2';
+export const DEBRIDGE_ENDPOINT = 'https://deswap.debridge.finance/v1.0';
+export const STARGATE_ENDPOINT = 'https://mainnet.stargate-api.com/v1/metadata?version=v2';
+export const MESON_ENDPOINT = 'https://relayer.meson.fi/api/v1';
+
 export const nativeTokenMap = {
   1: 'ETH',
   10: 'ETH',

packages/canonical-bridge-widget/src/core/theme/ThemeProvider.tsx

@@ -1,4 +1,4 @@
-import { ChakraProvider, theme, createLocalStorageManager, ColorMode } from '@bnb-chain/space';
+import { ChakraProvider, ColorMode, theme } from '@bnb-chain/space';
 import { useMemo } from 'react';
 import { merge } from 'lodash';
 
@@ -8,24 +8,13 @@ import { walletStyles } from '@/core/theme/walletStyles';
 import { useBridgeConfig } from '@/CanonicalBridgeProvider';
 
 export interface ThemeProviderProps {
-  colorMode?: ColorMode;
   children: React.ReactNode;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  themeConfig?: {
-    dark?: any;
-    light?: any;
-    fontFamily?: string;
-    breakpoints?: Partial<typeof theme.breakpoints>;
-  };
 }
 
-export const ThemeProvider = ({
-  children,
-  colorMode = 'dark',
-  themeConfig,
-}: ThemeProviderProps) => {
-  const { appName: APP_NAME } = useBridgeConfig();
-  const colorModeManager = createLocalStorageManager(`${APP_NAME}-color-mode`);
+export const ThemeProvider = ({ children }: ThemeProviderProps) => {
+  const { appearance } = useBridgeConfig();
+  const { theme: themeConfig, colorMode } = appearance;
+
   const customTheme = useMemo(() => {
     return {
       ...theme,
@@ -57,7 +46,13 @@ export const ThemeProvider = ({
 
   return (
     <ChakraProvider
-      colorModeManager={colorModeManager}
+      colorModeManager={{
+        type: 'localStorage',
+        get() {
+          return colorMode;
+        },
+        set() {},
+      }}
       theme={customTheme}
       toastOptions={{
         defaultOptions: {