[WALL] Rostislav / WALL-3931 / Wrap wallet migration logic behind fea…

…ture 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

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>,

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));

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 });
 

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 },

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} />;

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(() => {

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>
     );
 };

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 />}>

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 />
         </>
     );
 });

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>

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' })),

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>
     );
 });

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}

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 = [];

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', () => {

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', () => ({