Revert "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 files:check
+pnpm lint-staged -c .lintstagedrc

apps/evm/package.json

@@ -31,7 +31,6 @@
     "@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",
@@ -44,9 +43,7 @@
     "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/constants/local-storage.ts

@@ -1,4 +1,5 @@
 enum LocalStorageKey {
+  HIDE_ECOSYSTEM_BANNER = 'hideEcosystemBanner',
   HIDE_INFO_TAB_UNVISITED_MARK = 'hideInfoTabUnvisitedMark'
 }
 export { LocalStorageKey };

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

@@ -1,5 +1,5 @@
-import { Card, Flex } from '@gobob/ui';
-import styled from 'styled-components';
+import { Button, Card, Flex } from '@gobob/ui';
+import styled, { css } from 'styled-components';
 
 const StyledFlex = styled(Flex)`
   width: 100%;
@@ -9,4 +9,39 @@ const StyledCard = styled(Card)`
   width: 100%;
 `;
 
-export { StyledCard, StyledFlex };
+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 };

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

@@ -1,13 +1,21 @@
-import { Tabs, TabsItem } from '@gobob/ui';
+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 bannerSrc from '../../assets/ecosystem-banner.png';
 import { Main } from '../../components';
-import { L1_CHAIN, L2_CHAIN, RoutesPath } from '../../constants';
-
-import { StyledCard, StyledFlex } from './Bridge.style';
-import { BannerCarousel, BridgeForm, TransactionList } from './components';
+import { L1_CHAIN, L2_CHAIN, LocalStorageKey, RoutesPath } from '../../constants';
+
+import {
+  StyledBanner,
+  StyledBannerCloseBtn,
+  StyledBannerContent,
+  StyledBannerImg,
+  StyledCard,
+  StyledFlex
+} from './Bridge.style';
+import { BridgeForm, TransactionList } from './components';
 
 enum BridgeOrigin {
   INTERNAL = 'INTERNAL',
@@ -18,17 +26,19 @@ 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 handleChangeTab = useCallback(
     (key: any) => {
       setType(key as any);
       setBridgeOrigin(key === 'deposit' ? BridgeOrigin.INTERNAL : BridgeOrigin.EXTERNAL);
-      setChain(L1_CHAIN);
 
       setSearchParams(() => {
         const newParams = new URLSearchParams();
@@ -58,23 +68,6 @@ 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;
 
@@ -84,11 +77,41 @@ const Bridge = () => {
 
   return (
     <Main maxWidth='5xl' padding='md'>
-      <BannerCarousel
-        onPressEcosystemBanner={handlePressEcosystemBanner}
-        onPressOnrampBanner={handlePressOnrampBanner}
-      />
-      <StyledFlex alignItems='flex-start' direction={{ base: 'column', md: 'row' }} gap='2xl' marginTop='xl'>
+      {!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)}
+          >
+            <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'}
+      >
         <StyledCard>
           <Tabs fullWidth selectedKey={type} size='lg' onSelectionChange={handleChangeTab}>
             <TabsItem key='deposit' title='Deposit'>
@@ -100,10 +123,8 @@ const Bridge = () => {
           </Tabs>
           <BridgeForm
             bridgeOrigin={bridgeOrigin}
-            chain={chain}
             ticker={location.state?.ticker}
             type={type}
-            onChangeChain={handleChangeChain}
             onChangeNetwork={handleChangeNetwork}
             onChangeOrigin={handleChangeOrigin}
           />