[WALL] Farhan/WALL-3277/Responsive>>CFDs- Get button is not functiona…

…l in few scenarios (#12990)

* fix: 🔧 get button doesnt work in mobile

* fix: 🔧 modal hide function

* fix: 🔧 failing tests

packages/wallets/src/AppContent.scss

@@ -12,9 +12,9 @@
         overflow-y: auto;
         height: calc(var(--wallets-vh, 1vh) * 100 - 4rem); // 100vh - 4rem (header)
     }
-}
 
-.wallets-modal-show-header-root {
-    position: absolute;
-    z-index: 1;
+    & .wallets-modal-show-header-root {
+        position: absolute;
+        z-index: 10;
+    }
 }

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

@@ -5,9 +5,6 @@
 
     @include mobile {
         animation: popup 0.2s;
-    }
-
-    @include mobile {
         height: calc(var(--wallets-vh, 1vh) * 100 - 4rem);
         width: 100vw;
         margin: 0;

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

@@ -1,5 +1,6 @@
 import React, { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
+import { useHistory } from 'react-router-dom';
 import { useOnClickOutside } from 'usehooks-ts';
 import useDevice from '../../hooks/useDevice';
 import { THooks, TMarketTypes, TPlatforms } from '../../types';
@@ -42,7 +43,8 @@ const ModalProvider = ({ children }: React.PropsWithChildren<unknown>) => {
     const [content, setContent] = useState<React.ReactNode | null>();
     const [modalOptions, setModalOptions] = useState<TModalOptions>({});
     const [modalState, setModalState] = useState<Map<keyof TModalState, TModalState[keyof TModalState]>>(new Map());
-    const { isDesktop } = useDevice();
+    const { isDesktop, isMobile } = useDevice();
+    const history = useHistory();
 
     const rootRef = useRef<HTMLElement>(document.getElementById('wallets_modal_root'));
     const rootHeaderRef = useRef<HTMLElement | null>(document.getElementById('wallets_modal_show_header_root'));
@@ -57,10 +59,11 @@ const ModalProvider = ({ children }: React.PropsWithChildren<unknown>) => {
 
     const show = (ModalContent: React.ReactNode, options?: TModalOptions) => {
         setContent(ModalContent);
-        setModalOptions({
-            ...modalOptions,
+        setModalOptions(prevModalOptions => ({
+            ...prevModalOptions,
             ...options,
-        });
+        }));
+        history.push('?modal-open=true');
     };
 
     useEffect(() => {
@@ -71,6 +74,14 @@ const ModalProvider = ({ children }: React.PropsWithChildren<unknown>) => {
 
     const hide = () => {
         setContent(null);
+        const url = new URL(window.location.href);
+        url.searchParams.delete('modal-open');
+        window.history.replaceState({}, document.title, url.toString());
+        // Remove rootref to change back to default root
+        setModalOptions(prevModalOptions => ({
+            ...prevModalOptions,
+            rootRef: undefined,
+        }));
     };
 
     useOnClickOutside(modalRef, isDesktop ? hide : () => undefined);
@@ -82,9 +93,9 @@ const ModalProvider = ({ children }: React.PropsWithChildren<unknown>) => {
         if (modalOptions?.shouldHideDerivAppHeader || modalOptions?.defaultRootId === 'wallets_modal_root')
             return rootRef;
         // otherwise do the default behaviour, show Deriv.app header if on responsive
-        if (modalOptions?.defaultRootId === 'wallets_modal_show_header_root' || !isDesktop) return rootHeaderRef;
+        if (modalOptions?.defaultRootId === 'wallets_modal_show_header_root' || isMobile) return rootHeaderRef;
         return rootRef;
-    }, [modalOptions?.rootRef, modalOptions?.shouldHideDerivAppHeader, modalOptions?.defaultRootId, isDesktop]);
+    }, [modalOptions?.rootRef, modalOptions?.shouldHideDerivAppHeader, modalOptions?.defaultRootId, isMobile]);
 
     return (
         <ModalContext.Provider

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

@@ -133,15 +133,13 @@ const OptionsAndMultipliersListing: React.FC<TOptionsAndMultipliersListingProps>
                         <TradingAccountCard
                             {...account}
                             key={`trading-account-card-${title}`}
-                            leading={() => (
+                            leading={
                                 <LinkTitle
                                     icon={data?.dtrade_loginid || !isMobile ? account.icon : account.smallIcon}
                                     title={title}
                                 />
-                            )}
-                            trailing={() => (
-                                <ShowOpenButton isExternal={account.isExternal} redirect={account.redirect} />
-                            )}
+                            }
+                            trailing={<ShowOpenButton isExternal={account.isExternal} redirect={account.redirect} />}
                         >
                             <div className='wallets-options-and-multipliers-listing__content__details'>
                                 <WalletText size='sm' weight='bold'>

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

@@ -2,17 +2,17 @@ import React from 'react';
 import './TradingAccountCard.scss';
 
 type TProps = {
-    leading?: () => React.ReactNode;
-    trailing?: () => React.ReactNode;
+    leading?: React.ReactNode;
+    trailing?: React.ReactNode;
 };
 
 const TradingAccountCard: React.FC<React.PropsWithChildren<TProps>> = ({ children, leading, trailing }) => {
     return (
         <div className='wallets-trading-account-card'>
-            {leading?.()}
+            {leading}
             <div className='wallets-trading-account-card__content'>
                 {children}
-                {trailing?.()}
+                {trailing}
             </div>
         </div>
     );

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

@@ -9,18 +9,18 @@ describe('TradingAccountCard', () => {
     });
 
     it('should render the component with the leading component', () => {
-        render(<TradingAccountCard leading={() => <button>Get</button>}>MT5</TradingAccountCard>);
+        render(<TradingAccountCard leading={<button>Get</button>}>MT5</TradingAccountCard>);
         expect(screen.getByRole('button', { name: 'Get' })).toBeInTheDocument();
     });
 
     it('should render the component with the trailing component', () => {
-        render(<TradingAccountCard trailing={() => <button>Get</button>}>MT5</TradingAccountCard>);
+        render(<TradingAccountCard trailing={<button>Get</button>}>MT5</TradingAccountCard>);
         expect(screen.getByRole('button', { name: 'Get' })).toBeInTheDocument();
     });
 
     it('should render the component with the leading and trailing component', () => {
         render(
-            <TradingAccountCard leading={() => <button>Transfer</button>} trailing={() => <button>Open</button>}>
+            <TradingAccountCard leading={<button>Transfer</button>} trailing={<button>Open</button>}>
                 MT5
             </TradingAccountCard>
         );

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

@@ -18,6 +18,13 @@ jest.mock('../../../../../../../components/ModalProvider', () => ({
     })),
 }));
 
+jest.mock('react-router-dom', () => ({
+    ...jest.requireActual('react-router-dom'),
+    useHistory: jest.fn(() => ({
+        push: jest.fn(),
+    })),
+}));
+
 const mockTransaction = {
     address_hash: '',
     address_url: '',

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

@@ -17,46 +17,44 @@ const AddedCTraderAccountsList: React.FC = () => {
     const { show } = useModal();
     const { t } = useTranslation();
 
-    const leading = () => (
-        <div
-            className='wallets-added-ctrader__icon'
-            onClick={() => {
-                window.open(getStaticUrl('/deriv-ctrader'));
-            }}
-            // Fix sonarcloud issue
-            onKeyDown={event => {
-                if (event.key === 'Enter') {
-                    window.open(getStaticUrl('/deriv-ctrader'));
-                }
-            }}
-        >
-            <CTrader />
-        </div>
-    );
-
-    const trailing = (loginid?: string) => (
-        <div className='wallets-added-ctrader__actions'>
-            <WalletButton
-                onClick={() => {
-                    history.push(`/wallets/cashier/transfer?to-account=${loginid}`);
-                }}
-                variant='outlined'
-            >
-                Transfer
-            </WalletButton>
-            <WalletButton onClick={() => show(<MT5TradeModal platform={PlatformDetails.ctrader.platform} />)}>
-                {t('Open')}
-            </WalletButton>
-        </div>
-    );
-
     return (
         <div className='wallets-added-ctrader'>
             {cTraderAccounts?.map(account => (
                 <TradingAccountCard
                     key={`added-ctrader-${account.login}`}
-                    leading={leading}
-                    trailing={() => trailing(account.id)}
+                    leading={
+                        <div
+                            className='wallets-added-ctrader__icon'
+                            onClick={() => {
+                                window.open(getStaticUrl('/deriv-ctrader'));
+                            }}
+                            // Fix sonarcloud issue
+                            onKeyDown={event => {
+                                if (event.key === 'Enter') {
+                                    window.open(getStaticUrl('/deriv-ctrader'));
+                                }
+                            }}
+                        >
+                            <CTrader />
+                        </div>
+                    }
+                    trailing={
+                        <div className='wallets-added-ctrader__actions'>
+                            <WalletButton
+                                onClick={() => {
+                                    history.push(`/wallets/cashier/transfer?to-account=${account.id}`);
+                                }}
+                                variant='outlined'
+                            >
+                                Transfer
+                            </WalletButton>
+                            <WalletButton
+                                onClick={() => show(<MT5TradeModal platform={PlatformDetails.ctrader.platform} />)}
+                            >
+                                {t('Open')}
+                            </WalletButton>
+                        </div>
+                    }
                 >
                     <div className='wallets-added-ctrader__details'>
                         <WalletText size='sm'>{PlatformDetails.ctrader.title}</WalletText>

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

@@ -7,8 +7,8 @@ import AddedCTraderAccountsList from '../AddedCTraderAccountsList';
 
 type TradingAccountCardProps = {
     children: ReactNode;
-    leading: () => ReactNode;
-    trailing: () => ReactNode;
+    leading: ReactNode;
+    trailing: ReactNode;
 };
 
 jest.mock('@deriv/api', () => ({
@@ -18,9 +18,9 @@ jest.mock('@deriv/api', () => ({
 jest.mock('../../../../../../components/', () => ({
     TradingAccountCard: ({ children, leading, trailing }: TradingAccountCardProps) => (
         <div>
-            {leading && <div>{leading()}</div>}
+            {leading}
             {children}
-            {trailing && <div>{trailing()}</div>}
+            {trailing}
         </div>
     ),
 }));

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

@@ -28,34 +28,6 @@ const AvailableCTraderAccountsList: React.FC = () => {
         });
     };
 
-    const leadingIcon = () => (
-        <div
-            className='wallets-available-ctrader__icon'
-            onClick={() => {
-                window.open(getStaticUrl('/deriv-ctrader'));
-            }}
-            // Fix sonarcloud issue
-            onKeyDown={event => {
-                if (event.key === 'Enter') {
-                    window.open(getStaticUrl('/deriv-ctrader'));
-                }
-            }}
-        >
-            <CTrader />
-        </div>
-    );
-
-    const trailingButton = () => (
-        <WalletButton
-            color='primary-light'
-            onClick={() => {
-                onSubmit();
-            }}
-        >
-            {t('Get')}
-        </WalletButton>
-    );
-
     useEffect(() => {
         if (status === 'success') {
             show(
@@ -78,7 +50,34 @@ const AvailableCTraderAccountsList: React.FC = () => {
 
     return (
         <div className='wallets-available-ctrader'>
-            <TradingAccountCard leading={leadingIcon} trailing={trailingButton}>
+            <TradingAccountCard
+                leading={
+                    <div
+                        className='wallets-available-ctrader__icon'
+                        onClick={() => {
+                            window.open(getStaticUrl('/deriv-ctrader'));
+                        }}
+                        // Fix sonarcloud issue
+                        onKeyDown={event => {
+                            if (event.key === 'Enter') {
+                                window.open(getStaticUrl('/deriv-ctrader'));
+                            }
+                        }}
+                    >
+                        <CTrader />
+                    </div>
+                }
+                trailing={
+                    <WalletButton
+                        color='primary-light'
+                        onClick={() => {
+                            onSubmit();
+                        }}
+                    >
+                        {t('Get')}
+                    </WalletButton>
+                }
+            >
                 <div className='wallets-available-ctrader__details'>
                     <WalletText size='sm' weight='bold'>
                         {PlatformDetails.ctrader.title}

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

@@ -47,8 +47,8 @@ const AddedMT5AccountsList: React.FC<TProps> = ({ account }) => {
 
     return (
         <TradingAccountCard
-            leading={() => <MT5AccountIcon account={account} />}
-            trailing={() => (
+            leading={<MT5AccountIcon account={account} />}
+            trailing={
                 <div className='wallets-added-mt5__actions'>
                     <WalletButton
                         disabled={jurisdictionStatus.is_failed || jurisdictionStatus.is_pending}
@@ -74,7 +74,7 @@ const AddedMT5AccountsList: React.FC<TProps> = ({ account }) => {
                         {t('Open')}
                     </WalletButton>
                 </div>
-            )}
+            }
         >
             <div className='wallets-added-mt5__details'>
                 <div className='wallets-added-mt5__details-title'>