diff --git a/src/features/counterfactual/ActivateAccountButton.tsx b/src/features/counterfactual/ActivateAccountButton.tsx
new file mode 100644
index 0000000000..78252316f8
--- /dev/null
+++ 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()
+ }
+
+ return (
+
+
+
+
+
+ )
+}
+
+export default ActivateAccountButton
diff --git a/src/features/counterfactual/ActivateAccountFlow.tsx b/src/features/counterfactual/ActivateAccountFlow.tsx
index 0f13dba5b8..5813b8e68e 100644
--- 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()
- }
-
- return (
-
-
-
-
-
- )
-}
-
export default ActivateAccountFlow
diff --git a/src/features/counterfactual/CheckBalance.tsx b/src/features/counterfactual/CheckBalance.tsx
index 3d2a31ef9c..9b8fabac79 100644
--- 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
index 278a30c643..8ce3264dab 100644
--- 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'