feat: final

.husky/pre-commit

@@ -6,4 +6,4 @@ if [ -t 2 ]; then
   exec >/dev/tty 2>&1
 fi
 
-pnpm lint-staged -c .lintstagedrc
+pnpm lint-staged -c .lintstagedrc && pnpm files:check

apps/evm/src/pages/Bridge/Bridge.style.tsx

@@ -1,5 +1,5 @@
-import { Button, Card, Flex } from '@gobob/ui';
-import styled, { css } from 'styled-components';
+import { Card, Flex } from '@gobob/ui';
+import styled from 'styled-components';
 
 const StyledFlex = styled(Flex)`
   width: 100%;
@@ -9,39 +9,4 @@ const StyledCard = styled(Card)`
   width: 100%;
 `;
 
-const StyledBannerContent = styled(Flex)`
-  z-index: 1;
-`;
-
-const StyledBanner = styled(Card)`
-  position: relative;
-  text-decoration: none;
-  overflow: hidden;
-`;
-
-const StyledBannerImg = styled.img`
-  position: absolute;
-  right: 0;
-  top: 0;
-  height: 100%;
-  opacity: 0.5;
-
-  ${({ theme }) => {
-    return css`
-      transform: scale(4);
-
-      @media ${theme.breakpoints.up('s')} {
-        transform: scale(6) translateX(-15%);
-      }
-    `;
-  }}
-`;
-
-const StyledBannerCloseBtn = styled(Button)`
-  position: absolute;
-  top: ${({ theme }) => theme.spacing('s')};
-  right: ${({ theme }) => theme.spacing('s')};
-  z-index: 2;
-`;
-
-export { StyledFlex, StyledCard, StyledBannerImg, StyledBannerContent, StyledBannerCloseBtn, StyledBanner };
+export { StyledCard, StyledFlex };

apps/evm/src/pages/Bridge/Bridge.tsx

@@ -1,9 +1,10 @@
 import { Tabs, TabsItem } from '@gobob/ui';
 import { Key, useCallback, useEffect, useState } from 'react';
-import { useLocation, useSearchParams } from 'react-router-dom';
+import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
+import { ChainId } from '@gobob/chains';
 
 import { Main } from '../../components';
-import { L1_CHAIN, L2_CHAIN } from '../../constants';
+import { L1_CHAIN, L2_CHAIN, RoutesPath } from '../../constants';
 
 import { StyledCard, StyledFlex } from './Bridge.style';
 import { BannerCarousel, BridgeForm, TransactionList } from './components';
@@ -17,13 +18,17 @@ const Bridge = () => {
   const location = useLocation();
   const [type, setType] = useState<'deposit' | 'withdraw'>('deposit');
   const [bridgeOrigin, setBridgeOrigin] = useState<BridgeOrigin>(BridgeOrigin.INTERNAL);
+  const [chain, setChain] = useState<ChainId | 'BTC'>(L1_CHAIN);
 
   const [searchParams, setSearchParams] = useSearchParams(new URLSearchParams('action=deposit'));
 
+  const navigate = useNavigate();
+
   const handleChangeTab = useCallback(
     (key: any) => {
       setType(key as any);
       setBridgeOrigin(key === 'deposit' ? BridgeOrigin.INTERNAL : BridgeOrigin.EXTERNAL);
+      setChain(L1_CHAIN);
 
       setSearchParams(() => {
         const newParams = new URLSearchParams();
@@ -53,6 +58,23 @@ const Bridge = () => {
 
   const handleChangeOrigin = useCallback((origin: BridgeOrigin) => setBridgeOrigin(origin), []);
 
+  const handleChangeChain = useCallback((chain: ChainId | 'BTC') => setChain(chain), []);
+
+  const handlePressEcosystemBanner = useCallback(
+    () => navigate(RoutesPath.FUSION, { state: { scrollEcosystem: true } }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+
+  const handlePressOnrampBanner = useCallback(
+    () => {
+      setChain('BTC');
+      setBridgeOrigin(BridgeOrigin.INTERNAL);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+
   useEffect(() => {
     const selectedTabKey = searchParams.get('type') || undefined;
 
@@ -62,7 +84,10 @@ const Bridge = () => {
 
   return (
     <Main maxWidth='5xl' padding='md'>
-      <BannerCarousel />
+      <BannerCarousel
+        onPressEcosystemBanner={handlePressEcosystemBanner}
+        onPressOnrampBanner={handlePressOnrampBanner}
+      />
       <StyledFlex alignItems='flex-start' direction={{ base: 'column', md: 'row' }} gap='2xl' marginTop='xl'>
         <StyledCard>
           <Tabs fullWidth selectedKey={type} size='lg' onSelectionChange={handleChangeTab}>
@@ -75,8 +100,10 @@ const Bridge = () => {
           </Tabs>
           <BridgeForm
             bridgeOrigin={bridgeOrigin}
+            chain={chain}
             ticker={location.state?.ticker}
             type={type}
+            onChangeChain={handleChangeChain}
             onChangeNetwork={handleChangeNetwork}
             onChangeOrigin={handleChangeOrigin}
           />

apps/evm/src/pages/Bridge/components/BannerCarousel/Banner.tsx

@@ -1,10 +1,13 @@
-import { Flex, FlexProps } from '@gobob/ui';
+import { CardProps } from '@gobob/ui';
 
-type BannerProps = FlexProps;
+import { StyledBanner } from './BannerCarousel.style';
+
+type BannerProps = CardProps;
 
 const Banner = (props: BannerProps) => {
-  return <Flex paddingX={{ base: '2xl', s: '6xl' }} paddingY='5xl' {...props} />;
+  return (
+    <StyledBanner bordered={false} direction='row' paddingX={{ base: '2xl', s: '6xl' }} paddingY='5xl' {...props} />
+  );
 };
 
 export { Banner };
-export type { BannerProps };

apps/evm/src/pages/Bridge/components/BannerCarousel/BannerCarousel.style.tsx

@@ -9,7 +9,7 @@ function getImageUrl(name: string) {
   return new URL(`../../../../assets/${name}`, import.meta.url).href;
 }
 
-const StyledCard = styled(Card)`
+const StyledCarouselWrapper = styled(Card)`
   position: relative;
   text-decoration: none;
   overflow: hidden;
@@ -56,6 +56,7 @@ const StyledSlider = styled(Slider)`
     width: auto;
     height: auto;
     z-index: 1;
+    transition: ${({ theme }) => theme.transition('colors', 'fast')};
 
     &::before {
       content: unset;
@@ -70,7 +71,7 @@ const StyledSlider = styled(Slider)`
   .slick-dots li button:before {
     font-size: 10px;
     color: ${({ theme }) => theme.color('grey-100')};
-    transition: ${({ theme }) => theme.transition('colors', 'normal')};
+    transition: ${({ theme }) => theme.transition('colors', 'fast')};
   }
 
   .slick-dots li {
@@ -86,8 +87,6 @@ const StyledSlider = styled(Slider)`
 `;
 
 const StyledOnrampBanner = styled(Banner)`
-  position: relative;
-
   background-image: url(${getImageUrl('cubs-group.svg')});
   background-repeat: no-repeat;
   background-size: cover;
@@ -120,4 +119,16 @@ const StyledOnrampGraphic = styled(OnrampGraphic)`
   }}
 `;
 
-export { StyledCard, StyledSlider, StyledOnrampBanner, StyledOnrampGraphic, StyledBannerContent, StyledBannerImg };
+const StyledBanner = styled(Card)`
+  position: relative;
+`;
+
+export {
+  StyledCarouselWrapper,
+  StyledSlider,
+  StyledOnrampBanner,
+  StyledOnrampGraphic,
+  StyledBannerContent,
+  StyledBanner,
+  StyledBannerImg
+};

apps/evm/src/pages/Bridge/components/BannerCarousel/BannerCarousel.tsx

@@ -5,44 +5,47 @@ import { ChevronLeft, ChevronRight, useMediaQuery } from '@gobob/ui';
 import { useTheme } from 'styled-components';
 
 import { EcosystemBanner } from './EcosystemBanner';
-import { StyledCard, StyledSlider } from './BannerCarousel.style';
+import { StyledCarouselWrapper, StyledSlider } from './BannerCarousel.style';
 import { OnrampBanner } from './OnrampBanner';
 
-const BannerCarousel = () => {
+const settings: Settings = {
+  dots: true,
+  infinite: true,
+  autoplay: true,
+  speed: 500,
+  autoplaySpeed: 10000,
+  cssEase: 'linear',
+  slidesToShow: 1,
+  slidesToScroll: 1,
+  pauseOnHover: true,
+  nextArrow: (
+    <button>
+      <ChevronRight strokeWidth='3' />
+    </button>
+  ),
+  prevArrow: (
+    <button>
+      <ChevronLeft strokeWidth='3' />
+    </button>
+  )
+};
+
+type BannerCarouselProps = {
+  onPressOnrampBanner: () => void;
+  onPressEcosystemBanner: () => void;
+};
+
+const BannerCarousel = ({ onPressOnrampBanner, onPressEcosystemBanner }: BannerCarouselProps) => {
   const theme = useTheme();
   const isDesktop = useMediaQuery(theme.breakpoints.up('s'));
 
-  const settings: Settings = {
-    dots: true,
-    fade: true,
-    infinite: true,
-    arrows: isDesktop,
-    autoplay: true,
-    speed: 1000,
-    autoplaySpeed: 10000,
-    cssEase: 'linear',
-    slidesToShow: 1,
-    slidesToScroll: 1,
-    pauseOnHover: true,
-    nextArrow: (
-      <button>
-        <ChevronRight size='lg' strokeWidth='3' />
-      </button>
-    ),
-    prevArrow: (
-      <button>
-        <ChevronLeft strokeWidth='3' />
-      </button>
-    )
-  };
-
   return (
-    <StyledCard aria-label='navigate to ecosystem section in fusion page' paddingX='none' paddingY='none'>
-      <StyledSlider {...settings}>
-        <OnrampBanner />
-        <EcosystemBanner />
+    <StyledCarouselWrapper aria-label='navigate to ecosystem section in fusion page' paddingX='none' paddingY='none'>
+      <StyledSlider {...settings} arrows={isDesktop}>
+        <OnrampBanner onPress={onPressOnrampBanner} />
+        <EcosystemBanner onPress={onPressEcosystemBanner} />
       </StyledSlider>
-    </StyledCard>
+    </StyledCarouselWrapper>
   );
 };
 

apps/evm/src/pages/Bridge/components/BannerCarousel/EcosystemBanner.tsx

@@ -2,23 +2,23 @@ import { Flex, H1, P } from '@gobob/ui';
 
 import bannerSrc from '../../../../assets/ecosystem-banner.png';
 
-import { StyledBannerContent, StyledBannerImg } from './BannerCarousel.style';
+import { StyledBannerImg } from './BannerCarousel.style';
 import { Banner } from './Banner';
 
-const EcosystemBanner = () => {
-  return (
-    <Banner>
-      <StyledBannerContent direction='column'>
-        <Flex alignItems='center'>
-          <H1 size='2xl' weight='bold'>
-            BOB Ecosystem
-          </H1>
-        </Flex>
-        <P color='grey-200'>Discover the most exciting projects on BOB.</P>
-      </StyledBannerContent>
-      <StyledBannerImg alt='BOB ecosystem banner' src={bannerSrc} />
-    </Banner>
-  );
+type EcosystemBannerProps = {
+  onPress?: () => void;
 };
 
+const EcosystemBanner = ({ onPress }: EcosystemBannerProps) => (
+  <Banner isPressable direction='column' onPress={onPress}>
+    <Flex alignItems='center'>
+      <H1 size='2xl' weight='bold'>
+        BOB Ecosystem
+      </H1>
+    </Flex>
+    <P color='grey-200'>Discover the most exciting projects on BOB.</P>
+    <StyledBannerImg alt='BOB ecosystem banner' src={bannerSrc} />
+  </Banner>
+);
+
 export { EcosystemBanner };