feat: Some ui updates & Header chain switch update

bnb-chain · Oct 23, 2024 · 101199d · 101199d
1 parent b573854
commit 101199d
Show file tree

Hide file tree

Showing 14 changed files with 380 additions and 290 deletions.
diff --git a/.release/.changeset/big-spoons-clean.md b/.release/.changeset/big-spoons-clean.md
@@ -0,0 +1,5 @@
+---
+"@bnb-chain/canonical-bridge-widget": patch
+---
+
+Some ui updates & Header chain switch update
diff --git a/apps/canonical-bridge-ui/core/locales/en.ts b/apps/canonical-bridge-ui/core/locales/en.ts
@@ -87,6 +87,7 @@ 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.wrong-network': 'Wrong network',
   'wallet.error.switch-network':
     'An error occurred when attempting to switch the network. Please select another network or try again.',

diff --git a/packages/canonical-bridge-widget/src/modules/aggregator/hooks/useDefaultSelectedInfo.ts b/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]);
 }
diff --git a/packages/canonical-bridge-widget/src/modules/aggregator/hooks/useSelection.ts b/packages/canonical-bridge-widget/src/modules/aggregator/hooks/useSelection.ts
@@ -11,7 +11,9 @@ import { getTokenBalances } from '@/modules/aggregator/shared/getTokenBalances';
 import { sortTokens } from '@/modules/aggregator/shared/sortTokens';
 
 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);
@@ -72,6 +74,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({
+      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,
@@ -87,6 +121,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,
@@ -116,38 +159,7 @@ 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({
-        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;
 

diff --git a/...es/canonical-bridge-widget/src/modules/transfer/components/Button/SwitchNetworkButton.tsx b/...es/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 { useEvmSwitchChain } from '@/modules/wallet/hooks/useEvmSwitchChain';
 import { reportEvent } from '@/core/utils/gtm';
 
-export const SwitchNetworkButton = () => {
+export const SwitchNetworkButton = (props: ButtonProps) => {
   const { formatMessage } = useIntl();
 
   const fromChain = useAppSelector((state) => state.transfer.fromChain);
@@ -35,6 +35,7 @@ export const SwitchNetworkButton = () => {
           });
         }
       }}
+      {...props}
     >
       {formatMessage({ id: 'transfer.button.switch-network' })}
     </Button>

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
@@ -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}

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
@@ -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,44 +8,45 @@ 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'}
         alignItems={'center'}
         gap={['16px', '16px', '16px', '12px']}
       >
         <FromSection />
-        <TransferToIcon w={'24px'} h={'24px'} transform={!isBase ? '' : 'rotate(90deg)'} />
+        <TransferToIcon w={'24px'} h={'24px'} transform={{ base: 'rotate(90deg)', md: 'none' }} />
         <ToSection />
       </Flex>
     </Flex>

diff --git a/...es/canonical-bridge-widget/src/modules/transfer/components/ReceiveInfo/ReceiveLoading.tsx b/...es/canonical-bridge-widget/src/modules/transfer/components/ReceiveInfo/ReceiveLoading.tsx
@@ -1,41 +1,45 @@
-import { Flex, Skeleton, SkeletonCircle, useBreakpointValue } from '@bnb-chain/space';
+import { Flex, Skeleton, SkeletonCircle } from '@bnb-chain/space';
 
 export const ReceiveLoading = () => {
-  const isBase = useBreakpointValue({ base: true, lg: false }) ?? false;
-
-  return !isBase ? (
-    <Flex flexDir={'column'} gap={'8px'}>
-      <Flex gap={'8px'} mb={'2px'}>
-        <Skeleton height={'24px'} width={'160px'} />
-        <Skeleton height={'24px'} width={'80px'} />
-      </Flex>
-      <Skeleton height={'12px'} maxW={'333px'} width={'100%'} />
-      <Skeleton height={'12px'} maxW={'371px'} width={'100%'} />
-    </Flex>
-  ) : (
-    <Flex flexDir={'row'} alignItems={'flex-start'} justifyContent={'space-between'} gap={'23px'}>
-      <Flex flexDir={'column'} flex={1} gap={'8px'}>
-        <Flex gap={'8px'} mb={'2px'} flexDir={'row'}>
-          <Skeleton height={'12px'} flexBasis={'66%'} />
-          <Skeleton height={'12px'} flexBasis={'33%'} />
-        </Flex>
+  return (
+    <>
+      <Flex flexDir={'column'} gap={'8px'} display={{ base: 'none', lg: 'flex' }}>
         <Flex gap={'8px'} mb={'2px'}>
-          <Skeleton height={'24px'} flexBasis={'66%'} />
-          <Skeleton height={'24px'} flexBasis={'33%'} />
+          <Skeleton height={'24px'} width={'160px'} />
+          <Skeleton height={'24px'} width={'80px'} />
         </Flex>
+        <Skeleton height={'12px'} maxW={'333px'} width={'100%'} />
+        <Skeleton height={'12px'} maxW={'371px'} width={'100%'} />
+      </Flex>
+      <Flex
+        display={{ base: 'flex', lg: 'none' }}
+        flexDir={'row'}
+        alignItems={'flex-start'}
+        justifyContent={'space-between'}
+        gap={'23px'}
+      >
+        <Flex flexDir={'column'} flex={1} gap={'8px'}>
+          <Flex gap={'8px'} mb={'2px'} flexDir={'row'}>
+            <Skeleton height={'12px'} flexBasis={'66%'} />
+            <Skeleton height={'12px'} flexBasis={'33%'} />
+          </Flex>
+          <Flex gap={'8px'} mb={'2px'}>
+            <Skeleton height={'24px'} flexBasis={'66%'} />
+            <Skeleton height={'24px'} flexBasis={'33%'} />
+          </Flex>
 
-        <Flex gap={'8px'} mb={'2px'}>
-          <Skeleton height={'16px'} width={'100%'} borderRadius={'4px'} />
-        </Flex>
-        <Flex gap={'8px'} mb={'2px'}>
-          <Skeleton height={'16px'} width={'100%'} borderRadius={'4px'} />
-        </Flex>
-        <Flex gap={'8px'} mb={'2px'}>
-          <Skeleton height={'16px'} width={'100%'} borderRadius={'4px'} />
+          <Flex gap={'8px'} mb={'2px'}>
+            <Skeleton height={'16px'} width={'100%'} borderRadius={'4px'} />
+          </Flex>
+          <Flex gap={'8px'} mb={'2px'}>
+            <Skeleton height={'16px'} width={'100%'} borderRadius={'4px'} />
+          </Flex>
+          <Flex gap={'8px'} mb={'2px'}>
+            <Skeleton height={'16px'} width={'100%'} borderRadius={'4px'} />
+          </Flex>
         </Flex>
+        <SkeletonCircle w={'32px'} h={'32px'} />
       </Flex>
-
-      <SkeletonCircle w={'32px'} h={'32px'} />
-    </Flex>
+    </>
   );
 };