thisyahlen/chore: add styles to wallet card 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

@@ -6,9 +6,11 @@ import './AppContent.scss';
 const AppContent: React.FC = () => {
     const { is_mobile } = useDevice();
 
+    if (is_mobile) return <WalletsCarousel />;
+
     return (
         <div className='wallets-app'>
-            <div className='wallets-app__content'>{is_mobile ? <WalletsCarousel /> : <DesktopWalletsList />}</div>
+            <div className='wallets-app__content'>{!is_mobile && <DesktopWalletsList />}</div>
         </div>
     );
 };

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

@@ -1,13 +1,12 @@
 import React from 'react';
-import { useWalletAccountsList } from '@deriv/api';
-import './AccountsList.scss';
+import { useActiveWalletAccount } from '@deriv/api';
 
 type TAccountsListProps = {
-    data: ReturnType<typeof useWalletAccountsList>['data'][number];
+    data: ReturnType<typeof useActiveWalletAccount>['data'];
 };
 
 const AccountsList = ({ data }: TAccountsListProps) => {
-    return <div className='wallets-accounts-list'>{data.loginid}</div>;
+    return <div className='wallets-accounts-list'>{data?.loginid}</div>;
 };
 
 export default AccountsList;

packages/wallets/src/components/ProgressBar/ProgressBar.scss

@@ -0,0 +1,24 @@
+.wallets-progress-bar {
+    display: flex;
+    justify-content: center;
+    cursor: pointer;
+
+    &-active {
+        width: 2.5rem;
+        height: 0.8rem;
+        background-color: #ff444f;
+        border-radius: 1rem;
+    }
+
+    &-inactive {
+        width: 0.8rem;
+        height: 0.8rem;
+        margin: 0 0.4rem;
+        border-radius: 50%;
+        background-color: #c2c2c2;
+    }
+
+    &-transition {
+        transition: all 0.24s linear;
+    }
+}

packages/wallets/src/components/ProgressBar/ProgressBar.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import './ProgressBar.scss';
+
+type TProps = {
+    is_transition?: boolean;
+    active_index: number;
+    indexes: Array<number>;
+    setActiveIndex: React.Dispatch<React.SetStateAction<number>>;
+};
+
+const ProgressBar: React.FC<TProps> = ({ is_transition = 'true', active_index, indexes, setActiveIndex }) => {
+    return (
+        <div className='wallets-progress-bar'>
+            {indexes.map(idx => {
+                const is_active = idx === active_index;
+
+                const bar_classname = is_active ? 'wallets-progress-bar-active' : 'wallets-progress-bar-inactive';
+                return (
+                    <div
+                        key={`progress-bar__${idx}`}
+                        onClick={() => setActiveIndex(idx)}
+                        className={`${bar_classname} ${is_transition ? 'wallets-progress-bar-transition' : ''}`}
+                    />
+                );
+            })}
+        </div>
+    );
+};
+
+export default ProgressBar;

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

@@ -0,0 +1 @@
+export { default as ProgressBar } from './ProgressBar';

packages/wallets/src/components/WalletCard/WalletCard.scss

@@ -0,0 +1,45 @@
+.wallets-card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    &__data {
+        width: 24rem;
+        height: 14.4rem;
+        border-radius: 8px;
+        background-color: rgb(242, 200, 200);
+        position: relative;
+
+        &__details {
+            display: flex;
+            width: 100%;
+            height: 100%;
+            padding: 1.6rem;
+            flex-direction: column;
+            justify-content: space-between;
+            align-items: flex-start;
+
+            &-icon {
+                width: 3.2rem;
+                height: 3.2rem;
+            }
+
+            &-balance {
+                display: flex;
+                flex-direction: column;
+                align-items: flex-start;
+                gap: 0.4rem;
+            }
+
+            &-landing_company {
+                display: flex;
+                justify-content: flex-end;
+                align-items: flex-start;
+                gap: 0.4rem;
+                position: absolute;
+                right: 1.6rem;
+                top: 1.6rem;
+            }
+        }
+    }
+}

packages/wallets/src/components/WalletCard/WalletCard.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { useWalletAccountsList } from '@deriv/api';
+import { WalletListCardBadge } from '../WalletListCardBadge';
+import './WalletCard.scss';
+
+type TProps = {
+    account: NonNullable<ReturnType<typeof useWalletAccountsList>['data']>[number];
+};
+
+const WalletCard: React.FC<TProps> = ({ account }) => {
+    return (
+        <div className='wallets-card' key={account.loginid}>
+            <div className='wallets-card__data'>
+                <div className='wallets-card__data__details'>
+                    <div className='wallets-card__data__details-icon'>
+                        <p>{account.currency}</p>
+                    </div>
+
+                    <div className='wallets-card__data__details-balance'>
+                        <p>{account.currency} Wallet</p>
+                        <p>
+                            {account.display_balance} {account.currency}
+                        </p>
+                    </div>
+                    <div className='wallets-card__data__details-landing_company'>
+                        {account?.landing_company_name && <WalletListCardBadge label={account?.landing_company_name} />}
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default WalletCard;

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

@@ -0,0 +1 @@
+export { default as WalletCard } from './WalletCard';

packages/wallets/src/components/WalletListCardIActions/WalletListCardIActions.scss

@@ -16,3 +16,51 @@
         border: 1px solid var(--system-light-3-less-prominent-text, #999);
     }
 }
+
+.wallets-mobile-actions {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    cursor: pointer;
+    min-width: 5.6rem;
+
+    &__container {
+        display: flex;
+        padding: 0rem 1.6rem;
+        justify-content: center;
+        align-items: center;
+        gap: 0.8rem;
+        align-self: stretch;
+    }
+
+    &-content {
+        display: flex;
+        width: 7rem;
+        flex-direction: column;
+        align-items: center;
+        gap: 0.4rem;
+
+        &-icon {
+            display: flex;
+            width: 3.5rem;
+            height: 3.5rem;
+            padding: 0.8rem;
+            justify-content: center;
+            align-items: center;
+            border-radius: 16px;
+            border: 1px solid var(--system-light-5-active-background, #d6dadb);
+        }
+
+        &-text {
+            color: var(--system-light-1-prominent-text, #333);
+            text-align: center;
+
+            /* mobile/extra small/XS - regular */
+            font-family: 'IBM Plex Sans';
+            font-size: 1rem;
+            font-style: normal;
+            font-weight: 400;
+            line-height: 1.2rem; /* 150% */
+        }
+    }
+}

packages/wallets/src/components/WalletListCardIActions/WalletListCardIActions.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { useWalletAccountsList } from '@deriv/api';
+import { useActiveWalletAccount, useWalletAccountsList } from '@deriv/api';
+import useDevice from '../../hooks/useDevice';
 import IcCashierAdd from '../../public/images/ic-cashier-deposit.svg';
 import IcCashierStatement from '../../public/images/ic-cashier-statement.svg';
 import IcCashierTransfer from '../../public/images/ic-cashier-transfer.svg';
@@ -40,14 +41,39 @@ const getWalletHeaderButtons = (is_demo: boolean, handleAction?: () => void) =>
 };
 
 type TProps = {
-    account: NonNullable<ReturnType<typeof useWalletAccountsList>['data']>[number];
+    account?: NonNullable<ReturnType<typeof useWalletAccountsList>['data']>[number];
 };
 
 const WalletListCardIActions: React.FC<TProps> = ({ account }) => {
-    const is_demo = account.is_virtual;
+    const { is_mobile } = useDevice();
+    const { data: active_wallet } = useActiveWalletAccount();
+    const is_demo = !!active_wallet?.is_virtual;
+
+    if (is_mobile)
+        return (
+            <div className='wallets-mobile-actions__container'>
+                <div className='wallets-mobile-actions'>
+                    {getWalletHeaderButtons(is_demo).map(button => (
+                        <React.Fragment key={button.name}>
+                            <div className='wallets-mobile-actions-content'>
+                                <button
+                                    key={button.name}
+                                    className='wallets-mobile-actions-content-icon'
+                                    onClick={button.action}
+                                >
+                                    {button.icon}
+                                </button>
+                                <div className='wallets-mobile-actions-content-text'>{button.text}</div>
+                            </div>
+                        </React.Fragment>
+                    ))}
+                </div>
+            </div>
+        );
+
     return (
         <div className='wallets-header__actions'>
-            {getWalletHeaderButtons(is_demo).map(button => (
+            {getWalletHeaderButtons(!!account?.is_virtual).map(button => (
                 <button key={button.name} className='wallets-header__button' onClick={button.action}>
                     {button.icon}
                 </button>

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

@@ -1,52 +1,14 @@
-import React, { useState } from 'react';
-import useEmblaCarousel from 'embla-carousel-react';
-import { useWalletAccountsList } from '@deriv/api';
-import { AccountsList } from '..';
-import './WalletsCarousel.scss';
-
-const WalletsCarousel = () => {
-    const [emblaRef, emblaApi] = useEmblaCarousel({ skipSnaps: true, containScroll: false });
-    const [active_index, setActiveIndex] = useState(0);
-    const { data: wallet_accounts_list } = useWalletAccountsList();
-
-    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]);
-
-    if (!wallet_accounts_list.length) return <h1>No wallets found</h1>;
+import React from 'react';
+import { useActiveWalletAccount } from '@deriv/api';
+import { AccountsList } from '../AccountsList';
+import { WalletsCarouselContent } from '../WalletsCarouselContent';
 
+const WalletsCarousel: React.FC = () => {
+    const { data: active_wallet } = useActiveWalletAccount();
     return (
         <React.Fragment>
-            <div className='wallets-carousel' ref={emblaRef}>
-                <section className='wallets-carousel__container'>
-                    {wallet_accounts_list.map(wallet => (
-                        <div className='wallets-card' key={wallet.loginid}>
-                            <div className='wallets-card__data'>
-                                <div className='wallets-card__data__details'>
-                                    <h1>{wallet.currency}</h1>
-                                    <div className='wallets-card__data__details-balance'>
-                                        <p>{wallet.currency} Wallet</p>
-                                        <h3>
-                                            {wallet.balance} {wallet.currency}
-                                        </h3>
-                                    </div>
-                                </div>
-                                <div className='wallets-card__data__landing-company'>
-                                    <p>{wallet.landing_company_name}</p>
-                                </div>
-                            </div>
-                        </div>
-                    ))}
-                </section>
-            </div>
-            <AccountsList data={wallet_accounts_list[active_index]} />
+            <WalletsCarouselContent />
+            <AccountsList data={active_wallet} />
         </React.Fragment>
     );
 };