Nijil/Comment out usage of useWalletList and useWalletMigration (bina…

…ry-com#10480) * chore: comment code using useWalletList and useWalletMigration to reduce number of authorize calls * chore: add is_wallet_enabled check from useFeatureFlags hook for WalletModal in ModalManager * chore: consistent TODO comments across all commented out code * chore: Update package-lock * fix: failing test cases Co-authored-by: Sergei Baranovski <sergei-deriv@users.noreply.github.com> --------- Co-authored-by: Sergei Baranovski <sergei-deriv@users.noreply.github.com>
shaheer-deriv · Oct 4, 2023 · 1150c75 · 1150c75
1 parent 21c650e
commit 1150c75
Show file tree

Hide file tree

Showing 11 changed files with 156 additions and 54 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/appstore/src/components/main-title-bar/__tests__/index.spec.tsx b/packages/appstore/src/components/main-title-bar/__tests__/index.spec.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { StoreProvider, mockStore } from '@deriv/stores';
-import { APIProvider, useFetch } from '@deriv/api';
+import { APIProvider /*useFetch*/ } from '@deriv/api';
 import MainTitleBar from '..';
 
-jest.mock('Components/wallets-banner', () => jest.fn(() => 'WalletsBanner'));
-
-const mockUseFetch = useFetch as jest.MockedFunction<typeof useFetch<'authorize'>>;
+//TODO: Uncomment once useWalletMigration hook is optimized for production release.
+// jest.mock('Components/wallets-banner', () => jest.fn(() => 'WalletsBanner'));
+// const mockUseFetch = useFetch as jest.MockedFunction<typeof useFetch<'authorize'>>;
 
 jest.mock('@deriv/api', () => ({
     ...jest.requireActual('@deriv/api'),
@@ -72,35 +72,35 @@ describe('MainTitleBar', () => {
         expect(container).toBeInTheDocument();
     });
 
-    it('should not render WalletsBanner component if wallet feature flag is disabled', () => {
-        render_container();
-        expect(screen.queryByText('WalletsBanner')).not.toBeInTheDocument();
-    });
-
-    it('should render WalletsBanner component if wallet feature flag is enabled', () => {
-        const mock_store = mockStore({
-            client: { accounts: { CR123456: { token: '12345' } }, loginid: 'CR123456' },
-            feature_flags: { data: { wallet: true } },
-        });
-
-        // @ts-expect-error need to come up with a way to mock the return type of useFetch
-        mockUseFetch.mockReturnValue({
-            data: {
-                authorize: {
-                    account_list: [
-                        {
-                            account_category: 'trading',
-                            currency: 'USD',
-                            is_virtual: 0,
-                        },
-                    ],
-                },
-            },
-        });
+    //TODO: Uncomment once useWalletMigration hook is optimized for production release.
+    // it('should not render WalletsBanner component if wallet feature flag is disabled', () => {
+    //     render_container();
+    //     expect(screen.queryByText('WalletsBanner')).not.toBeInTheDocument();
+    // });
 
-        render_container(mock_store);
-        expect(screen.getByText('WalletsBanner')).toBeInTheDocument();
-    });
+    //TODO: Uncomment once useWalletMigration hook is optimized for production release.
+    // it('should render WalletsBanner component if wallet feature flag is enabled', () => {
+    //     const mock_store = mockStore({
+    //         client: { accounts: { CR123456: { token: '12345' } }, loginid: 'CR123456' },
+    //         feature_flags: { data: { wallet: true } },
+    //     });
+    //     // @ts-expect-error need to come up with a way to mock the return type of useFetch
+    //     mockUseFetch.mockReturnValue({
+    //         data: {
+    //             authorize: {
+    //                 account_list: [
+    //                     {
+    //                         account_category: 'trading',
+    //                         currency: 'USD',
+    //                         is_virtual: 0,
+    //                     },
+    //                 ],
+    //             },
+    //         },
+    //     });
+    //     render_container(mock_store);
+    //     expect(screen.getByText('WalletsBanner')).toBeInTheDocument();
+    // });
 
     it('should render the correct title text', () => {
         render_container();

diff --git a/packages/appstore/src/components/main-title-bar/index.tsx b/packages/appstore/src/components/main-title-bar/index.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import { Text, DesktopWrapper, MobileWrapper, Tabs, Icon } from '@deriv/components';
-import { useFeatureFlags } from '@deriv/hooks';
+// import { useFeatureFlags } from '@deriv/hooks';
 import { ContentFlag } from '@deriv/shared';
 import { observer, useStore } from '@deriv/stores';
 import { Localize, localize } from '@deriv/translations';
 import RegulationsSwitcherLoader from 'Components/pre-loader/regulations-switcher-loader';
-import WalletsBanner from 'Components/wallets-banner';
+// import WalletsBanner from 'Components/wallets-banner';
 import AccountTypeDropdown from './account-type-dropdown';
 import AssetSummary from './asset-summary';
 import RegulatorSwitcher from './regulators-switcher';
@@ -24,7 +24,8 @@ const MainTitleBar = () => {
         setActiveIndex(selected_region === 'Non-EU' ? 0 : 1);
     }, [selected_region]);
 
-    const { is_wallet_enabled } = useFeatureFlags();
+    // TODO: Uncomment once useWalletMigration hook is optimized for production release.
+    // const { is_wallet_enabled } = useFeatureFlags();
 
     // TODO: Remove this when we have BE API ready
     removeAllNotificationMessages(true);
@@ -36,7 +37,8 @@ const MainTitleBar = () => {
 
     return (
         <React.Fragment>
-            {is_wallet_enabled && <WalletsBanner />}
+            {/* TODO: Uncomment once useWalletMigration hook is optimized for production release. */}
+            {/* {is_wallet_enabled && <WalletsBanner />} */}
             <DesktopWrapper>
                 <div className='main-title-bar'>
                     <div className='main-title-bar__right'>

diff --git a/packages/appstore/src/components/modals/modal-manager.tsx b/packages/appstore/src/components/modals/modal-manager.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { observer } from 'mobx-react-lite';
 import { ResetTradingPasswordModal } from '@deriv/account';
+import { useFeatureFlags } from '@deriv/hooks';
 import { TTradingPlatformAvailableAccount } from './account-type-modal/types';
 import MT5AccountTypeModal from './account-type-modal';
 import RegulatorsCompareModal from './regulators-compare-modal';
@@ -28,6 +29,7 @@ type TCurrentList = DetailsOfEachMT5Loginid & {
 
 const ModalManager = () => {
     const store = useStores();
+    const { is_wallet_enabled } = useFeatureFlags();
     const { common, client, modules, traders_hub, ui } = store;
     const {
         is_logged_in,
@@ -172,7 +174,7 @@ const ModalManager = () => {
             <FailedVerificationModal />
             {is_real_wallets_upgrade_on && <RealWalletsUpgrade />}
             <WalletsMigrationFailed />
-            <WalletModal />
+            {is_wallet_enabled && <WalletModal />}
         </React.Fragment>
     );
 };

diff --git a/packages/appstore/src/components/routes/routes.tsx b/packages/appstore/src/components/routes/routes.tsx
@@ -1,28 +1,29 @@
 import * as React from 'react';
-import { Loading } from '@deriv/components';
-import { useFeatureFlags, useWalletsList } from '@deriv/hooks';
+// import { Loading } from '@deriv/components';
+import { useFeatureFlags /*useWalletsList*/ } from '@deriv/hooks';
 import { observer } from '@deriv/stores';
 import { Localize, localize } from '@deriv/translations';
 import Wallets from '@deriv/wallets';
 import Onboarding from 'Modules/onboarding';
 import TradersHub from 'Modules/traders-hub';
-import { WalletsModule } from 'Modules/wallets';
+// import { WalletsModule } from 'Modules/wallets';
 import { Switch } from 'react-router-dom';
 import RouteWithSubroutes from './route-with-sub-routes.jsx';
 
 const Routes: React.FC = observer(() => {
-    const { is_wallet_enabled, is_next_wallet_enabled } = useFeatureFlags();
-    const { has_wallet, isLoading } = useWalletsList();
+    //TODO: Uncomment once useWalletList hook is optimized for production release.
+    const { /*is_wallet_enabled,*/ is_next_wallet_enabled } = useFeatureFlags();
+    // const { has_wallet, isLoading } = useWalletsList();
+    // const should_show_wallets = is_wallet_enabled && has_wallet;
 
-    const should_show_wallets = is_wallet_enabled && has_wallet;
     let content: React.FC = TradersHub;
     if (is_next_wallet_enabled) {
         content = Wallets;
-    } else if (should_show_wallets) {
-        content = WalletsModule;
     }
-
-    if (isLoading) return <Loading />;
+    // else if (should_show_wallets) {
+    //     content = WalletsModule;
+    // }
+    // if (isLoading) return <Loading />;
 
     return (
         <React.Suspense

diff --git a/...es/appstore/src/components/wallet-cards-carousel/__tests__/wallet-cards-carousel.spec.tsx b/...es/appstore/src/components/wallet-cards-carousel/__tests__/wallet-cards-carousel.spec.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import { APIProvider } from '@deriv/api';
+import { APIProvider, useFetch } from '@deriv/api';
 import { mockStore, StoreProvider } from '@deriv/stores';
 import WalletCardsCarousel from '..';
 
@@ -96,6 +96,7 @@ jest.mock('@deriv/api', () => ({
 }));
 
 jest.mock('./../cards-slider-swiper', () => jest.fn(() => <div>slider</div>));
+const mockUseFetch = useFetch as jest.MockedFunction<typeof useFetch<'authorize'>>;
 
 describe('<WalletCardsCarousel />', () => {
     const wrapper = (mock: ReturnType<typeof mockStore>) => {
@@ -134,6 +135,23 @@ describe('<WalletCardsCarousel />', () => {
     it('Should render buttons for DEMO', () => {
         const mock = mockStore({ client: { accounts: { VRW10001: { token: '12345' } }, loginid: 'VRW10001' } });
 
+        mockUseFetch.mockReturnValue({
+            data: {
+                authorize: {
+                    account_list: [
+                        {
+                            account_category: 'wallet',
+                            account_type: 'doughflow',
+                            currency: 'USD',
+                            is_virtual: 1,
+                            loginid: 'VRW10001',
+                        },
+                    ],
+                    loginid: 'VRW10001',
+                },
+            },
+        } as unknown as ReturnType<typeof mockUseFetch>);
+
         render(<WalletCardsCarousel />, { wrapper: wrapper(mock) });
 
         const btn1 = screen.getByRole('button', { name: /Transfer/i });