Skip to content

Commit c2e4701

Browse files
farhan-nurzi-derivfarhan-nurzi-deriv
authored
[WALL] Farhan/WALL-3277/Responsive>>CFDs- Get button is not functional in few scenarios (#12990)
* fix: 🔧 get button doesnt work in mobile * fix: 🔧 modal hide function * fix: 🔧 failing tests
1 parent a90e152 commit c2e4701

File tree

14 files changed

+125
-123
lines changed

14 files changed

+125
-123
lines changed

‎packages/wallets/src/AppContent.scss

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,9 @@
1212
overflow-y: auto;
1313
height: calc(var(--wallets-vh, 1vh) * 100 - 4rem); // 100vh - 4rem (header)
1414
}
15-
}
1615

17-
.wallets-modal-show-header-root {
18-
position: absolute;
19-
z-index: 1;
16+
& .wallets-modal-show-header-root {
17+
position: absolute;
18+
z-index: 10;
19+
}
2020
}

‎packages/wallets/src/components/Base/ModalStepWrapper/ModalStepWrapper.scss

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,6 @@
55

66
@include mobile {
77
animation: popup 0.2s;
8-
}
9-
10-
@include mobile {
118
height: calc(var(--wallets-vh, 1vh) * 100 - 4rem);
129
width: 100vw;
1310
margin: 0;

‎packages/wallets/src/components/ModalProvider/ModalProvider.tsx

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react';
22
import { createPortal } from 'react-dom';
3+
import { useHistory } from 'react-router-dom';
34
import { useOnClickOutside } from 'usehooks-ts';
45
import useDevice from '../../hooks/useDevice';
56
import { THooks, TMarketTypes, TPlatforms } from '../../types';
@@ -42,7 +43,8 @@ const ModalProvider = ({ children }: React.PropsWithChildren<unknown>) => {
4243
const [content, setContent] = useState<React.ReactNode | null>();
4344
const [modalOptions, setModalOptions] = useState<TModalOptions>({});
4445
const [modalState, setModalState] = useState<Map<keyof TModalState, TModalState[keyof TModalState]>>(new Map());
45-
const { isDesktop } = useDevice();
46+
const { isDesktop, isMobile } = useDevice();
47+
const history = useHistory();
4648

4749
const rootRef = useRef<HTMLElement>(document.getElementById('wallets_modal_root'));
4850
const rootHeaderRef = useRef<HTMLElement | null>(document.getElementById('wallets_modal_show_header_root'));
@@ -57,10 +59,11 @@ const ModalProvider = ({ children }: React.PropsWithChildren<unknown>) => {
5759

5860
const show = (ModalContent: React.ReactNode, options?: TModalOptions) => {
5961
setContent(ModalContent);
60-
setModalOptions({
61-
...modalOptions,
62+
setModalOptions(prevModalOptions => ({
63+
...prevModalOptions,
6264
...options,
63-
});
65+
}));
66+
history.push('?modal-open=true');
6467
};
6568

6669
useEffect(() => {
@@ -71,6 +74,14 @@ const ModalProvider = ({ children }: React.PropsWithChildren<unknown>) => {
7174

7275
const hide = () => {
7376
setContent(null);
77+
const url = new URL(window.location.href);
78+
url.searchParams.delete('modal-open');
79+
window.history.replaceState({}, document.title, url.toString());
80+
// Remove rootref to change back to default root
81+
setModalOptions(prevModalOptions => ({
82+
...prevModalOptions,
83+
rootRef: undefined,
84+
}));
7485
};
7586

7687
useOnClickOutside(modalRef, isDesktop ? hide : () => undefined);
@@ -82,9 +93,9 @@ const ModalProvider = ({ children }: React.PropsWithChildren<unknown>) => {
8293
if (modalOptions?.shouldHideDerivAppHeader || modalOptions?.defaultRootId === 'wallets_modal_root')
8394
return rootRef;
8495
// otherwise do the default behaviour, show Deriv.app header if on responsive
85-
if (modalOptions?.defaultRootId === 'wallets_modal_show_header_root' || !isDesktop) return rootHeaderRef;
96+
if (modalOptions?.defaultRootId === 'wallets_modal_show_header_root' || isMobile) return rootHeaderRef;
8697
return rootRef;
87-
}, [modalOptions?.rootRef, modalOptions?.shouldHideDerivAppHeader, modalOptions?.defaultRootId, isDesktop]);
98+
}, [modalOptions?.rootRef, modalOptions?.shouldHideDerivAppHeader, modalOptions?.defaultRootId, isMobile]);
8899

89100
return (
90101
<ModalContext.Provider

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

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -133,15 +133,13 @@ const OptionsAndMultipliersListing: React.FC<TOptionsAndMultipliersListingProps>
133133
<TradingAccountCard
134134
{...account}
135135
key={`trading-account-card-${title}`}
136-
leading={() => (
136+
leading={
137137
<LinkTitle
138138
icon={data?.dtrade_loginid || !isMobile ? account.icon : account.smallIcon}
139139
title={title}
140140
/>
141-
)}
142-
trailing={() => (
143-
<ShowOpenButton isExternal={account.isExternal} redirect={account.redirect} />
144-
)}
141+
}
142+
trailing={<ShowOpenButton isExternal={account.isExternal} redirect={account.redirect} />}
145143
>
146144
<div className='wallets-options-and-multipliers-listing__content__details'>
147145
<WalletText size='sm' weight='bold'>

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,17 @@ import React from 'react';
22
import './TradingAccountCard.scss';
33

44
type TProps = {
5-
leading?: () => React.ReactNode;
6-
trailing?: () => React.ReactNode;
5+
leading?: React.ReactNode;
6+
trailing?: React.ReactNode;
77
};
88

99
const TradingAccountCard: React.FC<React.PropsWithChildren<TProps>> = ({ children, leading, trailing }) => {
1010
return (
1111
<div className='wallets-trading-account-card'>
12-
{leading?.()}
12+
{leading}
1313
<div className='wallets-trading-account-card__content'>
1414
{children}
15-
{trailing?.()}
15+
{trailing}
1616
</div>
1717
</div>
1818
);

‎packages/wallets/src/components/TradingAccountCard/__tests__/TradingAccountCard.spec.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,18 +9,18 @@ describe('TradingAccountCard', () => {
99
});
1010

1111
it('should render the component with the leading component', () => {
12-
render(<TradingAccountCard leading={() => <button>Get</button>}>MT5</TradingAccountCard>);
12+
render(<TradingAccountCard leading={<button>Get</button>}>MT5</TradingAccountCard>);
1313
expect(screen.getByRole('button', { name: 'Get' })).toBeInTheDocument();
1414
});
1515

1616
it('should render the component with the trailing component', () => {
17-
render(<TradingAccountCard trailing={() => <button>Get</button>}>MT5</TradingAccountCard>);
17+
render(<TradingAccountCard trailing={<button>Get</button>}>MT5</TradingAccountCard>);
1818
expect(screen.getByRole('button', { name: 'Get' })).toBeInTheDocument();
1919
});
2020

2121
it('should render the component with the leading and trailing component', () => {
2222
render(
23-
<TradingAccountCard leading={() => <button>Transfer</button>} trailing={() => <button>Open</button>}>
23+
<TradingAccountCard leading={<button>Transfer</button>} trailing={<button>Open</button>}>
2424
MT5
2525
</TradingAccountCard>
2626
);

‎packages/wallets/src/features/cashier/modules/TransactionStatus/components/CryptoTransaction/__tests__/CryptoTransaction.spec.tsx

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,13 @@ jest.mock('../../../../../../../components/ModalProvider', () => ({
1818
})),
1919
}));
2020

21+
jest.mock('react-router-dom', () => ({
22+
...jest.requireActual('react-router-dom'),
23+
useHistory: jest.fn(() => ({
24+
push: jest.fn(),
25+
})),
26+
}));
27+
2128
const mockTransaction = {
2229
address_hash: '',
2330
address_url: '',

‎packages/wallets/src/features/cfd/flows/CTrader/AddedCTraderAccountsList/AddedCTraderAccountsList.tsx

Lines changed: 33 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -17,46 +17,44 @@ const AddedCTraderAccountsList: React.FC = () => {
1717
const { show } = useModal();
1818
const { t } = useTranslation();
1919

20-
const leading = () => (
21-
<div
22-
className='wallets-added-ctrader__icon'
23-
onClick={() => {
24-
window.open(getStaticUrl('/deriv-ctrader'));
25-
}}
26-
// Fix sonarcloud issue
27-
onKeyDown={event => {
28-
if (event.key === 'Enter') {
29-
window.open(getStaticUrl('/deriv-ctrader'));
30-
}
31-
}}
32-
>
33-
<CTrader />
34-
</div>
35-
);
36-
37-
const trailing = (loginid?: string) => (
38-
<div className='wallets-added-ctrader__actions'>
39-
<WalletButton
40-
onClick={() => {
41-
history.push(`/wallets/cashier/transfer?to-account=${loginid}`);
42-
}}
43-
variant='outlined'
44-
>
45-
Transfer
46-
</WalletButton>
47-
<WalletButton onClick={() => show(<MT5TradeModal platform={PlatformDetails.ctrader.platform} />)}>
48-
{t('Open')}
49-
</WalletButton>
50-
</div>
51-
);
52-
5320
return (
5421
<div className='wallets-added-ctrader'>
5522
{cTraderAccounts?.map(account => (
5623
<TradingAccountCard
5724
key={`added-ctrader-${account.login}`}
58-
leading={leading}
59-
trailing={() => trailing(account.id)}
25+
leading={
26+
<div
27+
className='wallets-added-ctrader__icon'
28+
onClick={() => {
29+
window.open(getStaticUrl('/deriv-ctrader'));
30+
}}
31+
// Fix sonarcloud issue
32+
onKeyDown={event => {
33+
if (event.key === 'Enter') {
34+
window.open(getStaticUrl('/deriv-ctrader'));
35+
}
36+
}}
37+
>
38+
<CTrader />
39+
</div>
40+
}
41+
trailing={
42+
<div className='wallets-added-ctrader__actions'>
43+
<WalletButton
44+
onClick={() => {
45+
history.push(`/wallets/cashier/transfer?to-account=${account.id}`);
46+
}}
47+
variant='outlined'
48+
>
49+
Transfer
50+
</WalletButton>
51+
<WalletButton
52+
onClick={() => show(<MT5TradeModal platform={PlatformDetails.ctrader.platform} />)}
53+
>
54+
{t('Open')}
55+
</WalletButton>
56+
</div>
57+
}
6058
>
6159
<div className='wallets-added-ctrader__details'>
6260
<WalletText size='sm'>{PlatformDetails.ctrader.title}</WalletText>

‎packages/wallets/src/features/cfd/flows/CTrader/AddedCTraderAccountsList/__tests__/AddedCTraderAccountsList.spec.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ import AddedCTraderAccountsList from '../AddedCTraderAccountsList';
77

88
type TradingAccountCardProps = {
99
children: ReactNode;
10-
leading: () => ReactNode;
11-
trailing: () => ReactNode;
10+
leading: ReactNode;
11+
trailing: ReactNode;
1212
};
1313

1414
jest.mock('@deriv/api', () => ({
@@ -18,9 +18,9 @@ jest.mock('@deriv/api', () => ({
1818
jest.mock('../../../../../../components/', () => ({
1919
TradingAccountCard: ({ children, leading, trailing }: TradingAccountCardProps) => (
2020
<div>
21-
{leading && <div>{leading()}</div>}
21+
{leading}
2222
{children}
23-
{trailing && <div>{trailing()}</div>}
23+
{trailing}
2424
</div>
2525
),
2626
}));

‎packages/wallets/src/features/cfd/flows/CTrader/AvailableCTraderAccountsList/AvailableCTraderAccountsList.tsx

Lines changed: 28 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -28,34 +28,6 @@ const AvailableCTraderAccountsList: React.FC = () => {
2828
});
2929
};
3030

31-
const leadingIcon = () => (
32-
<div
33-
className='wallets-available-ctrader__icon'
34-
onClick={() => {
35-
window.open(getStaticUrl('/deriv-ctrader'));
36-
}}
37-
// Fix sonarcloud issue
38-
onKeyDown={event => {
39-
if (event.key === 'Enter') {
40-
window.open(getStaticUrl('/deriv-ctrader'));
41-
}
42-
}}
43-
>
44-
<CTrader />
45-
</div>
46-
);
47-
48-
const trailingButton = () => (
49-
<WalletButton
50-
color='primary-light'
51-
onClick={() => {
52-
onSubmit();
53-
}}
54-
>
55-
{t('Get')}
56-
</WalletButton>
57-
);
58-
5931
useEffect(() => {
6032
if (status === 'success') {
6133
show(
@@ -78,7 +50,34 @@ const AvailableCTraderAccountsList: React.FC = () => {
7850

7951
return (
8052
<div className='wallets-available-ctrader'>
81-
<TradingAccountCard leading={leadingIcon} trailing={trailingButton}>
53+
<TradingAccountCard
54+
leading={
55+
<div
56+
className='wallets-available-ctrader__icon'
57+
onClick={() => {
58+
window.open(getStaticUrl('/deriv-ctrader'));
59+
}}
60+
// Fix sonarcloud issue
61+
onKeyDown={event => {
62+
if (event.key === 'Enter') {
63+
window.open(getStaticUrl('/deriv-ctrader'));
64+
}
65+
}}
66+
>
67+
<CTrader />
68+
</div>
69+
}
70+
trailing={
71+
<WalletButton
72+
color='primary-light'
73+
onClick={() => {
74+
onSubmit();
75+
}}
76+
>
77+
{t('Get')}
78+
</WalletButton>
79+
}
80+
>
8281
<div className='wallets-available-ctrader__details'>
8382
<WalletText size='sm' weight='bold'>
8483
{PlatformDetails.ctrader.title}

‎packages/wallets/src/features/cfd/flows/MT5/AddedMT5AccountsList/AddedMT5AccountsList.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -47,8 +47,8 @@ const AddedMT5AccountsList: React.FC<TProps> = ({ account }) => {
4747

4848
return (
4949
<TradingAccountCard
50-
leading={() => <MT5AccountIcon account={account} />}
51-
trailing={() => (
50+
leading={<MT5AccountIcon account={account} />}
51+
trailing={
5252
<div className='wallets-added-mt5__actions'>
5353
<WalletButton
5454
disabled={jurisdictionStatus.is_failed || jurisdictionStatus.is_pending}
@@ -74,7 +74,7 @@ const AddedMT5AccountsList: React.FC<TProps> = ({ account }) => {
7474
{t('Open')}
7575
</WalletButton>
7676
</div>
77-
)}
77+
}
7878
>
7979
<div className='wallets-added-mt5__details'>
8080
<div className='wallets-added-mt5__details-title'>

0 commit comments

Comments
 (0)