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/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/route-with-sub-routes.jsx

@@ -2,11 +2,20 @@ import React from 'react';
 import { Redirect, Route } from 'react-router-dom';
 import { redirectToLogin, isEmptyObject, routes, removeBranchName, default_title } from '@deriv/shared';
 import { getLanguage } from '@deriv/translations';
+import Page404 from 'Modules/Page404';
 
 const RouteWithSubRoutes = route => {
+    const validateRoute = pathname => {
+        if (pathname === '') return true;
+        return route.path === pathname || !!pathname.includes('wallet') || !!pathname.includes('compare-accounts');
+    };
+
     const renderFactory = props => {
         let result = null;
 
+        const pathname = removeBranchName(location.pathname);
+        const is_valid_route = validateRoute(pathname);
+
         if (route.component instanceof Redirect) {
             let to = route.to;
 
@@ -27,12 +36,11 @@ const RouteWithSubRoutes = route => {
                 {}
             );
             const has_default_subroute = !isEmptyObject(default_subroute);
-            const pathname = removeBranchName(location.pathname);
 
             result = (
                 <React.Fragment>
                     {has_default_subroute && pathname === route.path && <Redirect to={default_subroute.path} />}
-                    <route.component {...props} routes={route.routes} />
+                    {is_valid_route ? <route.component {...props} routes={route.routes} /> : <Page404 />}
                 </React.Fragment>
             );
         }

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

@@ -3,33 +3,37 @@ 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 Wallets = React.lazy(() => import(/* webpackChunkName: "wallets" */ '@deriv/wallets'));
 
 const Routes: React.FC = observer(() => {
     const { client } = useStore();
     const { is_logged_in, is_logging_in, has_wallet } = client;
-    const history = useHistory();
 
     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) {
+            if (has_wallet) return Wallets;
+            return TradersHub;
+        }
+        return TradersHubLoggedOut;
+    };
 
     return (
         <React.Suspense fallback={<Loading />}>
             <Switch>
                 <RouteWithSubroutes
                     path={routes.traders_hub}
-                    component={is_logged_in || is_logging_in ? TradersHub : TradersHubLoggedOut}
+                    component={componentToRender()}
                     getTitle={() => (is_logged_in || is_logging_in ? title_TH : title_TH_logged_out)}
                 />
                 <RouteWithSubroutes

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/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,10 @@ 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) {
+            if (has_wallet && location === is_trading_hub_category) {
                 primary_routes = [routes.reports, routes.account];
+            } else if (location === is_trading_hub_category) {
+                primary_routes = [routes.account, routes.cashier];
             } else {
                 primary_routes = [routes.reports, routes.account, routes.cashier];
             }
@@ -313,7 +312,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 +333,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 +348,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}

packages/core/src/App/Constants/routes-config.js

@@ -60,13 +60,6 @@ const AppStore = React.lazy(() =>
     })
 );
 
-const Wallets = React.lazy(() =>
-    moduleLoader(() => {
-        // eslint-disable-next-line import/no-unresolved
-        return import(/* webpackChunkName: "wallets" */ '@deriv/wallets');
-    })
-);
-
 const TradersHub = React.lazy(() =>
     moduleLoader(() => {
         // eslint-disable-next-line import/no-unresolved
@@ -287,12 +280,6 @@ const getModules = () => {
                 },
             ],
         },
-        {
-            path: routes.wallets,
-            component: Wallets,
-            is_authenticated: true,
-            getTitle: () => localize('Wallets'),
-        },
         {
             path: routes.cashier_p2p_v2,
             component: P2P_V2,
@@ -424,37 +411,25 @@ const getModules = () => {
             ],
         },
         {
-            path: routes.onboarding,
+            path: routes.old_traders_hub,
+            component: RedirectToNewTradersHub,
+            is_authenticated: false,
+            getTitle: () => localize("Trader's Hub"),
+        },
+        {
+            path: routes.traders_hub,
             component: AppStore,
             is_authenticated: false,
-            getTitle: () => localize('Appstore'),
+            getTitle: () => localize("Trader's Hub"),
             routes: [
-                {
-                    path: routes.traders_hub,
-                    component: AppStore,
-                    getTitle: () => localize("Trader's Hub"),
-                },
                 {
                     path: routes.onboarding,
                     component: AppStore,
-                    is_authenticated: false,
-                    getTitle: () => localize('Onboarding'),
+                    is_authenticated: true,
+                    getTitle: () => localize("Trader's Hub"),
                 },
             ],
         },
-        {
-            path: routes.traders_hub,
-            component: AppStore,
-            exact: true,
-            is_authenticated: false,
-            getTitle: () => localize("Trader's Hub"),
-        },
-        {
-            path: routes.old_traders_hub,
-            component: RedirectToNewTradersHub,
-            is_authenticated: false,
-            getTitle: () => localize("Trader's Hub"),
-        },
     ];
 
     return modules;
@@ -468,7 +443,7 @@ const lazyLoadComplaintsPolicy = makeLazyLoader(
 // Order matters
 // TODO: search tag: test-route-parent-info -> Enable test for getting route parent info when there are nested routes
 const initRoutesConfig = () => [
-    { path: routes.index, component: RouterRedirect, getTitle: () => '', to: routes.root },
+    { path: routes.index, component: RouterRedirect, getTitle: () => '', to: routes.traders_hub },
     { path: routes.endpoint, component: Endpoint, getTitle: () => 'Endpoint' }, // doesn't need localization as it's for internal use
     { path: routes.redirect, component: Redirect, getTitle: () => localize('Redirect') },
     {

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

@@ -26,7 +26,7 @@ export const AccountSwitcherWalletMobile = observer(({ is_visible, toggle, login
 
     const handleTradersHubRedirect = () => {
         closeAccountsDialog();
-        history.push(routes.wallets);
+        history.push(routes.traders_hub);
     };
 
     const handleManageFundsRedirect = () => {

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

@@ -40,7 +40,7 @@ export const AccountSwitcherWallet = observer(({ is_visible, toggle }: TAccountS
 
     const handleTradersHubRedirect = async () => {
         closeAccountsDialog();
-        history.push(routes.wallets);
+        history.push(routes.traders_hub);
     };
 
     return (