henry/wall-1655/feat: add more wallets carousel

packages/wallets/src/AppContent.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import WalletList from './components/WalletList';
 import WalletsCarousel from './components/WalletCarousel';
+import AddMoreWalletsCarousel from './components/AddMoreWalletsCarousel';
 import IcBrandDerivGo from './public/ic-brand-derivgo.svg';
 import './app-content.scss';
 
@@ -11,6 +12,7 @@ const AppContent: React.FC = () => {
             <IcBrandDerivGo width={25} height={25} />
             <WalletList />
             <WalletsCarousel />
+            <AddMoreWalletsCarousel />
         </div>
     );
 };

packages/wallets/src/components/AddMoreWalletsCarousel/AddMoreWalletsCarousel.scss

@@ -0,0 +1,79 @@
+.add-wallets {
+    display: flex;
+    flex-direction: column;
+    background-color: #d6d6d6;
+    width: 100vw;
+    padding-top: 2.4rem;
+
+    @media (max-width: 375px) {
+        padding-top: 0;
+        gap: 0.8rem;
+    }
+
+    &__header {
+        font-size: 3.2rem;
+        font-weight: 700;
+        margin-bottom: 1.6rem;
+
+        @media (max-width: 375px) {
+            font-size: 2.8rem;
+            padding-left: 1.6rem;
+            margin-bottom: 0;
+        }
+    }
+    &__carousel {
+        overflow: hidden;
+        background-color: #fff;
+        padding: 3.2rem 0 3.2rem 1.6rem;
+        border-radius: 0.8rem;
+        position: relative;
+        border: 0.1rem solid #d6dadb;
+        height: 100%;
+
+        @media (max-width: 375px) {
+            padding: 1.6rem 0 2.4rem 1.6rem;
+            border-radius: unset;
+        }
+
+        &-wrapper {
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: flex-start;
+            gap: 2.4rem;
+
+            @media (max-width: 375px) {
+                gap: 1.6rem;
+            }
+        }
+
+        &-btn {
+            z-index: 1;
+            position: absolute;
+            height: 4rem;
+            width: 4rem;
+            border-radius: 50%;
+            cursor: pointer;
+            top: 45%;
+
+            &--prev {
+                left: 1.6rem;
+            }
+            &--next {
+                right: 1.6rem;
+            }
+        }
+    }
+    &__card {
+        width: 23.2rem;
+        height: 28.2rem;
+        border-radius: 1.6rem;
+        flex-shrink: 0;
+        border: 0.1rem solid #d6dadb;
+
+        @media (max-width: 375px) {
+            height: 29.2rem;
+            width: 19.2rem;
+        }
+    }
+}

packages/wallets/src/components/AddMoreWalletsCarousel/AddMoreWalletsCarousel.tsx

@@ -0,0 +1,113 @@
+import React, { useState, useCallback, useEffect } from 'react';
+import useEmblaCarousel, { EmblaOptionsType, EmblaCarouselType } from 'embla-carousel-react';
+
+const AddMoreWalletsCarousel = () => {
+    const is_mobile = true;
+    const data = [
+        {
+            text: 'BTC',
+            background: 'lightblue',
+        },
+        {
+            text: 'ETH',
+            background: 'lightblue',
+        },
+        {
+            text: 'USDT',
+            background: 'lightblue',
+        },
+        {
+            text: 'USDT',
+            background: 'lightblue',
+        },
+        {
+            text: 'USDT',
+            background: 'lightblue',
+        },
+        {
+            text: 'USDT',
+            background: 'lightblue',
+        },
+        {
+            text: 'USDT',
+            background: 'lightblue',
+        },
+        {
+            text: 'USDT',
+            background: 'lightblue',
+        },
+    ];
+    const options: EmblaOptionsType = {
+        align: 0,
+        containScroll: 'trimSnaps',
+        watchDrag: is_mobile,
+    };
+
+    const [AddMoreWalletsCarouselRef, emblaApi] = useEmblaCarousel(options);
+    const [is_hovered, setIsHovered] = useState(is_mobile);
+    const [prev_btn_enabled, setPrevBtnEnabled] = useState(false);
+    const [next_btn_enabled, setNextBtnEnabled] = useState(false);
+
+    const scrollPrev = useCallback(() => emblaApi?.scrollPrev(), [emblaApi]);
+    const scrollNext = useCallback(() => emblaApi?.scrollNext(), [emblaApi]);
+
+    const onSelect = useCallback((embla_api: EmblaCarouselType) => {
+        setPrevBtnEnabled(embla_api.canScrollPrev());
+        setNextBtnEnabled(embla_api.canScrollNext());
+    }, []);
+
+    useEffect(() => {
+        if (!emblaApi) return;
+
+        onSelect(emblaApi);
+        emblaApi.on('reInit', onSelect);
+        emblaApi.on('select', onSelect);
+    }, [emblaApi, onSelect]);
+
+    return (
+        <React.Fragment>
+            <div className='add-wallets'>
+                <h2 className='add-wallets__header'>Add more Wallets</h2>
+                <div
+                    className='add-wallets__carousel'
+                    data-testid='dt-add-wallets'
+                    ref={AddMoreWalletsCarouselRef}
+                    onMouseEnter={() => !is_mobile && setIsHovered(true)}
+                    onMouseLeave={() => !is_mobile && setIsHovered(false)}
+                >
+                    <div className='add-wallets__carousel-wrapper'>
+                        {data.map(item => (
+                            <div
+                                className='add-wallets__card'
+                                style={{ backgroundColor: item.background }}
+                                key={item.text}
+                            >
+                                {item.text}
+                            </div>
+                        ))}
+                    </div>
+                    {!is_mobile && is_hovered && (
+                        <React.Fragment>
+                            <button
+                                className='add-wallets__carousel-btn add-wallets__carousel-btn--prev'
+                                onClick={scrollPrev}
+                                disabled={!prev_btn_enabled}
+                            >
+                                a
+                            </button>
+                            <button
+                                className='add-wallets__carousel-btn add-wallets__carousel-btn--next'
+                                onClick={scrollNext}
+                                disabled={!next_btn_enabled}
+                            >
+                                b
+                            </button>
+                        </React.Fragment>
+                    )}
+                </div>
+            </div>
+        </React.Fragment>
+    );
+};
+
+export default AddMoreWalletsCarousel;

packages/wallets/src/components/AddMoreWalletsCarousel/index.ts

@@ -0,0 +1,4 @@
+import AddMoreWalletsCarousel from './AddMoreWalletsCarousel';
+import './AddMoreWalletsCarousel.scss';
+
+export default AddMoreWalletsCarousel;

packages/wallets/src/index.tsx

@@ -4,7 +4,7 @@ import AppContent from './AppContent';
 
 const App: React.FC = () => (
     <APIProvider>
-        <AppContent />;
+        <AppContent />
     </APIProvider>
 );