Skip to content

Commit 090c626

Browse files
adrienne-derivadrienne-deriv
authored
Code split routes in wallets (deriv-com#14428)
* chore: removed responsive root * chore: reverted old changes * feat: added modal manager hook and test cases * feat: added option to stack modals * chore: updated hook with new use query params * chore: reverted commented code * chore: use device from ui * chore: test out tree shaking routes * chore: externalize moment * chore: remove unrelated changes * chore: remove unrelated changes * chore: fix eslint issues * feat: lazy load verification flow * chore: removed comments * chore: lazy load verification flow * chore: added brotli compression for wallets * chore: reverted compression plugin * chore: reverted unrelated changes
1 parent 6857d2a commit 090c626

File tree

9 files changed

+149
-32
lines changed

9 files changed

+149
-32
lines changed

‎package-lock.json

+46-10
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/wallets/babel.config.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
"@babel/plugin-syntax-dynamic-import",
1212
["@babel/plugin-proposal-unicode-property-regex", { "useUnicodeFlag": false }],
1313
"@babel/plugin-proposal-optional-chaining",
14-
"@babel/plugin-proposal-nullish-coalescing-operator"
14+
"@babel/plugin-proposal-nullish-coalescing-operator",
15+
"babel-plugin-transform-barrels"
1516
]
1617
}

‎packages/wallets/package.json

+4-3
Original file line numberDiff line numberDiff line change
@@ -15,14 +15,15 @@
1515
"dependencies": {
1616
"@deriv-com/utils": "^0.0.11",
1717
"@deriv/api-v2": "^1.0.0",
18-
"@deriv/quill-icons": "^1.21.0",
1918
"@deriv/integration": "^1.0.0",
19+
"@deriv/quill-icons": "^1.21.0",
2020
"@deriv/react-joyride": "^2.6.2",
2121
"@deriv/utils": "^1.0.0",
2222
"@tanstack/react-table": "^8.10.3",
2323
"@zxcvbn-ts/core": "^3.0.4",
2424
"@zxcvbn-ts/language-common": "^3.0.4",
2525
"classnames": "^2.2.6",
26+
"crc-32": "^1.2.0",
2627
"downshift": "^8.2.2",
2728
"embla-carousel-react": "8.0.0-rc12",
2829
"formik": "^2.1.4",
@@ -37,8 +38,7 @@
3738
"react-router-dom": "^5.2.0",
3839
"react-transition-group": "4.4.2",
3940
"usehooks-ts": "^2.7.0",
40-
"yup": "^0.32.11",
41-
"crc-32": "^1.2.0"
41+
"yup": "^0.32.11"
4242
},
4343
"devDependencies": {
4444
"@testing-library/react": "^12.0.0",
@@ -48,6 +48,7 @@
4848
"@types/sha.js": "^2.4.4",
4949
"@typescript-eslint/eslint-plugin": "5.45.0",
5050
"@typescript-eslint/parser": "5.45.0",
51+
"babel-plugin-transform-barrels": "^1.0.12",
5152
"eslint-plugin-local-rules": "2.0.0",
5253
"eslint-plugin-react": "^7.22.0",
5354
"eslint-plugin-react-hooks": "^4.2.0",

‎packages/wallets/src/features/cfd/flows/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
export * from './CTrader';
22
export * from './MT5';
33
export * from './OtherCFDs';
4+
export * from './Verification';

‎packages/wallets/src/features/cfd/modals/JurisdictionModal/JurisdictionModal.tsx

+11-3
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,20 @@
1-
import React, { useCallback, useEffect, useState } from 'react';
1+
import React, { lazy, Suspense, useCallback, useEffect, useState } from 'react';
22
import { useAvailableMT5Accounts } from '@deriv/api-v2';
33
import { ModalStepWrapper, WalletButton } from '../../../../components/Base';
4+
import { Loader } from '../../../../components/Loader';
45
import { useModal } from '../../../../components/ModalProvider';
56
import useDevice from '../../../../hooks/useDevice';
67
import { DynamicLeverageContext } from '../../components/DynamicLeverageContext';
78
import { MarketTypeDetails, PlatformDetails } from '../../constants';
8-
import { Verification } from '../../flows/Verification';
99
import { DynamicLeverageScreen, DynamicLeverageTitle } from '../../screens/DynamicLeverage';
1010
import { JurisdictionScreen } from '../../screens/Jurisdiction';
1111
import { MT5PasswordModal } from '..';
1212
import './JurisdictionModal.scss';
1313

14+
const LazyVerification = lazy(
15+
() => import(/* webpackChunkName: "wallets-verification-flow" */ '../../flows/Verification/Verification')
16+
);
17+
1418
const JurisdictionModal = () => {
1519
const [selectedJurisdiction, setSelectedJurisdiction] = useState('');
1620
const [isDynamicLeverageVisible, setIsDynamicLeverageVisible] = useState(false);
@@ -36,7 +40,11 @@ const JurisdictionModal = () => {
3640
return <MT5PasswordModal marketType={marketType} platform={platform} />;
3741
}
3842

39-
return <Verification selectedJurisdiction={selectedJurisdiction} />;
43+
return (
44+
<Suspense fallback={<Loader />}>
45+
<LazyVerification selectedJurisdiction={selectedJurisdiction} />
46+
</Suspense>
47+
);
4048
};
4149

4250
const modalFooter = isDynamicLeverageVisible

‎packages/wallets/src/features/cfd/screens/CompareAccounts/CompareAccountsButton.tsx

+11-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useEffect, useMemo } from 'react';
1+
import React, { lazy, Suspense, useEffect, useMemo } from 'react';
22
import { useHistory } from 'react-router-dom';
33
import {
44
useActiveWalletAccount,
@@ -9,11 +9,11 @@ import {
99
useWalletAccountsList,
1010
} from '@deriv/api-v2';
1111
import { WalletButton, WalletError } from '../../../../components';
12+
import { Loader } from '../../../../components/Loader';
1213
import { useModal } from '../../../../components/ModalProvider';
1314
import useWalletAccountSwitcher from '../../../../hooks/useWalletAccountSwitcher';
1415
import { THooks, TPlatforms } from '../../../../types';
1516
import { CFD_PLATFORMS, MARKET_TYPE } from '../../constants';
16-
import { Verification } from '../../flows/Verification';
1717
import { DxtradeEnterPasswordModal, MT5PasswordModal } from '../../modals';
1818
import { CTraderSuccessModal } from '../../modals/CTraderSuccessModal';
1919
import {
@@ -24,6 +24,10 @@ import {
2424
import { JURISDICTION } from './constants';
2525
import './CompareAccountsButton.scss';
2626

27+
const LazyVerification = lazy(
28+
() => import(/* webpackChunkName: "wallets-verification-flow" */ '../../flows/Verification/Verification')
29+
);
30+
2731
type TCompareAccountButton = {
2832
isAccountAdded: boolean;
2933
marketType: THooks.AvailableMT5Accounts['market_type'];
@@ -121,7 +125,11 @@ const CompareAccountsButton = ({ isAccountAdded, marketType, platform, shortCode
121125
if (isAccountStatusVerified) {
122126
show(<MT5PasswordModal marketType={marketType ?? 'synthetic'} platform={platform} />);
123127
} else {
124-
show(<Verification selectedJurisdiction={shortCode} />);
128+
show(
129+
<Suspense fallback={<Loader />}>
130+
<LazyVerification selectedJurisdiction={shortCode} />
131+
</Suspense>
132+
);
125133
}
126134
} else if (platform === CFD_PLATFORMS.DXTRADE) {
127135
show(<DxtradeEnterPasswordModal />);

‎packages/wallets/src/features/cfd/screens/VerificationFailed/VerificationFailed.tsx

+13-3
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,16 @@
1-
import React, { FC } from 'react';
1+
import React, { FC, lazy, Suspense } from 'react';
22
import { usePOA, usePOI } from '@deriv/api-v2';
33
import { WalletButton, WalletText } from '../../../../components/Base';
4+
import { Loader } from '../../../../components/Loader';
45
import { useModal } from '../../../../components/ModalProvider';
56
import useDevice from '../../../../hooks/useDevice';
67
import { THooks } from '../../../../types';
7-
import { Verification } from '../../flows/Verification';
88
import './VerificationFailed.scss';
99

10+
const LazyVerification = lazy(
11+
() => import(/* webpackChunkName: "wallets-verification-flow" */ '../../flows/Verification/Verification')
12+
);
13+
1014
const getDocumentTitle = (isPOIFailed?: boolean, isPOAFailed?: boolean) => {
1115
if (isPOIFailed && isPOAFailed) return 'proof of identity and proof of address documents';
1216
if (isPOIFailed) return 'proof of identity document';
@@ -56,7 +60,13 @@ const VerificationFailed: FC<TVerificationFailedProps> = ({ selectedJurisdiction
5660
Maybe later
5761
</WalletButton>
5862
<WalletButton
59-
onClick={() => show(<Verification selectedJurisdiction={selectedJurisdiction} />)}
63+
onClick={() =>
64+
show(
65+
<Suspense fallback={<Loader />}>
66+
<LazyVerification selectedJurisdiction={selectedJurisdiction} />
67+
</Suspense>
68+
)
69+
}
6070
size={isMobile ? 'md' : 'lg'}
6171
>
6272
Resubmit documents

‎packages/wallets/src/routes/Router.tsx

+54-9
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,25 @@
1-
import React from 'react';
1+
import React, { lazy } from 'react';
22
import { Route, Switch } from 'react-router-dom';
33
import { useWalletAccountsList } from '@deriv/api-v2';
4-
import { WalletNoWalletFoundState } from '../components';
5-
import { CashierModalRoute } from './CashierModalRoute';
6-
import { CompareAccountsRoute } from './CompareAccountsRoute';
7-
import { WalletsListingRoute } from './WalletsListingRoute';
4+
import { Loader } from '../components/Loader';
5+
6+
const LazyWalletsNotFoundState = lazy(
7+
() =>
8+
import(
9+
/* webpackChunkName: "wallets-not-found-route" */ '../components/WalletNoWalletFoundState/WalletNoWalletFoundState'
10+
)
11+
);
12+
13+
const LazyWalletsListingRoute = lazy(
14+
() => import(/* webpackChunkName: "wallets-listing-route" */ './WalletsListingRoute/WalletsListingRoute')
15+
);
16+
const LazyCashierModalRoute = lazy(
17+
() => import(/* webpackChunkName: "cashier-modal-route" */ './CashierModalRoute/CashierModalRoute')
18+
);
19+
20+
const LazyCompareAccountsRoute = lazy(
21+
() => import(/* webpackChunkName: "compare-accounts-route" */ './CompareAccountsRoute/CompareAccountsRoute')
22+
);
823

924
const walletsPrefix = '/wallets';
1025

@@ -58,13 +73,43 @@ const Router: React.FC = () => {
5873
const { data: walletAccounts, isLoading } = useWalletAccountsList();
5974

6075
if ((!walletAccounts || !walletAccounts.length) && !isLoading)
61-
return <Route component={WalletNoWalletFoundState} path={walletsPrefix} />;
76+
return (
77+
<Route
78+
path={walletsPrefix}
79+
render={() => (
80+
<React.Suspense fallback={<Loader />}>
81+
<LazyWalletsNotFoundState />
82+
</React.Suspense>
83+
)}
84+
/>
85+
);
6286

6387
return (
6488
<Switch>
65-
<Route component={CompareAccountsRoute} path={`${walletsPrefix}/compare-accounts`} />
66-
<Route component={CashierModalRoute} path={`${walletsPrefix}/cashier`} />
67-
<Route component={WalletsListingRoute} path={walletsPrefix} />
89+
<Route
90+
path={`${walletsPrefix}/compare-accounts`}
91+
render={() => (
92+
<React.Suspense fallback={<Loader />}>
93+
<LazyCompareAccountsRoute />
94+
</React.Suspense>
95+
)}
96+
/>
97+
<Route
98+
path={`${walletsPrefix}/cashier`}
99+
render={() => (
100+
<React.Suspense fallback={<Loader />}>
101+
<LazyCashierModalRoute />
102+
</React.Suspense>
103+
)}
104+
/>
105+
<Route
106+
path={walletsPrefix}
107+
render={() => (
108+
<React.Suspense fallback={<Loader />}>
109+
<LazyWalletsListingRoute />
110+
</React.Suspense>
111+
)}
112+
/>
68113
</Switch>
69114
);
70115
};

‎packages/wallets/webpack.config.js

+7
Original file line numberDiff line numberDiff line change
@@ -168,6 +168,12 @@ module.exports = function (env) {
168168
priority: -20,
169169
reuseExistingChunk: true,
170170
},
171+
components: {
172+
test: module => {
173+
return module.resource && module.resource.includes('src/components/Base');
174+
},
175+
name: 'components',
176+
},
171177
defaultVendors: {
172178
idHint: 'vendors',
173179
test: /[\\/]node_modules[\\/]/,
@@ -188,6 +194,7 @@ module.exports = function (env) {
188194
'react-dom': true,
189195
classnames: true,
190196
'react-router-dom': true,
197+
moment: true,
191198
},
192199
],
193200
};

0 commit comments

Comments
 (0)