farzin/feat(wallets): 📦 add @deriv/wallets workspace (binary-com#9756)

* fix(cashier): 🐛 fix unable to access CFD-DerivX transfer

* feat(wallets): 📦 add `@deriv/wallets` workspace

* fix(wallets): 💚 fix CI build

* feat(api): ✨ share a single instance of `QueryClient` in `APIProvider`

* Merge branch 'master' into farzin/next

---------

Co-authored-by: Farzin Mirzaie <farzin@deriv.com>

.circleci/config.yml

@@ -78,6 +78,7 @@ commands:
             - "packages/translations/node_modules"
             - "packages/utils/node_modules"
             - "packages/analytics/node_modules"
+            - "packages/wallets/node_modules"
             # VERIFY_CACHE_FOLDERS_END (DO NOT REMOVE)
 
   build:
@@ -271,6 +272,9 @@ jobs:
       - run:
           name: "Check TypeScript for @deriv/stores"
           command: npx tsc --project packages/stores/tsconfig.json -noEmit
+      - run:
+          name: "Check TypeScript for @deriv/wallets"
+          command: npx tsc --project packages/wallets/tsconfig.json -noEmit
       # - run:
       #     name: "Check TypeScript for @deriv/cashier"
       #     command: npx tsc --project packages/cashier/tsconfig.json -noEmit

packages/api/src/APIProvider.tsx

@@ -2,7 +2,23 @@ import React, { PropsWithChildren } from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 
-const queryClient = new QueryClient();
+declare global {
+    interface Window {
+        ReactQueryClient: QueryClient;
+    }
+}
+
+// This is a temporary workaround to share a single `QueryClient` instance between all the packages.
+// Later once we have each package separated we won't need this anymore and can remove this.
+const getSharedQueryClientContext = (): QueryClient => {
+    if (!window.ReactQueryClient) {
+        window.ReactQueryClient = new QueryClient();
+    }
+
+    return window.ReactQueryClient;
+};
+
+const queryClient = getSharedQueryClientContext();
 
 const APIProvider = ({ children }: PropsWithChildren<unknown>) => (
     <QueryClientProvider client={queryClient}>

packages/appstore/package.json

@@ -34,6 +34,7 @@
         "@deriv/trader": "^3.8.0",
         "@deriv/translations": "^1.0.0",
         "@deriv/hooks": "^1.0.0",
+        "@deriv/wallets": "^1.0.0",
         "classnames": "^2.2.6",
         "formik": "^2.1.4",
         "mobx": "^6.6.1",

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

@@ -1,14 +1,18 @@
 import * as React from 'react';
-import { Switch } from 'react-router-dom';
-import RouteWithSubroutes from './route-with-sub-routes.jsx';
+import { useFeatureFlags } from '@deriv/hooks';
 import { Localize } from '@deriv/translations';
-import { observer } from 'mobx-react-lite';
+import Wallets from '@deriv/wallets';
 import getRoutesConfig from 'Constants/routes-config';
 import { useStores } from 'Stores';
 import { TRoute } from 'Types';
+import { observer } from 'mobx-react-lite';
+import { Switch } from 'react-router-dom';
+import RouteWithSubroutes from './route-with-sub-routes.jsx';
 
-const Routes: React.FC = () => {
+const Routes: React.FC = observer(() => {
     const { config } = useStores();
+    const { is_next_wallet_enabled } = useFeatureFlags();
+
     return (
         <React.Suspense
             fallback={
@@ -20,12 +24,21 @@ const Routes: React.FC = () => {
             <Switch>
                 {getRoutesConfig({
                     consumer_routes: config.routes,
-                }).map((route: TRoute, idx: number) => (
-                    <RouteWithSubroutes key={idx} {...route} />
-                ))}
+                }).map((route: TRoute, idx: number) => {
+                    // Temporary way to intercept the route to show the Wallets component.
+                    let updated_route = route;
+                    if (updated_route.path === '/appstore/traders-hub') {
+                        updated_route = {
+                            ...updated_route,
+                            component: is_next_wallet_enabled ? Wallets : updated_route.component,
+                        };
+                    }
+
+                    return <RouteWithSubroutes key={idx} {...updated_route} />;
+                })}
             </Switch>
         </React.Suspense>
     );
-};
+});
 
-export default observer(Routes);
+export default Routes;

packages/stores/src/stores/FeatureFlagsStore.ts

@@ -1,10 +1,7 @@
 import BaseStore from './BaseStore';
 
 const FLAGS = {
-    foo: false,
-    bar: false,
-    baz: false,
-    // Add your flag here 🚀
+    next_wallet: false,
 } satisfies Record<string, boolean>;
 
 export default class FeatureFlagsStore extends BaseStore<{ [k in keyof typeof FLAGS]: boolean }> {
@@ -27,5 +24,7 @@ export default class FeatureFlagsStore extends BaseStore<{ [k in keyof typeof FL
                 });
             }
         });
+
+        this.data = FLAGS;
     }
 }

packages/utils/src/index.ts

@@ -1,4 +1,4 @@
-export { default as unFormatLocaleString } from './unFormatLocaleString';
 export { default as getAccountsFromLocalStorage } from './getAccountsFromLocalStorage';
-export { default as getActiveLoginIDFromLocalStorage } from './getActiveLoginIDFromLocalStorage';
 export { default as getActiveAuthTokenIDFromLocalStorage } from './getActiveAuthTokenIDFromLocalStorage';
+export { default as getActiveLoginIDFromLocalStorage } from './getActiveLoginIDFromLocalStorage';
+export { default as unFormatLocaleString } from './unFormatLocaleString';

packages/wallets/jest.config.js

@@ -0,0 +1,5 @@
+const baseConfigForPackages = require('../../jest.config.base');
+
+module.exports = {
+    ...baseConfigForPackages,
+};

packages/wallets/package.json

@@ -0,0 +1,13 @@
+{
+    "name": "@deriv/wallets",
+    "private": true,
+    "version": "1.0.0",
+    "main": "src/index.tsx",
+    "dependencies": {
+        "@deriv/api": "^1.0.0",
+        "react": "^17.0.2"
+    },
+    "devDependencies": {
+        "typescript": "^4.6.3"
+    }
+}

packages/wallets/src/AppContent.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { useFetch } from '@deriv/api';
+
+const AppContent: React.FC = () => {
+    const { data } = useFetch('time', { options: { refetchInterval: 1000 } });
+
+    return (
+        <div
+            style={{
+                display: 'flex',
+                flex: 1,
+                justifyContent: 'center',
+                alignItems: 'center',
+                flexDirection: 'column',
+                height: '100%',
+                fontSize: 30,
+            }}
+        >
+            <h1>Server Time</h1>
+            <br />
+            <br />
+            {data?.time && <h1>{new Date(data?.time * 1000).toLocaleString()}</h1>}
+        </div>
+    );
+};
+
+export default AppContent;

packages/wallets/src/index.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { APIProvider } from '@deriv/api';
+import AppContent from './AppContent';
+
+const App: React.FC = () => (
+    <APIProvider>
+        <AppContent />;
+    </APIProvider>
+);
+
+export default App;

packages/wallets/tsconfig.json

@@ -0,0 +1,4 @@
+{
+    "extends": "../../tsconfig.json",
+    "include": ["src"]
+}