feat: Some ui updates & Header chain switch update

.release/.changeset/polite-monkeys-share.md

@@ -0,0 +1,5 @@
+---
+"@bnb-chain/canonical-bridge-widget": patch
+---
+
+Update unknown network title

.release/.changeset/pre.json

@@ -0,0 +1,13 @@
+{
+  "mode": "pre",
+  "tag": "alpha",
+  "initialVersions": {
+    "@bnb-chain/canonical-bridge-sdk": "0.1.2",
+    "@bnb-chain/canonical-bridge-widget": "0.1.4"
+  },
+  "changesets": [
+    "polite-monkeys-share",
+    "rare-grapes-act",
+    "sixty-scissors-protect"
+  ]
+}

.release/.changeset/rare-grapes-act.md

@@ -0,0 +1,5 @@
+---
+"@bnb-chain/canonical-bridge-widget": patch
+---
+
+Some ui updates & Header chain switch update

.release/.changeset/sixty-scissors-protect.md

@@ -0,0 +1,5 @@
+---
+"@bnb-chain/canonical-bridge-widget": patch
+---
+
+Update ui

packages/canonical-bridge-widget/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @bnb-chain/canonical-bridge-widget
 
+## 0.3.2-alpha.0
+
+### Patch Changes
+
+- Update ui
+
 ## 0.3.1
 
 ### Patch Changes

packages/canonical-bridge-widget/package.json

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

packages/canonical-bridge-widget/src/core/locales/en.ts

@@ -96,6 +96,8 @@ export const en = {
   'select-modal.destination.incompatible.tooltip':
     'The token you’ve selected is incompatible with this network. Please select another token.',
 
+  'wallet.network.switch-network': 'Please switch the network',
+  'wallet.network.unknown-network': 'Unsupported Network',
   'wallet.button.connect-wallet': 'Connect Wallet',
   'wallet.network.wrong-network': 'Wrong network',
   'wallet.error.switch-network':

packages/canonical-bridge-widget/src/modules/aggregator/hooks/useDefaultSelectedInfo.ts

@@ -1,4 +1,5 @@
 import { useEffect } from 'react';
+import { useAccount } from 'wagmi';
 
 import { useAppDispatch } from '@/modules/store/StoreProvider';
 import { setSendValue } from '@/modules/transfer/action';
@@ -9,12 +10,13 @@ export function useDefaultSelectedInfo() {
   const { isReady, defaultSelectedInfo } = useAggregator();
   const { selectDefault } = useSelection();
   const dispatch = useAppDispatch();
+  const { chainId } = useAccount();
 
   useEffect(() => {
     if (isReady) {
       selectDefault(defaultSelectedInfo);
       dispatch(setSendValue(defaultSelectedInfo.amount));
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isReady]);
+  }, [isReady, chainId]);
 }

packages/canonical-bridge-widget/src/modules/aggregator/hooks/useSelection.ts

@@ -1,4 +1,4 @@
-import { useChains } from 'wagmi';
+import { useChains, useAccount } from 'wagmi';
 import { useCallback } from 'react';
 
 import { useAggregator } from '@/modules/aggregator/components/AggregatorProvider';
@@ -18,7 +18,9 @@ import { useTronWeb } from '@/core/hooks/useTronWeb';
 import { useCurrentWallet } from '@/modules/wallet/CurrentWalletProvider';
 
 export function useSelection() {
-  const { getFromChains, getToChains, getTokens, getToToken, adapters } = useAggregator();
+  const { chainId } = useAccount();
+  const { getFromChains, getToChains, getTokens, getToToken, adapters, defaultSelectedInfo } =
+    useAggregator();
 
   const fromChain = useAppSelector((state) => state.transfer.fromChain);
   const toChain = useAppSelector((state) => state.transfer.toChain);
@@ -79,6 +81,38 @@ export function useSelection() {
     });
   };
 
+  const selectFromChain = async (tmpFromChain: IBridgeChain) => {
+    // After selecting fromChain, if toChain becomes incompatible, reselect the first compatible network in toChain list.
+    const toChains = getToChains({
+      fromChainId: tmpFromChain.id,
+    });
+    const tmpToChain =
+      toChains.find((c) => isChainOrTokenCompatible(c) && c.id === toChain?.id) ??
+      toChains.find((c) => isChainOrTokenCompatible(c) && c.chainType !== 'link');
+
+    const tmpTokens = await getSortedTokens({
+      chainType: tmpFromChain.chainType,
+      fromChainId: tmpFromChain.id,
+      tokens: getTokens({
+        fromChainId: tmpFromChain.id,
+        toChainId: tmpToChain?.id,
+      }),
+    });
+
+    const newToken =
+      tmpTokens.find(
+        (t) =>
+          isChainOrTokenCompatible(t) &&
+          t.displaySymbol.toUpperCase() === selectedToken?.displaySymbol.toUpperCase(),
+      ) ?? tmpTokens.find((t) => isChainOrTokenCompatible(t));
+
+    updateSelectedInfo({
+      tmpToken: newToken,
+      tmpFromChain,
+      tmpToChain,
+    });
+  };
+
   return {
     async selectDefault({
       fromChainId,
@@ -94,6 +128,15 @@ export function useSelection() {
         bridgeTypes.map((item) => [item, { symbol: tokenSymbol }]),
       ) as any as IBridgeToken;
 
+      if (chainId && chainId !== defaultSelectedInfo.fromChainId) {
+        const fromChains = getFromChains({});
+        const chain = fromChains.find((chain) => chain.id === chainId);
+        if (chain) {
+          selectFromChain(chain);
+          return;
+        }
+      }
+
       const fromChains = getFromChains({
         toChainId,
         token,
@@ -123,44 +166,11 @@ export function useSelection() {
         token: newToken,
       });
     },
-
-    async selectFromChain(tmpFromChain: IBridgeChain) {
-      // After selecting fromChain, if toChain becomes incompatible, reselect the first compatible network in toChain list.
-      const toChains = getToChains({
-        fromChainId: tmpFromChain.id,
-      });
-      const tmpToChain =
-        toChains.find((c) => isChainOrTokenCompatible(c) && c.id === toChain?.id) ??
-        toChains.find((c) => isChainOrTokenCompatible(c) && c.chainType !== 'link');
-
-      const tmpTokens = await getSortedTokens({
-        chainType: tmpFromChain.chainType,
-        fromChainId: tmpFromChain.id,
-        tokens: getTokens({
-          fromChainId: tmpFromChain.id,
-          toChainId: tmpToChain?.id,
-        }),
-      });
-
-      const newToken =
-        tmpTokens.find(
-          (t) =>
-            isChainOrTokenCompatible(t) &&
-            t.displaySymbol.toUpperCase() === selectedToken?.displaySymbol.toUpperCase(),
-        ) ?? tmpTokens.find((t) => isChainOrTokenCompatible(t));
-
-      updateSelectedInfo({
-        tmpToken: newToken,
-        tmpFromChain,
-        tmpToChain,
-      });
-    },
-
+    selectFromChain,
     async selectToChain(tmpToChain: IBridgeChain) {
       const fromChainId = fromChain!.id;
 
       const tmpTokens = await getSortedTokens({
-        chainType: fromChain?.chainType,
         fromChainId,
         tokens: getTokens({
           fromChainId,

packages/canonical-bridge-widget/src/modules/transfer/components/Button/SwitchNetworkButton.tsx

@@ -1,10 +1,10 @@
-import { Button, useColorMode, useIntl, useTheme } from '@bnb-chain/space';
+import { Button, useColorMode, useIntl, useTheme, ButtonProps } from '@bnb-chain/space';
 
 import { useAppSelector } from '@/modules/store/StoreProvider';
 import { reportEvent } from '@/core/utils/gtm';
 import { useCurrentWallet } from '@/modules/wallet/CurrentWalletProvider';
 
-export const SwitchNetworkButton = () => {
+export const SwitchNetworkButton = (props: ButtonProps) => {
   const { formatMessage } = useIntl();
 
   const fromChain = useAppSelector((state) => state.transfer.fromChain);
@@ -36,6 +36,7 @@ export const SwitchNetworkButton = () => {
           },
         });
       }}
+      {...props}
     >
       {formatMessage({ id: 'transfer.button.switch-network' })}
     </Button>

packages/canonical-bridge-widget/src/modules/transfer/components/FromSection/index.tsx

@@ -1,12 +1,4 @@
-import {
-  Flex,
-  Typography,
-  useBreakpointValue,
-  useColorMode,
-  useDisclosure,
-  useIntl,
-  useTheme,
-} from '@bnb-chain/space';
+import { Flex, Typography, useColorMode, useDisclosure, useIntl, useTheme } from '@bnb-chain/space';
 
 import { SelectButton } from '@/modules/transfer/components/SelectButton';
 import { useAppSelector } from '@/modules/store/StoreProvider';
@@ -16,26 +8,27 @@ import { SourceNetworkModal } from '@/modules/aggregator/components/SelectModal/
 export function FromSection() {
   const { colorMode } = useColorMode();
   const { isOpen, onClose, onOpen } = useDisclosure();
-  const isBase = useBreakpointValue({ base: true, md: false }) ?? false;
   const { formatMessage } = useIntl();
 
   const fromChain = useAppSelector((state) => state.transfer.fromChain);
   const theme = useTheme();
 
   return (
     <Flex flexDir="column" gap={'12px'} w={'100%'} flex={1} h={'64px'}>
-      {isBase ? (
-        <Flex alignItems="center" justifyContent={'space-between'}>
-          <Typography
-            variant="body"
-            lineHeight={'16px'}
-            size={'sm'}
-            color={theme.colors[colorMode].text.placeholder}
-          >
-            {formatMessage({ id: 'from.section.title' })}
-          </Typography>
-        </Flex>
-      ) : null}
+      <Flex
+        alignItems="center"
+        justifyContent={'space-between'}
+        display={{ base: 'flex', md: 'none' }}
+      >
+        <Typography
+          variant="body"
+          lineHeight={'16px'}
+          size={'sm'}
+          color={theme.colors[colorMode].text.placeholder}
+        >
+          {formatMessage({ id: 'from.section.title' })}
+        </Typography>
+      </Flex>
 
       <SelectButton
         isActive={isOpen}

packages/canonical-bridge-widget/src/modules/transfer/components/NetWorkSection/index.tsx

@@ -1,11 +1,4 @@
-import {
-  Flex,
-  Typography,
-  useBreakpointValue,
-  useColorMode,
-  useIntl,
-  useTheme,
-} from '@bnb-chain/space';
+import { Flex, Typography, useColorMode, useIntl, useTheme } from '@bnb-chain/space';
 
 import { TransferToIcon } from '@/core/components/icons/TransferToIcon';
 import { FromSection } from '@/modules/transfer/components/FromSection';
@@ -15,36 +8,37 @@ export const NetWorkSection = () => {
   const { formatMessage } = useIntl();
   const { colorMode } = useColorMode();
   const theme = useTheme();
-  const isBase = useBreakpointValue({ base: true, md: false }) ?? false;
 
   return (
     <Flex flexDir={'column'} gap={'12px'}>
-      {!isBase ? (
-        <>
-          <Flex flexDir={'row'}>
-            <Flex alignItems="center" justifyContent={'space-between'} flex={1}>
-              <Typography
-                variant="body"
-                size={'sm'}
-                lineHeight={'16px'}
-                color={theme.colors[colorMode].text.placeholder}
-              >
-                {formatMessage({ id: 'from.section.title' })}
-              </Typography>
-            </Flex>
-            <Flex alignItems="center" justifyContent={'space-between'} flex={1} ml="49px">
-              <Typography
-                variant="body"
-                lineHeight={'16px'}
-                size={'sm'}
-                color={theme.colors[colorMode].text.placeholder}
-              >
-                {formatMessage({ id: 'to.section.title' })}
-              </Typography>
-            </Flex>
-          </Flex>{' '}
-        </>
-      ) : null}
+      <Flex flexDir={'row'} display={{ base: 'none', md: 'flex' }}>
+        <Flex alignItems="center" justifyContent={'space-between'} flex={1}>
+          <Typography
+            variant="body"
+            size={'sm'}
+            lineHeight={'16px'}
+            color={theme.colors[colorMode].text.placeholder}
+          >
+            {formatMessage({ id: 'from.section.title' })}
+          </Typography>
+        </Flex>
+        <Flex
+          alignItems="center"
+          justifyContent={'space-between'}
+          flex={1}
+          ml="49px"
+          display={{ base: 'none', md: 'flex' }}
+        >
+          <Typography
+            variant="body"
+            lineHeight={'16px'}
+            size={'sm'}
+            color={theme.colors[colorMode].text.placeholder}
+          >
+            {formatMessage({ id: 'to.section.title' })}
+          </Typography>
+        </Flex>
+      </Flex>{' '}
       <Flex
         flexDir={['column', 'column', 'row']}
         justifyContent={'space-between'}
@@ -53,7 +47,7 @@ export const NetWorkSection = () => {
         minW={0}
       >
         <FromSection />
-        <TransferToIcon w={'24px'} h={'24px'} transform={!isBase ? '' : 'rotate(90deg)'} />
+        <TransferToIcon w={'24px'} h={'24px'} transform={{ base: 'rotate(90deg)', md: 'none' }} />
         <ToSection />
       </Flex>
     </Flex>