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'