Farzin/Putting wallet behind feature flag [WIP] (#9362)

* refactor(appstore): 🔥 clean-up * refactor(appstore): 🔥 clean-up * refactor(appstore): 🔥 clean-up * refactor(appstore): 🔥 clean-up * refactor(appstore): 🔥 clean-up * refactor(appstore): 🔥 clean-up * refactor(appstore): 🔥 clean-up * refactor(appstore): 🔥 clean-up * refactor(appstore): 🔥 clean-up * refactor(appstore): 🔥 clean-up * refactor(appstore): 🔥 clean-up * refactor(appstore): 🔥 clean-up * refactor(appstore): 🔥 clean-up * refactor(appstore): 🔥 clean-up * refactor(appstore): 🔥 clean-up * refactor(appstore): 🔥 clean-up --------- Co-authored-by: Farzin Mirzaie <farzin@deriv.com>
binary-com · Jul 21, 2023 · e47979e · e47979e
1 parent 991f643
commit e47979e
Show file tree

Hide file tree

Showing 35 changed files with 473 additions and 518 deletions.
diff --git a/packages/appstore/src/components/add-more-wallets/add-more-wallets.scss b/packages/appstore/src/components/add-more-wallets/add-more-wallets.scss
@@ -1,17 +1,21 @@
 .add-wallets {
-    padding: 2rem 0rem 4rem;
-    margin-top: 2.4rem;
+    display: flex;
+    padding-top: 2.4rem;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1.6rem;
+    width: 100%;
+
     &__title {
         @include mobile {
             font-size: var(--text-size-m);
         }
     }
     &__content {
         background-color: var(--general-main-1);
-        height: 35.2rem;
-        margin-top: 1.6rem;
         border-radius: $BORDER_RADIUS;
         position: relative;
+        width: 100%;
     }
     &__card {
         width: 23rem;

diff --git a/packages/appstore/src/components/app-content.tsx b/packages/appstore/src/components/app-content.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import { routes } from '@deriv/shared';
+import { observer, useStore } from '@deriv/stores';
+import Routes from 'Components/routes/routes';
+import classNames from 'classnames';
+import './app.scss';
+
+const AppContent: React.FC = observer(() => {
+    const { ui } = useStore();
+
+    return (
+        <main
+            className={classNames('dashboard', {
+                'theme--light': !ui.is_dark_mode_on,
+                'theme--dark': ui.is_dark_mode_on,
+                'dashboard-onboarding': window.location.pathname === routes.onboarding,
+            })}
+        >
+            <div className='dw-dashboard'>
+                <Routes />
+            </div>
+        </main>
+    );
+});
+
+export default AppContent;
diff --git a/packages/appstore/src/components/app.tsx b/packages/appstore/src/components/app.tsx
@@ -1,45 +1,24 @@
-import classNames from 'classnames';
-import * as React from 'react';
-import { setWebsocket, routes } from '@deriv/shared';
-import { StoreProvider, observer } from '@deriv/stores';
+import React from 'react';
 import CashierStoreProvider from '@deriv/cashier/src/cashier-providers';
 import CFDStoreProvider from '@deriv/cfd/src/cfd-providers';
-import Routes from 'Components/routes/routes';
-import { useStores, initContext } from 'Stores';
-import { TRootStore } from 'Types';
+import { StoreProvider } from '@deriv/stores';
+import AppContent from './app-content';
 import './app.scss';
 
-type TAppProps = {
+type TProps = {
     passthrough: {
-        root_store: TRootStore;
-        WS: Record<string, any>;
+        root_store: React.ComponentProps<typeof StoreProvider>['store'];
     };
 };
 
-const App = ({ passthrough: { WS, root_store } }: TAppProps) => {
-    initContext(root_store, WS);
-    setWebsocket(WS);
-    const { ui }: TRootStore = useStores();
+const App: React.FC<TProps> = ({ passthrough: { root_store } }) => (
+    <CashierStoreProvider store={root_store}>
+        <CFDStoreProvider store={root_store}>
+            <StoreProvider store={root_store}>
+                <AppContent />
+            </StoreProvider>
+        </CFDStoreProvider>
+    </CashierStoreProvider>
+);
 
-    return (
-        <CashierStoreProvider store={root_store as any}>
-            <CFDStoreProvider store={root_store as any}>
-                <StoreProvider store={root_store as any}>
-                    <main
-                        className={classNames('dashboard', {
-                            'theme--light': !ui.is_dark_mode_on,
-                            'theme--dark': ui.is_dark_mode_on,
-                            'dashboard-onboarding': window.location.pathname === routes.onboarding,
-                        })}
-                    >
-                        <div className='dw-dashboard'>
-                            <Routes />
-                        </div>
-                    </main>
-                </StoreProvider>
-            </CFDStoreProvider>
-        </CashierStoreProvider>
-    );
-};
-
-export default observer(App);
+export default App;
diff --git a/packages/appstore/src/components/containers/wallet.scss b/packages/appstore/src/components/containers/wallet.scss
@@ -1,7 +1,7 @@
 .wallet {
-    margin-block-start: 2.4rem;
     background-color: var(--general-main-1);
     border-radius: $BORDER_RADIUS * 4;
+    align-self: stretch;
 
     &__demo {
         background-color: var(--wallet-demo-bg-color);

diff --git a/packages/appstore/src/components/routes/routes-wrapper.tsx b/packages/appstore/src/components/routes/routes-wrapper.tsx
diff --git a/packages/appstore/src/components/routes/routes.tsx b/packages/appstore/src/components/routes/routes.tsx
@@ -1,14 +1,16 @@
 import * as React from 'react';
+import { useFeatureFlags } from '@deriv/hooks';
+import { observer } from '@deriv/stores';
+import { Localize, localize } from '@deriv/translations';
+import Onboarding from 'Modules/onboarding';
+import TradersHub from 'Modules/traders-hub';
+import { WalletsModule } from 'Modules/wallets';
 import { Switch } from 'react-router-dom';
 import RouteWithSubroutes from './route-with-sub-routes.jsx';
-import { Localize } from '@deriv/translations';
-import { observer } from 'mobx-react-lite';
-import getRoutesConfig from 'Constants/routes-config';
-import { useStores } from 'Stores';
-import { TRoute } from 'Types';
 
-const Routes: React.FC = () => {
-    const { config } = useStores();
+const Routes: React.FC = observer(() => {
+    const { is_wallet_enabled } = useFeatureFlags();
+
     return (
         <React.Suspense
             fallback={
@@ -18,14 +20,19 @@ const Routes: React.FC = () => {
             }
         >
             <Switch>
-                {getRoutesConfig({
-                    consumer_routes: config.routes,
-                }).map((route: TRoute, idx: number) => (
-                    <RouteWithSubroutes key={idx} {...route} />
-                ))}
+                <RouteWithSubroutes
+                    path={'/appstore/traders-hub'}
+                    component={is_wallet_enabled ? WalletsModule : TradersHub}
+                    getTitle={() => localize('TradersHub')}
+                />
+                <RouteWithSubroutes
+                    path={'/appstore/onboarding'}
+                    component={Onboarding}
+                    getTitle={() => localize('Onboarding')}
+                />
             </Switch>
         </React.Suspense>
     );
-};
+});
 
-export default observer(Routes);
+export default Routes;
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
@@ -3,56 +3,117 @@ import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { mockStore, StoreProvider } from '@deriv/stores';
 import WalletCardsCarousel from '..';
-import { TWalletAccount } from 'Types';
+import { APIProvider } from '@deriv/api';
 
-const mockedRootStore = mockStore({});
+jest.mock('@deriv/api', () => ({
+    ...jest.requireActual('@deriv/api'),
+    useFetch: jest.fn((name: string) => {
+        if (name === 'authorize') {
+            return {
+                data: {
+                    authorize: {
+                        account_list: [
+                            {
+                                account_category: 'wallet',
+                                currency: 'USD',
+                                is_virtual: 0,
+                                loginid: 'CRW10001',
+                            },
+                            {
+                                account_category: 'trading',
+                                currency: 'USD',
+                                is_virtual: 0,
+                                loginid: 'CRW10002',
+                            },
+                            {
+                                account_category: 'wallet',
+                                currency: 'UST',
+                                is_virtual: 0,
+                                loginid: 'CRW10003',
+                            },
+                            {
+                                account_category: 'wallet',
+                                currency: 'BTC',
+                                is_virtual: 1,
+                                loginid: 'VRW10001',
+                            },
+                            {
+                                account_category: 'wallet',
+                                currency: 'AUD',
+                                is_virtual: 0,
+                                loginid: 'CRW10004',
+                            },
+                            {
+                                account_category: 'wallet',
+                                currency: 'ETH',
+                                is_virtual: 0,
+                                loginid: 'CRW10005',
+                            },
+                        ],
+                    },
+                },
+            };
+        } else if (name === 'balance') {
+            return {
+                data: {
+                    balance: {
+                        accounts: {
+                            CRW909900: {
+                                balance: 0,
+                            },
+                        },
+                    },
+                },
+            };
+        } else if (name === 'website_status') {
+            return {
+                data: {
+                    website_status: {
+                        currencies_config: {
+                            AUD: { type: 'fiat' },
+                            BTC: { type: 'crypto' },
+                            ETH: { type: 'crypto' },
+                            UST: { type: 'crypto' },
+                            USD: { type: 'fiat' },
+                        },
+                    },
+                },
+            };
+        }
+
+        return undefined;
+    }),
+}));
 
 jest.mock('./../cards-slider-swiper', () => jest.fn(() => <div>slider</div>));
 
 describe('<WalletCardsCarousel />', () => {
-    const items: TWalletAccount[] = [
-        {
-            name: 'USD',
-            currency: 'USD',
-            icon: '',
-            balance: 10784,
-            icon_type: 'fiat',
-            landing_company_name: 'svg',
-            is_disabled: 0,
-            is_demo: false,
-            loginid: 'CRW10001',
-        },
-        {
-            name: 'Demo USD',
-            currency: 'USD',
-            icon: '',
-            balance: 100000,
-            icon_type: 'fiat',
-            landing_company_name: 'svg',
-            is_disabled: 0,
-            is_demo: true,
-            loginid: 'CRW10002',
-        },
-    ];
-
     it('Should render slider', () => {
-        render(
-            <StoreProvider store={mockedRootStore}>
-                <WalletCardsCarousel items={items} />
-            </StoreProvider>
+        const mock = mockStore({ client: { accounts: { CRW909900: { token: '12345' } }, loginid: 'CRW909900' } });
+
+        const wrapper = ({ children }: { children: JSX.Element }) => (
+            <APIProvider>
+                <StoreProvider store={mock}>{children}</StoreProvider>
+            </APIProvider>
         );
+
+        render(<WalletCardsCarousel />, { wrapper });
         const slider = screen.queryByText('slider');
 
         expect(slider).toBeInTheDocument();
     });
 
     it('Should render buttons for REAL', () => {
-        render(
-            <StoreProvider store={mockedRootStore}>
-                <WalletCardsCarousel items={items} />
-            </StoreProvider>
+        const mock = mockStore({ client: { accounts: { CRW909900: { token: '12345' } }, loginid: 'CRW909900' } });
+
+        const wrapper = ({ children }: { children: JSX.Element }) => (
+            <APIProvider>
+                <StoreProvider store={mock}>{children}</StoreProvider>
+            </APIProvider>
         );
 
+        render(<WalletCardsCarousel />, { wrapper });
+
         const btn1 = screen.queryByText(/Deposit/i);
         const btn2 = screen.queryByText(/Withdraw/i);
         const btn3 = screen.queryByText(/Transfer/i);
@@ -65,13 +126,16 @@ describe('<WalletCardsCarousel />', () => {
     });
 
     it('Should render buttons for DEMO', () => {
-        mockedRootStore.client.loginid = 'CRW10002';
-        render(
-            <StoreProvider store={mockedRootStore}>
-                <WalletCardsCarousel items={items} />
-            </StoreProvider>
+        const mock = mockStore({ client: { accounts: { VRW10001: { token: '12345' } }, loginid: 'VRW10001' } });
+
+        const wrapper = ({ children }: { children: JSX.Element }) => (
+            <APIProvider>
+                <StoreProvider store={mock}>{children}</StoreProvider>
+            </APIProvider>
         );
 
+        render(<WalletCardsCarousel />, { wrapper });
+
         const btn1 = screen.queryByText(/Transfer/i);
         const btn2 = screen.queryByText(/Transactions/i);
         const btn3 = screen.queryByText(/Reset balance/i);