[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/WalletTourGuide/DesktopSteps.tsx

@@ -7,8 +7,7 @@ const getDesktopSteps = (
     isDemoWallet: boolean,
     hasMT5Account: boolean,
     hasDerivAppsTradingAccount: boolean,
-    isAllWalletsAlreadyAdded: boolean,
-    walletNumber = 1
+    isAllWalletsAlreadyAdded: boolean
 ): Step[] => [
     // Wallet header
     {
@@ -23,7 +22,7 @@ const getDesktopSteps = (
         placement: 'bottom',
         spotlightPadding: 0,
         styles: { spotlight: { borderRadius: '1.6rem 1.6rem 0rem 0rem' } },
-        target: `.wallets-accordion:nth-child(${walletNumber}) .wallets-accordion__header`,
+        target: `.wallets-card__header`,
         title: (
             <WalletText color='red' size='sm' weight='bold'>
                 Wallets
@@ -52,7 +51,7 @@ const getDesktopSteps = (
                 borderRadius: '6.4rem',
             },
         },
-        target: `.wallets-accordion:nth-child(${walletNumber}) .wallets-accordion__header .wallets-header__actions`,
+        target: `.wallets-card__header .wallets-header__actions`,
         title: (
             <WalletText color='red' size='sm' weight='bold'>
                 Wallet actions
@@ -75,7 +74,7 @@ const getDesktopSteps = (
         placement: 'right',
         spotlightPadding: 5,
         styles: { spotlight: { borderRadius: '0.4rem' } },
-        target: '.wallets-mt5-list__content .wallets-trading-account-card',
+        target: '.wallets-cfd-list-accounts__content .wallets-trading-account-card',
         title: (
             <WalletText color='red' size='sm' weight='bold'>
                 CFDs trading accounts
@@ -86,12 +85,12 @@ const getDesktopSteps = (
     {
         content: hasDerivAppsTradingAccount ? (
             <WalletText size='sm'>
-                This is your Deriv Apps trading account balance. Click Transfer to move funds between your Wallet and
-                Deriv Apps trading account.
+                This is your Options trading account balance. Click Transfer to move funds between your Wallet and
+                Options trading account.
             </WalletText>
         ) : (
             <WalletText size='sm'>
-                This is your Deriv Apps trading account. Click Get to create the Deriv Apps trading account for trading.
+                This is your Options trading account. Click Get to create the Options trading account for trading.
             </WalletText>
         ),
         disableBeacon: true,
@@ -102,7 +101,7 @@ const getDesktopSteps = (
         target: '.wallets-deriv-apps-section',
         title: (
             <WalletText color='red' size='sm' weight='bold'>
-                Deriv Apps trading account
+                Options trading account
             </WalletText>
         ),
     },
@@ -112,7 +111,7 @@ const getDesktopSteps = (
             <WalletText size='sm'>Choose a Deriv app to trade options or multipliers.</WalletText>
         ) : (
             <WalletText size='sm'>
-                Once you have get a Deriv Apps trading account, choose a Deriv app to trade options or multipliers.
+                Once you have get an Options trading account, choose a Deriv app to trade options or multipliers.
             </WalletText>
         ),
         disableBeacon: true,

packages/wallets/src/components/WalletTourGuide/MobileSteps.tsx

@@ -89,7 +89,7 @@ const getMobileSteps = (
         placement: 'top',
         spotlightPadding: 5,
         styles: { spotlight: { borderRadius: '0.8rem' } },
-        target: '.wallets-mt5-list__content .wallets-trading-account-card',
+        target: '.wallets-cfd-list-accounts__content .wallets-trading-account-card',
         title: (
             <WalletText color='red' size='sm' weight='bold'>
                 CFDs trading accounts
@@ -100,12 +100,12 @@ const getMobileSteps = (
     {
         content: hasDerivAppsTradingAccount ? (
             <WalletText size='sm'>
-                This is your Deriv Apps trading account balance. Click Transfer to move funds between your Wallet and
-                Deriv Apps trading account.
+                This is your Options trading account balance. Click Transfer to move funds between your Wallet and
+                Options trading account.
             </WalletText>
         ) : (
             <WalletText size='sm'>
-                This is your Deriv Apps trading account. Click Get to create the Deriv Apps trading account for trading.
+                This is your Options trading account. Click Get to create the Options trading account for trading.
             </WalletText>
         ),
         disableBeacon: true,
@@ -116,7 +116,7 @@ const getMobileSteps = (
         target: '.wallets-deriv-apps-section',
         title: (
             <WalletText color='red' size='sm' weight='bold'>
-                Deriv Apps trading account
+                Options trading account
             </WalletText>
         ),
     },
@@ -126,7 +126,7 @@ const getMobileSteps = (
             <WalletText size='sm'>Choose a Deriv app to trade options or multipliers.</WalletText>
         ) : (
             <WalletText size='sm'>
-                Once you have get a Deriv Apps trading account, choose a Deriv app to trade options or multipliers.
+                Once you have get an Options trading account, choose a Deriv app to trade options or multipliers.
             </WalletText>
         ),
         disableBeacon: true,

packages/wallets/src/components/WalletTourGuide/WalletTourGuideSettings.tsx

@@ -20,13 +20,7 @@ export const tourStepConfig = (
 ): Step[] =>
     isMobile
         ? getMobileSteps(isDemoWallet, hasMT5Account, hasDerivAppsTradingAccount, isAllWalletsAlreadyAdded, walletIndex)
-        : getDesktopSteps(
-              isDemoWallet,
-              hasMT5Account,
-              hasDerivAppsTradingAccount,
-              isAllWalletsAlreadyAdded,
-              walletIndex
-          );
+        : getDesktopSteps(isDemoWallet, hasMT5Account, hasDerivAppsTradingAccount, isAllWalletsAlreadyAdded);
 
 export const TooltipComponent = ({
     backProps,

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/components/WalletsContainer/WalletsContainer.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/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;
+        }
+    }
+}