From d9fb90ffea9a881723d257c97249509c3a0a73ad Mon Sep 17 00:00:00 2001 From: Farzin Mirzaie <72082844+farzin-deriv@users.noreply.github.com> Date: Mon, 28 Aug 2023 16:12:00 +0800 Subject: [PATCH] farzin/feat(wallets): :package: add `@deriv/wallets` workspace (#9756) * fix(cashier): :bug: fix unable to access CFD-DerivX transfer * feat(wallets): :package: add `@deriv/wallets` workspace * fix(wallets): :green_heart: fix CI build * feat(api): :sparkles: share a single instance of `QueryClient` in `APIProvider` * Merge branch 'master' into farzin/next --------- Co-authored-by: Farzin Mirzaie --- .circleci/config.yml | 4 +++ packages/api/src/APIProvider.tsx | 18 ++++++++++- packages/appstore/package.json | 1 + .../appstore/src/components/routes/routes.tsx | 31 +++++++++++++------ .../stores/src/stores/FeatureFlagsStore.ts | 7 ++--- packages/utils/src/index.ts | 4 +-- packages/wallets/jest.config.js | 5 +++ packages/wallets/package.json | 13 ++++++++ packages/wallets/src/AppContent.tsx | 27 ++++++++++++++++ packages/wallets/src/index.tsx | 11 +++++++ packages/wallets/tsconfig.json | 4 +++ 11 files changed, 109 insertions(+), 16 deletions(-) create mode 100644 packages/wallets/jest.config.js create mode 100644 packages/wallets/package.json create mode 100644 packages/wallets/src/AppContent.tsx create mode 100644 packages/wallets/src/index.tsx create mode 100644 packages/wallets/tsconfig.json diff --git a/.circleci/config.yml b/.circleci/config.yml index 86746e5dc2ab..4961945dff69 100644 --- a/.circleci/config.yml +++ b/.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 diff --git a/packages/api/src/APIProvider.tsx b/packages/api/src/APIProvider.tsx index 88228b61a50e..a84ee289432a 100644 --- a/packages/api/src/APIProvider.tsx +++ b/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) => ( diff --git a/packages/appstore/package.json b/packages/appstore/package.json index 2104c5394906..bf449da6d057 100644 --- a/packages/appstore/package.json +++ b/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", diff --git a/packages/appstore/src/components/routes/routes.tsx b/packages/appstore/src/components/routes/routes.tsx index ae42a5553c55..8d08e7ca9db0 100644 --- a/packages/appstore/src/components/routes/routes.tsx +++ b/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 ( { {getRoutesConfig({ consumer_routes: config.routes, - }).map((route: TRoute, idx: number) => ( - - ))} + }).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 ; + })} ); -}; +}); -export default observer(Routes); +export default Routes; diff --git a/packages/stores/src/stores/FeatureFlagsStore.ts b/packages/stores/src/stores/FeatureFlagsStore.ts index d37e6fbbfe54..1258ac4ac389 100644 --- a/packages/stores/src/stores/FeatureFlagsStore.ts +++ b/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; 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; } } diff --git a/packages/utils/src/index.ts b/packages/utils/src/index.ts index 56e20cf19c1e..7d9510b04630 100644 --- a/packages/utils/src/index.ts +++ b/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'; diff --git a/packages/wallets/jest.config.js b/packages/wallets/jest.config.js new file mode 100644 index 000000000000..207910d7e732 --- /dev/null +++ b/packages/wallets/jest.config.js @@ -0,0 +1,5 @@ +const baseConfigForPackages = require('../../jest.config.base'); + +module.exports = { + ...baseConfigForPackages, +}; diff --git a/packages/wallets/package.json b/packages/wallets/package.json new file mode 100644 index 000000000000..0e2aac1a5022 --- /dev/null +++ b/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" + } +} diff --git a/packages/wallets/src/AppContent.tsx b/packages/wallets/src/AppContent.tsx new file mode 100644 index 000000000000..b2bb816dd5b9 --- /dev/null +++ b/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 ( +
+

Server Time

+
+
+ {data?.time &&

{new Date(data?.time * 1000).toLocaleString()}

} +
+ ); +}; + +export default AppContent; diff --git a/packages/wallets/src/index.tsx b/packages/wallets/src/index.tsx new file mode 100644 index 000000000000..09425f97f69b --- /dev/null +++ b/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 = () => ( + + ; + +); + +export default App; diff --git a/packages/wallets/tsconfig.json b/packages/wallets/tsconfig.json new file mode 100644 index 000000000000..1567d5b3db71 --- /dev/null +++ b/packages/wallets/tsconfig.json @@ -0,0 +1,4 @@ +{ + "extends": "../../tsconfig.json", + "include": ["src"] +}