Nijil/wall 3711/wallets route update

packages/account/src/Containers/Account/page-overlay-wrapper.tsx

@@ -24,7 +24,7 @@ const PageOverlayWrapper = observer(({ routes, subroutes }: PageOverlayWrapperPr
     const history = useHistory();
     const { client, common, ui } = useStore();
     const { is_mobile } = ui;
-    const { has_wallet, logout } = client;
+    const { logout } = client;
     const { is_from_derivgo } = common;
 
     const passkeysMenuCloseActionEventTrack = React.useCallback(() => {
@@ -46,8 +46,8 @@ const PageOverlayWrapper = observer(({ routes, subroutes }: PageOverlayWrapperPr
             passkeysMenuCloseActionEventTrack();
         }
 
-        has_wallet ? history.push(shared_routes.wallets) : history.push(shared_routes.traders_hub);
-    }, [history, has_wallet]);
+        history.push(shared_routes.traders_hub);
+    }, [history]);
 
     const selected_route = getSelectedRoute({ routes: subroutes as Array<TRoute>, pathname: location.pathname });
 

packages/api-v2/src/hooks/useOnfido.ts

@@ -164,7 +164,7 @@ const useOnfido = (country?: string, selectedDocument?: string) => {
             document.body.appendChild(linkNode);
 
             scriptNode.addEventListener('load', () => {
-                initOnfido(); 
+                initOnfido();
                 setIsOnfidoLoading(false);
             });
         }

packages/appstore/package.json

@@ -35,6 +35,7 @@
         "@deriv/stores": "^1.0.0",
         "@deriv/translations": "^1.0.0",
         "@deriv/hooks": "^1.0.0",
+        "@deriv/wallets": "^1.0.0",
         "classnames": "^2.2.6",
         "mobx": "^6.6.1",
         "mobx-react-lite": "^3.4.0",

packages/appstore/src/components/routes/routes.tsx

@@ -3,40 +3,46 @@ import { Loading } from '@deriv/components';
 import { observer, useStore } from '@deriv/stores';
 import { localize } from '@deriv/translations';
 import { routes } from '@deriv/shared';
-import { Switch, useHistory } from 'react-router-dom';
+import { Switch } from 'react-router-dom';
 import RouteWithSubroutes from './route-with-sub-routes.jsx';
 
 const Onboarding = React.lazy(() => import(/* webpackChunkName: "modules-onboarding" */ 'Modules/onboarding'));
 const TradersHub = React.lazy(() => import(/* webpackChunkName: "modules-traders-hub" */ 'Modules/traders-hub'));
 const TradersHubLoggedOut = React.lazy(
     () => import(/* webpackChunkName: "modules-traders-hub-logged-out" */ 'Modules/traders-hub-logged-out')
 );
+const Page404 = React.lazy(() => import(/* */ 'Modules/Page404'));
 
 const Routes: React.FC = observer(() => {
     const { client } = useStore();
-    const { is_logged_in, is_logging_in, has_wallet } = client;
-    const history = useHistory();
+    const { is_logged_in, is_logging_in } = client;
 
     const title_TH = localize("Trader's Hub");
     const title_TH_logged_out = localize('Deriv App');
 
-    React.useLayoutEffect(() => {
-        if (has_wallet) history.push(routes.wallets);
-    }, [history, has_wallet]);
+    const componentToRender = () => {
+        if (is_logged_in || is_logging_in) {
+            return TradersHub;
+        }
+        return TradersHubLoggedOut;
+    };
 
     return (
         <React.Suspense fallback={<Loading />}>
             <Switch>
                 <RouteWithSubroutes
                     path={routes.traders_hub}
-                    component={is_logged_in || is_logging_in ? TradersHub : TradersHubLoggedOut}
+                    exact
+                    component={componentToRender()}
                     getTitle={() => (is_logged_in || is_logging_in ? title_TH : title_TH_logged_out)}
                 />
                 <RouteWithSubroutes
                     path={routes.onboarding}
+                    exact
                     component={Onboarding}
                     getTitle={() => localize('Onboarding')}
                 />
+                <RouteWithSubroutes component={Page404} getTitle={() => localize('Deriv App')} />
             </Switch>
         </React.Suspense>
     );

packages/appstore/src/modules/Page404/Components/Page404.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { PageError } from '@deriv/components';
+import { routes, getUrlBase } from '@deriv/shared';
+import { localize } from '@deriv/translations';
+
+const Page404 = () => (
+    <PageError
+        header={localize('We couldn’t find that page')}
+        messages={[
+            localize('You may have followed a broken link, or the page has moved to a new address.'),
+            localize('Error code: {{error_code}} page not found', { error_code: 404 }),
+        ]}
+        redirect_urls={[routes.traders_hub]}
+        redirect_labels={[localize("Return to Trader's Hub")]}
+        classNameImage='page-404__image'
+        image_url={getUrlBase('/public/images/common/404.png')}
+    />
+);
+
+export default Page404;

packages/appstore/src/modules/Page404/Components/__tests__/Page404.spec.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Router } from 'react-router';
+import { createBrowserHistory } from 'history';
+import { render, screen } from '@testing-library/react';
+import Page404 from '../Page404';
+
+describe('Page404', () => {
+    const browser_history = createBrowserHistory();
+
+    it('should render Page404', () => {
+        render(
+            <Router history={browser_history}>
+                <Page404 />
+            </Router>
+        );
+
+        expect(screen.getByText('We couldn’t find that page')).toBeInTheDocument();
+    });
+});

packages/appstore/src/modules/Page404/index.ts

@@ -0,0 +1,3 @@
+import Page404 from './Components/Page404';
+
+export default Page404;

packages/appstore/src/types/common.types.ts

@@ -1,6 +1,5 @@
 import { DetailsOfEachMT5Loginid } from '@deriv/api-types';
 import { useStore } from '@deriv/stores';
-
 import { PlatformIcons } from 'Assets/svgs/trading-platform';
 import { RegionAvailability } from 'Constants/platform-config';
 

packages/cashier/src/containers/routes/binary-routes.tsx

@@ -1,10 +1,12 @@
 import React, { useEffect } from 'react';
 import { Switch } from 'react-router-dom';
+import { useFeatureFlags } from '@deriv/hooks';
+import { routes } from '@deriv/shared';
+import { useStore } from '@deriv/stores';
 import { Localize, localize } from '@deriv/translations';
+import Page404 from 'Components/page-404';
 import getRoutesConfig from 'Constants/routes-config';
 import RouteWithSubRoutes from './route-with-sub-routes';
-import { useFeatureFlags } from '@deriv/hooks';
-import { routes } from '@deriv/shared';
 
 type TBinaryRoutesProps = {
     is_logged_in: boolean;
@@ -30,6 +32,8 @@ const cashierV2RoutesConfig = {
 const BinaryRoutes = (props: TBinaryRoutesProps) => {
     const { is_p2p_v2_enabled } = useFeatureFlags();
     const [routesConfig, setRoutesConfig] = React.useState(getRoutesConfig());
+    const { client } = useStore();
+    const { has_wallet } = client;
 
     useEffect(() => {
         const isRouteAdded = (routePath: string) => routesConfig[0].routes?.some(route => route.path === routePath);
@@ -43,6 +47,8 @@ const BinaryRoutes = (props: TBinaryRoutesProps) => {
         }
     }, [is_p2p_v2_enabled, routesConfig]);
 
+    if (has_wallet) return <Page404 />;
+
     return (
         <React.Suspense fallback={<Loading />}>
             <Switch>

packages/components/src/components/icon/icons.js

@@ -22,6 +22,10 @@ import './appstore/ic-appstore-home.svg';
 import './appstore/ic-appstore-information.svg';
 import './appstore/ic-appstore-link-wallet.svg';
 import './appstore/ic-appstore-linked-wallets.svg';
+import './appstore/ic-appstore-logged-out-eu-coins-desktop.svg';
+import './appstore/ic-appstore-logged-out-eu-coins-responsive.svg';
+import './appstore/ic-appstore-logged-out-non-eu-coins-desktop.svg';
+import './appstore/ic-appstore-logged-out-non-eu-coins-responsive.svg';
 import './appstore/ic-appstore-menu-homepage.svg';
 import './appstore/ic-appstore-multipliers-trade-type.svg';
 import './appstore/ic-appstore-option-trade-type.svg';
@@ -34,6 +38,8 @@ import './appstore/ic-appstore-traders-hub-home.svg';
 import './appstore/ic-appstore-trading-hub-beta.svg';
 import './appstore/ic-appstore-trading-hub-onboarding-dark.svg';
 import './appstore/ic-appstore-trading-hub-onboarding.svg';
+import './appstore/ic-appstore-trustpilot-logo.svg';
+import './appstore/ic-appstore-trustpilot-star.svg';
 import './appstore/ic-appstore-wallet-aud-light.svg';
 import './appstore/ic-appstore-wallet-bitcoin-light.svg';
 import './appstore/ic-appstore-wallet-card-placeholder-dark-red-line.svg';
@@ -371,6 +377,7 @@ import './common/ic-demo-reset-balance-done.svg';
 import './common/ic-demo-reset-balance.svg';
 import './common/ic-demo.svg';
 import './common/ic-deriv-outline.svg';
+import './common/ic-deriv-short-logo.svg';
 import './common/ic-deriv.svg';
 import './common/ic-desktop-outline.svg';
 import './common/ic-desktop.svg';

packages/components/src/components/route-with-subroutes/route-with-subroutes.tsx

@@ -66,7 +66,7 @@ const RouteWithSubRoutes = ({
             if (should_redirect_login) {
                 redirectToLogin(is_logged_in, language);
             } else {
-                result = <Redirect to={shared_routes.root} />;
+                result = <Redirect to={shared_routes.traders_hub} />;
             }
         } else {
             const default_subroute = routes.find(r => r.default);
@@ -81,7 +81,7 @@ const RouteWithSubRoutes = ({
                         <Component {...props} routes={routes} />
                     ) : (
                         <React.Fragment>
-                            {should_redirect ? <Redirect to={shared_routes.root} /> : <Component404 />}
+                            {should_redirect ? <Redirect to={shared_routes.traders_hub} /> : <Component404 />}
                         </React.Fragment>
                     )}
                 </React.Fragment>

packages/core/src/App/AppContent.tsx

@@ -7,10 +7,8 @@ import { observer, useStore } from '@deriv/stores';
 import { getLanguage } from '@deriv/translations';
 import { Analytics } from '@deriv-com/analytics';
 import { browserSupportsWebAuthn } from '@simplewebauthn/browser';
-
 import BinaryBotIFrame from 'Modules/BinaryBotIFrame';
 import SmartTraderIFrame from 'Modules/SmartTraderIFrame';
-
 import ErrorBoundary from './Components/Elements/Errors/error-boundary.jsx';
 import AppToastMessages from './Containers/app-toast-messages.jsx';
 import AppContents from './Containers/Layout/app-contents.jsx';

packages/core/src/App/Components/Layout/Header/menu-link.tsx

@@ -85,10 +85,8 @@ const MenuLink = observer(
         }
 
         if (is_cashier_link && is_virtual && !has_any_real_account) {
-            const toggle_modal_routes = window.location.pathname === routes.root || traders_hub_path;
-
             const handleClickCashier = () => {
-                if (toggle_modal_routes) {
+                if (traders_hub_path) {
                     toggleReadyToDepositModal();
                 }
                 onClickLink?.();

packages/core/src/App/Components/Layout/Header/menu-links.jsx

@@ -46,9 +46,7 @@ const CashierTab = observer(() => {
     const history = useHistory();
 
     const toggle_modal_routes =
-        window.location.pathname === routes.root ||
-        window.location.pathname === routes.traders_hub ||
-        window.location.pathname === routes.bot;
+        window.location.pathname === routes.traders_hub || window.location.pathname === routes.bot;
 
     const toggleModal = () => {
         if (toggle_modal_routes && !has_any_real_account) {

packages/core/src/App/Components/Layout/Header/toggle-menu-drawer.jsx

@@ -66,7 +66,6 @@ const ToggleMenuDrawer = observer(({ platform_config }) => {
 
     const is_trading_hub_category =
         route.startsWith(routes.traders_hub) || route.startsWith(routes.cashier) || route.startsWith(routes.account);
-    const is_wallets_category = route.startsWith(routes.wallets);
 
     const isMounted = useIsMounted();
     const { data } = useRemoteConfig(isMounted());
@@ -108,10 +107,8 @@ const ToggleMenuDrawer = observer(({ platform_config }) => {
 
             const location = window.location.pathname;
 
-            if (location === routes.traders_hub || is_trading_hub_category) {
-                primary_routes = [routes.account, routes.cashier];
-            } else if (has_wallet || location === routes.wallets) {
-                primary_routes = [routes.reports, routes.account];
+            if (location === is_trading_hub_category) {
+                primary_routes = has_wallet ? [routes.reports, routes.account] : [routes.account, routes.cashier];
             } else {
                 primary_routes = [routes.reports, routes.account, routes.cashier];
             }
@@ -313,7 +310,7 @@ const ToggleMenuDrawer = observer(({ platform_config }) => {
                 <Div100vhContainer height_offset='40px'>
                     <div className='header__menu-mobile-body-wrapper'>
                         <React.Fragment>
-                            {!is_trading_hub_category && !is_wallets_category && (
+                            {!is_trading_hub_category && (
                                 <MobileDrawer.SubHeader
                                     className={classNames({
                                         'dc-mobile-drawer__subheader--hidden': is_submenu_expanded,
@@ -334,7 +331,7 @@ const ToggleMenuDrawer = observer(({ platform_config }) => {
                             )}
                             <MobileDrawer.Body
                                 className={classNames({
-                                    'header__menu-mobile-traders-hub': is_trading_hub_category || is_wallets_category,
+                                    'header__menu-mobile-traders-hub': is_trading_hub_category,
                                 })}
                             >
                                 <div className='header__menu-mobile-platform-switcher' id='mobile_platform_switcher' />
@@ -349,14 +346,14 @@ const ToggleMenuDrawer = observer(({ platform_config }) => {
                                 {is_logged_in && (
                                     <MobileDrawer.Item>
                                         <MenuLink
-                                            link_to={has_wallet ? routes.wallets : routes.traders_hub}
+                                            link_to={routes.traders_hub}
                                             icon={TradersHubIcon}
                                             text={localize("Trader's Hub")}
                                             onClickLink={toggleDrawer}
                                         />
                                     </MobileDrawer.Item>
                                 )}
-                                {!is_trading_hub_category && !is_wallets_category && (
+                                {!is_trading_hub_category && (
                                     <MobileDrawer.Item>
                                         <MenuLink
                                             link_to={routes.trade}