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

packages/api/src/hooks/useVerifyEmail.ts

@@ -6,7 +6,7 @@ type TPayload = Parameters<ReturnType<typeof useRequest<'verify_email'>>['mutate
 /** A custom hook for verifying email address */
 const useVerifyEmail = () => {
     const { mutate: _mutate, ...rest } = useRequest('verify_email');
-    
+
     const mutate = useCallback((payload: TPayload) => _mutate({ payload }), [_mutate]);
 
     return {

packages/wallets/src/AppContent.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import WalletsAddMore from './components/WalletsAddMoreCarousel';
 import useDevice from './hooks/useDevice';
 import { DesktopWalletsList, WalletsCarousel } from './components';
 import './AppContent.scss';
@@ -8,7 +9,10 @@ const AppContent: React.FC = () => {
 
     return (
         <div className='wallets-app'>
-            <div className='wallets-app__content'>{is_mobile ? <WalletsCarousel /> : <DesktopWalletsList />}</div>
+            <div className='wallets-app__content'>
+                {is_mobile ? <WalletsCarousel /> : <DesktopWalletsList />}
+                <WalletsAddMore />
+            </div>
         </div>
     );
 };

packages/wallets/src/components/WalletsAddMoreCarousel/WalletsAddMoreCarousel.scss

@@ -0,0 +1,82 @@
+.wallets-add-more {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    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;
+            }
+            &:disabled {
+                opacity: 0.3;
+                display: none;
+            }
+        }
+    }
+    &__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/WalletsAddMoreCarousel/WalletsAddMoreCarousel.tsx

@@ -0,0 +1,78 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import useEmblaCarousel, { EmblaCarouselType, EmblaOptionsType } from 'embla-carousel-react';
+import { useAvailableWallets } from '@deriv/api';
+import useDevice from '../../hooks/useDevice';
+
+const WalletsAddMoreCarousel = () => {
+    const { is_mobile } = useDevice();
+    const { data } = useAvailableWallets();
+    const options: EmblaOptionsType = {
+        align: 0,
+        containScroll: 'trimSnaps',
+    };
+
+    const [WalletsAddMoreRef, 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]);
+
+    useEffect(() => {
+        if (!emblaApi) return;
+
+        const onSelect = (embla_api: EmblaCarouselType) => {
+            setPrevBtnEnabled(embla_api.canScrollPrev());
+            setNextBtnEnabled(embla_api.canScrollNext());
+        };
+
+        onSelect(emblaApi);
+        emblaApi.on('reInit', onSelect);
+        emblaApi.reInit({ watchDrag: is_mobile });
+        emblaApi.on('select', onSelect);
+    }, [emblaApi, is_mobile]);
+
+    return (
+        <React.Fragment>
+            <div className='wallets-add-more'>
+                <h2 className='wallets-add-more__header'>Add more Wallets</h2>
+                <div
+                    className='wallets-add-more__carousel'
+                    data-testid='dt-wallets-add-more'
+                    ref={WalletsAddMoreRef}
+                    onMouseEnter={() => !is_mobile && setIsHovered(true)}
+                    onMouseLeave={() => !is_mobile && setIsHovered(false)}
+                >
+                    <div className='wallets-add-more__carousel-wrapper'>
+                        {data?.map(item => (
+                            <div className='wallets-add-more__card' key={item.currency}>
+                                {item.currency}
+                            </div>
+                        ))}
+                    </div>
+                    {!is_mobile && is_hovered && (
+                        <React.Fragment>
+                            <button
+                                className='wallets-add-more__carousel-btn wallets-add-more__carousel-btn--prev'
+                                onClick={scrollPrev}
+                                disabled={!prev_btn_enabled}
+                            >
+                                a
+                            </button>
+                            <button
+                                className='wallets-add-more__carousel-btn wallets-add-more__carousel-btn--next'
+                                onClick={scrollNext}
+                                disabled={!next_btn_enabled}
+                            >
+                                b
+                            </button>
+                        </React.Fragment>
+                    )}
+                </div>
+            </div>
+        </React.Fragment>
+    );
+};
+
+export default WalletsAddMoreCarousel;

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

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

packages/wallets/src/index.tsx

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