[WALL] Aizad/WALL-4573/Tablet View for Wallets (#16173)

* chore: remove landscape blocker for Wallets

* chore: update Header for Tablet view for Wallets

* chore: change CFD and Options scss listing to support tablet view

* chore: fix carousel styles for tablet

* chore: remove trading account card border bottom for tablet view

* chore: updated styles for AddMoreWallets section

* chore: replace old mixins with newly updated ones

* chore: implement tablet view for fiat wallet cashier

* chore: update cashier crypto wallets

* chore: update onboarding steps for tablet

* chore: update modal for tablet view and mt5 features

* chore: implement Tablet view on ChangePassword modals

* chore: Enable tablet view for CompareAccount route

* chore: fixing header for different platforms

* chore: fix WalletClipboard component

* chore: fix clipboard component for tablet view

* chore: hide scrollbar inside of cashier content

* chore: update test for AccountList

* chore: fix failing test cases

* chore: replace icons with quill icons

* chore: minor styles updates

* chore: update live chat component

* chore: update JurisdictionTncSection styling to fit tablet

* chore: update WalletError screen

* chore: updated rest of the styles for tablet view

* chore: update rest of the screens with Tablet view

* chore: update tradershub header menu

* fix: resolve comments

* chore: update Wallet Modals

* chore: fix modal for Jurisdiction Modal

* chore: update test cases

* chore: remove useDevice hook from wallet package

* chore: update styles inside of DatePicker component

* chore: fix WalletListHeader test

* chore: fix card width inside of Tablet view

* chore: maintain same transfer screen in desktop for tablet

* chore: update card loader for tablets

* chore: update modal put content in the center

* chore: update container to align at the top for tablet view

* fix: center crypto deposit content inside of cahier

* chore: fix failing test cases

* fix: crypto withdrawal page

* chore: update Text size for wallet action button

* chore: fix shadow getting cut off inside cashier content

* chore: update EnterPasswordModal

* chore: resolve suggestions

* chore: resolve comments

* chore: resolve comments

* chore: resolve comments

* fix: rename test file name and solve test case errors

* chore: resolve comments

* chore: resolve conflicts

* chore: update layout for crypto deposit and withdrawal in desktop

* chore: update font size for responsive action button

* chore: update classnames

* chore: update account switcher based on latest tablet design

* chore: update stylings for tablet view

* fix: test case failing CFDSuccess

* fix: typescript issues and broken test cases

* fix: fiat-onramp contaier alignment issue

* chore: update breakpoints for scss files inside of wallets

* fix: layout sizing and change font size inside of crypto widthdrawal

* fix: failing test cases

* chore: make minor ammendments

* chore: update test cases

* chore: update sizing inside wallet carousel header

* chore: update width for crypto withdrawal

* chore: update text sizing for mt5 jurisdiction and createpassword

* chore: update jurisdiction layout modal for tablet view

* chore: update mt5 password modal tablet view

* chore: fix mt5 modals in tablet view

* chore: update jurisdiction footer text

* chore: update success button width

* chore: fix test cases

* fix: failing test case for WalletBadge

* fix: ammend fail test cases

packages/core/src/App/Components/Elements/LandscapeBlocker/landscape-blocker.tsx

@@ -1,16 +1,12 @@
 import React from 'react';
 import { useLocation } from 'react-router-dom';
 import { isDisabledLandscapeBlockerRoute, isMobileOs, isTabletOs, routes } from '@deriv/shared';
-import { observer, useStore } from '@deriv/stores';
+import { observer } from '@deriv/stores';
 import LandscapeBlockerSvg from 'Assets/SvgComponents/settings/landscape-blocker.svg';
 import './landscape-blocker.scss';
 import { useDevice } from '@deriv-com/ui';
 
 const LandscapeBlocker = observer(() => {
-    // need to check for wallet account and don't hide landscape blocker for users migrated to wallets
-    const {
-        client: { has_wallet },
-    } = useStore();
     const { isMobile } = useDevice();
     const location = useLocation();
     const pathname = location?.pathname;
@@ -24,11 +20,7 @@ const LandscapeBlocker = observer(() => {
             pathname.startsWith(routes.bot) ||
             pathname.startsWith('/contract'));
 
-    if (
-        !has_wallet &&
-        !show_blocker_on_mobile_landscape_view &&
-        (is_hidden_landscape_blocker || should_show_dtrader_tablet_view)
-    )
+    if (!show_blocker_on_mobile_landscape_view && (is_hidden_landscape_blocker || should_show_dtrader_tablet_view))
         return null;
 
     return (

packages/core/src/App/Components/Elements/LiveChat/live-chat.tsx

@@ -1,52 +1,49 @@
 import React from 'react';
 import { Popover, Icon, Text } from '@deriv/components';
+import { useDevice } from '@deriv-com/ui';
 import { observer, useStore } from '@deriv/stores';
 import { Localize } from '@deriv/translations';
 import useLiveChat from 'App/Components/Elements/LiveChat/use-livechat';
 
 const LiveChat = observer(({ showPopover }: { showPopover?: boolean }) => {
-    const { client, ui } = useStore();
+    const { client } = useStore();
     const { has_cookie_account, loginid } = client;
-    const { is_mobile } = ui;
+    const { isDesktop } = useDevice();
     const liveChat = useLiveChat(has_cookie_account, loginid);
 
     if (!liveChat.isReady) return null;
 
     const liveChatClickHandler = () => liveChat.widget?.call('maximize');
 
-    if (is_mobile)
+    if (isDesktop)
         return (
-            <div
-                className='livechat gtm-deriv-livechat'
-                onKeyDown={liveChatClickHandler}
-                onClick={liveChatClickHandler}
-            >
-                <div className='livechat__icon-wrapper'>
-                    <Icon icon='IcLiveChat' className='livechat__icon' />
-                </div>
-                <Text size='xs'>
-                    <Localize i18n_default_text='Live chat' />
-                </Text>
+            <div onKeyDown={liveChatClickHandler} onClick={liveChatClickHandler}>
+                {showPopover ? (
+                    <Popover
+                        className='footer__link'
+                        classNameBubble='help-centre__tooltip'
+                        alignment='top'
+                        message={<Localize i18n_default_text='Live chat' />}
+                        zIndex='9999'
+                    >
+                        <Icon icon='IcLiveChat' className='footer__icon gtm-deriv-livechat' />
+                    </Popover>
+                ) : (
+                    <div className='footer__link'>
+                        <Icon icon='IcLiveChat' className='footer__icon gtm-deriv-livechat' />
+                    </div>
+                )}
             </div>
         );
 
     return (
-        <div onKeyDown={liveChatClickHandler} onClick={liveChatClickHandler}>
-            {showPopover ? (
-                <Popover
-                    className='footer__link'
-                    classNameBubble='help-centre__tooltip'
-                    alignment='top'
-                    message={<Localize i18n_default_text='Live chat' />}
-                    zIndex='9999'
-                >
-                    <Icon icon='IcLiveChat' className='footer__icon gtm-deriv-livechat' />
-                </Popover>
-            ) : (
-                <div className='footer__link'>
-                    <Icon icon='IcLiveChat' className='footer__icon gtm-deriv-livechat' />
-                </div>
-            )}
+        <div className='livechat gtm-deriv-livechat' onKeyDown={liveChatClickHandler} onClick={liveChatClickHandler}>
+            <div className='livechat__icon-wrapper'>
+                <Icon icon='IcLiveChat' className='livechat__icon' />
+            </div>
+            <Text size='xs'>
+                <Localize i18n_default_text='Live chat' />
+            </Text>
         </div>
     );
 });

packages/core/src/App/Components/Layout/Header/__tests__/platform-switcher.spec.tsx

@@ -4,9 +4,9 @@ import { render, screen } from '@testing-library/react';
 import PlatformSwitcher from '../platform-switcher';
 import { createBrowserHistory } from 'history';
 
-jest.mock('@deriv/shared', () => ({
-    ...jest.requireActual('@deriv/shared'),
-    isMobile: jest.fn(() => true),
+jest.mock('@deriv-com/ui', () => ({
+    ...jest.requireActual('@deriv-com/ui'),
+    useDevice: jest.fn(() => ({})),
 }));
 
 const withRouter = <T extends object>(Component: React.ComponentType<T>) => {

packages/core/src/App/Components/Layout/Header/platform-switcher.jsx

@@ -1,8 +1,8 @@
 import 'Sass/app/_common/components/platform-switcher.scss';
 
+import { useDevice } from '@deriv-com/ui';
 import { Icon } from '@deriv/components';
-import { getPlatformInformation, isMobile } from '@deriv/shared';
-
+import { getPlatformInformation } from '@deriv/shared';
 import { CSSTransition } from 'react-transition-group';
 import { PlatformDropdown } from './platform-dropdown.jsx';
 import { PlatformSwitcherLoader } from './Components/Preloader/platform-switcher.jsx';
@@ -25,6 +25,8 @@ const PlatformSwitcher = ({
 
     const is_close_drawer_fired_ref = React.useRef(false);
 
+    const { isDesktop } = useDevice();
+
     React.useEffect(() => {
         if (is_close_drawer_fired_ref.current) {
             if (typeof toggleDrawer === 'function') {
@@ -43,10 +45,10 @@ const PlatformSwitcher = ({
         <div
             data-testid='dt_platform_switcher_preloader'
             className={classNames('platform-switcher__preloader', {
-                'platform-switcher__preloader--is-mobile': isMobile(),
+                'platform-switcher__preloader--is-mobile': !isDesktop,
             })}
         >
-            <PlatformSwitcherLoader is_mobile={isMobile()} speed={3} />
+            <PlatformSwitcherLoader is_mobile={!isDesktop} speed={3} />
         </div>
     ) : (
         <React.Fragment>
@@ -55,7 +57,7 @@ const PlatformSwitcher = ({
                 className={classNames(
                     'platform-switcher',
                     { 'platform-switcher--active': is_open },
-                    { 'platform-switcher--is-mobile': isMobile() }
+                    { 'platform-switcher--is-mobile': !isDesktop }
                 )}
                 onClick={() => setIsOpen(!is_open)}
             >
@@ -76,7 +78,7 @@ const PlatformSwitcher = ({
                 classNames={{
                     enterDone: 'platform-dropdown--enter-done',
                 }}
-                timeout={!isMobile() && is_open ? 0 : 250}
+                timeout={isDesktop && is_open ? 0 : 250}
                 unmountOnExit
             >
                 <PlatformDropdown

packages/core/src/App/Components/Layout/Header/wallets/account-actions-wallets.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { useHistory } from 'react-router';
 import { routes, isTabletOs } from '@deriv/shared';
 import { Button, Icon, Popover } from '@deriv/components';
+import { useDevice } from '@deriv-com/ui';
 import { localize, Localize } from '@deriv/translations';
 import { observer, useStore } from '@deriv/stores';
 import { LoginButton } from '../login-button.jsx';
@@ -14,7 +15,8 @@ import 'Sass/app/_common/components/account-switcher.scss';
 const AccountActionsWallets = observer(() => {
     const { client, ui, notifications } = useStore();
     const { is_logged_in, accounts, loginid } = client;
-    const { openRealAccountSignup, toggleAccountsDialog, is_mobile, is_accounts_switcher_on } = ui;
+    const { openRealAccountSignup, toggleAccountsDialog, is_accounts_switcher_on } = ui;
+    const { isDesktop } = useDevice();
     const { is_notifications_visible, notifications: notificationsArray, toggleNotificationsModal } = notifications;
 
     const notifications_count = notificationsArray?.length;
@@ -44,7 +46,7 @@ const AccountActionsWallets = observer(() => {
         );
     }
 
-    if (is_mobile) {
+    if (!isDesktop) {
         return (
             <React.Fragment>
                 <AccountInfoWallets is_dialog_on={is_accounts_switcher_on} toggleDialog={toggleAccountsDialog} />

packages/core/src/App/Components/Layout/Header/wallets/account-info-wallets.tsx

@@ -11,6 +11,7 @@ import { AccountSwitcherWallet, AccountSwitcherWalletMobile } from 'App/Containe
 import { AccountsInfoLoader } from '../Components/Preloader';
 import AccountInfoWrapper from '../account-info-wrapper';
 import WalletBadge from './wallet-badge';
+import { useDevice } from '@deriv-com/ui';
 
 type TAccountInfoWallets = {
     toggleDialog: () => void;
@@ -109,9 +110,10 @@ const DesktopInfoIcons = observer(({ gradients, icons, icon_type }: TInfoIcons)
 const AccountInfoWallets = observer(({ is_dialog_on, toggleDialog }: TAccountInfoWallets) => {
     const { client, ui } = useStore();
     const { switchAccount, is_logged_in, loginid, accounts } = client;
-    const { is_mobile, account_switcher_disabled_message } = ui;
+    const { account_switcher_disabled_message } = ui;
     const { data: wallet_list } = useStoreWalletAccountsList();
     const linked_wallets_accounts = useStoreLinkedWalletsAccounts();
+    const { isDesktop } = useDevice();
 
     const active_account = accounts?.[loginid ?? ''];
     const wallet_loginid = localStorage.getItem('active_wallet_loginid');
@@ -134,15 +136,15 @@ const AccountInfoWallets = observer(({ is_dialog_on, toggleDialog }: TAccountInf
 
     const linked_wallet = wallet_list?.find(wallet => wallet.dtrade_loginid === linked_dtrade_trading_account_loginid);
 
-    if (!linked_wallet) return <AccountsInfoLoader is_logged_in={is_logged_in} is_mobile={is_mobile} speed={3} />;
+    if (!linked_wallet) return <AccountsInfoLoader is_logged_in={is_logged_in} is_mobile={!isDesktop} speed={3} />;
 
     const show_badge = linked_wallet.is_malta_wallet || linked_wallet.is_virtual;
 
     return (
         <div className='acc-info__wrapper'>
             <div className='acc-info__separator' />
             <AccountInfoWrapper
-                is_mobile={is_mobile}
+                is_mobile={!isDesktop}
                 is_disabled={Boolean(active_account?.is_disabled)}
                 disabled_message={account_switcher_disabled_message}
             >
@@ -157,14 +159,14 @@ const AccountInfoWallets = observer(({ is_dialog_on, toggleDialog }: TAccountInf
                     // SonarLint offers to add handler for onKeyDown event if we have onClick event handler
                     onKeyDown={active_account?.is_disabled ? undefined : () => toggleDialog()}
                 >
-                    {is_mobile ? (
-                        <MobileInfoIcon
+                    {isDesktop ? (
+                        <DesktopInfoIcons
                             gradients={linked_wallet.gradients}
                             icons={linked_wallet.icons}
                             icon_type={linked_wallet.icon_type}
                         />
                     ) : (
-                        <DesktopInfoIcons
+                        <MobileInfoIcon
                             gradients={linked_wallet.gradients}
                             icons={linked_wallet.icons}
                             icon_type={linked_wallet.icon_type}
@@ -185,9 +187,7 @@ const AccountInfoWallets = observer(({ is_dialog_on, toggleDialog }: TAccountInf
                     <DropdownArrow is_disabled={Boolean(active_account?.is_disabled)} />
                 </div>
             </AccountInfoWrapper>
-            {is_mobile ? (
-                <AccountSwitcherWalletMobile is_visible={is_dialog_on} toggle={toggleDialog} loginid={loginid} />
-            ) : (
+            {isDesktop ? (
                 <CSSTransition
                     in={is_dialog_on}
                     timeout={200}
@@ -202,6 +202,8 @@ const AccountInfoWallets = observer(({ is_dialog_on, toggleDialog }: TAccountInf
                         <AccountSwitcherWallet is_visible={is_dialog_on} toggle={toggleDialog} />
                     </div>
                 </CSSTransition>
+            ) : (
+                <AccountSwitcherWalletMobile is_visible={is_dialog_on} toggle={toggleDialog} loginid={loginid} />
             )}
         </div>
     );

packages/core/src/App/Containers/AccountSwitcherWallet/account-switcher-wallet-mobile.scss

@@ -3,21 +3,29 @@
     flex-direction: column;
     height: 100%;
     justify-content: space-between;
+    max-width: 60rem;
+    margin: 0 auto;
 
     &__button {
         margin: 1rem 1.6rem;
     }
 
+    &__divider {
+        border-top: 1px solid var(--general-hover);
+        width: 100%;
+    }
+
     &__footer {
         display: flex;
         align-items: center;
         justify-content: space-between;
         height: 5.6rem;
         border: none;
-        border-top: 1px solid var(--general-hover);
         padding: 0 1.6rem;
         cursor: pointer;
         background: none;
         width: 100%;
+        max-width: 60rem;
+        margin: 0 auto;
     }
 }

packages/core/src/App/Containers/AccountSwitcherWallet/account-switcher-wallet-mobile.tsx

@@ -35,12 +35,15 @@ export const AccountSwitcherWalletMobile = observer(({ is_visible, toggle, login
     };
 
     const footer = (
-        <button className='account-switcher-wallet-mobile__footer' onClick={handleTradersHubRedirect} type='button'>
-            <Text weight='normal' size='xs'>
-                <Localize i18n_default_text='Looking for CFDs? Go to Trader’s Hub' />
-            </Text>
-            <Icon icon='IcChevronRightBold' />
-        </button>
+        <React.Fragment>
+            <hr className='account-switcher-wallet-mobile__divider' />
+            <button className='account-switcher-wallet-mobile__footer' onClick={handleTradersHubRedirect} type='button'>
+                <Text weight='normal' size='xs'>
+                    <Localize i18n_default_text='Looking for CFDs? Go to Trader’s Hub' />
+                </Text>
+                <Icon icon='IcChevronRightBold' />
+            </button>
+        </React.Fragment>
     );
 
     return (