fix(modals): adding code splitting for modals

blockchain · Jul 22, 2021 · bee9b85 · bee9b85
1 parent 43983c5
commit bee9b85
Show file tree

Hide file tree

Showing 89 changed files with 775 additions and 917 deletions.
diff --git a/packages/blockchain-wallet-v4-frontend/src/components/Send/ExchangePromo/index.tsx b/packages/blockchain-wallet-v4-frontend/src/components/Send/ExchangePromo/index.tsx
@@ -125,7 +125,7 @@ class ExchangePromo extends PureComponent<Props> {
                 ...EXCHANGE_EVENTS.PROMO,
                 'verify_account_promo_clicked'
               ])
-              this.props.modalActions.showModal('TRADING_LIMITS', {
+              this.props.modalActions.showModal('TRADING_LIMITS_MODAL', {
                 origin: 'TradingLimits'
               })
             }}

diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/brokerage/slice.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/brokerage/slice.ts
@@ -3,7 +3,7 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit'
 
 import Remote from 'blockchain-wallet-v4/src/remote/remote'
 import { WalletFiatType } from 'core/types'
-import { ModalNamesType } from 'data/modals/types'
+import { ModalNameType } from 'data/modals/types'
 import { BankTransferAccountType } from 'data/types'
 
 import {
@@ -93,7 +93,7 @@ const brokerageSlice = createSlice({
       state,
       action: PayloadAction<{
         isFlow?: boolean
-        modalType: ModalNamesType
+        modalType: ModalNameType
         origin: BrokerageModalOriginType
       }>
     ) => {

diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/identityVerification/model.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/identityVerification/model.ts
@@ -3,8 +3,6 @@ import { WalletFormType } from 'redux-form'
 
 import { TIERS } from '../../modules/profile/model'
 
-export const KYC_MODAL = 'KYC_MODAL'
-
 // order is important do not change it
 export const STEPS = {
   infoAndResidential: 'infoAndResidential',

diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/identityVerification/sagas.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/identityVerification/sagas.ts
@@ -4,6 +4,7 @@ import { call, delay, put, select, take } from 'redux-saga/effects'
 import { Types } from 'blockchain-wallet-v4/src'
 import { RemoteDataType, SDDVerifiedType } from 'blockchain-wallet-v4/src/types'
 import { actions, actionTypes, model, selectors } from 'data'
+import { ModalName } from 'data/modals/types'
 import { KycStateType } from 'data/modules/types'
 import * as C from 'services/alerts'
 
@@ -16,7 +17,6 @@ import {
   FLOW_TYPES,
   ID_VERIFICATION_SUBMITTED_FORM,
   INFO_AND_RESIDENTIAL_FORM,
-  KYC_MODAL,
   PERSONAL_FORM,
   PHONE_EXISTS_ERROR,
   SMS_NUMBER_FORM,
@@ -51,7 +51,7 @@ export default ({ api, coreSagas, networks }) => {
   })
 
   const verifyIdentity = function* ({ payload }) {
-    yield put(actions.modals.showModal(KYC_MODAL, payload))
+    yield put(actions.modals.showModal(ModalName.KYC_MODAL, payload))
   }
 
   const registerUserCampaign = function* (payload) {
@@ -167,7 +167,7 @@ export default ({ api, coreSagas, networks }) => {
 
     if (step) return yield put(A.setVerificationStep(step))
 
-    yield put(actions.modals.closeModal(KYC_MODAL))
+    yield put(actions.modals.closeModal(ModalName.KYC_MODAL))
   }
 
   const goToNextStep = function* () {
@@ -179,7 +179,7 @@ export default ({ api, coreSagas, networks }) => {
     if (step) return yield put(A.setVerificationStep(step))
 
     yield put(actions.modules.profile.fetchUser())
-    yield put(actions.modals.closeModal(KYC_MODAL))
+    yield put(actions.modals.closeModal(ModalName.KYC_MODAL))
   }
 
   const updateSmsStep = ({ smsNumber, smsVerified }) => {
@@ -414,7 +414,7 @@ export default ({ api, coreSagas, networks }) => {
             actionTypes.components.simpleBuy.FETCH_SB_ORDERS_FAILURE
           ])
           // close KYC modal
-          yield put(actions.modals.closeModal(KYC_MODAL))
+          yield put(actions.modals.closeModal(ModalName.KYC_MODAL))
         } else {
           // SDD denied, continue to veriff
           yield call(goToNextStep)

diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/sendBch/sagas.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/sendBch/sagas.ts
@@ -9,7 +9,7 @@ import { APIType } from 'blockchain-wallet-v4/src/network/api'
 import { ADDRESS_TYPES } from 'blockchain-wallet-v4/src/redux/payment/btc/utils'
 import { BtcAccountFromType, BtcFromType, BtcPaymentType } from 'blockchain-wallet-v4/src/types'
 import { actions, actionTypes, model, selectors } from 'data'
-import { ModalNamesType } from 'data/modals/types'
+import { ModalNameType } from 'data/modals/types'
 import * as C from 'services/alerts'
 import * as Lockbox from 'services/lockbox'
 import { promptForSecondPassword } from 'services/sagas'
@@ -157,7 +157,7 @@ export default ({ api, coreSagas, networks }: { api: APIType; coreSagas: any; ne
           const modalName = coinfig.type.erc20Address ? 'ETH' : payload
           yield put(actions.modals.closeAllModals())
           yield put(
-            actions.modals.showModal(`SEND_${modalName}_MODAL` as ModalNamesType, {
+            actions.modals.showModal(`SEND_${modalName}_MODAL` as ModalNameType, {
               coin: payload,
               origin: 'SendBch'
             })

diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/sendBtc/sagas.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/sendBtc/sagas.ts
@@ -15,7 +15,7 @@ import {
 } from 'blockchain-wallet-v4/src/types'
 import { errorHandler } from 'blockchain-wallet-v4/src/utils'
 import { actions, actionTypes, model, selectors } from 'data'
-import { ModalNamesType } from 'data/modals/types'
+import { ModalNameType } from 'data/modals/types'
 import * as C from 'services/alerts'
 import * as Lockbox from 'services/lockbox'
 import { promptForSecondPassword } from 'services/sagas'
@@ -174,7 +174,7 @@ export default ({ api, coreSagas, networks }: { api: APIType; coreSagas: any; ne
           const modalName = coinfig.type.erc20Address ? 'ETH' : payload
           yield put(actions.modals.closeAllModals())
           yield put(
-            actions.modals.showModal(`SEND_${modalName}_MODAL` as ModalNamesType, {
+            actions.modals.showModal(`SEND_${modalName}_MODAL` as ModalNameType, {
               coin: payload,
               origin: 'SendBtc'
             })

diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/sendEth/sagas.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/sendEth/sagas.ts
@@ -13,7 +13,7 @@ import { Erc20CoinType, EthPaymentType } from 'blockchain-wallet-v4/src/types'
 import { errorHandler } from 'blockchain-wallet-v4/src/utils'
 import { calculateFee } from 'blockchain-wallet-v4/src/utils/eth'
 import { actions, actionTypes, model, selectors } from 'data'
-import { ModalNamesType } from 'data/modals/types'
+import { ModalNameType } from 'data/modals/types'
 import * as C from 'services/alerts'
 import * as Lockbox from 'services/lockbox'
 import { promptForSecondPassword } from 'services/sagas'
@@ -118,7 +118,7 @@ export default ({ api, coreSagas, networks }: { api: APIType; coreSagas; network
           const modalName = coinfig.type.erc20Address ? 'ETH' : payload
           yield put(actions.modals.closeAllModals())
           yield put(
-            actions.modals.showModal(`SEND_${modalName}_MODAL` as ModalNamesType, {
+            actions.modals.showModal(`SEND_${modalName}_MODAL` as ModalNameType, {
               coin: payload,
               origin: 'SendEth'
             })

diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/sendXlm/model.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/sendXlm/model.ts
@@ -1,4 +1,4 @@
 export const FORM = '@SEND.XLM.FORM'
 export const MODAL = 'SEND_XLM_MODAL'
-export const CREATE_ACCOUNT_LEARN_MODAL = '@SEND.XLM.CREATE_ACCOUNT_LEARN_MODAL'
-export const RESERVE_LEARN_MODAL = '@SEND.XLM.RESERVE_LEARN_MODAL'
+export const CREATE_ACCOUNT_LEARN_MODAL = 'SEND_XLM_CREATE_ACCOUNT_LEARN_MODAL'
+export const RESERVE_LEARN_MODAL = 'SEND_XLM_RESERVE_LEARN_MODAL'
diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/sendXlm/sagas.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/sendXlm/sagas.ts
@@ -9,7 +9,7 @@ import { ADDRESS_TYPES } from 'blockchain-wallet-v4/src/redux/payment/btc/utils'
 import { AddressTypesType, CustodialFromType, XlmPaymentType } from 'blockchain-wallet-v4/src/types'
 import { errorHandler } from 'blockchain-wallet-v4/src/utils'
 import { actions, model, selectors } from 'data'
-import { ModalNamesType } from 'data/modals/types'
+import { ModalNameType } from 'data/modals/types'
 import * as C from 'services/alerts'
 import * as Lockbox from 'services/lockbox'
 import { promptForSecondPassword } from 'services/sagas'
@@ -90,7 +90,7 @@ export default ({ api, coreSagas, networks }: { api: APIType; coreSagas: any; ne
           const modalName = coinfig.type.erc20Address ? 'ETH' : payload
           yield put(actions.modals.closeAllModals())
           yield put(
-            actions.modals.showModal(`SEND_${modalName}_MODAL` as ModalNamesType, {
+            actions.modals.showModal(`SEND_${modalName}_MODAL` as ModalNameType, {
               coin: payload,
               origin: 'SendXlm'
             })

diff --git a/packages/blockchain-wallet-v4-frontend/src/data/goals/actions.ts b/packages/blockchain-wallet-v4-frontend/src/data/goals/actions.ts
@@ -1,12 +1,9 @@
-import { ModalNamesType, ModalParamPropsType } from 'data/modals/types'
+import { ModalNameType, ModalParamPropsType } from 'data/modals/types'
 
 import * as AT from './actionTypes'
 import { GoalsType } from './types'
 
-const generateId = () =>
-  Math.random()
-    .toString(36)
-    .substr(2, 10)
+const generateId = () => Math.random().toString(36).substr(2, 10)
 
 export const saveGoal = (name: GoalsType, data) => ({
   type: AT.SAVE_GOAL,
@@ -16,11 +13,7 @@ export const deleteGoal = (id: string) => ({
   type: AT.DELETE_GOAL,
   payload: { id }
 })
-export const addInitialModal = (
-  key: string,
-  name: ModalNamesType,
-  data: ModalParamPropsType
-) => ({
+export const addInitialModal = (key: string, name: ModalNameType, data: ModalParamPropsType) => ({
   type: AT.ADD_INITIAL_MODAL,
   payload: { key, name, data }
 })

diff --git a/packages/blockchain-wallet-v4-frontend/src/data/goals/sagas.ts b/packages/blockchain-wallet-v4-frontend/src/data/goals/sagas.ts
@@ -8,8 +8,9 @@ import { Exchange, utils } from 'blockchain-wallet-v4/src'
 import { InterestAfterTransactionType, WalletFiatType } from 'blockchain-wallet-v4/src/types'
 import { errorHandler } from 'blockchain-wallet-v4/src/utils'
 import { actions, actionTypes, model, selectors } from 'data'
-import { getBchBalance, getBtcBalance, waitForAllBalances } from 'data/balance/sagas'
+import { getBchBalance, getBtcBalance } from 'data/balance/sagas'
 import { parsePaymentRequest } from 'data/bitpay/sagas'
+import { ModalName } from 'data/modals/types'
 import profileSagas from 'data/modules/profile/sagas'
 import * as C from 'services/alerts'
 
@@ -489,7 +490,7 @@ export default ({ api, coreSagas, networks }) => {
 
     if (firstLogin) {
       yield put(
-        actions.goals.addInitialModal('welcomeModal', 'WELCOME_MODAL', {
+        actions.goals.addInitialModal('welcomeModal', ModalName.WELCOME_MODAL, {
           origin
         })
       )

diff --git a/packages/blockchain-wallet-v4-frontend/src/data/goals/types.ts b/packages/blockchain-wallet-v4-frontend/src/data/goals/types.ts
@@ -1,5 +1,5 @@
 import { CoinType, WalletFiatType } from 'blockchain-wallet-v4/src/types'
-import { ModalNamesType } from 'data/modals/types'
+import { ModalNameType } from 'data/modals/types'
 
 // State
 export type GoalsType =
@@ -34,7 +34,7 @@ export type GoalsState = {
   initialModalDisplayed: boolean
   initialModals:
     | {
-        [key in GoalsType]: { data: any; key: key; name: ModalNamesType }
+        [key in GoalsType]: { data: any; key: key; name: ModalNameType }
       }
     | {}
   initialRedirect: string

diff --git a/packages/blockchain-wallet-v4-frontend/src/data/modals/actions.ts b/packages/blockchain-wallet-v4-frontend/src/data/modals/actions.ts
@@ -1,8 +1,8 @@
 import * as AT from './actionTypes'
-import { ModalActionTypes, ModalNamesType, ModalParamPropsType } from './types'
+import { ModalActionTypes, ModalNameType, ModalParamPropsType } from './types'
 
 // Remove the last modal added in the stack
-export const closeModal = (modalName?: ModalNamesType): ModalActionTypes => ({
+export const closeModal = (modalName?: ModalNameType): ModalActionTypes => ({
   payload: {
     modalName
   },
@@ -14,7 +14,7 @@ export const closeAllModals = (): ModalActionTypes => ({
 })
 // Add a modal in the stack
 export const showModal = (
-  type: ModalNamesType,
+  type: ModalNameType,
   props: ModalParamPropsType,
   options = {}
 ): ModalActionTypes => ({

diff --git a/packages/blockchain-wallet-v4-frontend/src/data/modals/types.ts b/packages/blockchain-wallet-v4-frontend/src/data/modals/types.ts
@@ -1,15 +1,18 @@
 import * as AT from './actionTypes'
 
-export enum ModalNamesEnum {
+export enum ModalName {
   ADD_BANK_YAPILY_MODAL = 'ADD_BANK_YAPILY_MODAL',
   ADD_BANK_YODLEE_MODAL = 'ADD_BANK_YODLEE_MODAL',
   ADD_BTC_WALLET_MODAL = 'ADD_BTC_WALLET_MODAL',
   AIRDROP_CLAIM_MODAL = 'AIRDROP_CLAIM_MODAL',
   AIRDROP_SUCCESS_MODAL = 'AIRDROP_SUCCESS_MODAL',
+  AUTO_DISCONNECTION_MODAL = 'AUTO_DISCONNECTION_MODAL',
   BANK_DEPOSIT_MODAL = 'BANK_DEPOSIT_MODAL',
   BANK_DETAILS_MODAL = 'BANK_DETAILS_MODAL',
+  BITPAY_INFORMATIONAL_MODAL = 'BITPAY_INFORMATIONAL_MODAL',
   BITPAY_INVOICE_EXPIRED_MODAL = 'BITPAY_INVOICE_EXPIRED_MODAL',
   CONFIRMATION_MODAL = 'CONFIRMATION_MODAL',
+  CONFIRM_DISABLE_2FA = 'CONFIRM_DISABLE_2FA',
   CUSTODY_WITHDRAW_MODAL = 'CUSTODY_WITHDRAW_MODAL',
   DELETE_ADDRESS_LABEL_MODAL = 'DELETE_ADDRESS_LABEL_MODAL',
   EDIT_TX_DESCRIPTION_MODAL = 'EDIT_TX_DESCRIPTION_MODAL',
@@ -22,36 +25,49 @@ export enum ModalNamesEnum {
   KYC_TIER_UPGRADE_MODAL = 'KYC_TIER_UPGRADE_MODAL',
   LINK_FROM_EXCHANGE_ACCOUNT_MODAL = 'LINK_FROM_EXCHANGE_ACCOUNT_MODAL',
   LINK_TO_EXCHANGE_ACCOUNT_MODAL = 'LINK_TO_EXCHANGE_ACCOUNT_MODAL',
+  LOCKBOX_APP_MANAGER_MODAL = 'LOCKBOX_APP_MANAGER_MODAL',
+  LOCKBOX_CONNECTION_PROMPT_MODAL = 'LOCKBOX_CONNECTION_PROMPT_MODAL',
+  LOCKBOX_FIRMWARE_MODAL = 'LOCKBOX_FIRMWARE_MODAL',
+  LOCKBOX_SETUP_MODAL = 'LOCKBOX_SETUP_MODAL',
+  LOCKBOX_SHOW_XPUBS = 'LOCKBOX_SHOW_XPUBS',
   MOBILE_NUMBER_ADD_MODAL = 'MOBILE_NUMBER_ADD_MODAL',
   MOBILE_NUMBER_CHANGE_MODAL = 'MOBILE_NUMBER_CHANGE_MODAL',
   MOBILE_NUMBER_VERIFY_MODAL = 'MOBILE_NUMBER_VERIFY_MODAL',
   PAIRING_CODE_MODAL = 'PAIRING_CODE_MODAL',
+  PROMPT_INPUT_MODAL = 'PROMPT_INPUT_MODAL',
+  QR_CODE_MODAL = 'QR_CODE_MODAL',
   RECOVERY_PHRASE_MODAL = 'RECOVERY_PHRASE_MODAL',
   RECURRING_BUYS_MODAL = 'RECURRING_BUYS_MODAL',
   REMOVE_BANK_MODAL = 'REMOVE_BANK_MODAL',
   REQUEST_CRYPTO_MODAL = 'REQUEST_CRYPTO_MODAL',
+  SECOND_PASSWORD_MODAL = 'SECOND_PASSWORD_MODAL',
   SEND_BCH_MODAL = 'SEND_BCH_MODAL',
   SEND_BTC_MODAL = 'SEND_BTC_MODAL',
   SEND_ETH_MODAL = 'SEND_ETH_MODAL',
+  SEND_XLM_CREATE_ACCOUNT_LEARN_MODAL = 'SEND_XLM_CREATE_ACCOUNT_LEARN_MODAL',
   SEND_XLM_MODAL = 'SEND_XLM_MODAL',
+  SEND_XLM_RESERVE_LEARN_MODAL = 'SEND_XLM_RESERVE_LEARN_MODAL',
   SHOW_BTC_PRIVATE_KEY_MODAL = 'SHOW_BTC_PRIVATE_KEY_MODAL',
   SHOW_USED_ADDRESS_MODAL = 'SHOW_USED_ADDRESS_MODAL',
   SHOW_XPUB_MODAL = 'SHOW_XPUB_MODAL',
   SIGN_MESSAGE_MODAL = 'SIGN_MESSAGE_MODAL',
   SIMPLE_BUY_MODAL = 'SIMPLE_BUY_MODAL',
+  SUPPORT_MODAL = 'SUPPORT_MODAL',
   SWAP_GET_STARTED_MODAL = 'SWAP_GET_STARTED_MODAL',
   SWAP_MODAL = 'SWAP_MODAL',
-  TRADING_LIMITS = 'TRADING_LIMITS',
+  TRADING_LIMITS_MODAL = 'TRADING_LIMITS_MODAL',
   TRANSACTION_REPORT_MODAL = 'TRANSACTION_REPORT_MODAL',
   TRANSFER_ETH_MODAL = 'TRANSFER_ETH_MODAL',
+  TWO_STEP_GOOGLE_AUTH_MODAL = 'TWO_STEP_GOOGLE_AUTH_MODAL',
+  TWO_STEP_SETUP_MODAL = 'TWO_STEP_SETUP_MODAL',
   TWO_STEP_YUBICO_MODAL = 'TWO_STEP_YUBICO_MODAL',
   UPGRADE_ADDRESS_LABELS_MODAL = 'UPGRADE_ADDRESS_LABELS_MODAL',
   UPGRADE_FOR_AIRDROP_MODAL = 'UPGRADE_FOR_AIRDROP_MODAL',
   VERIFY_MESSAGE_MODAL = 'VERIFY_MESSAGE_MODAL',
   WELCOME_MODAL = 'WELCOME_MODAL'
 }
 
-export type ModalNamesType = keyof typeof ModalNamesEnum
+export type ModalNameType = keyof typeof ModalName
 
 export type ModalOriginType =
   | 'AirdropClaimGoal'
@@ -114,7 +130,7 @@ export type ModalParamPropsType = {
 export type ModalType = {
   options: any
   props: ModalParamPropsType
-  type: ModalNamesType
+  type: ModalNameType
 }
 
 // State
@@ -127,7 +143,7 @@ interface CloseAllModals {
 
 interface CloseModal {
   payload: {
-    modalName?: ModalNamesType
+    modalName?: ModalNameType
   }
   type: typeof AT.CLOSE_MODAL
 }