From 342eff89a2d19d6e80693270944de1ecb71ab4b4 Mon Sep 17 00:00:00 2001
From: Rostik Kayko <119863957+rostislav-deriv@users.noreply.github.com>
Date: Wed, 15 May 2024 12:49:13 +0300
Subject: [PATCH] [WALL] Rostislav / WALL-3931 / Wrap wallet migration logic
 behind feature flag (#15036)

* refactor: make `has_wallets` shadow `is_next_wallet_enabled` when `true`

* refactor: extra changes re prev commit

* refactor: e2e tests upd

* refactor: e2e mock upd

* refactor: hide wallets migration stuff behind feature flag

* refactor: revert changes causing integration tests to fail

* refactor: remove typo

* refactor: correct update to client store

* refactor: `<React.Fragment>`

* refactor: dont use `useStoreWalletAccountsList` when unnecessary

* fix: tests

* refactor: revert `<Devtools />` conditional render

* refactor: logic

* refactor: remove flag for <DevTools />

* refactor: `client-store` correction

* fix: revert a bad refactor

* fix: tests

* refactor: remove unused imports

* refactor: remove unused import
---
 .../Account/__tests__/account.spec.tsx         |  5 -----
 .../account/src/Containers/Account/account.tsx |  3 +--
 .../Account/page-overlay-wrapper.tsx           |  8 +++-----
 .../__tests__/language-settings.spec.tsx       |  8 +-------
 .../LanguageSettings/language-settings.tsx     |  9 ++++-----
 .../src/components/main-title-bar/index.tsx    |  9 ++++++---
 .../src/components/modals/modal-manager.tsx    | 13 +++++++++----
 .../appstore/src/components/routes/routes.tsx  | 13 +++++--------
 packages/core/src/App/AppContent.tsx           |  6 ++----
 .../Components/ToggleMenu/menu-title.tsx       |  5 ++---
 .../__tests__/toggle-menu-drawer.spec.jsx      |  4 ----
 .../Components/Layout/Header/menu-links.jsx    |  7 +++----
 .../Layout/Header/toggle-menu-drawer.jsx       | 13 +++++--------
 .../App/Containers/Layout/default-footer.jsx   |  4 +---
 .../__tests__/default-mobile-links.spec.tsx    |  7 +++----
 .../Layout/header/__tests__/header.spec.tsx    |  1 -
 .../__tests__/traders-hub-header.spec.tsx      |  9 ++++-----
 .../__tests__/traders-hub-onboarding.spec.tsx  |  7 -------
 .../Layout/header/default-mobile-links.tsx     |  8 +++++---
 .../App/Containers/Layout/header/header.tsx    | 18 +++++++-----------
 .../Layout/header/traders-hub-home-button.tsx  | 11 ++++++-----
 .../Layout/header/traders-hub-onboarding.tsx   |  9 ++++-----
 .../Containers/Layout/trading-hub-footer.jsx   |  4 +---
 .../src/App/Containers/Modals/app-modals.jsx   |  7 +++----
 .../src/App/Containers/Redirect/redirect.jsx   |  5 ++---
 packages/core/src/Stores/client-store.js       |  3 +--
 .../__tests__/contract-replay.spec.tsx         | 10 +++++-----
 27 files changed, 83 insertions(+), 123 deletions(-)

diff --git a/packages/account/src/Containers/Account/__tests__/account.spec.tsx b/packages/account/src/Containers/Account/__tests__/account.spec.tsx
index ff80af3729c8..b844d6b39177 100644
--- a/packages/account/src/Containers/Account/__tests__/account.spec.tsx
+++ b/packages/account/src/Containers/Account/__tests__/account.spec.tsx
@@ -8,11 +8,6 @@ import Account from '../account';
 
 jest.mock('../../Account/page-overlay-wrapper', () => jest.fn(() => <div>MockPageOverlayWrapper</div>));
 
-jest.mock('@deriv/hooks', () => ({
-    ...jest.requireActual('@deriv/hooks'),
-    useStoreWalletAccountsList: jest.fn(() => ({ has_wallet: false })),
-}));
-
 jest.mock('@deriv/components', () => ({
     ...jest.requireActual('@deriv/components'),
     Loading: () => <div>MockLoading</div>,
diff --git a/packages/account/src/Containers/Account/account.tsx b/packages/account/src/Containers/Account/account.tsx
index fd1bcc71aede..6a86cbe8e179 100644
--- a/packages/account/src/Containers/Account/account.tsx
+++ b/packages/account/src/Containers/Account/account.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { RouteComponentProps, withRouter } from 'react-router-dom';
 import { FadeWrapper, Loading } from '@deriv/components';
-import { useStoreWalletAccountsList } from '@deriv/hooks';
 import { flatten, matchRoute, routes as shared_routes } from '@deriv/shared';
 import { observer, useStore } from '@deriv/stores';
 import PageOverlayWrapper from './page-overlay-wrapper';
@@ -23,6 +22,7 @@ type TAccountProps = RouteComponentProps & {
 const Account = observer(({ history, location, routes }: TAccountProps) => {
     const { client, ui } = useStore();
     const {
+        has_wallet,
         is_virtual,
         is_logged_in,
         is_logging_in,
@@ -33,7 +33,6 @@ const Account = observer(({ history, location, routes }: TAccountProps) => {
         is_passkey_supported,
     } = client;
     const { toggleAccountSettings, is_account_settings_visible, is_mobile, is_desktop } = ui;
-    const { has_wallet } = useStoreWalletAccountsList();
 
     // subroutes of a route is structured as an array of arrays
     const subroutes = flatten(routes.map(i => i.subroutes));
diff --git a/packages/account/src/Containers/Account/page-overlay-wrapper.tsx b/packages/account/src/Containers/Account/page-overlay-wrapper.tsx
index 04dc7940d437..d288ff8469ce 100644
--- a/packages/account/src/Containers/Account/page-overlay-wrapper.tsx
+++ b/packages/account/src/Containers/Account/page-overlay-wrapper.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import { useHistory } from 'react-router-dom';
 import { Analytics } from '@deriv-com/analytics';
 import { PageOverlay, VerticalTab } from '@deriv/components';
-import { useFeatureFlags } from '@deriv/hooks';
 import { getOSNameWithUAParser, getSelectedRoute, getStaticUrl, routes as shared_routes } from '@deriv/shared';
 import { observer, useStore } from '@deriv/stores';
 import { Localize } from '@deriv/translations';
@@ -25,9 +24,8 @@ const PageOverlayWrapper = observer(({ routes, subroutes }: PageOverlayWrapperPr
     const history = useHistory();
     const { client, common, ui } = useStore();
     const { is_mobile } = ui;
-    const { logout } = client;
+    const { has_wallet, logout } = client;
     const { is_from_derivgo } = common;
-    const { is_next_wallet_enabled } = useFeatureFlags();
 
     const passkeysMenuCloseActionEventTrack = React.useCallback(() => {
         Analytics.trackEvent('ce_passkey_account_settings_form', {
@@ -48,8 +46,8 @@ const PageOverlayWrapper = observer(({ routes, subroutes }: PageOverlayWrapperPr
             passkeysMenuCloseActionEventTrack();
         }
 
-        is_next_wallet_enabled ? history.push(shared_routes.wallets) : history.push(shared_routes.traders_hub);
-    }, [history, is_next_wallet_enabled]);
+        has_wallet ? history.push(shared_routes.wallets) : history.push(shared_routes.traders_hub);
+    }, [history, has_wallet]);
 
     const selected_route = getSelectedRoute({ routes: subroutes as Array<TRoute>, pathname: location.pathname });
 
diff --git a/packages/account/src/Sections/Profile/LanguageSettings/__tests__/language-settings.spec.tsx b/packages/account/src/Sections/Profile/LanguageSettings/__tests__/language-settings.spec.tsx
index 29f531791e80..47c687767748 100644
--- a/packages/account/src/Sections/Profile/LanguageSettings/__tests__/language-settings.spec.tsx
+++ b/packages/account/src/Sections/Profile/LanguageSettings/__tests__/language-settings.spec.tsx
@@ -10,11 +10,6 @@ const mockedUseStoreWalletAccountsList = useStoreWalletAccountsList as jest.Mock
     typeof useStoreWalletAccountsList
 >;
 
-jest.mock('@deriv/hooks', () => ({
-    ...jest.requireActual('@deriv/hooks'),
-    useStoreWalletAccountsList: jest.fn(() => ({ has_wallet: false })),
-}));
-
 jest.mock('@deriv/shared', () => ({
     ...jest.requireActual('@deriv/shared'),
     isMobile: jest.fn(() => false),
@@ -99,8 +94,7 @@ describe('LanguageSettings', () => {
     });
 
     it('should redirect when the user tries to reach `/account/languages` route having wallet accounts', () => {
-        //@ts-expect-error since this is a mock, we only need partial properties of useStoreWalletAccountsList data
-        mockedUseStoreWalletAccountsList.mockReturnValueOnce({ has_wallet: true });
+        mockRootStore.client.has_wallet = true;
         Object.defineProperty(window, 'location', {
             configurable: true,
             value: { pathname: routes.languages },
diff --git a/packages/account/src/Sections/Profile/LanguageSettings/language-settings.tsx b/packages/account/src/Sections/Profile/LanguageSettings/language-settings.tsx
index b8a698911e7d..0774b6a3cea2 100644
--- a/packages/account/src/Sections/Profile/LanguageSettings/language-settings.tsx
+++ b/packages/account/src/Sections/Profile/LanguageSettings/language-settings.tsx
@@ -1,17 +1,16 @@
 import React from 'react';
 import { Redirect } from 'react-router-dom';
-import { localize, getAllowedLanguages } from '@deriv/translations';
-import { useStoreWalletAccountsList } from '@deriv/hooks';
 import { routes } from '@deriv/shared';
 import { observer, useStore } from '@deriv/stores';
+import { localize, getAllowedLanguages } from '@deriv/translations';
 import FormSubHeader from 'Components/form-sub-header';
 import LanguageRadioButton from 'Components/language-settings';
 
 const LanguageSettings = observer(() => {
-    const { common, ui } = useStore();
-    const { is_mobile } = ui;
+    const { client, common, ui } = useStore();
+    const { has_wallet } = client;
     const { changeSelectedLanguage, current_language } = common;
-    const { has_wallet } = useStoreWalletAccountsList();
+    const { is_mobile } = ui;
 
     if (is_mobile || has_wallet) {
         return <Redirect to={routes.traders_hub} />;
diff --git a/packages/appstore/src/components/main-title-bar/index.tsx b/packages/appstore/src/components/main-title-bar/index.tsx
index afda0527277e..4003186cf44e 100644
--- a/packages/appstore/src/components/main-title-bar/index.tsx
+++ b/packages/appstore/src/components/main-title-bar/index.tsx
@@ -3,7 +3,7 @@ import { Text, DesktopWrapper, MobileWrapper, Tabs, Icon, Loading } from '@deriv
 import { ContentFlag, makeLazyLoader, moduleLoader } from '@deriv/shared';
 import { observer, useStore } from '@deriv/stores';
 import { Localize, localize } from '@deriv/translations';
-import { useWalletMigration } from '@deriv/hooks';
+import { useFeatureFlags, useWalletMigration } from '@deriv/hooks';
 import RegulationsSwitcherLoader from 'Components/pre-loader/regulations-switcher-loader';
 import BookBanner from 'Components/banners/book-banner';
 import AccountTypeDropdown from './account-type-dropdown';
@@ -21,12 +21,15 @@ const WalletsBanner = makeLazyLoader(
 
 const MainTitleBar = () => {
     const { traders_hub, client } = useStore();
+    const { is_landing_company_loaded, is_switching } = client;
     const { state: wallet_migration_state } = useWalletMigration();
     const { selected_region, handleTabItemClick, toggleRegulatorsCompareModal, content_flag } = traders_hub;
-    const { is_landing_company_loaded, is_switching } = client;
+    const { is_next_wallet_enabled } = useFeatureFlags();
+
     const is_low_risk_cr_real_account =
         content_flag === ContentFlag.LOW_RISK_CR_NON_EU || content_flag === ContentFlag.LOW_RISK_CR_EU;
-    const show_wallets_banner = wallet_migration_state && wallet_migration_state !== 'ineligible';
+    const show_wallets_banner =
+        is_next_wallet_enabled && wallet_migration_state && wallet_migration_state !== 'ineligible';
 
     const [active_index, setActiveIndex] = React.useState(0);
     React.useEffect(() => {
diff --git a/packages/appstore/src/components/modals/modal-manager.tsx b/packages/appstore/src/components/modals/modal-manager.tsx
index fea9915c2aa2..3d737c2b2ccb 100644
--- a/packages/appstore/src/components/modals/modal-manager.tsx
+++ b/packages/appstore/src/components/modals/modal-manager.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { observer } from 'mobx-react-lite';
-import { useWalletMigration } from '@deriv/hooks';
+import { useFeatureFlags, useWalletMigration } from '@deriv/hooks';
 import { makeLazyLoader, moduleLoader } from '@deriv/shared';
 import { Loading } from '@deriv/components';
 import { TTradingPlatformAvailableAccount } from './account-type-modal/types';
@@ -178,6 +178,7 @@ type TCurrentList = DetailsOfEachMT5Loginid & {
 
 const ModalManager = () => {
     const { is_eligible, is_in_progress } = useWalletMigration();
+    const { is_next_wallet_enabled } = useFeatureFlags();
     const store = useStores();
     const { common, client, modules, traders_hub, ui } = store;
     const { is_logged_in, is_eu, is_eu_country, is_populating_mt5_account_list, verification_code } = client;
@@ -338,9 +339,13 @@ const ModalManager = () => {
                 />
             )}
             {is_failed_verification_modal_visible && <FailedVerificationModal />}
-            {(is_real_wallets_upgrade_on || is_in_progress) && <RealWalletsUpgrade />}
-            {is_wallet_migration_failed && <WalletsMigrationFailed />}
-            {is_eligible && <WalletsUpgradeModal />}
+            {is_next_wallet_enabled && (
+                <React.Fragment>
+                    {(is_real_wallets_upgrade_on || is_in_progress) && <RealWalletsUpgrade />}
+                    {is_wallet_migration_failed && <WalletsMigrationFailed />}
+                    {is_eligible && <WalletsUpgradeModal />}{' '}
+                </React.Fragment>
+            )}
         </React.Fragment>
     );
 };
diff --git a/packages/appstore/src/components/routes/routes.tsx b/packages/appstore/src/components/routes/routes.tsx
index 9b128ad807dc..9532212afebe 100644
--- a/packages/appstore/src/components/routes/routes.tsx
+++ b/packages/appstore/src/components/routes/routes.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { Loading } from '@deriv/components';
-import { useFeatureFlags /*useWalletsList*/ } from '@deriv/hooks';
-import { observer } from '@deriv/stores';
+import { observer, useStore } from '@deriv/stores';
 import { localize } from '@deriv/translations';
 import { routes } from '@deriv/shared';
 import { Switch, useHistory } from 'react-router-dom';
@@ -11,15 +10,13 @@ const Onboarding = React.lazy(() => import(/* webpackChunkName: "modules-onboard
 const TradersHub = React.lazy(() => import(/* webpackChunkName: "modules-traders-hub" */ 'Modules/traders-hub'));
 
 const Routes: React.FC = observer(() => {
-    //TODO: Uncomment once useWalletList hook is optimized for production release.
-    const { /*is_wallet_enabled,*/ is_next_wallet_enabled } = useFeatureFlags();
+    const { client } = useStore();
+    const { has_wallet } = client;
     const history = useHistory();
-    // const { has_wallet, isLoading } = useWalletsList();
-    // const should_show_wallets = is_wallet_enabled && has_wallet;
 
     React.useLayoutEffect(() => {
-        if (is_next_wallet_enabled) history.push(routes.wallets);
-    }, [history, is_next_wallet_enabled]);
+        if (has_wallet) history.push(routes.wallets);
+    }, [history, has_wallet]);
 
     return (
         <React.Suspense fallback={<Loading />}>
diff --git a/packages/core/src/App/AppContent.tsx b/packages/core/src/App/AppContent.tsx
index 03f16b7fe60b..b5882cb80e57 100644
--- a/packages/core/src/App/AppContent.tsx
+++ b/packages/core/src/App/AppContent.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import Cookies from 'js-cookie';
 import { useRemoteConfig } from '@deriv/api';
 import { DesktopWrapper } from '@deriv/components';
-import { useFeatureFlags, useStoreWalletAccountsList } from '@deriv/hooks';
 import { getAppId, LocalStore, useIsMounted } from '@deriv/shared';
 import { observer, useStore } from '@deriv/stores';
 import { getLanguage } from '@deriv/translations';
@@ -23,9 +22,8 @@ import Devtools from './Devtools';
 import initDatadog from '../Utils/Datadog';
 
 const AppContent: React.FC<{ passthrough: unknown }> = observer(({ passthrough }) => {
-    const { is_next_wallet_enabled } = useFeatureFlags();
-    const { has_wallet } = useStoreWalletAccountsList();
     const store = useStore();
+    const { has_wallet } = store.client;
 
     const isMounted = useIsMounted();
     const { data } = useRemoteConfig(isMounted());
@@ -108,7 +106,7 @@ const AppContent: React.FC<{ passthrough: unknown }> = observer(({ passthrough }
             <SmartTraderIFrame />
             <BinaryBotIFrame />
             <AppToastMessages />
-            {is_next_wallet_enabled && <Devtools />}
+            <Devtools />
         </>
     );
 });
diff --git a/packages/core/src/App/Components/Layout/Header/Components/ToggleMenu/menu-title.tsx b/packages/core/src/App/Components/Layout/Header/Components/ToggleMenu/menu-title.tsx
index e0ab5a84eab5..82395a4cb7f0 100644
--- a/packages/core/src/App/Components/Layout/Header/Components/ToggleMenu/menu-title.tsx
+++ b/packages/core/src/App/Components/Layout/Header/Components/ToggleMenu/menu-title.tsx
@@ -1,14 +1,13 @@
 import React from 'react';
-import { useStoreWalletAccountsList } from '@deriv/hooks';
 import { observer, useStore } from '@deriv/stores';
 import { Icon, Text } from '@deriv/components';
 import { localize, Localize } from '@deriv/translations';
 
 const MenuTitle = observer(() => {
-    const { common, ui } = useStore();
+    const { client, common, ui } = useStore();
+    const { has_wallet } = client;
     const { current_language } = common;
     const { is_mobile_language_menu_open, setMobileLanguageMenuOpen } = ui;
-    const { has_wallet } = useStoreWalletAccountsList();
 
     return (
         <React.Fragment>
diff --git a/packages/core/src/App/Components/Layout/Header/__tests__/toggle-menu-drawer.spec.jsx b/packages/core/src/App/Components/Layout/Header/__tests__/toggle-menu-drawer.spec.jsx
index d5efb52b2d39..4131731341c0 100644
--- a/packages/core/src/App/Components/Layout/Header/__tests__/toggle-menu-drawer.spec.jsx
+++ b/packages/core/src/App/Components/Layout/Header/__tests__/toggle-menu-drawer.spec.jsx
@@ -12,10 +12,6 @@ jest.mock('@deriv/components', () => {
         MobileDrawer,
     };
 });
-jest.mock('@deriv/hooks', () => ({
-    ...jest.requireActual('@deriv/hooks'),
-    useFeatureFlags: jest.fn(() => ({ is_next_wallet_enabled: true })),
-}));
 jest.mock('react-router-dom', () => ({
     ...jest.requireActual('react-router-dom'),
     useLocation: jest.fn(() => ({ pathname: '/appstore/traders-hub' })),
diff --git a/packages/core/src/App/Components/Layout/Header/menu-links.jsx b/packages/core/src/App/Components/Layout/Header/menu-links.jsx
index 2765027bd79d..db17c7c07bc9 100644
--- a/packages/core/src/App/Components/Layout/Header/menu-links.jsx
+++ b/packages/core/src/App/Components/Layout/Header/menu-links.jsx
@@ -5,7 +5,7 @@ import { BinaryLink } from '../../Routes';
 import { observer, useStore } from '@deriv/stores';
 import { routes, startPerformanceEventTimer } from '@deriv/shared';
 import { localize } from '@deriv/translations';
-import { useP2PNotificationCount, useIsRealAccountNeededForCashier, useFeatureFlags } from '@deriv/hooks';
+import { useP2PNotificationCount, useIsRealAccountNeededForCashier } from '@deriv/hooks';
 import './menu-links.scss';
 import { useHistory } from 'react-router';
 
@@ -91,16 +91,15 @@ const CashierTab = observer(() => {
 const MenuLinks = observer(({ is_traders_hub_routes = false }) => {
     const { i18n } = useTranslation();
     const { client, ui } = useStore();
-    const { is_logged_in } = client;
+    const { has_wallet, is_logged_in } = client;
     const { is_mobile } = ui;
-    const { is_next_wallet_enabled } = useFeatureFlags();
 
     if (!is_logged_in) return <></>;
 
     return (
         <div key={`menu-links__${i18n.language}`} className='header__menu-links'>
             {!is_traders_hub_routes && <ReportTab />}
-            {!is_mobile && !is_next_wallet_enabled && <CashierTab />}
+            {!has_wallet && !is_mobile && <CashierTab />}
         </div>
     );
 });
diff --git a/packages/core/src/App/Components/Layout/Header/toggle-menu-drawer.jsx b/packages/core/src/App/Components/Layout/Header/toggle-menu-drawer.jsx
index ab18f28f18b7..d2a66df685e2 100644
--- a/packages/core/src/App/Components/Layout/Header/toggle-menu-drawer.jsx
+++ b/packages/core/src/App/Components/Layout/Header/toggle-menu-drawer.jsx
@@ -7,12 +7,10 @@ import { Div100vhContainer, Icon, MobileDrawer, ToggleSwitch } from '@deriv/comp
 import {
     useAccountTransferVisible,
     useAuthorize,
-    useFeatureFlags,
     useIsP2PEnabled,
     useOnrampVisible,
     usePaymentAgentTransferVisible,
     useP2PSettings,
-    useStoreWalletAccountsList,
 } from '@deriv/hooks';
 import { getOSNameWithUAParser, getStaticUrl, routes, useIsMounted, whatsapp_url } from '@deriv/shared';
 import { observer, useStore } from '@deriv/stores';
@@ -40,6 +38,7 @@ const ToggleMenuDrawer = observer(({ platform_config }) => {
     } = ui;
     const {
         account_status,
+        has_wallet,
         is_logged_in,
         is_logging_in,
         is_virtual,
@@ -62,8 +61,6 @@ const ToggleMenuDrawer = observer(({ platform_config }) => {
     const is_onramp_visible = useOnrampVisible();
     const { data: is_payment_agent_transfer_visible } = usePaymentAgentTransferVisible();
     const { is_p2p_enabled } = useIsP2PEnabled();
-    const { is_next_wallet_enabled } = useFeatureFlags();
-    const { has_wallet } = useStoreWalletAccountsList();
 
     const { pathname: route } = useLocation();
 
@@ -90,7 +87,7 @@ const ToggleMenuDrawer = observer(({ platform_config }) => {
     } = useP2PSettings();
 
     let TradersHubIcon;
-    if (is_next_wallet_enabled) {
+    if (has_wallet) {
         TradersHubIcon = 'IcAppstoreTradersHubHomeUpdated';
     } else if (is_dark_mode) {
         TradersHubIcon = 'IcAppstoreHomeDark';
@@ -113,7 +110,7 @@ const ToggleMenuDrawer = observer(({ platform_config }) => {
 
             if (location === routes.traders_hub || is_trading_hub_category) {
                 primary_routes = [routes.account, routes.cashier];
-            } else if (location === routes.wallets || is_next_wallet_enabled) {
+            } else if (has_wallet || location === routes.wallets) {
                 primary_routes = [routes.reports, routes.account];
             } else {
                 primary_routes = [routes.reports, routes.account, routes.cashier];
@@ -129,8 +126,8 @@ const ToggleMenuDrawer = observer(({ platform_config }) => {
     }, [
         account_status,
         should_allow_authentication,
+        has_wallet,
         is_trading_hub_category,
-        is_next_wallet_enabled,
         is_mobile,
         is_passkey_supported,
         is_p2p_enabled,
@@ -344,7 +341,7 @@ const ToggleMenuDrawer = observer(({ platform_config }) => {
                                 {is_logged_in && (
                                     <MobileDrawer.Item>
                                         <MenuLink
-                                            link_to={is_next_wallet_enabled ? routes.wallets : routes.traders_hub}
+                                            link_to={has_wallet ? routes.wallets : routes.traders_hub}
                                             icon={TradersHubIcon}
                                             text={localize("Trader's Hub")}
                                             onClickLink={toggleDrawer}
diff --git a/packages/core/src/App/Containers/Layout/default-footer.jsx b/packages/core/src/App/Containers/Layout/default-footer.jsx
index 54dcfa97634e..7e2bd3773d8f 100644
--- a/packages/core/src/App/Containers/Layout/default-footer.jsx
+++ b/packages/core/src/App/Containers/Layout/default-footer.jsx
@@ -15,7 +15,6 @@ import NetworkStatus, {
 import LiveChat from 'App/Components/Elements/LiveChat';
 import WhatsApp from 'App/Components/Elements/WhatsApp/index.ts';
 import ServerTime from '../server-time.jsx';
-import { useStoreWalletAccountsList } from '@deriv/hooks';
 import { observer, useStore } from '@deriv/stores';
 import { useRemoteConfig } from '@deriv/api';
 import { useIsMounted } from '@deriv/shared';
@@ -35,7 +34,7 @@ const FooterExtensionRenderer = (footer_extension, idx) => {
 
 const Footer = observer(() => {
     const { client, common, ui, traders_hub } = useStore();
-    const { is_logged_in, landing_company_shortcode, is_eu, is_virtual } = client;
+    const { has_wallet, is_logged_in, landing_company_shortcode, is_eu, is_virtual } = client;
     const { current_language } = common;
     const {
         enableApp,
@@ -53,7 +52,6 @@ const Footer = observer(() => {
     const { data } = useRemoteConfig(isMounted());
     const { cs_chat_livechat, cs_chat_whatsapp } = data;
     const { show_eu_related_content } = traders_hub;
-    const { has_wallet } = useStoreWalletAccountsList();
 
     let footer_extensions_left = [];
     let footer_extensions_right = [];
diff --git a/packages/core/src/App/Containers/Layout/header/__tests__/default-mobile-links.spec.tsx b/packages/core/src/App/Containers/Layout/header/__tests__/default-mobile-links.spec.tsx
index 6ac75f982491..ddc1a3b5aa11 100644
--- a/packages/core/src/App/Containers/Layout/header/__tests__/default-mobile-links.spec.tsx
+++ b/packages/core/src/App/Containers/Layout/header/__tests__/default-mobile-links.spec.tsx
@@ -14,10 +14,9 @@ jest.mock('../traders-hub-onboarding', () =>
     jest.fn(() => <div data-testid='dt_traders_hub_onboarding'>MockedTradersHubOnboarding</div>)
 );
 
-jest.mock('@deriv/hooks', () => ({
-    useFeatureFlags: () => ({
-        is_next_wallet_enabled: false,
-    }),
+jest.mock('@deriv/stores', () => ({
+    ...jest.requireActual('@deriv/stores'),
+    useStore: jest.fn(() => ({ client: { has_wallet: false } })),
 }));
 
 describe('DefaultMobileLinks', () => {
diff --git a/packages/core/src/App/Containers/Layout/header/__tests__/header.spec.tsx b/packages/core/src/App/Containers/Layout/header/__tests__/header.spec.tsx
index 0ba1db00c2a6..a4c858816548 100644
--- a/packages/core/src/App/Containers/Layout/header/__tests__/header.spec.tsx
+++ b/packages/core/src/App/Containers/Layout/header/__tests__/header.spec.tsx
@@ -6,7 +6,6 @@ import Header from '../header';
 
 jest.mock('@deriv/hooks', () => ({
     ...jest.requireActual('@deriv/hooks'),
-    useFeatureFlags: jest.fn(() => ({ is_next_wallet_enabled: false })),
     useStoreWalletAccountsList: jest.fn(() => ({ data: [], has_wallet: false })),
 }));
 jest.mock('react-router-dom', () => ({
diff --git a/packages/core/src/App/Containers/Layout/header/__tests__/traders-hub-header.spec.tsx b/packages/core/src/App/Containers/Layout/header/__tests__/traders-hub-header.spec.tsx
index 7f00e1e8e916..e2841b22b7eb 100644
--- a/packages/core/src/App/Containers/Layout/header/__tests__/traders-hub-header.spec.tsx
+++ b/packages/core/src/App/Containers/Layout/header/__tests__/traders-hub-header.spec.tsx
@@ -28,11 +28,10 @@ jest.mock('../../../CurrencySelectionModal', () => jest.fn(() => <div>MockedCurr
 jest.mock('../show-notifications', () => jest.fn(() => <div>MockedShowNotifications</div>));
 
 jest.mock('@deriv/hooks', () => ({
-    useFeatureFlags: () => ({
-        is_next_wallet_enabled: false,
-    }),
-    useIsRealAccountNeededForCashier: () => false,
-    useHasSetCurrency: () => true,
+    ...jest.requireActual('@deriv/hooks'),
+    useFeatureFlags: jest.fn(() => ({})),
+    useHasSetCurrency: jest.fn(() => true),
+    useIsRealAccountNeededForCashier: jest.fn(() => false),
 }));
 
 describe('TradersHubHeader', () => {
diff --git a/packages/core/src/App/Containers/Layout/header/__tests__/traders-hub-onboarding.spec.tsx b/packages/core/src/App/Containers/Layout/header/__tests__/traders-hub-onboarding.spec.tsx
index f7cdb0d44e17..aa9f9a0795fc 100644
--- a/packages/core/src/App/Containers/Layout/header/__tests__/traders-hub-onboarding.spec.tsx
+++ b/packages/core/src/App/Containers/Layout/header/__tests__/traders-hub-onboarding.spec.tsx
@@ -8,13 +8,6 @@ import TradersHubOnboarding from '../traders-hub-onboarding';
 import { routes } from '@deriv/shared';
 import { TCoreStores } from '@deriv/stores/types';
 
-jest.mock('@deriv/hooks', () => ({
-    ...jest.requireActual('@deriv/hooks'),
-    useFeatureFlags: jest.fn(() => ({
-        is_next_wallet_enabled: false,
-    })),
-}));
-
 describe('TradersHubOnboarding', () => {
     const onboarding_icon_testid = 'dt_traders_hub_onboarding_icon';
     const popover_wrapper_testid = 'dt_popover_wrapper';
diff --git a/packages/core/src/App/Containers/Layout/header/default-mobile-links.tsx b/packages/core/src/App/Containers/Layout/header/default-mobile-links.tsx
index 814a1f0a972e..997fafba7116 100644
--- a/packages/core/src/App/Containers/Layout/header/default-mobile-links.tsx
+++ b/packages/core/src/App/Containers/Layout/header/default-mobile-links.tsx
@@ -2,20 +2,22 @@ import React from 'react';
 
 import { Button, Icon } from '@deriv/components';
 import { routes } from '@deriv/shared';
+import { useStore } from '@deriv/stores';
 import { Localize } from '@deriv/translations';
 
 import { BinaryLink } from 'App/Components/Routes';
 
 import ShowNotifications from './show-notifications';
 import TradersHubOnboarding from './traders-hub-onboarding';
-import { useFeatureFlags } from '@deriv/hooks';
 
 type TDefaultMobileLinks = {
     handleClickCashier: () => void;
 };
 
 const DefaultMobileLinks = React.memo(({ handleClickCashier }: TDefaultMobileLinks) => {
-    const { is_next_wallet_enabled } = useFeatureFlags();
+    const { client } = useStore();
+    const { has_wallet } = client;
+
     return (
         <React.Fragment>
             <div className='traders-hub-header__menu-right--items--onboarding'>
@@ -27,7 +29,7 @@ const DefaultMobileLinks = React.memo(({ handleClickCashier }: TDefaultMobileLin
             <BinaryLink className='traders-hub-header__setting' to={routes.personal_details}>
                 <Icon icon='IcUserOutline' size={20} />
             </BinaryLink>
-            {!is_next_wallet_enabled && (
+            {!has_wallet && (
                 <div className='traders-hub-header__cashier-button'>
                     <Button primary small onClick={handleClickCashier}>
                         <Localize i18n_default_text='Cashier' />
diff --git a/packages/core/src/App/Containers/Layout/header/header.tsx b/packages/core/src/App/Containers/Layout/header/header.tsx
index 7413d2ecac94..3940b1f0e531 100644
--- a/packages/core/src/App/Containers/Layout/header/header.tsx
+++ b/packages/core/src/App/Containers/Layout/header/header.tsx
@@ -1,9 +1,8 @@
 import React from 'react';
 import { useLocation } from 'react-router-dom';
-import { useFeatureFlags, useStoreWalletAccountsList } from '@deriv/hooks';
+import { useReadLocalStorage } from 'usehooks-ts';
 import { makeLazyLoader, moduleLoader, routes } from '@deriv/shared';
 import { observer, useStore } from '@deriv/stores';
-import { useReadLocalStorage } from 'usehooks-ts';
 
 const HeaderFallback = () => <div className='header' />;
 
@@ -40,7 +39,7 @@ const TradersHubHeaderWallets = makeLazyLoader(
 
 const Header = observer(() => {
     const { client } = useStore();
-    const { accounts, is_logged_in, setAccounts, loginid, switchAccount } = client;
+    const { accounts, has_wallet, is_logged_in, setAccounts, loginid, switchAccount } = client;
     const { pathname } = useLocation();
 
     const is_wallets_cashier_route = pathname.includes(routes.wallets_cashier);
@@ -60,12 +59,9 @@ const Header = observer(() => {
         is_wallets_cashier_route;
 
     const client_accounts = useReadLocalStorage('client.accounts');
-    const { is_next_wallet_enabled } = useFeatureFlags();
-    const { has_wallet } = useStoreWalletAccountsList();
-    const should_show_wallets = is_next_wallet_enabled && has_wallet;
 
     React.useEffect(() => {
-        if (should_show_wallets && is_logged_in) {
+        if (has_wallet && is_logged_in) {
             const accounts_keys = Object.keys(accounts ?? {});
             const client_accounts_keys = Object.keys(client_accounts ?? {});
             if (client_accounts_keys.length > accounts_keys.length) {
@@ -74,22 +70,22 @@ const Header = observer(() => {
                 );
             }
         }
-    }, [accounts, client_accounts, is_logged_in, loginid, setAccounts, should_show_wallets, switchAccount]);
+    }, [accounts, client_accounts, has_wallet, is_logged_in, loginid, setAccounts, switchAccount]);
 
     if (is_logged_in) {
         let result;
         if (traders_hub_routes) {
-            result = should_show_wallets ? <TradersHubHeaderWallets /> : <TradersHubHeader />;
+            result = has_wallet ? <TradersHubHeaderWallets /> : <TradersHubHeader />;
         } else if (pathname === routes.onboarding) {
             result = null;
         } else {
-            result = should_show_wallets ? <DTraderHeaderWallets /> : <DTraderHeader />;
+            result = has_wallet ? <DTraderHeaderWallets /> : <DTraderHeader />;
         }
         return result;
     } else if (pathname === routes.onboarding) {
         return null;
     }
-    return is_next_wallet_enabled ? <DefaultHeaderWallets /> : <DefaultHeader />;
+    return has_wallet ? <DefaultHeaderWallets /> : <DefaultHeader />;
 });
 
 export default Header;
diff --git a/packages/core/src/App/Containers/Layout/header/traders-hub-home-button.tsx b/packages/core/src/App/Containers/Layout/header/traders-hub-home-button.tsx
index b31ae267f023..474beae0d20e 100644
--- a/packages/core/src/App/Containers/Layout/header/traders-hub-home-button.tsx
+++ b/packages/core/src/App/Containers/Layout/header/traders-hub-home-button.tsx
@@ -2,21 +2,22 @@ import React from 'react';
 import { useHistory, useLocation } from 'react-router';
 import classNames from 'classnames';
 import { Icon, Text } from '@deriv/components';
+import { useFeatureFlags } from '@deriv/hooks';
 import { routes } from '@deriv/shared';
 import { observer, useStore } from '@deriv/stores';
 import { Localize } from '@deriv/translations';
-import { useFeatureFlags } from '@deriv/hooks';
 
 const TradersHubHomeButton = observer(() => {
-    const { ui } = useStore();
+    const { client, ui } = useStore();
+    const { has_wallet } = client;
     const { is_dark_mode_on } = ui;
     const history = useHistory();
     const location = useLocation();
     const { pathname } = location;
-    const { is_next_tradershub_enabled, is_next_wallet_enabled } = useFeatureFlags();
+    const { is_next_tradershub_enabled } = useFeatureFlags();
 
     let TradersHubIcon;
-    if (is_next_wallet_enabled) {
+    if (has_wallet) {
         TradersHubIcon = 'IcAppstoreTradersHubHomeUpdated';
     } else if (is_dark_mode_on) {
         TradersHubIcon = 'IcAppstoreHomeDark';
@@ -25,7 +26,7 @@ const TradersHubHomeButton = observer(() => {
     }
 
     const redirectRoutes = () => {
-        if (is_next_wallet_enabled) {
+        if (has_wallet) {
             return routes.wallets;
         } else if (is_next_tradershub_enabled) {
             return routes.traders_hub_v2;
diff --git a/packages/core/src/App/Containers/Layout/header/traders-hub-onboarding.tsx b/packages/core/src/App/Containers/Layout/header/traders-hub-onboarding.tsx
index 7fe5aadf5087..9515deb2ceb8 100644
--- a/packages/core/src/App/Containers/Layout/header/traders-hub-onboarding.tsx
+++ b/packages/core/src/App/Containers/Layout/header/traders-hub-onboarding.tsx
@@ -1,18 +1,17 @@
 import React from 'react';
+import { useLocalStorage } from 'usehooks-ts';
 import { Icon, Popover } from '@deriv/components';
 import { observer, useStore } from '@deriv/stores';
 import { Localize } from '@deriv/translations';
-import { useFeatureFlags } from '@deriv/hooks';
-import { useLocalStorage } from 'usehooks-ts';
 
 const TradersHubOnboarding = observer(() => {
-    const { traders_hub, ui } = useStore();
+    const { client, traders_hub, ui } = useStore();
+    const { has_wallet } = client;
     const { setIsFirstTimeVisit, toggleIsTourOpen, is_tour_open } = traders_hub;
     const { is_dark_mode_on, is_mobile } = ui;
-    const { is_next_wallet_enabled } = useFeatureFlags();
     const [, setWalletsOnboarding] = useLocalStorage('walletsOnboarding', '');
 
-    const onClickHandler = is_next_wallet_enabled
+    const onClickHandler = has_wallet
         ? () => {
               setWalletsOnboarding('started');
           }
diff --git a/packages/core/src/App/Containers/Layout/trading-hub-footer.jsx b/packages/core/src/App/Containers/Layout/trading-hub-footer.jsx
index b0e3f24f720e..4c8259b51ee0 100644
--- a/packages/core/src/App/Containers/Layout/trading-hub-footer.jsx
+++ b/packages/core/src/App/Containers/Layout/trading-hub-footer.jsx
@@ -16,7 +16,6 @@ import NetworkStatus, {
 import LiveChat from 'App/Components/Elements/LiveChat';
 import WhatsApp from 'App/Components/Elements/WhatsApp/index.ts';
 import ServerTime from '../server-time.jsx';
-import { useStoreWalletAccountsList } from '@deriv/hooks';
 import { routes, useIsMounted } from '@deriv/shared';
 import { observer, useStore } from '@deriv/stores';
 import DarkModeToggleIcon from 'Assets/SvgComponents/footer/ic-footer-light-theme.svg';
@@ -41,7 +40,7 @@ const FooterExtensionRenderer = (footer_extension, idx) => {
 const TradingHubFooter = observer(() => {
     const { client, common, ui, traders_hub } = useStore();
     const { show_eu_related_content } = traders_hub;
-    const { is_logged_in, is_eu, landing_company_shortcode, is_virtual } = client;
+    const { has_wallet, is_logged_in, is_eu, landing_company_shortcode, is_virtual } = client;
     const { current_language } = common;
     const {
         enableApp,
@@ -57,7 +56,6 @@ const TradingHubFooter = observer(() => {
         is_dark_mode_on: is_dark_mode,
         setDarkMode,
     } = ui;
-    const { has_wallet } = useStoreWalletAccountsList();
 
     let footer_extensions_left = [];
     let footer_extensions_right = [];
diff --git a/packages/core/src/App/Containers/Modals/app-modals.jsx b/packages/core/src/App/Containers/Modals/app-modals.jsx
index b6c3f02d890f..548666d9f092 100644
--- a/packages/core/src/App/Containers/Modals/app-modals.jsx
+++ b/packages/core/src/App/Containers/Modals/app-modals.jsx
@@ -1,13 +1,13 @@
 import React from 'react';
 import { useLocation } from 'react-router-dom';
 
-import { useStoreWalletAccountsList, useWalletMigration } from '@deriv/hooks';
+import { useWalletMigration } from '@deriv/hooks';
 import { ContentFlag, moduleLoader, routes, SessionStore } from '@deriv/shared';
+import { observer, useStore } from '@deriv/stores';
 
 import DerivRealAccountRequiredModal from 'App/Components/Elements/Modals/deriv-real-account-required-modal.jsx';
 import MT5AccountNeededModal from 'App/Components/Elements/Modals/mt5-account-needed-modal.jsx';
 import RedirectNoticeModal from 'App/Components/Elements/Modals/RedirectNotice';
-import { observer, useStore } from '@deriv/stores';
 
 import CompletedAssessmentModal from './completed-assessment-modal.jsx';
 import ReadyToVerifyModal from './ready-to-verify-modal';
@@ -86,6 +86,7 @@ const InformationSubmittedModal = React.lazy(() =>
 const AppModals = observer(() => {
     const { client, ui, traders_hub, common } = useStore();
     const {
+        has_wallet,
         is_authorize,
         is_logged_in,
         fetchFinancialAssessment,
@@ -131,8 +132,6 @@ const AppModals = observer(() => {
 
     const { is_migrated } = useWalletMigration();
 
-    const { has_wallet } = useStoreWalletAccountsList();
-
     const should_show_wallets_upgrade_completed_modal = localStorage.getItem(
         'should_show_wallets_upgrade_completed_modal'
     );
diff --git a/packages/core/src/App/Containers/Redirect/redirect.jsx b/packages/core/src/App/Containers/Redirect/redirect.jsx
index d32e10499ca0..e5b6fe4dcb0d 100644
--- a/packages/core/src/App/Containers/Redirect/redirect.jsx
+++ b/packages/core/src/App/Containers/Redirect/redirect.jsx
@@ -1,6 +1,5 @@
 import PropTypes from 'prop-types';
 import { withRouter, useHistory } from 'react-router-dom';
-import { useStoreWalletAccountsList } from '@deriv/hooks';
 import { loginUrl, routes, redirectToLogin, SessionStore } from '@deriv/shared';
 import { observer, useStore } from '@deriv/stores';
 import { getLanguage } from '@deriv/translations';
@@ -10,9 +9,9 @@ import { Analytics } from '@deriv-com/analytics';
 const Redirect = observer(() => {
     const history = useHistory();
     const { client, ui } = useStore();
-    const { has_wallet } = useStoreWalletAccountsList();
 
-    const { currency, is_logged_in, is_logging_in, setNewEmail, setVerificationCode, verification_code } = client;
+    const { currency, has_wallet, is_logged_in, is_logging_in, setNewEmail, setVerificationCode, verification_code } =
+        client;
 
     const {
         openRealAccountSignup,
diff --git a/packages/core/src/Stores/client-store.js b/packages/core/src/Stores/client-store.js
index 72806bab8d55..abac8e76ec03 100644
--- a/packages/core/src/Stores/client-store.js
+++ b/packages/core/src/Stores/client-store.js
@@ -2191,9 +2191,8 @@ export default class ClientStore extends BaseStore {
             this.setIsLoggingIn(true);
 
             const redirect_url = sessionStorage.getItem('redirect_url');
-            const is_next_wallet_enabled = localStorage.getObject('FeatureFlagsStore')?.data?.next_wallet;
 
-            const target_url = is_next_wallet_enabled ? routes.wallets : routes.traders_hub;
+            const target_url = this.has_wallet ? routes.wallets : routes.traders_hub;
 
             if (
                 (redirect_url?.endsWith('/') ||
diff --git a/packages/trader/src/Modules/Contract/Containers/__tests__/contract-replay.spec.tsx b/packages/trader/src/Modules/Contract/Containers/__tests__/contract-replay.spec.tsx
index 784b52af5dc2..e6bb1dbe6940 100644
--- a/packages/trader/src/Modules/Contract/Containers/__tests__/contract-replay.spec.tsx
+++ b/packages/trader/src/Modules/Contract/Containers/__tests__/contract-replay.spec.tsx
@@ -7,11 +7,6 @@ import TraderProviders from '../../../../trader-providers';
 import { createMemoryHistory } from 'history';
 import { isDesktop, isMobile } from '@deriv/shared';
 
-jest.mock('@deriv/hooks', () => ({
-    ...jest.requireActual('@deriv/hooks'),
-    useFeatureFlags: jest.fn(() => ({ is_next_wallet_enabled: false })),
-}));
-
 jest.mock('@deriv/components', () => ({
     ...jest.requireActual('@deriv/components'),
     FadeWrapper: jest.fn(({ children }) => <div>{children}</div>),
@@ -33,6 +28,11 @@ jest.mock('../contract-replay-widget', () => ({
 
 jest.mock('../replay-chart', () => jest.fn(() => <div>ReplayChart</div>));
 
+jest.mock('@deriv/hooks', () => ({
+    ...jest.requireActual('@deriv/hooks'),
+    useFeatureFlags: jest.fn(() => ({})),
+}));
+
 jest.mock('@deriv/shared', () => ({
     ...jest.requireActual('@deriv/shared'),
     isMobile: jest.fn(() => false),