[WALL] Lubega / WALL-3599 / CFD chevron design update

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

@@ -52,7 +52,6 @@ describe('AccountsList', () => {
         expect(screen.getByTestId('dt_tab_panels')).toBeInTheDocument();
         expect(screen.getByText('CFDs')).toBeInTheDocument();
         expect(screen.getByText('Options')).toBeInTheDocument();
-        expect(screen.getByText('Deriv MT5')).toBeInTheDocument();
         expect(screen.getByText('Compare accounts')).toBeInTheDocument();
     });
 

packages/wallets/src/components/OptionsAndMultipliersListing/OptionsAndMultipliersListing.scss

@@ -2,17 +2,12 @@
     width: 100%;
     height: 100%;
     padding-top: 2.4rem;
+    border-top: 0.2rem solid var(--system-light-7-secondary-background, #f2f3f4);
 
     @include mobile {
         padding-top: unset;
     }
 
-    &--border {
-        @include desktop {
-            border-top: 0.2rem solid var(--system-light-7-secondary-background, #f2f3f4);
-        }
-    }
-
     &__header {
         display: flex;
         align-items: center;

packages/wallets/src/components/OptionsAndMultipliersListing/OptionsAndMultipliersListing.tsx

@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 import classNames from 'classnames';
 import { Trans } from 'react-i18next';
 import { useHistory } from 'react-router-dom';
-import { useActiveLinkedToTradingAccount, useActiveWalletAccount } from '@deriv/api-v2';
+import { useActiveLinkedToTradingAccount } from '@deriv/api-v2';
 import { optionsAndMultipliersContent } from '../../constants/constants';
 import { getStaticUrl, getUrlBinaryBot, getUrlSmartTrader } from '../../helpers/urls';
 import useDevice from '../../hooks/useDevice';
@@ -85,7 +85,6 @@ const OptionsAndMultipliersListing: React.FC<TOptionsAndMultipliersListingProps>
     onOptionsAndMultipliersLoaded,
 }) => {
     const { isMobile } = useDevice();
-    const { data: activeWalletAccount } = useActiveWalletAccount();
     const { data: activeLinkedToTradingAccount } = useActiveLinkedToTradingAccount();
 
     useEffect(() => {
@@ -94,11 +93,7 @@ const OptionsAndMultipliersListing: React.FC<TOptionsAndMultipliersListingProps>
     }, [onOptionsAndMultipliersLoaded]);
 
     return (
-        <div
-            className={classNames('wallets-options-and-multipliers-listing', {
-                'wallets-options-and-multipliers-listing--border': activeWalletAccount?.is_crypto,
-            })}
-        >
+        <div className='wallets-options-and-multipliers-listing'>
             <section className='wallets-options-and-multipliers-listing__header'>
                 <div className='wallets-options-and-multipliers-listing__header-title'>
                     {!isMobile && (

packages/wallets/src/components/TradingAccountCard/TradingAccountCard.scss

@@ -1,30 +1,38 @@
 .wallets-trading-account-card {
     display: flex;
     align-items: center;
-    gap: 16px;
-    height: 88px;
+    gap: 1.6rem;
+    height: 8.8rem;
+    border: none;
+    background: none;
 
     @include desktop {
+        padding: 0 2.3rem 0 1.6rem;
         $columns: 3;
-        $grid-last-row-children: '&:nth-child(#{$columns}n+1):nth-last-child(-n+#{$columns})';
+        $grid-last-row-children: '&:nth-last-child(-n+#{$columns})';
         #{$grid-last-row-children} > &__content,
         #{$grid-last-row-children} ~ & > &__content {
             border-bottom: none;
         }
+
+        &:hover {
+            cursor: pointer;
+            background-color: var(--system-light-6-hover-background, #e6e9e9);
+            border-radius: 0.8rem;
+        }
     }
 
     @include mobile {
-        $columns: 1;
-        $grid-last-row-children: '&:nth-child(#{$columns}n+1):nth-last-child(-n+#{$columns})';
-        #{$grid-last-row-children} > &__content,
-        #{$grid-last-row-children} ~ & > &__content {
+        height: 8rem;
+        &:last-child > &__content,
+        &:last-child ~ & > &__content {
             border-bottom: none;
         }
     }
 
     &__content {
         display: flex;
-        gap: 16px;
+        gap: 1.6rem;
         align-items: center;
         flex-grow: 1;
         height: 100%;

packages/wallets/src/components/TradingAccountCard/TradingAccountCard.tsx

@@ -1,20 +1,33 @@
-import React from 'react';
+import React, { ComponentProps } from 'react';
 import './TradingAccountCard.scss';
 
 type TProps = {
+    disabled?: ComponentProps<'button'>['disabled'];
     leading?: React.ReactNode;
+    onClick?: ComponentProps<'button'>['onClick'];
     trailing?: React.ReactNode;
 };
 
-const TradingAccountCard: React.FC<React.PropsWithChildren<TProps>> = ({ children, leading, trailing }) => {
+const TradingAccountCard: React.FC<React.PropsWithChildren<TProps>> = ({
+    children,
+    disabled,
+    leading,
+    onClick,
+    trailing,
+}) => {
     return (
-        <div className='wallets-trading-account-card'>
+        <button
+            className='wallets-trading-account-card'
+            data-testid='dt_wallets_trading_account_card'
+            disabled={disabled}
+            onClick={onClick}
+        >
             {leading}
             <div className='wallets-trading-account-card__content'>
                 {children}
                 {trailing}
             </div>
-        </div>
+        </button>
     );
 };
 

packages/wallets/src/components/WalletsCard/WalletsCard.scss

@@ -4,10 +4,6 @@
     border-radius: 1.6rem;
     position: relative;
 
-    &--virtual {
-        background: var(--system-light-8-primary-background, #fffafa);
-    }
-
     &__header {
         width: 100%;
         display: flex;
@@ -16,22 +12,6 @@
         gap: 2.4rem;
         border-radius: 1.6rem;
         position: relative;
-
-        &--virtual {
-            &:before {
-                content: '';
-                display: block;
-                position: absolute;
-                inset: 0;
-                width: 100%;
-                height: 100%;
-                border-radius: 1.6rem;
-                background-image: url('../../public/images/wallet-demo-desktop-bg.svg');
-                background-repeat: repeat;
-                background-size: 6rem;
-                opacity: 0.24;
-            }
-        }
     }
 
     &__content {

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

@@ -28,6 +28,7 @@ const WalletsCarousel: React.FC = () => {
     useEventListener('touchmove', handleScroll, containerRef);
     useEventListener('touchend', handleScroll, containerRef);
     useEventListener('scroll', handleScroll, containerRef);
+    useEventListener('wheel', handleScroll, containerRef);
 
     useEffect(() => {
         let isMounted = true;

packages/wallets/src/features/cfd/CFDPlatformsList.tsx

@@ -5,7 +5,7 @@ import { useActiveWalletAccount } from '@deriv/api-v2';
 import { WalletButton, WalletLink, WalletText } from '../../components/Base';
 import useDevice from '../../hooks/useDevice';
 import CFDPlatformsListEmptyState from './CFDPlatformsListEmptyState';
-import { CTraderList, MT5PlatformsList, OtherCFDPlatformsList } from './components';
+import { CFDPlatformsListAccounts } from './components';
 import './CFDPlatformsList.scss';
 
 type TProps = {
@@ -76,11 +76,7 @@ const CFDPlatformsList: React.FC<TProps> = ({ onMT5PlatformListLoaded }) => {
             {activeWallet?.currency_config?.is_crypto ? (
                 <CFDPlatformsListEmptyState />
             ) : (
-                <React.Fragment>
-                    <MT5PlatformsList onMT5PlatformListLoaded={onMT5PlatformListLoaded} />
-                    <CTraderList />
-                    <OtherCFDPlatformsList />
-                </React.Fragment>
+                <CFDPlatformsListAccounts onMT5PlatformListLoaded={onMT5PlatformListLoaded} />
             )}
         </div>
     );

packages/wallets/src/features/cfd/components/CFDPlatformsListAccounts/CFDPlatformsListAccounts.scss

@@ -0,0 +1,17 @@
+.wallets-cfd-list-accounts {
+    &__content {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        padding-bottom: 2.4rem;
+
+        @include desktop {
+            gap: 1.6rem 4.8rem;
+        }
+
+        @include mobile {
+            grid-template-rows: repeat(3, 1fr);
+            grid-template-columns: auto;
+            padding-bottom: 1.6rem;
+        }
+    }
+}

packages/wallets/src/features/cfd/components/CFDPlatformsListAccounts/CFDPlatformsListAccounts.tsx

@@ -0,0 +1,82 @@
+import React, { useEffect, useMemo } from 'react';
+import {
+    useActiveWalletAccount,
+    useAuthorize,
+    useCtraderAccountsList,
+    useDxtradeAccountsList,
+    useInvalidateQuery,
+    useSortedMT5Accounts,
+} from '@deriv/api-v2';
+import { TradingAppCardLoader } from '../../../../components/SkeletonLoader';
+import {
+    AddedCTraderAccountsList,
+    AddedDxtradeAccountsList,
+    AddedMT5AccountsList,
+    AvailableCTraderAccountsList,
+    AvailableDxtradeAccountsList,
+    AvailableMT5AccountsList,
+} from '../../flows';
+import { GetMoreMT5Accounts } from '../../screens';
+import './CFDPlatformsListAccounts.scss';
+
+type TProps = {
+    onMT5PlatformListLoaded?: (value: boolean) => void;
+};
+
+const CFDPlatformsListAccounts: React.FC<TProps> = ({ onMT5PlatformListLoaded }) => {
+    const { isFetching } = useAuthorize();
+    const {
+        areAllAccountsCreated,
+        data: mt5AccountsList,
+        isFetchedAfterMount: isMT5FetchedAfterMount,
+    } = useSortedMT5Accounts();
+    const { data: ctraderAccountsList } = useCtraderAccountsList();
+    const { data: dxtradeAccountsList, isFetchedAfterMount: isDxtradeFetchedAfterMount } = useDxtradeAccountsList();
+    const { data: activeWallet } = useActiveWalletAccount();
+    const invalidate = useInvalidateQuery();
+
+    const hasMT5Account = useMemo(() => {
+        return mt5AccountsList?.some(account => account.is_added);
+    }, [mt5AccountsList]);
+    const hasCTraderAccount = !!ctraderAccountsList?.length;
+    const hasDxtradeAccount = !!dxtradeAccountsList?.length;
+
+    useEffect(() => {
+        if (!isFetching) {
+            invalidate('mt5_login_list');
+            invalidate('trading_platform_accounts');
+        }
+    }, [invalidate, isFetching]);
+
+    useEffect(() => {
+        onMT5PlatformListLoaded?.(isMT5FetchedAfterMount);
+        return () => onMT5PlatformListLoaded?.(false);
+    }, [isMT5FetchedAfterMount, onMT5PlatformListLoaded]);
+
+    return (
+        <div className='wallets-cfd-list-accounts__content'>
+            {/* TODO: Update loader with updated skeleton loader design */}
+            {!isMT5FetchedAfterMount && <TradingAppCardLoader />}
+            {isMT5FetchedAfterMount &&
+                mt5AccountsList?.map((account, index) => {
+                    if (account.is_added)
+                        return (
+                            <AddedMT5AccountsList account={account} key={`added-mt5-list${account.loginid}-${index}`} />
+                        );
+
+                    return (
+                        <AvailableMT5AccountsList
+                            account={account}
+                            key={`available-mt5-list${account.name}-${index}`}
+                        />
+                    );
+                })}
+            {hasCTraderAccount ? <AddedCTraderAccountsList /> : <AvailableCTraderAccountsList />}
+            {isDxtradeFetchedAfterMount &&
+                (hasDxtradeAccount ? <AddedDxtradeAccountsList /> : <AvailableDxtradeAccountsList />)}
+            {hasMT5Account && !activeWallet?.is_virtual && !areAllAccountsCreated && <GetMoreMT5Accounts />}
+        </div>
+    );
+};
+
+export default CFDPlatformsListAccounts;

packages/wallets/src/features/cfd/components/CFDPlatformsListAccounts/index.ts

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