farhan/feat: Added Wallet Carousel to @deriv/wallets (binary-com#9847)

* fix(cashier): 🐛 fix unable to access CFD-DerivX transfer

* feat(wallets): 📦 add `@deriv/wallets` workspace

* fix(wallets): 💚 fix CI build

* feat(api): ✨ share a single instance of `QueryClient` in `APIProvider`

* Merge branch 'master' into farzin/next

* chore: created mobile wallets carousel

Co-authored-by: Sergei Baranovski <120570511+sergei-deriv@users.noreply.github.com>

---------

Co-authored-by: Farzin Mirzaie <farzin@deriv.com>
Co-authored-by: Sergei Baranovski <120570511+sergei-deriv@users.noreply.github.com>

packages/wallets/package.json

@@ -5,6 +5,7 @@
     "main": "src/index.tsx",
     "dependencies": {
         "@deriv/api": "^1.0.0",
+        "embla-carousel-react": "^8.0.0-rc12",
         "react": "^17.0.2"
     },
     "devDependencies": {

packages/wallets/src/AppContent.tsx

@@ -1,10 +1,12 @@
 import React from 'react';
 import WalletList from './components/WalletList';
+import WalletsCarousel from './components/WalletCarousel';
 
 const AppContent: React.FC = () => {
     return (
         <div>
             <WalletList />
+            <WalletsCarousel />
         </div>
     );
 };

packages/wallets/src/components/AccountsList/AccountsList.scss

@@ -0,0 +1,5 @@
+.accounts-list {
+    height: 60vh;
+    width: 100vw;
+    margin-top: 2rem;
+}

packages/wallets/src/components/AccountsList/AccountsList.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+type TAccountsListProps = {
+    data: {
+        text: string;
+        background: string;
+    };
+};
+
+const AccountsList = ({ data }: TAccountsListProps) => {
+    return (
+        <div className='accounts-list' style={{ backgroundColor: data.background }}>
+            AccountsList
+        </div>
+    );
+};
+
+export default AccountsList;

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

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

packages/wallets/src/components/WalletCarousel/WalletsCarousel.scss

@@ -0,0 +1,19 @@
+.wallets-carousel {
+    background-color: #f2f3f4;
+    width: 100vw;
+    padding: 2rem;
+
+    &__container {
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        gap: 2.4rem;
+    }
+}
+
+.wallet-card {
+    width: 100%;
+    height: 13rem;
+    border-radius: 10%;
+}

packages/wallets/src/components/WalletCarousel/WalletsCarousel.tsx

@@ -0,0 +1,51 @@
+import React, { useState } from 'react';
+import useEmblaCarousel from 'embla-carousel-react';
+import AccountsList from '../AccountsList';
+
+const WalletsCarousel = () => {
+    const [emblaRef, emblaApi] = useEmblaCarousel({ skipSnaps: true, containScroll: false });
+    const data = [
+        {
+            text: 'BTC',
+            background: 'yellow',
+        },
+        {
+            text: 'ETH',
+            background: 'blue',
+        },
+        {
+            text: 'USDT',
+            background: 'red',
+        },
+    ];
+
+    const [active_index, setActiveIndex] = useState(0);
+
+    React.useEffect(() => {
+        emblaApi?.scrollTo(active_index);
+    }, [active_index, emblaApi]);
+
+    React.useEffect(() => {
+        emblaApi?.on('select', () => {
+            const scroll_snap_index = emblaApi.selectedScrollSnap();
+            setActiveIndex(scroll_snap_index);
+        });
+    }, [emblaApi]);
+
+    return (
+        <React.Fragment>
+            <div className='wallets-carousel' ref={emblaRef}>
+                <section className='wallets-carousel__container'>
+                    {data.map(item => (
+                        <div className='wallet-card' style={{ backgroundColor: item.background }} key={item.text}>
+                            {item.text}
+                        </div>
+                    ))}
+                </section>
+            </div>
+            <AccountsList data={data[active_index]} />
+        </React.Fragment>
+    );
+};
+
+export default WalletsCarousel;

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

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