Merge branch 'binary-com:master' into migrate_svg_to_bvi_dvl

packages/api/src/hooks/useAuthorize.ts

@@ -1,30 +1,39 @@
-import { useEffect, useMemo } from 'react';
-import { getActiveAuthTokenIDFromLocalStorage } from '@deriv/utils';
+import { useCallback, useMemo } from 'react';
+import { getActiveAuthTokenIDFromLocalStorage, getActiveLoginIDFromLocalStorage } from '@deriv/utils';
 import useFetch from '../useFetch';
+import useInvalidateQuery from '../useInvalidateQuery';
 
 /** A custom hook that authorize the user with the given token. If no token is given,
  * it will use the current token from localStorage.
  */
-const useAuthorize = (token?: string) => {
+const useAuthorize = () => {
     const current_token = getActiveAuthTokenIDFromLocalStorage();
+    const invalidate = useInvalidateQuery();
 
     const { data, ...rest } = useFetch('authorize', {
-        payload: { authorize: token || current_token || '' },
+        payload: { authorize: current_token || '' },
         options: { enabled: Boolean(current_token) },
     });
 
     // Add additional information to the authorize response.
     const modified_authorize = useMemo(() => ({ ...data?.authorize }), [data?.authorize]);
 
-    useEffect(() => {
-        if (current_token !== token) {
-            // Todo: Update the token in the localStorage since we are switching the current account.
-        }
-    }, [current_token, token]);
+    const switchAccount = useCallback(
+        (loginid: string) => {
+            const active_loginid = getActiveLoginIDFromLocalStorage();
+            if (active_loginid !== loginid) {
+                localStorage.setItem('active_loginid', loginid);
+                invalidate('authorize');
+            }
+        },
+        [invalidate]
+    );
 
     return {
         /** The authorize response. */
         data: modified_authorize,
+        /** Function to switch to another account */
+        switchAccount,
         ...rest,
     };
 };

packages/p2p/src/components/recommend-user/__test__/recommend-user.spec.tsx

@@ -88,4 +88,4 @@ describe('<RecommendUser />', () => {
         expect(yesText).toHaveStyle('color: var(--text-less-prominent)');
         expect(recommend_user_props.onClickNotRecommended).toHaveBeenCalledTimes(2);
     });
-});
+});

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

@@ -7,8 +7,9 @@
     }
 
     @include mobile {
-        margin: auto 1.8rem;
-        width: auto;
+        padding: 1.8rem;
+        width: 100%;
         height: auto;
+        background: #ffffff;
     }
 }

packages/wallets/src/components/DesktopWalletsList/DesktopWalletsList.scss

@@ -1,7 +1,7 @@
 .wallets-desktop-wallets-list {
     width: 100%;
+    height: max-content;
     display: flex;
     flex-direction: column;
-    align-items: center;
     gap: 24px;
 }

packages/wallets/src/components/DesktopWalletsList/DesktopWalletsList.tsx

@@ -6,18 +6,20 @@ import { WalletsAccordion } from '../WalletsAccordion';
 import './DesktopWalletsList.scss';
 
 const DesktopWalletsList: React.FC = () => {
-    const { data } = useWalletAccountsList();
+    const { data: wallet_accounts_list } = useWalletAccountsList();
 
     return (
         <div className='wallets-desktop-wallets-list'>
-            {data?.map(wallet => (
-                <WalletsAccordion
-                    key={wallet.loginid}
-                    wallet={wallet}
-                    header={<WalletListCard account={wallet} />}
-                    content={<AccountsList />}
-                />
-            ))}
+            {wallet_accounts_list?.map(account => {
+                return (
+                    <WalletsAccordion
+                        key={`wallets-accordion-${account.loginid}`}
+                        account={account}
+                        content={<AccountsList />}
+                        header={<WalletListCard account={account} />}
+                    />
+                );
+            })}
         </div>
     );
 };

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

@@ -4,21 +4,23 @@ import './ProgressBar.scss';
 type TProps = {
     is_transition?: boolean;
     active_index: number;
-    indexes: Array<number>;
-    setActiveIndex: React.Dispatch<React.SetStateAction<number>>;
+    indexes: Array<string>;
+    setActiveIndex: (index: string) => void;
 };
 
-const ProgressBar: React.FC<TProps> = ({ is_transition = 'true', active_index, indexes, setActiveIndex }) => {
+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;
+            {indexes.map((value, idx) => {
+                const current_index = idx + 1;
+                const is_active = current_index === active_index;
 
                 const bar_classname = is_active ? 'wallets-progress-bar-active' : 'wallets-progress-bar-inactive';
+
                 return (
                     <div
-                        key={`progress-bar-${idx}`}
-                        onClick={() => setActiveIndex(idx)}
+                        key={`progress-bar-${current_index}`}
+                        onClick={() => setActiveIndex(value)}
                         className={`${bar_classname} ${is_transition ? 'wallets-progress-bar-transition' : ''}`}
                     />
                 );

packages/wallets/src/components/WalletsAccordion/WalletsAccordion.tsx

@@ -1,37 +1,46 @@
-import React, { ReactElement } from 'react';
-import { useWalletAccountsList } from '@deriv/api';
+import React, { ReactElement, useEffect } from 'react';
+import { useAuthorize, useWalletAccountsList } from '@deriv/api';
 import IcDropdown from '../../public/images/ic-dropdown.svg';
 import './WalletsAccordion.scss';
 
 type TProps = {
-    wallet: NonNullable<ReturnType<typeof useWalletAccountsList>['data']>[number];
+    account: NonNullable<ReturnType<typeof useWalletAccountsList>['data']>[number];
     content: ReactElement;
     header: ReactElement;
 };
 
-const WalletsAccordion: React.FC<TProps> = ({ wallet, header, content }) => {
-    const switchAccount = (loginid?: string) => {
-        // if (!loginid) return;
-        // implement switch account here
-    };
+const WalletsAccordion: React.FC<TProps> = ({ account: { is_active, is_virtual, loginid }, content, header }) => {
+    const { switchAccount } = useAuthorize();
+    const accordionRef = React.useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        if (is_active && accordionRef?.current) {
+            accordionRef.current.style.scrollMarginTop = '24px';
+            accordionRef.current.scrollIntoView({ behavior: 'smooth' });
+        }
+    }, [is_active]);
 
     return (
-        <div className={`wallets-accordion wallets-accordion${wallet?.is_virtual ? '--virtual' : ''}`}>
+        <div
+            className={`wallets-accordion wallets-accordion ${
+                is_virtual ? 'wallets-accordion wallets-accordion--virtual' : ''
+            }`}
+        >
             <div
-                className={`wallets-accordion__header wallets-accordion__header${
-                    wallet?.is_virtual ? '--virtual' : ''
+                className={`wallets-accordion__header wallets-accordion__header ${
+                    is_virtual ? 'wallets-accordion__header wallets-accordion__header--virtual' : ''
                 }`}
             >
                 {header}
                 <div
-                    className={`wallets-accordion__dropdown${wallet.is_active ? '--open' : ''}`}
-                    onClick={() => switchAccount(wallet?.loginid)}
+                    className={`wallets-accordion__dropdown ${is_active ? 'wallets-accordion__dropdown--open' : ''}`}
+                    // onClick={() => switchAccount(loginid)}
                 >
                     <IcDropdown />
                 </div>
             </div>
-            <div className={`wallets-accordion__content${wallet.is_active ? '--visible' : ''}`}>
-                {wallet.is_active && content}
+            <div className={`wallets-accordion__content ${is_active ? 'wallets-accordion__content--visible' : ''}`}>
+                {is_active && content}
             </div>
         </div>
     );

packages/wallets/src/components/WalletsAddMoreCarousel/WalletsAddMoreCarousel.tsx

@@ -12,27 +12,27 @@ const WalletsAddMoreCarousel = () => {
         containScroll: 'trimSnaps',
     };
 
-    const [WalletsAddMoreRef, emblaApi] = useEmblaCarousel(options);
+    const [wallets_add_more_embla_ref, wallets_add_more_embla_api] = 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 scrollPrev = useCallback(() => wallets_add_more_embla_api?.scrollPrev(), [wallets_add_more_embla_api]);
+    const scrollNext = useCallback(() => wallets_add_more_embla_api?.scrollNext(), [wallets_add_more_embla_api]);
 
     useEffect(() => {
-        if (!emblaApi) return;
+        if (!wallets_add_more_embla_api) 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]);
+        onSelect(wallets_add_more_embla_api);
+        wallets_add_more_embla_api.on('reInit', onSelect);
+        wallets_add_more_embla_api.reInit({ watchDrag: is_mobile });
+        wallets_add_more_embla_api.on('select', onSelect);
+    }, [wallets_add_more_embla_api, is_mobile]);
 
     if (!available_wallets?.length) return <h1>No wallets found</h1>;
     return (
@@ -42,7 +42,7 @@ const WalletsAddMoreCarousel = () => {
                 <div
                     className='wallets-add-more__carousel'
                     data-testid='dt-wallets-add-more'
-                    ref={WalletsAddMoreRef}
+                    ref={wallets_add_more_embla_ref}
                     onMouseEnter={() => !is_mobile && setIsHovered(true)}
                     onMouseLeave={() => !is_mobile && setIsHovered(false)}
                 >

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

@@ -1,14 +1,13 @@
 import React from 'react';
 import { AccountsList } from '../AccountsList';
 import { WalletsCarouselContent } from '../WalletsCarouselContent';
-import './WalletsCarousel.scss';
 
 const WalletsCarousel: React.FC = () => {
     return (
-        <div className='wallets-carousel'>
+        <React.Fragment>
             <WalletsCarouselContent />
             <AccountsList />
-        </div>
+        </React.Fragment>
     );
 };
 

packages/wallets/src/components/WalletsCarouselContent/WalletsCarouselContent.scss

@@ -6,7 +6,7 @@
     gap: 1.6rem;
 
     &__container {
-        height: 100%;
+        height: max-content;
         display: flex;
         align-items: center;
         justify-content: flex-start;

packages/wallets/src/components/WalletsCarouselContent/WalletsCarouselContent.tsx

@@ -1,40 +1,58 @@
-import React, { useState } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import useEmblaCarousel from 'embla-carousel-react';
-import { useWalletAccountsList } from '@deriv/api';
+import { useAuthorize, useWalletAccountsList } from '@deriv/api';
 import { ProgressBar } from '../ProgressBar';
 import { WalletCard } from '../WalletCard';
 import { WalletListCardIActions } from '../WalletListCardIActions';
 import './WalletsCarouselContent.scss';
 
 const WalletsCarouselContent: React.FC = () => {
-    const [wallet_embla_ref, emblaApi] = useEmblaCarousel({ skipSnaps: true, containScroll: false });
-    const [active_index, setActiveIndex] = useState(0);
+    const { switchAccount } = useAuthorize();
+    const [wallets_carousel_embla_ref, wallets_carousel_embla_api] = useEmblaCarousel({
+        skipSnaps: true,
+        containScroll: false,
+    });
     const { data: wallet_accounts_list } = useWalletAccountsList();
+    const active_wallet_index = useMemo(
+        () =>
+            wallet_accounts_list?.findIndex(item => item?.is_active) ||
+            wallets_carousel_embla_api?.selectedScrollSnap() ||
+            0,
+        [wallet_accounts_list, wallets_carousel_embla_api]
+    );
+    const [progress_bar_active_index, setProgressBarActiveIndex] = React.useState(active_wallet_index + 1);
+
+    useEffect(() => {
+        wallets_carousel_embla_api?.scrollTo(active_wallet_index);
+    }, [active_wallet_index, wallets_carousel_embla_api]);
 
-    React.useEffect(() => {
-        emblaApi?.scrollTo(active_index);
-    }, [active_index, emblaApi]);
+    useEffect(() => {
+        wallets_carousel_embla_api?.on('settle', () => {
+            // const scroll_snap_index = walletsCarouselEmblaApi?.selectedScrollSnap();
+            // const loginid = wallet_accounts_list[scroll_snap_index]?.loginid;
+            // switchAccount(loginid);
+        });
 
-    React.useEffect(() => {
-        emblaApi?.on('select', () => {
-            const scroll_snap_index = emblaApi.selectedScrollSnap();
-            setActiveIndex(scroll_snap_index);
+        wallets_carousel_embla_api?.on('select', () => {
+            const scroll_snap_index = wallets_carousel_embla_api?.selectedScrollSnap();
+            setProgressBarActiveIndex(scroll_snap_index + 1);
         });
-    }, [emblaApi]);
-    const amount_of_steps = Array.from({ length: wallet_accounts_list?.length || 0 }, (_, idx) => idx + 1);
+    }, [wallets_carousel_embla_api, switchAccount, wallet_accounts_list]);
+
+    const amount_of_steps = useMemo(() => wallet_accounts_list?.map(wallet => wallet.loginid), [wallet_accounts_list]);
 
     return (
-        <div className='wallets-carousel-content' ref={wallet_embla_ref}>
+        <div className='wallets-carousel-content' ref={wallets_carousel_embla_ref}>
             <div className='wallets-carousel-content__container'>
-                {wallet_accounts_list?.map(wallet => (
-                    <WalletCard key={`wallet-card-${wallet.loginid}`} account={wallet} />
+                {wallet_accounts_list?.map(account => (
+                    <WalletCard key={`wallet-card-${account.loginid}`} account={account} />
                 ))}
             </div>
             <div className='wallets-carousel-content__progress-bar'>
                 <ProgressBar
-                    active_index={active_index + 1}
-                    indexes={amount_of_steps}
-                    setActiveIndex={setActiveIndex}
+                    active_index={progress_bar_active_index}
+                    indexes={amount_of_steps || []}
+                    setActiveIndex={switchAccount}
                     is_transition
                 />
             </div>