refactor: Dynamically import ActivateAccountFlow

safe-global · Feb 16, 2024 · aae01f7 · aae01f7
1 parent 73c42c4
commit aae01f7
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 35 deletions.
diff --git a/src/features/counterfactual/ActivateAccountButton.tsx b/src/features/counterfactual/ActivateAccountButton.tsx
@@ -0,0 +1,42 @@
+import dynamic from 'next/dynamic'
+import React, { useContext } from 'react'
+import { Button, CircularProgress, Tooltip, Typography } from '@mui/material'
+import { TxModalContext } from '@/components/tx-flow'
+import { PendingSafeStatus, selectUndeployedSafe } from '@/features/counterfactual/store/undeployedSafesSlice'
+import useSafeInfo from '@/hooks/useSafeInfo'
+import { useAppSelector } from '@/store'
+
+const ActivateAccountFlow = dynamic(() => import('./ActivateAccountFlow'))
+
+const ActivateAccountButton = () => {
+  const { safe, safeAddress } = useSafeInfo()
+  const undeployedSafe = useAppSelector((state) => selectUndeployedSafe(state, safe.chainId, safeAddress))
+  const { setTxFlow } = useContext(TxModalContext)
+
+  const isProcessing = undeployedSafe?.status.status !== PendingSafeStatus.AWAITING_EXECUTION
+
+  const activateAccount = () => {
+    setTxFlow(<ActivateAccountFlow />)
+  }
+
+  return (
+    <Tooltip title={isProcessing ? 'The safe activation is already in process' : undefined}>
+      <span>
+        <Button variant="contained" size="small" onClick={activateAccount} disabled={isProcessing}>
+          {isProcessing ? (
+            <>
+              <Typography variant="body2" component="span" mr={1}>
+                Processing
+              </Typography>
+              <CircularProgress size={16} />
+            </>
+          ) : (
+            'Activate now'
+          )}
+        </Button>
+      </span>
+    </Tooltip>
+  )
+}
+
+export default ActivateAccountButton
diff --git a/src/features/counterfactual/ActivateAccountFlow.tsx b/src/features/counterfactual/ActivateAccountFlow.tsx
@@ -10,7 +10,7 @@ import ErrorMessage from '@/components/tx/ErrorMessage'
 import { ExecutionMethod, ExecutionMethodSelector } from '@/components/tx/ExecutionMethodSelector'
 import useDeployGasLimit from '@/features/counterfactual/hooks/useDeployGasLimit'
 import { safeCreationDispatch, SafeCreationEvent } from '@/features/counterfactual/services/safeCreationEvents'
-import { PendingSafeStatus, selectUndeployedSafe } from '@/features/counterfactual/store/undeployedSafesSlice'
+import { selectUndeployedSafe } from '@/features/counterfactual/store/undeployedSafesSlice'
 import { CF_TX_GROUP_KEY } from '@/features/counterfactual/utils'
 import useChainId from '@/hooks/useChainId'
 import { useCurrentChain } from '@/hooks/useChains'
@@ -26,7 +26,7 @@ import { isSocialLoginWallet } from '@/services/mpc/SocialLoginModule'
 import { useAppSelector } from '@/store'
 import { hasFeature } from '@/utils/chains'
 import { hasRemainingRelays } from '@/utils/relaying'
-import { Box, Button, CircularProgress, Divider, Grid, Tooltip, Typography } from '@mui/material'
+import { Box, Button, CircularProgress, Divider, Grid, Typography } from '@mui/material'
 import type { DeploySafeProps } from '@safe-global/protocol-kit'
 import { FEATURES } from '@safe-global/safe-gateway-typescript-sdk'
 import React, { useContext, useState } from 'react'
@@ -201,35 +201,4 @@ const ActivateAccountFlow = () => {
   )
 }
 
-export const ActivateAccountButton = () => {
-  const { safe, safeAddress } = useSafeInfo()
-  const undeployedSafe = useAppSelector((state) => selectUndeployedSafe(state, safe.chainId, safeAddress))
-  const { setTxFlow } = useContext(TxModalContext)
-
-  const isProcessing = undeployedSafe?.status.status !== PendingSafeStatus.AWAITING_EXECUTION
-
-  const activateAccount = () => {
-    setTxFlow(<ActivateAccountFlow />)
-  }
-
-  return (
-    <Tooltip title={isProcessing ? 'The safe activation is already in process' : undefined}>
-      <span>
-        <Button variant="contained" size="small" onClick={activateAccount} disabled={isProcessing}>
-          {isProcessing ? (
-            <>
-              <Typography variant="body2" component="span" mr={1}>
-                Processing
-              </Typography>
-              <CircularProgress size={16} />
-            </>
-          ) : (
-            'Activate now'
-          )}
-        </Button>
-      </span>
-    </Tooltip>
-  )
-}
-
 export default ActivateAccountFlow
diff --git a/src/features/counterfactual/CheckBalance.tsx b/src/features/counterfactual/CheckBalance.tsx
@@ -1,5 +1,5 @@
 import ExternalLink from '@/components/common/ExternalLink'
-import { ActivateAccountButton } from '@/features/counterfactual/ActivateAccountFlow'
+import ActivateAccountButton from '@/features/counterfactual/ActivateAccountButton'
 import { useCurrentChain } from '@/hooks/useChains'
 import useSafeInfo from '@/hooks/useSafeInfo'
 import { getBlockExplorerLink } from '@/utils/chains'

diff --git a/src/features/counterfactual/FirstTxFlow.tsx b/src/features/counterfactual/FirstTxFlow.tsx
@@ -1,11 +1,12 @@
 import { AppRoutes } from '@/config/routes'
-import ActivateAccountFlow from '@/features/counterfactual/ActivateAccountFlow'
+import dynamic from 'next/dynamic'
 import { useRouter } from 'next/router'
 import { type ElementType, useContext } from 'react'
 import { Box, ButtonBase, Grid, SvgIcon, Typography } from '@mui/material'
 import ModalDialog from '@/components/common/ModalDialog'
 import { TxModalContext } from '@/components/tx-flow'
 import { AddOwnerFlow, TokenTransferFlow, UpsertRecoveryFlow } from '@/components/tx-flow/flows'
+const ActivateAccountFlow = dynamic(() => import('./ActivateAccountFlow'))
 import ChevronRightRoundedIcon from '@mui/icons-material/ChevronRightRounded'
 import { useTxBuilderApp } from '@/hooks/safe-apps/useTxBuilderApp'
 import AssetsIcon from '@/public/images/sidebar/assets.svg'