Fasih/COJ-1247/Added lazy loading for some section (deriv-com#15839)

* chore: added lazy loading for some section * chore: worked in close account section * chore: added lazy load on close account * chore: fixed css formating * chore: removed unused code --------- Co-authored-by: Muhammad Fasih Ali Naqvi <[email protected]>
heorhi-deriv · Jul 11, 2024 · 0b66e02 · 0b66e02
1 parent a4875e4
commit 0b66e02
Show file tree

Hide file tree

Showing 19 changed files with 56 additions and 46 deletions.
diff --git a/packages/account/src/Components/api-token/api-token-article.tsx b/packages/account/src/Components/api-token/api-token-article.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Localize } from '@deriv/translations';
-import AccountArticle from 'Components/article';
+import AccountArticle from '../article';
 
 const ApiTokenArticle = () => (
     <AccountArticle

diff --git a/packages/account/src/Components/api-token/api-token-clipboard.tsx b/packages/account/src/Components/api-token/api-token-clipboard.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { useIsMounted } from '@deriv/shared';
 import { Button, Icon, Modal, Text, Popover, useCopyToClipboard } from '@deriv/components';
 import { Localize } from '@deriv/translations';
-import { TPopoverAlignment } from 'Types';
+import { TPopoverAlignment } from '../../Types';
 
 type TApiTokenClipboard = {
     scopes?: string[];

diff --git a/packages/account/src/Components/api-token/api-token-context.ts b/packages/account/src/Components/api-token/api-token-context.ts
@@ -1,5 +1,5 @@
 import React from 'react';
-import { TApiContext } from 'Types';
+import { TApiContext } from '../../Types';
 
 const ApiTokenContext = React.createContext<TApiContext>({
     api_tokens: [],

diff --git a/packages/account/src/Components/api-token/api-token-delete-button.tsx b/packages/account/src/Components/api-token/api-token-delete-button.tsx
@@ -3,7 +3,7 @@ import { Button, Icon, Modal, Text, Popover } from '@deriv/components';
 import { useIsMounted } from '@deriv/shared';
 import { Localize } from '@deriv/translations';
 import ApiTokenContext from './api-token-context';
-import { TPopoverAlignment, TFormattedToken, TApiContext } from 'Types';
+import { TPopoverAlignment, TFormattedToken, TApiContext } from '../../Types';
 import { useDevice } from '@deriv-com/ui';
 
 type TApiTokenDeleteButton = {

diff --git a/packages/account/src/Components/api-token/api-token-table-row.tsx b/packages/account/src/Components/api-token/api-token-table-row.tsx
@@ -2,7 +2,7 @@ import ApiTokenDeleteButton from './api-token-delete-button';
 import ApiTokenTableRowCell from './api-token-table-row-cell';
 import ApiTokenTableRowScopesCell from './api-token-table-row-scopes-cell';
 import ApiTokenTableRowTokenCell from './api-token-table-row-token-cell';
-import { TFormattedToken } from 'Types';
+import { TFormattedToken } from '../../Types';
 
 type TApiTokenTableRow = {
     token: TFormattedToken;

diff --git a/packages/account/src/Components/api-token/api-token-table.tsx b/packages/account/src/Components/api-token/api-token-table.tsx
@@ -9,7 +9,7 @@ import ApiTokenTableRow from './api-token-table-row';
 import ApiTokenTableRowHeader from './api-token-table-row-header';
 import ApiTokenTableRowScopesCell from './api-token-table-row-scopes-cell';
 import ApiTokenTableRowTokenCell from './api-token-table-row-token-cell';
-import { TApiContext, TToken } from 'Types';
+import { TApiContext, TToken } from '../../Types';
 
 const ApiTokenTable = () => {
     const { api_tokens } = React.useContext<TApiContext>(ApiTokenContext);

diff --git a/packages/account/src/Components/self-exclusion/self-exclusion-article.tsx b/packages/account/src/Components/self-exclusion/self-exclusion-article.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { StaticUrl } from '@deriv/components';
 import { Localize, localize } from '@deriv/translations';
 import { getBrandWebsiteName, getPlatformSettings } from '@deriv/shared';
-import AccountArticle from 'Components/article';
+import AccountArticle from '../article';
 import SelfExclusionContext from './self-exclusion-context';
 import { observer } from '@deriv/stores';
 

diff --git a/packages/account/src/Constants/routes-config.tsx b/packages/account/src/Constants/routes-config.tsx
@@ -11,11 +11,7 @@ import {
     ProofOfIdentity,
     ProofOfAddress,
     ProofOfOwnership,
-    ApiToken,
-    TwoFactorAuthentication,
-    SelfExclusion,
     Account,
-    ClosingAccount,
     DeactivateAccount,
     ProofOfIncome,
 } from '../Sections';
@@ -58,6 +54,24 @@ const ConnectedApps = makeLazyLoader(
     () => <Loading />
 )();
 
+const ApiToken = makeLazyLoader(
+    () => moduleLoader(() => import('../Sections/Security/ApiToken')),
+    () => <Loading />
+)();
+
+const TwoFactorAuthentication = makeLazyLoader(
+    () => moduleLoader(() => import('../Sections/Security/TwoFactorAuthentication')),
+    () => <Loading />
+)();
+const SelfExclusion = makeLazyLoader(
+    () => moduleLoader(() => import('../Sections/Security/SelfExclusion')),
+    () => <Loading />
+)();
+const ClosingAccount = makeLazyLoader(
+    () => moduleLoader(() => import('../Sections/Security/ClosingAccount')),
+    () => <Loading />
+)();
+
 export type TPage404 = typeof Page404;
 
 // Order matters

diff --git a/packages/account/src/Sections/Security/ApiToken/api-token.tsx b/packages/account/src/Sections/Security/ApiToken/api-token.tsx
@@ -7,11 +7,11 @@ import { useDevice } from '@deriv-com/ui';
 import { getPropertyValue, WS } from '@deriv/shared';
 import { observer, useStore } from '@deriv/stores';
 import { Localize, localize } from '@deriv/translations';
-import { TToken } from 'Types';
-import { ApiTokenContext, ApiTokenArticle, ApiTokenCard, ApiTokenTable } from 'Components/api-token';
-import InlineNoteWithIcon from 'Components/inline-note-with-icon';
-import LoadErrorMessage from 'Components/load-error-message';
-import { API_TOKEN_CARD_DETAILS, TOKEN_LIMITS, TOKEN_NAME_REGEX } from 'Constants/api-token-card-details';
+import { TToken } from '../../../Types';
+import { ApiTokenContext, ApiTokenArticle, ApiTokenCard, ApiTokenTable } from '../../../Components/api-token';
+import InlineNoteWithIcon from '../../../Components/inline-note-with-icon';
+import LoadErrorMessage from '../../../Components/load-error-message';
+import { API_TOKEN_CARD_DETAILS, TOKEN_LIMITS, TOKEN_NAME_REGEX } from '../../../Constants/api-token-card-details';
 import './api-token.scss';
 
 type AptTokenState = {
@@ -248,7 +248,7 @@ const ApiToken = observer(() => {
                                                             className='da-api-token__input dc-input__input-group'
                                                             label={localize('Token name')}
                                                             value={values.token_name}
-                                                            onChange={e => {
+                                                            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                                                                 setFieldTouched('token_name', true);
                                                                 handleChange(e);
                                                             }}

diff --git a/...singAccount/closing-account-pending-conditions/closing-account-has-pending-conditions.tsx b/...singAccount/closing-account-pending-conditions/closing-account-has-pending-conditions.tsx
@@ -10,7 +10,7 @@ import {
     TDetailsOfDerivXAccount,
     TDetailsOfMT5Account,
     TDetailsOfCtraderAccount,
-} from 'Types';
+} from '../../../../Types';
 import ClosingAccountPendingContent from './closing-account-pending-content';
 import ClosingAccountPendingWrapper from './closing-account-pending-wrapper';
 import ClosingAccountPendingBalance from './closing-account-pending-balance';

diff --git a/...ity/ClosingAccount/closing-account-pending-conditions/closing-account-pending-balance.tsx b/...ity/ClosingAccount/closing-account-pending-conditions/closing-account-pending-balance.tsx
@@ -10,7 +10,7 @@ import {
 } from '@deriv/shared';
 import { observer, useStore } from '@deriv/stores';
 import { Localize } from '@deriv/translations';
-import { TCFDPlatform, TDetailsOfDerivXAccount, TDetailsOfMT5Account } from 'Types';
+import { TCFDPlatform, TDetailsOfDerivXAccount, TDetailsOfMT5Account } from '../../../../Types';
 import ClosingAccountPendingWrapper from './closing-account-pending-wrapper';
 import ClosingAccountPendingContent from './closing-account-pending-content';
 
@@ -19,7 +19,7 @@ type TClosingAccountPendingBalanceProps = {
     account_balance: TDetailsOfMT5Account[] | TDetailsOfDerivXAccount[];
 };
 
-type TShortcode = Parameters<typeof getCFDAccountDisplay>[0]['shortcode'];
+type TShortcode = Exclude<TDetailsOfMT5Account['landing_company_short'], 'seychelles'>;
 
 const ClosingAccountPendingBalance = observer(({ platform, account_balance }: TClosingAccountPendingBalanceProps) => {
     const { traders_hub } = useStore();

diff --git a/...y/ClosingAccount/closing-account-pending-conditions/closing-account-pending-positions.tsx b/...y/ClosingAccount/closing-account-pending-conditions/closing-account-pending-positions.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { CFD_PLATFORMS, getCFDAccount, getCFDAccountDisplay, getCFDPlatformLabel, getMT5Icon } from '@deriv/shared';
 import { observer, useStore } from '@deriv/stores';
 import { Localize } from '@deriv/translations';
-import { TCFDPlatform, TDetailsOfDerivXAccount, TDetailsOfMT5Account } from 'Types';
+import { TCFDPlatform, TDetailsOfDerivXAccount, TDetailsOfMT5Account } from '../../../../Types';
 import ClosingAccountPendingWrapper from './closing-account-pending-wrapper';
 import ClosingAccountPendingContent from './closing-account-pending-content';
 
@@ -11,7 +11,7 @@ type TClosingAccountPendingPositionsProps = {
     open_positions: Array<TDetailsOfMT5Account | TDetailsOfDerivXAccount>; //ctrader
 };
 
-type TShortcode = Parameters<typeof getCFDAccountDisplay>[0]['shortcode'];
+type TShortcode = Exclude<TDetailsOfMT5Account['landing_company_short'], 'seychelles'>;
 
 const ClosingAccountPendingPositions = observer(
     ({ platform, open_positions }: TClosingAccountPendingPositionsProps) => {

diff --git a/packages/account/src/Sections/Security/ClosingAccount/closing-account-reason-form.tsx b/packages/account/src/Sections/Security/ClosingAccount/closing-account-reason-form.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Field, Form, Formik, FormikErrors, FieldProps, FormikValues } from 'formik';
 import { Checkbox, FormSubmitButton, Input, Text } from '@deriv/components';
 import { localize, Localize } from '@deriv/translations';
-import { TClosingAccountFormValues } from 'Types';
+import { TClosingAccountFormValues } from '../../../Types';
 import {
     CHARACTER_LIMIT_FOR_CLOSING_ACCOUNT,
     MAX_ALLOWED_REASONS_FOR_CLOSING_ACCOUNT,
@@ -11,7 +11,7 @@ import {
     SET_TOTAL_ACCUMULATED_CHARACTERS,
     SET_TOTAL_CHECKBOX_CHECKED,
     getCloseAccountReasonsList,
-} from 'Constants/closing-account-config';
+} from '../../../Constants/closing-account-config';
 
 type TClosingAccountReasonFormProps = {
     onBackClick: () => void;
@@ -208,7 +208,9 @@ const ClosingAccountReasonForm = ({ onBackClick, onConfirmClick }: TClosingAccou
                                 name='other_trading_platforms'
                                 value={values.other_trading_platforms}
                                 max_characters={CHARACTER_LIMIT_FOR_CLOSING_ACCOUNT}
-                                onChange={e => handleInputChange(e, values.other_trading_platforms, handleChange)}
+                                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                                    handleInputChange(e, values.other_trading_platforms, handleChange)
+                                }
                                 onPaste={handleInputPaste}
                             />
                         )}
@@ -225,7 +227,9 @@ const ClosingAccountReasonForm = ({ onBackClick, onConfirmClick }: TClosingAccou
                                 name='do_to_improve'
                                 value={values.do_to_improve}
                                 max_characters={CHARACTER_LIMIT_FOR_CLOSING_ACCOUNT}
-                                onChange={e => handleInputChange(e, values.do_to_improve, handleChange)}
+                                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                                    handleInputChange(e, values.do_to_improve, handleChange)
+                                }
                                 onPaste={handleInputPaste}
                             />
                         )}

diff --git a/packages/account/src/Sections/Security/ClosingAccount/closing-account-reason.tsx b/packages/account/src/Sections/Security/ClosingAccount/closing-account-reason.tsx
@@ -4,7 +4,7 @@ import { Loading, Modal, Text } from '@deriv/components';
 import { routes } from '@deriv/shared';
 import { useCloseDerivAccount } from '@deriv/api';
 import { Localize } from '@deriv/translations';
-import { MAX_ALLOWED_REASONS_FOR_CLOSING_ACCOUNT } from 'Constants/closing-account-config';
+import { MAX_ALLOWED_REASONS_FOR_CLOSING_ACCOUNT } from '../../../Constants/closing-account-config';
 import ClosingAccountHasPendingConditions from './closing-account-pending-conditions/closing-account-has-pending-conditions';
 import ClosingAccountReasonForm from './closing-account-reason-form';
 import ClosingAccountWarningModal from './closing-account-warning-modal';

diff --git a/packages/account/src/Sections/Security/SelfExclusion/self-exclusion.tsx b/packages/account/src/Sections/Security/SelfExclusion/self-exclusion.tsx
@@ -11,14 +11,14 @@ import {
     WS,
 } from '@deriv/shared';
 import { localize } from '@deriv/translations';
-import DemoMessage from 'Components/demo-message';
-import 'Components/self-exclusion/self-exclusion.scss';
-import LoadErrorMessage from 'Components/load-error-message';
-import SelfExclusionArticleContent from 'Components/self-exclusion/self-exclusion-article-content';
-import SelfExclusionContext from 'Components/self-exclusion/self-exclusion-context';
-import SelfExclusionModal from 'Components/self-exclusion/self-exclusion-modal';
-import SelfExclusionWrapper from 'Components/self-exclusion/self-exclusion-wrapper';
-import SelfExclusionForm from 'Components/self-exclusion/self-exclusion-form';
+import DemoMessage from '../../../Components/demo-message';
+import '../../../Components/self-exclusion/self-exclusion.scss';
+import LoadErrorMessage from '../../../Components/load-error-message';
+import SelfExclusionArticleContent from '../../../Components/self-exclusion/self-exclusion-article-content';
+import SelfExclusionContext from '../../../Components/self-exclusion/self-exclusion-context';
+import SelfExclusionModal from '../../../Components/self-exclusion/self-exclusion-modal';
+import SelfExclusionWrapper from '../../../Components/self-exclusion/self-exclusion-wrapper';
+import SelfExclusionForm from '../../../Components/self-exclusion/self-exclusion-form';
 import { FormikHelpers, FormikValues } from 'formik';
 import { observer, useStore } from '@deriv/stores';
 

diff --git a/packages/account/src/Sections/Security/TwoFactorAuthentication/digit-form.tsx b/packages/account/src/Sections/Security/TwoFactorAuthentication/digit-form.tsx
@@ -87,7 +87,7 @@ const DigitForm = observer(() => {
                                     className='two-factor__input'
                                     label={localize('Authentication code')}
                                     value={values.digit_code}
-                                    onChange={e => {
+                                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                                         handleChange(e);
                                         setReadyForVerification(false);
                                     }}

diff --git a/...count/src/Sections/Security/TwoFactorAuthentication/two-factor-authentication-article.tsx b/...count/src/Sections/Security/TwoFactorAuthentication/two-factor-authentication-article.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { localize, Localize } from '@deriv/translations';
-import AccountArticle from 'Components/article';
+import AccountArticle from '../../../Components/article';
 
 const TwoFactorAuthenticationArticle = () => (
     <AccountArticle

diff --git a/packages/account/src/Sections/Security/TwoFactorAuthentication/two-factor-authentication.tsx b/packages/account/src/Sections/Security/TwoFactorAuthentication/two-factor-authentication.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { getPropertyValue, WS } from '@deriv/shared';
-import LoadErrorMessage from 'Components/load-error-message';
+import LoadErrorMessage from '../../../Components/load-error-message';
 import { observer, useStore } from '@deriv/stores';
 import { Loading } from '@deriv/components';
 import TwoFactorEnabled from './two-factor-enabled';

diff --git a/packages/account/src/Sections/index.js b/packages/account/src/Sections/index.js
@@ -6,11 +6,7 @@ import { ProofOfIdentityContainer, ProofOfIdentity } from 'Sections/Verification
 import ProofOfAddress from 'Sections/Verification/ProofOfAddress';
 import ProofOfOwnership from 'Sections/Verification/ProofOfOwnership';
 import ProofOfIncome from 'Sections/Verification/ProofOfIncome';
-import TwoFactorAuthentication from 'Sections/Security/TwoFactorAuthentication';
-import ApiToken from 'Sections/Security/ApiToken';
-import SelfExclusion from 'Sections/Security/SelfExclusion';
 import Account from 'Containers/Account/account';
-import ClosingAccount from 'Sections/Security/ClosingAccount';
 import DeactivateAccount from 'Sections/Security/DeactivateAccount'; // TODO: Remove once mobile team has changed this link
 
 export {
@@ -23,10 +19,6 @@ export {
     ProofOfAddress,
     ProofOfOwnership,
     ProofOfIncome,
-    TwoFactorAuthentication,
-    ApiToken,
-    SelfExclusion,
     Account,
-    ClosingAccount,
     DeactivateAccount,
 };