diff --git a/packages/wallets/src/components/WalletListCardDetails/WalletListCardDetails.tsx b/packages/wallets/src/components/WalletListCardDetails/WalletListCardDetails.tsx
index 943c737c8ce7..66b12a37f198 100644
--- a/packages/wallets/src/components/WalletListCardDetails/WalletListCardDetails.tsx
+++ b/packages/wallets/src/components/WalletListCardDetails/WalletListCardDetails.tsx
@@ -1,17 +1,31 @@
import React from 'react';
+import { Trans } from 'react-i18next';
+import { useActiveWalletAccount } from '@deriv/api-v2';
+import { WalletText } from '../Base';
import WalletListCardActions from '../WalletListCardActions/WalletListCardActions';
import { WalletListCardBalance } from '../WalletListCardBalance';
import WalletListCardDropdown from '../WalletListCardDropdown/WalletListCardDropdown';
import './WalletListCardDetails.scss';
-const WalletListCardDetails = () => (
-
-
-
-
-
+const WalletListCardDetails: React.FC = () => {
+ const { data: activeWallet, isLoading } = useActiveWalletAccount();
+ const isDemo = activeWallet?.is_virtual;
+
+ return (
+
+ {isDemo && !isLoading ? (
+
+
+
+ ) : (
+
+ )}
+
+
+
+
-
-);
+ );
+};
export default WalletListCardDetails;
diff --git a/packages/wallets/src/components/WalletListCardDetails/__tests__/WalletListCardDetails.spec.tsx b/packages/wallets/src/components/WalletListCardDetails/__tests__/WalletListCardDetails.spec.tsx
index 2dbc86fb5aba..9575764ffef2 100644
--- a/packages/wallets/src/components/WalletListCardDetails/__tests__/WalletListCardDetails.spec.tsx
+++ b/packages/wallets/src/components/WalletListCardDetails/__tests__/WalletListCardDetails.spec.tsx
@@ -1,7 +1,17 @@
import React from 'react';
+import { useActiveWalletAccount } from '@deriv/api-v2';
import { render, screen } from '@testing-library/react';
import WalletListCardDetails from '../WalletListCardDetails';
+jest.mock('@deriv/api-v2', () => ({
+ useActiveWalletAccount: jest.fn(() => ({
+ data: {
+ is_virtual: false,
+ },
+ isLoading: false,
+ })),
+}));
+
jest.mock('../../WalletListCardActions/WalletListCardActions', () => ({
__esModule: true,
default: jest.fn(() =>
Mocked WalletListCardActions
),
@@ -18,10 +28,28 @@ jest.mock('../../WalletListCardDropdown/WalletListCardDropdown', () => ({
}));
describe('WalletListCardDetails', () => {
- it('should render with default components correctly', () => {
+ beforeEach(() => {
+ jest.clearAllMocks();
+ });
+
+ it('should render with default components correctly for real account', () => {
render(
);
+
expect(screen.getByText('Mocked WalletListCardActions')).toBeInTheDocument();
expect(screen.getByText('Mocked WalletListCardBalance')).toBeInTheDocument();
expect(screen.getByText('Mocked WalletListCardDropdown')).toBeInTheDocument();
});
+
+ it('should render with default components correctly for demo account', () => {
+ (useActiveWalletAccount as jest.Mock).mockReturnValue({
+ data: {
+ is_virtual: true,
+ },
+ });
+ render(
);
+
+ expect(screen.getByText('Mocked WalletListCardActions')).toBeInTheDocument();
+ expect(screen.getByText('Mocked WalletListCardBalance')).toBeInTheDocument();
+ expect(screen.getByText('USD Demo Wallet')).toBeInTheDocument();
+ });
});
diff --git a/packages/wallets/src/components/WalletListCardDropdown/WalletListCardDropdown.tsx b/packages/wallets/src/components/WalletListCardDropdown/WalletListCardDropdown.tsx
index a5fdde861dac..005c9a48ce4c 100644
--- a/packages/wallets/src/components/WalletListCardDropdown/WalletListCardDropdown.tsx
+++ b/packages/wallets/src/components/WalletListCardDropdown/WalletListCardDropdown.tsx
@@ -14,54 +14,47 @@ const WalletListCardDropdown = () => {
const { t } = useTranslation();
const [inputWidth, setInputWidth] = useState('auto');
- const loginid = activeWallet?.loginid;
+ const loginId = activeWallet?.loginid;
const generateTitleText = useCallback(
(wallet: THooks.WalletAccountsList) => {
- return t(`${wallet?.currency} ${wallet?.wallet_currency_type === 'Demo' ? 'Demo ' : ''}Wallet`);
+ return t(`${wallet?.currency} Wallet`);
},
[t]
);
useEffect(() => {
- const selectedWallet = wallets?.find(wallet => wallet.loginid === loginid);
+ const selectedWallet = wallets?.find(wallet => wallet.loginid === loginId);
if (selectedWallet) {
const selectedTextWidth = generateTitleText(selectedWallet).length;
setInputWidth(`${selectedTextWidth * 10 - 20}px`);
}
- }, [generateTitleText, wallets, loginid]);
+ }, [generateTitleText, wallets, loginId]);
return (
{wallets && (
({
- listItem: (
-
-
-
-
-
-
-
-
-
+ list={wallets
+ ?.filter(wallet => !wallet.is_virtual)
+ ?.map(wallet => ({
+ listItem: (
+
-
- ),
- text: generateTitleText(wallet),
- value: wallet.loginid,
- }))}
+ ),
+ text: generateTitleText(wallet),
+ value: wallet.loginid,
+ }))}
listHeader={
@@ -74,7 +67,7 @@ const WalletListCardDropdown = () => {
showListHeader
showMessageContainer={false}
typeVariant='listcard'
- value={loginid}
+ value={loginId}
/>
)}
diff --git a/packages/wallets/src/components/WalletListCardDropdown/__tests__/WalletListCardDropdown.spec.tsx b/packages/wallets/src/components/WalletListCardDropdown/__tests__/WalletListCardDropdown.spec.tsx
index 300f28d7ca2d..b7132d05a68e 100644
--- a/packages/wallets/src/components/WalletListCardDropdown/__tests__/WalletListCardDropdown.spec.tsx
+++ b/packages/wallets/src/components/WalletListCardDropdown/__tests__/WalletListCardDropdown.spec.tsx
@@ -25,17 +25,15 @@ jest.mock('@deriv/api-v2', () => ({
display_balance: '1.0000000',
loginid: '7654321',
},
- {
- currency: 'USD',
- display_balance: '10000.00',
- loginid: '55555',
- wallet_currency_type: 'Demo',
- },
],
})),
}));
describe('WalletListCardDropdown', () => {
+ beforeEach(() => {
+ jest.clearAllMocks();
+ });
+
it('should render with the correct data', async () => {
render();
@@ -50,15 +48,9 @@ describe('WalletListCardDropdown', () => {
fireEvent.click(screen.getByDisplayValue('USD Wallet'));
expect(screen.getByText('USD Wallet')).toBeInTheDocument();
expect(screen.getByText('BTC Wallet')).toBeInTheDocument();
- expect(screen.getByText('USD Demo Wallet')).toBeInTheDocument();
fireEvent.click(screen.getByText('BTC Wallet'));
expect(mockSwitchAccount).toHaveBeenCalledWith('7654321');
-
- fireEvent.click(screen.getByDisplayValue('BTC Wallet'));
- fireEvent.click(screen.getByText('USD Demo Wallet'));
-
- expect(mockSwitchAccount).toHaveBeenCalledWith('55555');
});
it('should render dropdown without crashing when unable to fetch wallets', async () => {
diff --git a/packages/wallets/src/components/WalletListHeader/WalletListHeader.scss b/packages/wallets/src/components/WalletListHeader/WalletListHeader.scss
new file mode 100644
index 000000000000..bdfc4a579b46
--- /dev/null
+++ b/packages/wallets/src/components/WalletListHeader/WalletListHeader.scss
@@ -0,0 +1,77 @@
+@import '../../components/SkeletonLoader/SkeletonLoader.scss';
+
+.wallets-list-header {
+ display: flex;
+ max-width: 123.2rem;
+ height: max-content;
+ width: 100%;
+ padding: 1.6rem 0 0;
+
+ @include mobile {
+ padding: 0.8rem 1.4rem 0;
+ }
+
+ &__label {
+ display: flex;
+ position: absolute;
+ margin-left: 3rem;
+ margin-top: 1rem;
+ gap: 2.4rem;
+ z-index: 1;
+ pointer-events: none;
+ }
+
+ &__switcher {
+ position: relative;
+ display: flex;
+ width: 12rem;
+ height: 4rem;
+ margin-left: 1.6rem;
+ background-color: var(--header-footer-bg-color, #0000000a);
+ border-radius: 0.8rem;
+
+ &-input {
+ width: 0;
+ height: 0;
+ }
+
+ &:hover {
+ cursor: pointer;
+
+ &:before {
+ position: absolute;
+ content: '';
+ height: 3.2rem;
+ width: 11.2rem;
+ background-color: var(--button-toggle-secondary, #d6dadb);
+ opacity: unset;
+ border-radius: 0.4rem;
+ margin: 0.4rem;
+ }
+ }
+ }
+
+ &__slider {
+ position: absolute;
+ inset: 0;
+ transition: 0.2s;
+
+ &:before {
+ position: absolute;
+ content: '';
+ height: 3.2rem;
+ width: 5.6rem;
+ background-color: var(--system-dark-1-prominent-text, #fff);
+ transition: 0.2s;
+ border-radius: 0.4rem;
+ margin: 0.4rem;
+ }
+ }
+}
+
+.wallets-list-header__switcher-input:checked + .wallets-list-header__slider:before {
+ -webkit-transform: translateX(6rem);
+ -ms-transform: translateX(6rem);
+ transform: translateX(6rem);
+ margin-left: 0;
+}
diff --git a/packages/wallets/src/components/WalletListHeader/WalletListHeader.tsx b/packages/wallets/src/components/WalletListHeader/WalletListHeader.tsx
new file mode 100644
index 000000000000..6e06ce33275b
--- /dev/null
+++ b/packages/wallets/src/components/WalletListHeader/WalletListHeader.tsx
@@ -0,0 +1,65 @@
+import React, { useEffect, useState } from 'react';
+import { Trans } from 'react-i18next';
+import { useActiveWalletAccount, useWalletAccountsList } from '@deriv/api-v2';
+import useDevice from '../../hooks/useDevice';
+import useWalletAccountSwitcher from '../../hooks/useWalletAccountSwitcher';
+import { WalletText } from '../Base';
+import './WalletListHeader.scss';
+
+const WalletListHeader: React.FC = () => {
+ const { isMobile } = useDevice();
+ const { data: wallets } = useWalletAccountsList();
+ const { data: activeWallet } = useActiveWalletAccount();
+ const switchWalletAccount = useWalletAccountSwitcher();
+
+ const demoAccount = wallets?.find(wallet => wallet.is_virtual)?.loginid;
+ const firstRealAccount = wallets?.find(wallet => !wallet.is_virtual)?.loginid;
+ const shouldShowSwitcher = !isMobile && demoAccount && firstRealAccount;
+ const isDemo = activeWallet?.is_virtual;
+ const [isChecked, setIsChecked] = useState(!isDemo);
+
+ const handleToggle = () => {
+ setIsChecked(prev => !prev);
+ if (firstRealAccount && activeWallet?.loginid === demoAccount) {
+ switchWalletAccount(firstRealAccount);
+ } else if (demoAccount) {
+ switchWalletAccount(demoAccount);
+ }
+ };
+
+ useEffect(() => {
+ setIsChecked(!isDemo);
+ }, [isDemo]);
+
+ return (
+
+
+ Trader's Hub
+
+ {shouldShowSwitcher && (
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+ );
+};
+
+export default WalletListHeader;
diff --git a/packages/wallets/src/components/WalletListHeader/__tests__/WalletListHeader.spec.tsx b/packages/wallets/src/components/WalletListHeader/__tests__/WalletListHeader.spec.tsx
new file mode 100644
index 000000000000..6d11ba42447d
--- /dev/null
+++ b/packages/wallets/src/components/WalletListHeader/__tests__/WalletListHeader.spec.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import WalletListHeader from '../WalletListHeader';
+import '@testing-library/jest-dom';
+
+jest.mock('../../../hooks/useDevice', () =>
+ jest.fn(() => ({
+ isMobile: false,
+ }))
+);
+
+jest.mock('@deriv/api-v2', () => ({
+ useActiveWalletAccount: () => ({ data: { is_virtual: false, loginid: 'real1' } }),
+ useWalletAccountsList: () => ({
+ data: [
+ { is_virtual: false, loginid: 'real1' },
+ { is_virtual: true, loginid: 'demo123' },
+ ],
+ }),
+}));
+
+const mockSwitchWalletAccount = jest.fn();
+
+jest.mock('../../../hooks/useWalletAccountSwitcher', () => ({
+ __esModule: true,
+ default: jest.fn(() => mockSwitchWalletAccount),
+}));
+
+describe('WalletListHeader', () => {
+ beforeEach(() => {
+ jest.clearAllMocks();
+ });
+
+ it('should render header correctly', () => {
+ render();
+
+ expect(screen.getByText("Trader's Hub")).toBeInTheDocument();
+ expect(screen.getByText('Demo')).toBeInTheDocument();
+ expect(screen.getByText('Real')).toBeInTheDocument();
+ });
+
+ it('should be checked if the real account is active', () => {
+ render();
+
+ const checkbox = screen.getByRole('checkbox');
+ expect(checkbox).toBeChecked();
+ });
+
+ it('should toggle accounts on checkbox change', () => {
+ render();
+
+ const checkbox = screen.getByRole('checkbox');
+ fireEvent.click(checkbox);
+ expect(mockSwitchWalletAccount).toHaveBeenCalledWith('demo123');
+ });
+});
diff --git a/packages/wallets/src/components/WalletListHeader/index.ts b/packages/wallets/src/components/WalletListHeader/index.ts
new file mode 100644
index 000000000000..841fabab5a36
--- /dev/null
+++ b/packages/wallets/src/components/WalletListHeader/index.ts
@@ -0,0 +1 @@
+export { default as WalletListHeader } from './WalletListHeader';
diff --git a/packages/wallets/src/components/WalletsAddMoreCarousel/WalletsAddMoreCarousel.scss b/packages/wallets/src/components/WalletsAddMoreCarousel/WalletsAddMoreCarousel.scss
index fc450ef23a8d..3ba30cd49e62 100644
--- a/packages/wallets/src/components/WalletsAddMoreCarousel/WalletsAddMoreCarousel.scss
+++ b/packages/wallets/src/components/WalletsAddMoreCarousel/WalletsAddMoreCarousel.scss
@@ -3,11 +3,10 @@
flex-direction: column;
max-width: 123.2rem;
width: 100%;
- padding-top: 2.4rem;
+ padding-top: 1.6rem;
@include mobile {
padding-top: 0;
- gap: 0.8rem;
}
&__header {
@@ -21,7 +20,7 @@
&__carousel {
overflow: hidden;
background-color: #fff;
- padding: 3.2rem 0;
+ padding-bottom: 3.2rem;
border-radius: 0.8rem;
position: relative;
height: 100%;
diff --git a/packages/wallets/src/components/WalletsCarousel/WalletsCarousel.scss b/packages/wallets/src/components/WalletsCarousel/WalletsCarousel.scss
index 7c5077fecade..3f4e8f44d268 100644
--- a/packages/wallets/src/components/WalletsCarousel/WalletsCarousel.scss
+++ b/packages/wallets/src/components/WalletsCarousel/WalletsCarousel.scss
@@ -1,9 +1,3 @@
.wallets-carousel {
width: 100%;
-
- &__header {
- display: flex;
- align-items: center;
- padding: 0.8rem 1.4rem;
- }
}
diff --git a/packages/wallets/src/components/WalletsCarousel/WalletsCarousel.tsx b/packages/wallets/src/components/WalletsCarousel/WalletsCarousel.tsx
index 1c30e9bc1ddc..6f36e1c2f283 100644
--- a/packages/wallets/src/components/WalletsCarousel/WalletsCarousel.tsx
+++ b/packages/wallets/src/components/WalletsCarousel/WalletsCarousel.tsx
@@ -1,14 +1,13 @@
import React, { useEffect, useRef, useState } from 'react';
import { useActiveWalletAccount } from '@deriv/api-v2';
import { AccountsList } from '../AccountsList';
-import { WalletText } from '../Base';
import { WalletsCarouselContent } from '../WalletsCarouselContent';
import { WalletsCarouselHeader } from '../WalletsCarouselHeader';
import './WalletsCarousel.scss';
const WalletsCarousel: React.FC = () => {
const [isWalletSettled, setIsWalletSettled] = useState(true);
- const [hideWalletsCarouselHeader, setHideWalletsCarouselHeader] = useState(false);
+ const [hideWalletsCarouselHeader, setHideWalletsCarouselHeader] = useState(true);
const contentRef = useRef(null);
const { data: activeWallet, isLoading: isActiveWalletLoading } = useActiveWalletAccount();
@@ -38,7 +37,7 @@ const WalletsCarousel: React.FC = () => {
}, []);
return (
-
+
{!isActiveWalletLoading && (
{
isDemo={activeWallet?.is_virtual}
/>
)}
-
-
-
- Trader's Hub
-
-
-
-
-
-
+
+
-
+
+
);
};
diff --git a/packages/wallets/src/components/WalletsContainer/WalletsContainer.tsx b/packages/wallets/src/components/WalletsContainer/WalletsContainer.tsx
index 6d8c1cfaf4f1..080fe4e13995 100644
--- a/packages/wallets/src/components/WalletsContainer/WalletsContainer.tsx
+++ b/packages/wallets/src/components/WalletsContainer/WalletsContainer.tsx
@@ -17,7 +17,7 @@ const WalletsContainer: React.FC> = ({ children,
useEffect(() => {
const timeout = setTimeout(() => {
if (isOpen && walletsCardRef?.current) {
- walletsCardRef.current.style.scrollMarginTop = '24px';
+ walletsCardRef.current.style.scrollMarginTop = '80px';
walletsCardRef.current.scrollIntoView({ behavior: 'smooth' });
}
}, 300);
diff --git a/packages/wallets/src/components/WalletsResetMT5Password/WalletsResetMT5Password.tsx b/packages/wallets/src/components/WalletsResetMT5Password/WalletsResetMT5Password.tsx
index 320d43d355dd..ad1d236db5c6 100644
--- a/packages/wallets/src/components/WalletsResetMT5Password/WalletsResetMT5Password.tsx
+++ b/packages/wallets/src/components/WalletsResetMT5Password/WalletsResetMT5Password.tsx
@@ -5,7 +5,7 @@ import { CFD_PLATFORMS, PlatformDetails } from '../../features/cfd/constants';
import useDevice from '../../hooks/useDevice';
import { TPlatforms } from '../../types';
import { validPassword, validPasswordMT5 } from '../../utils/password-validation';
-import { ModalWrapper, WalletButton, WalletPasswordFieldLazy, WalletText } from '../Base';
+import { ModalStepWrapper, WalletButton, WalletPasswordFieldLazy, WalletText } from '../Base';
import { useModal } from '../ModalProvider';
import { WalletError } from '../WalletError';
import WalletSuccessResetMT5Password from './WalletSuccessResetMT5Password';
@@ -49,10 +49,30 @@ const WalletsResetMT5Password = ({
const { hide, show } = useModal();
const [password, setPassword] = useState('');
- const { isMobile } = useDevice();
+ const { isDesktop, isMobile } = useDevice();
const isMT5 = platform === CFD_PLATFORMS.MT5;
+ const renderFooter = isMobile
+ ? () => {
+ return (
+
+ hide()} variant='outlined'>
+
+
+
+
+
+
+ );
+ }
+ : undefined;
+
const handleSubmit = () => {
if (isInvestorPassword && isMT5) {
const accountId = localStorage.getItem('trading_platform_investor_password_reset_account_id') ?? '';
@@ -106,7 +126,12 @@ const WalletsResetMT5Password = ({
}, [platform, title, actionParams, isChangeInvestorPasswordSuccess, isChangeInvestorPasswordError]);
return (
-
+
{isInvestorPassword ? `Reset ${title} investor password` : `Create a new ${title} password`}
@@ -121,21 +146,24 @@ const WalletsResetMT5Password = ({
password={password}
/>
{modalDescription[platform]}
-
- hide()} variant='outlined'>
-
-
-
-
-
-
+ {isDesktop && (
+
+ hide()} size='lg' variant='outlined'>
+
+
+
+
+
+
+ )}
-
+
);
};
diff --git a/packages/wallets/src/components/index.ts b/packages/wallets/src/components/index.ts
index da5b7b08781a..c2c50482009d 100644
--- a/packages/wallets/src/components/index.ts
+++ b/packages/wallets/src/components/index.ts
@@ -27,6 +27,7 @@ export * from './WalletListCardBadge';
export * from './WalletListCardBalance';
export * from './WalletListCardDetails';
export * from './WalletListCardDropdown';
+export * from './WalletListHeader';
export * from './WalletMarketIcon';
export * from './WalletNoWalletFoundState';
export * from './WalletsActionScreen';
diff --git a/packages/wallets/src/features/cfd/components/CFDPlatformsListAccounts/CFDPlatformsListAccounts.scss b/packages/wallets/src/features/cfd/components/CFDPlatformsListAccounts/CFDPlatformsListAccounts.scss
index 6eeb4731ec1c..35aae5c236de 100644
--- a/packages/wallets/src/features/cfd/components/CFDPlatformsListAccounts/CFDPlatformsListAccounts.scss
+++ b/packages/wallets/src/features/cfd/components/CFDPlatformsListAccounts/CFDPlatformsListAccounts.scss
@@ -11,7 +11,9 @@
@include mobile {
grid-template-rows: repeat(3, 1fr);
grid-template-columns: auto;
- padding-bottom: 1.6rem;
+ padding-bottom: 0;
+ margin-bottom: 0.8rem;
+ border-bottom: 1px solid var(--system-light-6-hover-background, #e6e9e9);
}
}
}
diff --git a/packages/wallets/src/features/cfd/components/CompareAccountsCarousel/CompareAccountsCarousel.scss b/packages/wallets/src/features/cfd/components/CompareAccountsCarousel/CompareAccountsCarousel.scss
index 4807e58555e9..b0c9941458aa 100644
--- a/packages/wallets/src/features/cfd/components/CompareAccountsCarousel/CompareAccountsCarousel.scss
+++ b/packages/wallets/src/features/cfd/components/CompareAccountsCarousel/CompareAccountsCarousel.scss
@@ -6,9 +6,6 @@
overflow: hidden;
width: 100%;
height: 100%;
- @include mobile {
- padding-bottom: 6rem;
- }
}
&__container {
backface-visibility: hidden;
diff --git a/packages/wallets/src/features/cfd/components/CompareAccountsCarousel/CompareAccountsCarouselButton.scss b/packages/wallets/src/features/cfd/components/CompareAccountsCarousel/CompareAccountsCarouselButton.scss
index 12bd7d41e243..7afb333f1e6e 100644
--- a/packages/wallets/src/features/cfd/components/CompareAccountsCarousel/CompareAccountsCarouselButton.scss
+++ b/packages/wallets/src/features/cfd/components/CompareAccountsCarousel/CompareAccountsCarouselButton.scss
@@ -26,8 +26,4 @@
opacity: 0.3;
display: none;
}
-
- @include mobile {
- display: none;
- }
}
diff --git a/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx b/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx
index f04b116277a1..6335088785af 100644
--- a/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx
+++ b/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx
@@ -278,9 +278,9 @@ const MT5PasswordModal: React.FC = ({ marketType, platform }) => {
if (emailVerificationStatus === 'success') {
return (
-
+
-
+
);
}
diff --git a/packages/wallets/src/features/cfd/screens/ChangePassword/ChangePassword.scss b/packages/wallets/src/features/cfd/screens/ChangePassword/ChangePassword.scss
index 7552fe04810f..6724455f2f20 100644
--- a/packages/wallets/src/features/cfd/screens/ChangePassword/ChangePassword.scss
+++ b/packages/wallets/src/features/cfd/screens/ChangePassword/ChangePassword.scss
@@ -47,7 +47,7 @@
&__sent-email-wrapper {
.wallets-sent-email-content {
- padding: unset;
+ padding: 0 6rem;
margin-top: 3.2rem;
width: 100%;
diff --git a/packages/wallets/src/features/cfd/screens/ChangePassword/TradingPlatformChangePasswordScreens.tsx b/packages/wallets/src/features/cfd/screens/ChangePassword/TradingPlatformChangePasswordScreens.tsx
index 8b00b11e3d49..fe8875ace4ad 100644
--- a/packages/wallets/src/features/cfd/screens/ChangePassword/TradingPlatformChangePasswordScreens.tsx
+++ b/packages/wallets/src/features/cfd/screens/ChangePassword/TradingPlatformChangePasswordScreens.tsx
@@ -83,7 +83,7 @@ const TradingPlatformChangePasswordScreens: FC
-
+
);
diff --git a/packages/wallets/src/features/cfd/screens/CompareAccounts/CompareAccountsDescription.scss b/packages/wallets/src/features/cfd/screens/CompareAccounts/CompareAccountsDescription.scss
index 687dc9f83ade..545442bbd497 100644
--- a/packages/wallets/src/features/cfd/screens/CompareAccounts/CompareAccountsDescription.scss
+++ b/packages/wallets/src/features/cfd/screens/CompareAccounts/CompareAccountsDescription.scss
@@ -1,12 +1,12 @@
.wallets-compare-accounts-text-container {
- max-height: 24.5rem;
+ height: 24.5rem;
@include mobile {
- max-height: 21rem;
+ height: 21rem;
}
&--demo {
- max-height: 13.5rem;
+ height: 13.5rem;
}
&__separator {
margin: 0.9rem;
diff --git a/packages/wallets/src/features/cfd/screens/CompareAccounts/CompareAccountsHeader.scss b/packages/wallets/src/features/cfd/screens/CompareAccounts/CompareAccountsHeader.scss
index 48376f099f70..2c141971f500 100644
--- a/packages/wallets/src/features/cfd/screens/CompareAccounts/CompareAccountsHeader.scss
+++ b/packages/wallets/src/features/cfd/screens/CompareAccounts/CompareAccountsHeader.scss
@@ -7,7 +7,7 @@
position: sticky;
top: 0;
background-color: #ffffff;
- z-index: 999;
+ z-index: 1;
&__title {
display: flex;
diff --git a/packages/wallets/src/features/cfd/screens/CompareAccounts/CompareAccountsScreen.scss b/packages/wallets/src/features/cfd/screens/CompareAccounts/CompareAccountsScreen.scss
index caac43e69d2a..a48cee7e8c1d 100644
--- a/packages/wallets/src/features/cfd/screens/CompareAccounts/CompareAccountsScreen.scss
+++ b/packages/wallets/src/features/cfd/screens/CompareAccounts/CompareAccountsScreen.scss
@@ -6,8 +6,6 @@
margin: 0;
overflow-x: auto;
overflow-y: scroll;
- padding: 0 0 20.1rem;
- max-height: 80rem;
}
&__card-list {
diff --git a/packages/wallets/src/features/cfd/screens/CompareAccounts/CompareAccountsScreen.tsx b/packages/wallets/src/features/cfd/screens/CompareAccounts/CompareAccountsScreen.tsx
index 78e66e28fdb7..94c7e48ad036 100644
--- a/packages/wallets/src/features/cfd/screens/CompareAccounts/CompareAccountsScreen.tsx
+++ b/packages/wallets/src/features/cfd/screens/CompareAccounts/CompareAccountsScreen.tsx
@@ -1,7 +1,7 @@
import React, { useMemo } from 'react';
import { useActiveWalletAccount, useCFDAccountsList, useCFDCompareAccounts } from '@deriv/api-v2';
import { CompareAccountsCarousel } from '../../components';
-import CFDCompareAccountsCard from './CompareAccountsCard';
+import CompareAccountsCard from './CompareAccountsCard';
import { isCTraderAccountAdded, isDxtradeAccountAdded } from './compareAccountsConfig';
import CompareAccountsHeader from './CompareAccountsHeader';
import './CompareAccountsScreen.scss';
@@ -33,7 +33,7 @@ const CompareAccountsScreen = () => {
{mt5Accounts?.map(item => (
- {
))}
{/* Renders cTrader data */}
{mt5Accounts?.length && hasCTraderAccountAvailable && ctraderAccount && (
- {
)}
{/* Renders Deriv X data */}
{mt5Accounts?.length && hasDxtradeAccountAvailable && dxtradeAccount && (
- {
return (
+
{isMobile ?
:
}
{!isMobile &&
}
diff --git a/packages/wallets/src/routes/WalletsListingRoute/__tests__/WalletsListingRoute.spec.tsx b/packages/wallets/src/routes/WalletsListingRoute/__tests__/WalletsListingRoute.spec.tsx
index 08f8c0207ff0..239de1a653be 100644
--- a/packages/wallets/src/routes/WalletsListingRoute/__tests__/WalletsListingRoute.spec.tsx
+++ b/packages/wallets/src/routes/WalletsListingRoute/__tests__/WalletsListingRoute.spec.tsx
@@ -9,6 +9,7 @@ jest.mock('../../../hooks/useDevice', () => jest.fn());
jest.mock('../../../components/', () => {
return {
DesktopWalletsList: () =>
DesktopWalletsList
,
+ WalletListHeader: () =>
WalletListHeader
,
WalletsAddMoreCarousel: () =>
WalletsAddMoreCarousel
,
WalletsCarousel: () =>
WalletsCarousel
,
WalletTourGuide: () =>
WalletTourGuide
,
@@ -22,6 +23,7 @@ describe('WalletsListingRoute', () => {
(useDevice as jest.Mock).mockReturnValue({ isMobile: false });
render(
, { wrapper });
+ expect(screen.getByText('WalletListHeader')).toBeInTheDocument();
expect(screen.getByText('DesktopWalletsList')).toBeInTheDocument();
expect(screen.getByText('WalletTourGuide')).toBeInTheDocument();
expect(screen.queryByText('WalletsCarousel')).not.toBeInTheDocument();
@@ -31,6 +33,7 @@ describe('WalletsListingRoute', () => {
(useDevice as jest.Mock).mockReturnValue({ isMobile: true });
render(
, { wrapper });
+ expect(screen.getByText('WalletListHeader')).toBeInTheDocument();
expect(screen.queryByText('DesktopWalletsList')).not.toBeInTheDocument();
expect(screen.getByText('WalletsCarousel')).toBeInTheDocument();
expect(screen.queryByText('WalletTourGuide')).not.toBeInTheDocument();