Feat/carouse banner

.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/package.json

@@ -31,6 +31,7 @@
     "@react-aria/utils": "^3.23.2",
     "@sentry/react": "^8.8.0",
     "@sentry/vite-plugin": "^2.18.0",
+    "@types/react-slick": "^0.23.13",
     "@uidotdev/usehooks": "^2.4.1",
     "big.js": "^6.2.1",
     "date-fns": "^3.2.0",
@@ -43,7 +44,9 @@
     "react-otp-input": "^3.1.1",
     "react-qr-code": "^2.0.12",
     "react-router-dom": "^6.16.0",
+    "react-slick": "^0.30.2",
     "siwe": "^2.1.4",
+    "slick-carousel": "^1.8.1",
     "styled-components": "^6.0.8",
     "viem": "^2.10.2",
     "yup": "^0.32.11"

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

@@ -25,11 +25,9 @@ const StyledBannerImg = styled.img`
   top: 0;
   height: 100%;
   opacity: 0.5;
-
   ${({ theme }) => {
     return css`
       transform: scale(4);
-
       @media ${theme.breakpoints.up('s')} {
         transform: scale(6) translateX(-15%);
       }

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

@@ -1,11 +1,13 @@
 import { ArrowTopRightOnSquare, Flex, H1, P, Tabs, TabsItem, XMark } from '@gobob/ui';
-import { useLocalStorage } from '@uidotdev/usehooks';
 import { Key, useCallback, useEffect, useState } from 'react';
 import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
+import { ChainId } from '@gobob/chains';
+import { useLocalStorage } from '@uidotdev/usehooks';
 
-import bannerSrc from '../../assets/ecosystem-banner.png';
 import { Main } from '../../components';
 import { L1_CHAIN, L2_CHAIN, LocalStorageKey, RoutesPath } from '../../constants';
+import bannerSrc from '../../assets/ecosystem-banner.png';
+import { FeatureFlags, useFeatureFlag } from '../../hooks';
 
 import {
   StyledBanner,
@@ -15,7 +17,7 @@ import {
   StyledCard,
   StyledFlex
 } from './Bridge.style';
-import { BridgeForm, TransactionList } from './components';
+import { BannerCarousel, BridgeForm, TransactionList } from './components';
 
 enum BridgeOrigin {
   INTERNAL = 'INTERNAL',
@@ -26,19 +28,22 @@ 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 [isEcosystemBannerHidden, setEcosystemBannerVisibility] = useLocalStorage(
     LocalStorageKey.HIDE_ECOSYSTEM_BANNER
   );
-
-  const [searchParams, setSearchParams] = useSearchParams(new URLSearchParams('action=deposit'));
+  const isBtcOnRampEnabled = useFeatureFlag(FeatureFlags.BTC_ONRAMP);
 
   const handleChangeTab = useCallback(
     (key: any) => {
       setType(key as any);
       setBridgeOrigin(key === 'deposit' ? BridgeOrigin.INTERNAL : BridgeOrigin.EXTERNAL);
+      setChain(L1_CHAIN);
 
       setSearchParams(() => {
         const newParams = new URLSearchParams();
@@ -68,6 +73,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;
 
@@ -77,41 +99,43 @@ const Bridge = () => {
 
   return (
     <Main maxWidth='5xl' padding='md'>
-      {!isEcosystemBannerHidden && (
-        <StyledBanner
-          isHoverable
-          isPressable
-          aria-label='navigate to ecosystem section in fusion page'
-          paddingX='2xl'
-          paddingY='4xl'
-          onPress={() => navigate(RoutesPath.FUSION, { state: { scrollEcosystem: true } })}
-        >
-          <StyledBannerCloseBtn
-            isIconOnly
-            aria-label='close banner'
-            size='s'
-            variant='ghost'
-            onPress={() => setEcosystemBannerVisibility(true)}
+      {isBtcOnRampEnabled ? (
+        <BannerCarousel
+          onPressEcosystemBanner={handlePressEcosystemBanner}
+          onPressOnrampBanner={handlePressOnrampBanner}
+        />
+      ) : (
+        !isEcosystemBannerHidden && (
+          <StyledBanner
+            isHoverable
+            isPressable
+            aria-label='navigate to ecosystem section in fusion page'
+            paddingX='2xl'
+            paddingY='4xl'
+            onPress={() => navigate(RoutesPath.FUSION, { state: { scrollEcosystem: true } })}
           >
-            <XMark />
-          </StyledBannerCloseBtn>
-          <StyledBannerContent direction='column'>
-            <Flex alignItems='center'>
-              <H1 size='2xl' weight='bold'>
-                BOB Ecosystem <ArrowTopRightOnSquare size='s' />
-              </H1>
-            </Flex>
-            <P>Discover the most exciting projects on BOB.</P>
-          </StyledBannerContent>
-          <StyledBannerImg alt='BOB ecosystem banner' src={bannerSrc} />
-        </StyledBanner>
+            <StyledBannerCloseBtn
+              isIconOnly
+              aria-label='close banner'
+              size='s'
+              variant='ghost'
+              onPress={() => setEcosystemBannerVisibility(true)}
+            >
+              <XMark />
+            </StyledBannerCloseBtn>
+            <StyledBannerContent direction='column'>
+              <Flex alignItems='center'>
+                <H1 size='2xl' weight='bold'>
+                  BOB Ecosystem <ArrowTopRightOnSquare size='s' />
+                </H1>
+              </Flex>
+              <P>Discover the most exciting projects on BOB.</P>
+            </StyledBannerContent>
+            <StyledBannerImg alt='BOB ecosystem banner' src={bannerSrc} />
+          </StyledBanner>
+        )
       )}
-      <StyledFlex
-        alignItems='flex-start'
-        direction={{ base: 'column', md: 'row' }}
-        gap='2xl'
-        marginTop={isEcosystemBannerHidden ? undefined : 'xl'}
-      >
+      <StyledFlex alignItems='flex-start' direction={{ base: 'column', md: 'row' }} gap='2xl' marginTop='xl'>
         <StyledCard>
           <Tabs fullWidth selectedKey={type} size='lg' onSelectionChange={handleChangeTab}>
             <TabsItem key='deposit' title='Deposit'>
@@ -123,8 +147,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

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

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

@@ -0,0 +1,134 @@
+import { Card, Flex } from '@gobob/ui';
+import Slider from 'react-slick';
+import styled, { css } from 'styled-components';
+
+import { Banner } from './Banner';
+import { OnrampGraphic } from './OnrampGraphic';
+
+function getImageUrl(name: string) {
+  return new URL(`../../../../assets/${name}`, import.meta.url).href;
+}
+
+const StyledCarouselWrapper = styled(Card)`
+  position: relative;
+  text-decoration: none;
+  overflow: hidden;
+`;
+
+const StyledBannerContent = styled(Flex)`
+  z-index: 1;
+`;
+
+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 StyledSlider = styled(Slider)`
+  .slick-prev {
+    left: 10px;
+  }
+
+  .slick-next {
+    right: 10px;
+  }
+
+  .slick-dots {
+    bottom: 0;
+  }
+
+  .slick-prev,
+  .slick-next {
+    color: ${({ theme }) => theme.color('grey-300')};
+    width: auto;
+    height: auto;
+    z-index: 1;
+    transition: ${({ theme }) => theme.transition('colors', 'fast')};
+
+    &::before {
+      content: unset;
+    }
+  }
+
+  .slick-dots li.slick-active button:before {
+    color: ${({ theme }) => theme.color('primary-500')};
+    opacity: 1;
+  }
+
+  .slick-dots li button:before {
+    font-size: 10px;
+    color: ${({ theme }) => theme.color('grey-100')};
+    transition: ${({ theme }) => theme.transition('colors', 'fast')};
+  }
+
+  .slick-dots li {
+    margin: 0 3px;
+  }
+
+  .slick-prev:hover,
+  .slick-prev:focus,
+  .slick-next:hover,
+  .slick-next:focus {
+    color: ${({ theme }) => theme.color('grey-200')};
+  }
+`;
+
+const StyledOnrampBanner = styled(Banner)`
+  background-image: url(${getImageUrl('cubs-group.svg')});
+  background-repeat: no-repeat;
+  background-size: cover;
+
+  ${({ theme }) => {
+    return css`
+      background-position: 70% 50%;
+
+      @media ${theme.breakpoints.up('s')} {
+        background-position: 0% 50%;
+      }
+    `;
+  }}
+`;
+
+const StyledOnrampGraphic = styled(OnrampGraphic)`
+  ${({ theme }) => {
+    return css`
+      height: 4rem;
+
+      @media ${theme.breakpoints.down('s')} {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        /* height: 3rem; */
+        opacity: 0.2;
+      }
+    `;
+  }}
+`;
+
+const StyledBanner = styled(Card)`
+  position: relative;
+`;
+
+export {
+  StyledCarouselWrapper,
+  StyledSlider,
+  StyledOnrampBanner,
+  StyledOnrampGraphic,
+  StyledBannerContent,
+  StyledBanner,
+  StyledBannerImg
+};

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

@@ -0,0 +1,52 @@
+import 'slick-carousel/slick/slick-theme.css';
+import 'slick-carousel/slick/slick.css';
+import { Settings } from 'react-slick';
+import { ChevronLeft, ChevronRight, useMediaQuery } from '@gobob/ui';
+import { useTheme } from 'styled-components';
+
+import { EcosystemBanner } from './EcosystemBanner';
+import { StyledCarouselWrapper, StyledSlider } from './BannerCarousel.style';
+import { OnrampBanner } from './OnrampBanner';
+
+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'));
+
+  return (
+    <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>
+    </StyledCarouselWrapper>
+  );
+};
+
+export { BannerCarousel };