Skip to content

Commit

Permalink
[WALL] Lubega / WALL-3599 / CFD chevron design update (#14474)
Browse files Browse the repository at this point in the history
* feat: chevron cfd design update

* fix: cleaned up unit test

* fix: dxtrade account card onclick function

* fix: remove unused code

* fix: applied comments

* fix: clean up

* fix: clean up variable
  • Loading branch information
lubega-deriv authored Apr 4, 2024
1 parent 8b4ab7f commit 992e0f9
Show file tree
Hide file tree
Showing 40 changed files with 270 additions and 634 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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();
});

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -85,7 +85,6 @@ const OptionsAndMultipliersListing: React.FC<TOptionsAndMultipliersListingProps>
onOptionsAndMultipliersLoaded,
}) => {
const { isMobile } = useDevice();
const { data: activeWalletAccount } = useActiveWalletAccount();
const { data: activeLinkedToTradingAccount } = useActiveLinkedToTradingAccount();

useEffect(() => {
Expand All @@ -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 && (
Expand Down
Original file line number Diff line number Diff line change
@@ -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%;
Expand Down
Original file line number Diff line number Diff line change
@@ -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>
);
};

Expand Down
19 changes: 9 additions & 10 deletions packages/wallets/src/components/WalletTourGuide/DesktopSteps.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,7 @@ const getDesktopSteps = (
isDemoWallet: boolean,
hasMT5Account: boolean,
hasDerivAppsTradingAccount: boolean,
isAllWalletsAlreadyAdded: boolean,
walletNumber = 1
isAllWalletsAlreadyAdded: boolean
): Step[] => [
// Wallet header
{
Expand All @@ -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
Expand Down Expand Up @@ -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
Expand All @@ -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
Expand All @@ -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,
Expand All @@ -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>
),
},
Expand All @@ -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,
Expand Down
12 changes: 6 additions & 6 deletions packages/wallets/src/components/WalletTourGuide/MobileSteps.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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,
Expand All @@ -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>
),
},
Expand All @@ -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,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,6 @@
border-radius: 1.6rem;
position: relative;

&--virtual {
background: var(--system-light-8-primary-background, #fffafa);
}

&__header {
width: 100%;
display: flex;
Expand All @@ -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 {
Expand Down
8 changes: 2 additions & 6 deletions packages/wallets/src/features/cfd/CFDPlatformsList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down Expand Up @@ -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>
);
Expand Down
Original file line number Diff line number Diff line change
@@ -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;
}
}
}
Loading

0 comments on commit 992e0f9

Please sign in to comment.