From 074146d7a5b5639c38d6b214f286815c19b152b6 Mon Sep 17 00:00:00 2001
From: katspaugh <381895+katspaugh@users.noreply.github.com>
Date: Wed, 7 Feb 2024 10:57:41 +0100
Subject: [PATCH 01/11] Refactor: remove custom ENS resolver for Sepolia
 (#3204)

---
 src/components/common/AddressInput/index.tsx  |  2 +-
 .../flows/NftTransfer/SendNftBatch.tsx        |  2 +-
 .../TokenTransfer/CreateTokenTransfer.tsx     |  6 +----
 .../__tests__/CreateTokenTransfer.test.tsx    |  2 +-
 src/services/ens/config.ts                    |  6 -----
 src/services/ens/custom.ts                    | 24 -------------------
 src/services/ens/index.test.ts                | 17 ++-----------
 src/services/ens/index.ts                     |  8 -------
 8 files changed, 6 insertions(+), 61 deletions(-)
 delete mode 100644 src/services/ens/config.ts
 delete mode 100644 src/services/ens/custom.ts

diff --git a/src/components/common/AddressInput/index.tsx b/src/components/common/AddressInput/index.tsx
index d4789d5976..a72a2e950e 100644
--- a/src/components/common/AddressInput/index.tsx
+++ b/src/components/common/AddressInput/index.tsx
@@ -117,7 +117,7 @@ const AddressInput = ({
         className={inputCss.input}
         autoComplete="off"
         autoFocus={props.focused}
-        label={<>{error?.message || props.label}</>}
+        label={<>{error?.message || props.label || `Recipient address${isDomainLookupEnabled ? ' or ENS' : ''}`}</>}
         error={!!error}
         fullWidth
         spellCheck={false}
diff --git a/src/components/tx-flow/flows/NftTransfer/SendNftBatch.tsx b/src/components/tx-flow/flows/NftTransfer/SendNftBatch.tsx
index f60583c5e7..9f2bb7977c 100644
--- a/src/components/tx-flow/flows/NftTransfer/SendNftBatch.tsx
+++ b/src/components/tx-flow/flows/NftTransfer/SendNftBatch.tsx
@@ -113,7 +113,7 @@ const SendNftBatch = ({ params, onSubmit }: SendNftBatchProps) => {
       <FormProvider {...formMethods}>
         <form onSubmit={handleSubmit(onFormSubmit)}>
           <FormControl fullWidth sx={{ mb: 3, mt: 1 }}>
-            <AddressBookInput name={Field.recipient} label="Recipient address or ENS" canAdd={isAddressValid} />
+            <AddressBookInput name={Field.recipient} canAdd={isAddressValid} />
           </FormControl>
 
           <Typography data-testid="selected-nfts" variant="body2" color="text.secondary" mb={2}>
diff --git a/src/components/tx-flow/flows/TokenTransfer/CreateTokenTransfer.tsx b/src/components/tx-flow/flows/TokenTransfer/CreateTokenTransfer.tsx
index f312db8aaf..6900b3c3ed 100644
--- a/src/components/tx-flow/flows/TokenTransfer/CreateTokenTransfer.tsx
+++ b/src/components/tx-flow/flows/TokenTransfer/CreateTokenTransfer.tsx
@@ -103,11 +103,7 @@ export const CreateTokenTransfer = ({
       <FormProvider {...formMethods}>
         <form onSubmit={handleSubmit(onSubmit)} className={commonCss.form}>
           <FormControl fullWidth sx={{ mt: 1 }}>
-            <AddressBookInput
-              name={TokenTransferFields.recipient}
-              label="Recipient address or ENS"
-              canAdd={isAddressValid}
-            />
+            <AddressBookInput name={TokenTransferFields.recipient} canAdd={isAddressValid} />
           </FormControl>
 
           <TokenAmountInput balances={balancesItems} selectedToken={selectedToken} maxAmount={maxAmount} />
diff --git a/src/components/tx-flow/flows/TokenTransfer/__tests__/CreateTokenTransfer.test.tsx b/src/components/tx-flow/flows/TokenTransfer/__tests__/CreateTokenTransfer.test.tsx
index af351c4fa9..01c52de3bd 100644
--- a/src/components/tx-flow/flows/TokenTransfer/__tests__/CreateTokenTransfer.test.tsx
+++ b/src/components/tx-flow/flows/TokenTransfer/__tests__/CreateTokenTransfer.test.tsx
@@ -29,7 +29,7 @@ describe('CreateTokenTransfer', () => {
       <CreateTokenTransfer params={mockParams} onSubmit={jest.fn()} isSafeTokenPaused={true} />,
     )
 
-    expect(getAllByText('Recipient address or ENS')[0]).toBeInTheDocument()
+    expect(getAllByText('Recipient address')[0]).toBeInTheDocument()
   })
 
   it('should disable the submit button and display a warning if $SAFE token is selected and not transferable', () => {
diff --git a/src/services/ens/config.ts b/src/services/ens/config.ts
deleted file mode 100644
index 7f96cde9f6..0000000000
--- a/src/services/ens/config.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-/**
- * @see https://docs.ens.domains/ens-deployments
- */
-export const CUSTOM_REGISTRIES: Record<string, string> = {
-  '11155111': '0x00000000000C2E074eC69A0dFb2997BA6C7d2e1e', // ENS on Sepolia
-}
diff --git a/src/services/ens/custom.ts b/src/services/ens/custom.ts
deleted file mode 100644
index ca6d629596..0000000000
--- a/src/services/ens/custom.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { Contract, namehash, ZeroAddress, type Provider } from 'ethers'
-
-// ENS Registry ABI (simplified version)
-const ensRegistryAbi = ['function resolver(bytes32 node) external view returns (address)']
-const resolverAbi = ['function addr(bytes32 node) external view returns (address)']
-
-export const customResolveName = async (
-  registryAddress: string,
-  rpcProvider: Provider,
-  name: string,
-): Promise<string | undefined> => {
-  const ensRegistry = new Contract(registryAddress, ensRegistryAbi, rpcProvider)
-  const nhash = namehash(name)
-  const resolverAddress = await ensRegistry.resolver(nhash)
-
-  if (resolverAddress === ZeroAddress) {
-    return undefined
-  }
-
-  const resolver = new Contract(resolverAddress, resolverAbi, rpcProvider)
-  const address = await resolver.addr(nhash)
-
-  return address || undefined
-}
diff --git a/src/services/ens/index.test.ts b/src/services/ens/index.test.ts
index 42ac92a54a..c66abf42d8 100644
--- a/src/services/ens/index.test.ts
+++ b/src/services/ens/index.test.ts
@@ -4,7 +4,7 @@ import { logError } from '../exceptions'
 
 // mock rpcProvider
 const rpcProvider = {
-  resolveName: jest.fn(() => Promise.resolve('0x0000000000000000000000000000000000000000')),
+  resolveName: jest.fn(() => Promise.resolve('0x0000000000000000000000000000000000000001')),
   lookupAddress: jest.fn(() => Promise.resolve('safe.eth')),
   getNetwork: jest.fn(() => Promise.resolve({ chainId: 1 })),
 } as unknown as JsonRpcProvider
@@ -20,10 +20,6 @@ jest.mock('../exceptions', () => ({
   logError: jest.fn(),
 }))
 
-jest.mock('./custom', () => ({
-  customResolveName: jest.fn(() => Promise.resolve('0x0000001111111111111111111111111111111111')),
-}))
-
 describe('domains', () => {
   describe('isDomain', () => {
     it('should check the domain format', async () => {
@@ -37,7 +33,7 @@ describe('domains', () => {
 
   describe('resolveName', () => {
     it('should resolve names', async () => {
-      expect(await resolveName(rpcProvider, 'test.eth')).toBe('0x0000000000000000000000000000000000000000')
+      expect(await resolveName(rpcProvider, 'test.eth')).toBe('0x0000000000000000000000000000000000000001')
     })
 
     it('should return undefined and log on error', async () => {
@@ -45,15 +41,6 @@ describe('domains', () => {
       expect(address).toBe(undefined)
       expect(logError).toHaveBeenCalledWith('101: Failed to resolve the address', 'bad resolveName')
     })
-
-    it('should look up names on Sepolia', async () => {
-      // mock rpcProvider
-      const rpcProvider = {
-        getNetwork: jest.fn(() => Promise.resolve({ chainId: 11155111 })),
-      } as unknown as JsonRpcProvider
-
-      expect(await resolveName(rpcProvider, 'sepolia.eth')).toBe('0x0000001111111111111111111111111111111111')
-    })
   })
 
   describe('lookupAddress', () => {
diff --git a/src/services/ens/index.ts b/src/services/ens/index.ts
index 60b98da554..295f1368fc 100644
--- a/src/services/ens/index.ts
+++ b/src/services/ens/index.ts
@@ -1,8 +1,6 @@
 import { type Provider } from 'ethers'
 import { logError } from '../exceptions'
 import ErrorCodes from '../exceptions/ErrorCodes'
-import { CUSTOM_REGISTRIES } from './config'
-import { customResolveName } from './custom'
 
 type EthersError = Error & {
   reason?: string
@@ -22,12 +20,6 @@ export const resolveName = async (rpcProvider: Provider, name: string): Promise<
   } catch {}
 
   try {
-    // Try custom resolvers first
-    if (chainId && CUSTOM_REGISTRIES[chainId]) {
-      return await customResolveName(CUSTOM_REGISTRIES[chainId], rpcProvider, name)
-    }
-
-    // The default ENS resolver
     return (await rpcProvider.resolveName(name)) || undefined
   } catch (e) {
     const err = e as EthersError

From 5908386a71f4294115cb08cd13bde8a7c3a52054 Mon Sep 17 00:00:00 2001
From: katspaugh <381895+katspaugh@users.noreply.github.com>
Date: Wed, 7 Feb 2024 12:58:02 +0100
Subject: [PATCH 02/11] Fix: update the Safe Apps SDK link (#3213)

---
 src/components/safe-apps/AddCustomAppModal/index.tsx | 2 +-
 src/config/constants.ts                              | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/safe-apps/AddCustomAppModal/index.tsx b/src/components/safe-apps/AddCustomAppModal/index.tsx
index c32fce32cf..eeae0cc239 100644
--- a/src/components/safe-apps/AddCustomAppModal/index.tsx
+++ b/src/components/safe-apps/AddCustomAppModal/index.tsx
@@ -45,7 +45,7 @@ type CustomAppFormData = {
   safeApp: SafeAppData
 }
 
-const HELP_LINK = 'https://docs.safe.global/safe-core-aa-sdk/safe-apps/get-started'
+const HELP_LINK = 'https://docs.safe.global/apps-sdk-overview'
 const APP_ALREADY_IN_THE_LIST_ERROR = 'This Safe App is already in the list'
 const MANIFEST_ERROR = "The app doesn't support Safe App functionality"
 const INVALID_URL_ERROR = 'The url is invalid'
diff --git a/src/config/constants.ts b/src/config/constants.ts
index 459a1a51e5..7742697469 100644
--- a/src/config/constants.ts
+++ b/src/config/constants.ts
@@ -37,7 +37,7 @@ export const SAFE_TOKEN_ADDRESSES: { [chainId: string]: string } = {
 export const SAFE_APPS_INFURA_TOKEN = process.env.NEXT_PUBLIC_SAFE_APPS_INFURA_TOKEN || INFURA_TOKEN
 export const SAFE_APPS_THIRD_PARTY_COOKIES_CHECK_URL = 'https://third-party-cookies-check.gnosis-safe.com'
 export const SAFE_APPS_DEMO_SAFE_MAINNET = 'eth:0xfF501B324DC6d78dC9F983f140B9211c3EdB4dc7'
-export const SAFE_APPS_SDK_DOCS_URL = 'https://docs.safe.global/safe-core-aa-sdk/safe-apps'
+export const SAFE_APPS_SDK_DOCS_URL = 'https://docs.safe.global/apps-sdk-overview'
 
 // Google Tag Manager
 export const GOOGLE_TAG_MANAGER_ID = process.env.NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID || ''

From 18239b2bcd664ebb85c97d5356d7238b53d040c0 Mon Sep 17 00:00:00 2001
From: katspaugh <381895+katspaugh@users.noreply.github.com>
Date: Wed, 7 Feb 2024 13:34:43 +0100
Subject: [PATCH 03/11] Chore: update WalletConnect packages (#3216)

---
 package.json | 11 ++++---
 yarn.lock    | 90 ++++++++++++++++++++++++++++++++++++++++++++++------
 2 files changed, 86 insertions(+), 15 deletions(-)

diff --git a/package.json b/package.json
index b939beeaf7..6e485592b3 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,8 @@
     "cypress:run": "cypress run",
     "cypress:ci": "yarn cypress:run --config baseUrl=http://localhost:8080 --spec cypress/e2e/smoke/*.cy.js",
     "serve": "npx -y serve out -p ${REVERSE_PROXY_UI_PORT:=8080}",
-    "static-serve": "yarn build && yarn serve"
+    "static-serve": "yarn build && yarn serve",
+    "update-wc": "yarn add @walletconnect/web3wallet@latest @walletconnect/utils@latest @walletconnect/types@latest"
   },
   "engines": {
     "node": ">=16"
@@ -54,16 +55,16 @@
     "@safe-global/safe-apps-sdk": "^9.0.0-next.1",
     "@safe-global/safe-core-sdk": "^3.3.5",
     "@safe-global/safe-core-sdk-utils": "^1.7.4",
-    "@safe-global/safe-ethers-lib": "^1.9.4",
     "@safe-global/safe-deployments": "1.32.0",
+    "@safe-global/safe-ethers-lib": "^1.9.4",
     "@safe-global/safe-gateway-typescript-sdk": "^3.14.0",
     "@safe-global/safe-modules-deployments": "^1.2.0",
     "@sentry/react": "^7.91.0",
     "@spindl-xyz/attribution-lite": "^1.4.0",
     "@tkey-mpc/common-types": "^8.2.2",
     "@truffle/hdwallet-provider": "^2.1.4",
-    "@walletconnect/utils": "^2.11.0",
-    "@walletconnect/web3wallet": "^1.10.0",
+    "@walletconnect/utils": "^2.11.1",
+    "@walletconnect/web3wallet": "^1.10.1",
     "@web3-onboard/coinbase": "^2.2.6",
     "@web3-onboard/core": "^2.21.2",
     "@web3-onboard/injected-wallets": "^2.10.7",
@@ -118,7 +119,7 @@
     "@types/react-gtm-module": "^2.0.1",
     "@types/semver": "^7.3.10",
     "@typescript-eslint/eslint-plugin": "^5.47.1",
-    "@walletconnect/types": "^2.11.0",
+    "@walletconnect/types": "^2.11.1",
     "cross-env": "^7.0.3",
     "cypress": "^12.15.0",
     "cypress-file-upload": "^5.0.8",
diff --git a/yarn.lock b/yarn.lock
index e7dfb5e69a..ec3a888815 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5749,6 +5749,29 @@
     lodash.isequal "4.5.0"
     uint8arrays "^3.1.0"
 
+"@walletconnect/core@2.11.1":
+  version "2.11.1"
+  resolved "https://registry.yarnpkg.com/@walletconnect/core/-/core-2.11.1.tgz#da2be26b8b6514c74f06dc9a5ffb450bdec3456d"
+  integrity sha512-T57Vd7YdbHPsy3tthBuwrhaZNafN0+PqjISFRNeJy/bsKdXxpJg2hGSARuOTpCO7V6VcaatqlaSMuG3DrnG5rA==
+  dependencies:
+    "@walletconnect/heartbeat" "1.2.1"
+    "@walletconnect/jsonrpc-provider" "1.0.13"
+    "@walletconnect/jsonrpc-types" "1.0.3"
+    "@walletconnect/jsonrpc-utils" "1.0.8"
+    "@walletconnect/jsonrpc-ws-connection" "1.0.14"
+    "@walletconnect/keyvaluestorage" "^1.1.1"
+    "@walletconnect/logger" "^2.0.1"
+    "@walletconnect/relay-api" "^1.0.9"
+    "@walletconnect/relay-auth" "^1.0.4"
+    "@walletconnect/safe-json" "^1.0.2"
+    "@walletconnect/time" "^1.0.2"
+    "@walletconnect/types" "2.11.1"
+    "@walletconnect/utils" "2.11.1"
+    events "^3.3.0"
+    isomorphic-unfetch "3.1.0"
+    lodash.isequal "4.5.0"
+    uint8arrays "^3.1.0"
+
 "@walletconnect/environment@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@walletconnect/environment/-/environment-1.0.1.tgz#1d7f82f0009ab821a2ba5ad5e5a7b8ae3b214cd7"
@@ -5919,6 +5942,21 @@
     "@walletconnect/utils" "2.11.0"
     events "^3.3.0"
 
+"@walletconnect/sign-client@2.11.1":
+  version "2.11.1"
+  resolved "https://registry.yarnpkg.com/@walletconnect/sign-client/-/sign-client-2.11.1.tgz#c073b8d2d594e792bb783d36c8b021bd37a9d4f6"
+  integrity sha512-s3oKSx6/F5X2WmkV1jfJImBFACf9Km5HpTb+n5q+mobJVpUQw/clvoVyIrNNppLhm1V1S/ylHXh0qCrDppDpCA==
+  dependencies:
+    "@walletconnect/core" "2.11.1"
+    "@walletconnect/events" "^1.0.1"
+    "@walletconnect/heartbeat" "1.2.1"
+    "@walletconnect/jsonrpc-utils" "1.0.8"
+    "@walletconnect/logger" "^2.0.1"
+    "@walletconnect/time" "^1.0.2"
+    "@walletconnect/types" "2.11.1"
+    "@walletconnect/utils" "2.11.1"
+    events "^3.3.0"
+
 "@walletconnect/time@^1.0.2":
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/@walletconnect/time/-/time-1.0.2.tgz#6c5888b835750ecb4299d28eecc5e72c6d336523"
@@ -5926,7 +5964,7 @@
   dependencies:
     tslib "1.14.1"
 
-"@walletconnect/types@2.11.0", "@walletconnect/types@^2.11.0":
+"@walletconnect/types@2.11.0":
   version "2.11.0"
   resolved "https://registry.yarnpkg.com/@walletconnect/types/-/types-2.11.0.tgz#474a009c56faa9ef4063b76ed84415c801dc9f1e"
   integrity sha512-AB5b1lrEbCGHxqS2vqfCkIoODieH+ZAUp9rA1O2ftrhnqDJiJK983Df87JhYhECsQUBHHfALphA8ydER0q+9sw==
@@ -5938,6 +5976,18 @@
     "@walletconnect/logger" "^2.0.1"
     events "^3.3.0"
 
+"@walletconnect/types@2.11.1", "@walletconnect/types@^2.11.1":
+  version "2.11.1"
+  resolved "https://registry.yarnpkg.com/@walletconnect/types/-/types-2.11.1.tgz#4f705b43ddc286b69eb9bf91bb6e9496d20de0e3"
+  integrity sha512-UbdbX+d6MOK0AXKxt5imV3KvAcLVpZUHylaRDIP5ffwVylM/p4DHnKppil1Qq5N+IGDr3RsUwLGFkKjqsQYRKw==
+  dependencies:
+    "@walletconnect/events" "^1.0.1"
+    "@walletconnect/heartbeat" "1.2.1"
+    "@walletconnect/jsonrpc-types" "1.0.3"
+    "@walletconnect/keyvaluestorage" "^1.1.1"
+    "@walletconnect/logger" "^2.0.1"
+    events "^3.3.0"
+
 "@walletconnect/types@~1.8.0":
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/@walletconnect/types/-/types-1.8.0.tgz#3f5e85b2d6b149337f727ab8a71b8471d8d9a195"
@@ -5958,7 +6008,7 @@
     "@walletconnect/utils" "2.11.0"
     events "^3.3.0"
 
-"@walletconnect/utils@2.11.0", "@walletconnect/utils@^2.10.1", "@walletconnect/utils@^2.11.0":
+"@walletconnect/utils@2.11.0", "@walletconnect/utils@^2.10.1":
   version "2.11.0"
   resolved "https://registry.yarnpkg.com/@walletconnect/utils/-/utils-2.11.0.tgz#31c95151c823022077883dda61800cdea71879b7"
   integrity sha512-hxkHPlTlDQILHfIKXlmzgNJau/YcSBC3XHUSuZuKZbNEw3duFT6h6pm3HT/1+j1a22IG05WDsNBuTCRkwss+BQ==
@@ -5978,19 +6028,39 @@
     query-string "7.1.3"
     uint8arrays "^3.1.0"
 
-"@walletconnect/web3wallet@^1.10.0":
-  version "1.10.0"
-  resolved "https://registry.yarnpkg.com/@walletconnect/web3wallet/-/web3wallet-1.10.0.tgz#5a7f181bbea213e8fb5961900a0069e58da36d18"
-  integrity sha512-JyaYdnBKL1hVpsE5hpjZhohpX1Ak2mwai3GYr8nI1FfK8Z3IPIh+4ImeDMnEao1cQFoItQNompp5y5C7WlI69A==
+"@walletconnect/utils@2.11.1", "@walletconnect/utils@^2.11.1":
+  version "2.11.1"
+  resolved "https://registry.yarnpkg.com/@walletconnect/utils/-/utils-2.11.1.tgz#56116d9c410c6f2ae8d562017cf6876cccb366f1"
+  integrity sha512-wRFDHN86dZ05mCET1H3912odIeQa8j7cZKxl1FlWRpV2YsILj9HCYSX6Uq2brwO02Kv2vryke44G1r8XI/LViA==
+  dependencies:
+    "@stablelib/chacha20poly1305" "1.0.1"
+    "@stablelib/hkdf" "1.0.1"
+    "@stablelib/random" "^1.0.2"
+    "@stablelib/sha256" "1.0.1"
+    "@stablelib/x25519" "^1.0.3"
+    "@walletconnect/relay-api" "^1.0.9"
+    "@walletconnect/safe-json" "^1.0.2"
+    "@walletconnect/time" "^1.0.2"
+    "@walletconnect/types" "2.11.1"
+    "@walletconnect/window-getters" "^1.0.1"
+    "@walletconnect/window-metadata" "^1.0.1"
+    detect-browser "5.3.0"
+    query-string "7.1.3"
+    uint8arrays "^3.1.0"
+
+"@walletconnect/web3wallet@^1.10.1":
+  version "1.10.1"
+  resolved "https://registry.yarnpkg.com/@walletconnect/web3wallet/-/web3wallet-1.10.1.tgz#62271183b72b3e0ec47c683bf021549d47225f39"
+  integrity sha512-lXyfljLLQ/76F5ftgaKaIoPfj/R2Mi2Tv2JnIXNonlIlAITdghYVby+xYbh4b+0yldf8fr8lqxFuHBuVoWhMjw==
   dependencies:
     "@walletconnect/auth-client" "2.1.2"
-    "@walletconnect/core" "2.11.0"
+    "@walletconnect/core" "2.11.1"
     "@walletconnect/jsonrpc-provider" "1.0.13"
     "@walletconnect/jsonrpc-utils" "1.0.8"
     "@walletconnect/logger" "2.0.1"
-    "@walletconnect/sign-client" "2.11.0"
-    "@walletconnect/types" "2.11.0"
-    "@walletconnect/utils" "2.11.0"
+    "@walletconnect/sign-client" "2.11.1"
+    "@walletconnect/types" "2.11.1"
+    "@walletconnect/utils" "2.11.1"
 
 "@walletconnect/window-getters@^1.0.1":
   version "1.0.1"

From 9887d9646bc5ab184064bb15faad17319ce37ee5 Mon Sep 17 00:00:00 2001
From: Michael <30682308+mike10ca@users.noreply.github.com>
Date: Wed, 7 Feb 2024 15:09:20 +0100
Subject: [PATCH 04/11] tests: add sidebar tests -p3 (#3211)

---
 cypress/e2e/pages/assets.pages.js             | 11 +++++
 cypress/e2e/pages/navigation.page.js          |  3 ++
 cypress/e2e/pages/sidebar.pages.js            | 41 +++++++++-------
 cypress/e2e/regression/sidebar_2.cy.js        | 21 +++++++-
 cypress/e2e/regression/sidebar_nonowner.cy.js | 29 +++++++++++
 cypress/support/constants.js                  |  6 +++
 cypress/support/localstorage_data.js          | 49 ++++++++++++++++++-
 .../balances/CurrencySelect/index.tsx         |  3 +-
 .../sidebar/PendingActions/index.tsx          |  2 +
 9 files changed, 144 insertions(+), 21 deletions(-)
 create mode 100644 cypress/e2e/regression/sidebar_nonowner.cy.js

diff --git a/cypress/e2e/pages/assets.pages.js b/cypress/e2e/pages/assets.pages.js
index 2509eefb30..444e4f58ab 100644
--- a/cypress/e2e/pages/assets.pages.js
+++ b/cypress/e2e/pages/assets.pages.js
@@ -17,6 +17,8 @@ const hiddenTokenSaveBtn = 'span[data-track="assets: Save hide dialog"]'
 const hiddenTokenCancelBtn = 'span[data-track="assets: Cancel hide dialog"]'
 const hiddenTokenDeselectAllBtn = 'span[data-track="assets: Deselect all hide dialog"]'
 const hiddenTokenIcon = 'svg[data-testid="VisibilityOffOutlinedIcon"]'
+const currencySelector = '[data-testid="currency-selector"]'
+const currencyItem = '[data-testid="currency-item"]'
 
 const hideTokenDefaultString = 'Hide tokens'
 const assetNameSortBtnStr = 'Asset'
@@ -91,6 +93,15 @@ export const currentcyGnosisFormat = '< 0.00001 GNO'
 export const currencyOx = /^0x$/
 export const currentcyOxFormat = '1.003 ZRX'
 
+function clickOnCurrencySelector() {
+  cy.get(currencySelector).click()
+}
+
+export function changeCurrency(currency) {
+  clickOnCurrencySelector()
+  cy.get(currencyItem).contains(currency).click()
+}
+
 export function clickOnSendBtn(index) {
   cy.get('button')
     .contains(sendBtnStr)
diff --git a/cypress/e2e/pages/navigation.page.js b/cypress/e2e/pages/navigation.page.js
index 8748d2a581..7b176e398e 100644
--- a/cypress/e2e/pages/navigation.page.js
+++ b/cypress/e2e/pages/navigation.page.js
@@ -9,6 +9,9 @@ const sentinelStart = 'div[data-testid="sentinelStart"]'
 const disconnectBtnStr = 'Disconnect'
 const notConnectedStatus = 'Connect'
 
+export function verifyTxBtnStatus(status) {
+  cy.get(newTxBtn).should(status)
+}
 export function clickOnSideNavigation(option) {
   cy.get(option).should('exist').click()
 }
diff --git a/cypress/e2e/pages/sidebar.pages.js b/cypress/e2e/pages/sidebar.pages.js
index 9604103e55..5dd6d2bbf5 100644
--- a/cypress/e2e/pages/sidebar.pages.js
+++ b/cypress/e2e/pages/sidebar.pages.js
@@ -15,7 +15,7 @@ const sideBarListItem = '[data-testid="sidebar-list-item"]'
 const sideBarListItemWhatsNew = '[data-testid="list-item-whats-new"]'
 const sideBarListItemNeedHelp = '[data-testid="list-item-need-help"]'
 const sideSafeListItem = '[data-testid="safe-list-item"]'
-const sidebarSafeHeader = '[data-testid="sidebar-safe-header"]'
+const sidebarSafeHeader = '[data-testid="safe-header-info"]'
 const sidebarSafeContainer = '[data-testid="sidebar-safe-container"]'
 const safeItemOptionsBtn = '[data-testid="safe-options-btn"]'
 const safeItemOptionsRenameBtn = '[data-testid="rename-btn"]'
@@ -26,6 +26,8 @@ const cancelBtn = '[data-testid="cancel-btn"]'
 const deleteBtn = '[data-testid="delete-btn"]'
 const readOnlyVisibility = '[data-testid="read-only-visibility"]'
 const currencySection = '[data-testid="currency-section"]'
+const missingSignatureInfo = '[data-testid="missing-signature-info"]'
+const queuedTxInfo = '[data-testid="queued-tx-info"]'
 
 export const addedSafesGnosis = ['0x17b3...98C8', '0x11A6...F1BB', '0xB8d7...642A']
 export const addedSafesSepolia = ['0x6d0b...6dC1', '0x5912...fFdb', '0x0637...708e', '0xD157...DE9a']
@@ -120,27 +122,26 @@ export function verifySafesByNetwork(netwrok, safes) {
   })
 }
 
+function getSafeItemByName(name) {
+  return cy.get(sidebarSafeContainer).find(sideSafeListItem).contains(name).parents('li')
+}
+
 export function verifySafeReadOnlyState(safe) {
-  cy.get(sidebarSafeContainer).within(() => {
-    cy.get(sideSafeListItem)
-      .contains(safe)
-      .parents('li')
-      .within(() => {
-        cy.get(readOnlyVisibility).should('exist')
-      })
-  })
+  getSafeItemByName(safe).find(readOnlyVisibility).should('exist')
+}
+
+export function verifyMissingSignature(safe) {
+  getSafeItemByName(safe).find(missingSignatureInfo).should('exist')
+}
+
+export function verifyQueuedTx(safe) {
+  return getSafeItemByName(safe).find(queuedTxInfo).should('exist')
 }
 
 function clickOnSafeItemOptionsBtn(name) {
-  cy.get(sidebarSafeContainer).within(() => {
-    cy.get(sideSafeListItem)
-      .contains(name)
-      .parents('li')
-      .within(() => {
-        cy.get(safeItemOptionsBtn).click()
-      })
-  })
+  getSafeItemByName(name).find(safeItemOptionsBtn).click()
 }
+
 export function renameSafeItem(oldName, newName) {
   clickOnSafeItemOptionsBtn(oldName)
   clickOnRenameBtn()
@@ -188,3 +189,9 @@ export function clickOnSaveBtn() {
 function verifyModalRemoved() {
   main.verifyElementsCount(modal.modalTitle, 0)
 }
+
+export function checkCurrencyInHeader(currency) {
+  cy.get(sidebarSafeHeader).within(() => {
+    cy.get(currencySection).contains(currency)
+  })
+}
diff --git a/cypress/e2e/regression/sidebar_2.cy.js b/cypress/e2e/regression/sidebar_2.cy.js
index daef0b5844..fef7fab98c 100644
--- a/cypress/e2e/regression/sidebar_2.cy.js
+++ b/cypress/e2e/regression/sidebar_2.cy.js
@@ -2,14 +2,16 @@ import * as constants from '../../support/constants'
 import * as main from '../pages/main.page'
 import * as sideBar from '../pages/sidebar.pages'
 import * as ls from '../../support/localstorage_data.js'
+import * as assets from '../pages/assets.pages.js'
 
 const newSafeName = 'Added safe 3'
-const oldSafeName = 'Added safe 2'
+const oldSafeName = 'Added safe 900'
 const staticSafe100 = 'Added safe 100'
+const staticSafe200 = 'Added safe 200'
 
 describe('Sidebar added sidebar tests', () => {
   beforeEach(() => {
-    cy.visit(constants.homeUrl + constants.SEPOLIA_TEST_SAFE_13)
+    cy.visit(constants.BALANCE_URL + constants.SEPOLIA_TEST_SAFE_13)
     cy.wait(2000)
     cy.clearLocalStorage()
     main.acceptCookies()
@@ -45,4 +47,19 @@ describe('Sidebar added sidebar tests', () => {
     sideBar.openSidebar()
     sideBar.verifySafeReadOnlyState(staticSafe100)
   })
+
+  it('Verify Fiat currency changes when edited in the assets tab', () => {
+    assets.changeCurrency(constants.currencies.cad)
+    sideBar.checkCurrencyInHeader(constants.currencies.cad)
+  })
+
+  it('Verify "wallet" tag counter if the safe has tx ready for execution', () => {
+    sideBar.openSidebar()
+    sideBar.verifyMissingSignature(staticSafe200)
+  })
+
+  it('Verify "Wallet" tag counter only shows for owners', () => {
+    sideBar.openSidebar()
+    sideBar.verifyQueuedTx(staticSafe200)
+  })
 })
diff --git a/cypress/e2e/regression/sidebar_nonowner.cy.js b/cypress/e2e/regression/sidebar_nonowner.cy.js
new file mode 100644
index 0000000000..f88c2faedf
--- /dev/null
+++ b/cypress/e2e/regression/sidebar_nonowner.cy.js
@@ -0,0 +1,29 @@
+import * as constants from '../../support/constants.js'
+import * as main from '../pages/main.page.js'
+import * as sideBar from '../pages/sidebar.pages.js'
+import * as navigation from '../pages/navigation.page.js'
+import * as ls from '../../support/localstorage_data.js'
+
+const addedOwner = 'Added owner'
+const addedNonowner = 'Added non-owner'
+
+describe('Sidebar non-owner tests', () => {
+  beforeEach(() => {
+    cy.visit(constants.homeUrl + constants.SEPOLIA_TEST_SAFE_17_SIDEBAR_NONOWNER)
+    cy.wait(2000)
+    cy.clearLocalStorage()
+    main.acceptCookies()
+    main.addToLocalStorage(constants.localStorageKeys.SAFE_v2__addedSafes, ls.addedSafes.set3)
+    main.addToLocalStorage(constants.localStorageKeys.SAFE_v2__addressBook, ls.addressBookData.addedSafes)
+  })
+
+  it('Verify New Transaction button enabled for users with Spending limits allowed', () => {
+    navigation.verifyTxBtnStatus(constants.enabledStates.enabled)
+  })
+
+  it('Verify tag counting queue tx show for owners and non-owners', () => {
+    sideBar.openSidebar()
+    sideBar.verifyQueuedTx(addedOwner).contains(2)
+    sideBar.verifyQueuedTx(addedNonowner).contains(2)
+  })
+})
diff --git a/cypress/support/constants.js b/cypress/support/constants.js
index f83fb7cfc0..ffd84749aa 100644
--- a/cypress/support/constants.js
+++ b/cypress/support/constants.js
@@ -29,6 +29,7 @@ export const SEPOLIA_TEST_SAFE_14 = 'sep:0xC23e061252BFc7967203D054136d8fA7c7df2
 // SAFE 15 is a safe with native tokens but the automation user is not its owner
 export const SEPOLIA_TEST_SAFE_15_TOKEN = 'sep:0xfC0A7ac73Fde7547ac0792Cca1D8A50CE0AFC4Df'
 export const SEPOLIA_TEST_SAFE_16_CREATE_TX = 'sep:0xc2F3645bfd395516d1a18CA6ad9298299d328C01'
+export const SEPOLIA_TEST_SAFE_17_SIDEBAR_NONOWNER = 'sep:0x10B45a24640E2170B6AA63ea3A289D723a0C9cba'
 export const SEPOLIA_CONTRACT_SHORT = '0x11AB...34aF'
 export const SEPOLIA_RECIPIENT_ADDR_SHORT = '0x4DD4...7bde'
 export const GNO_TEST_SAFE = 'gno:0xB8d760a90a5ed54D3c2b3EFC231277e99188642A'
@@ -134,6 +135,11 @@ export const tokenAbbreviation = {
   link: 'LINK',
 }
 
+export const currencies = {
+  cad: 'CAD',
+  aud: 'AUD',
+}
+
 export const appNames = {
   walletConnect: 'walletconnect',
   customContract: 'compose custom contract',
diff --git a/cypress/support/localstorage_data.js b/cypress/support/localstorage_data.js
index 62e6a1c879..96c80044e6 100644
--- a/cypress/support/localstorage_data.js
+++ b/cypress/support/localstorage_data.js
@@ -319,9 +319,14 @@ export const addressBookData = {
   addedSafes: {
     100: {
       '0x17b34aEf1428A358bA2eA360a098b8A3BEb698C8': 'Added safe 1',
-      '0x11A6B41322C57Bd0e56cEe06abB11A1E5c1FF1BB': 'Added safe 2',
+      '0x11A6B41322C57Bd0e56cEe06abB11A1E5c1FF1BB': 'Added safe 900',
       '0xB8d760a90a5ed54D3c2b3EFC231277e99188642A': 'Added safe 100',
     },
+    11155111: {
+      '0x0A0EEb6fBCc7c82259E548Fc4617175A357b3e71': 'Added safe 200',
+      '0xF21445699e91aC6F2EeeAF1a19510AC4197e59aB': 'Added owner',
+      '0x9E6DAfe829431e1892EcF8461FDAd02665170c31': 'Added non-owner',
+    },
   },
 }
 
@@ -507,6 +512,22 @@ export const addedSafes = {
         threshold: 1,
         ethBalance: '0',
       },
+      '0x0A0EEb6fBCc7c82259E548Fc4617175A357b3e71': {
+        owners: [
+          {
+            value: '0x8aEf2f5c3F17261F6F1C4dA058D022BE92776af8',
+            name: null,
+            logoUri: null,
+          },
+          {
+            value: '0xC16Db0251654C0a72E91B190d81eAD367d2C6fED',
+            name: null,
+            logoUri: null,
+          },
+        ],
+        threshold: 2,
+        ethBalance: '0',
+      },
     },
     100: {
       '0x17b34aEf1428A358bA2eA360a098b8A3BEb698C8': {
@@ -526,6 +547,32 @@ export const addedSafes = {
       },
     },
   },
+  set3: {
+    11155111: {
+      '0xF21445699e91aC6F2EeeAF1a19510AC4197e59aB': {
+        owners: [
+          {
+            value: '0xC16Db0251654C0a72E91B190d81eAD367d2C6fED',
+            name: null,
+            logoUri: null,
+          },
+        ],
+        threshold: 2,
+        ethBalance: '0',
+      },
+      '0x9E6DAfe829431e1892EcF8461FDAd02665170c31': {
+        owners: [
+          {
+            value: '0x96D4c6fFC338912322813a77655fCC926b9A5aC5',
+            name: null,
+            logoUri: null,
+          },
+        ],
+        threshold: 2,
+        ethBalance: '0',
+      },
+    },
+  },
 }
 
 export const pinnedApps = {
diff --git a/src/components/balances/CurrencySelect/index.tsx b/src/components/balances/CurrencySelect/index.tsx
index bfec864f59..04d9af8e93 100644
--- a/src/components/balances/CurrencySelect/index.tsx
+++ b/src/components/balances/CurrencySelect/index.tsx
@@ -34,6 +34,7 @@ const CurrencySelect = (): ReactElement => {
       <InputLabel id="currency-label">Currency</InputLabel>
 
       <Select
+        data-testid="currency-selector"
         labelId="currency-label"
         id="currency"
         value={currency.toUpperCase()}
@@ -43,7 +44,7 @@ const CurrencySelect = (): ReactElement => {
         onClose={() => handleTrack('Close')}
       >
         {fiatCurrencies.map((item) => (
-          <MenuItem key={item} value={item} sx={{ overflow: 'hidden' }}>
+          <MenuItem data-testid="currency-item" key={item} value={item} sx={{ overflow: 'hidden' }}>
             {item.toUpperCase()}
           </MenuItem>
         ))}
diff --git a/src/components/sidebar/PendingActions/index.tsx b/src/components/sidebar/PendingActions/index.tsx
index 425d91a6b7..54f19e4452 100644
--- a/src/components/sidebar/PendingActions/index.tsx
+++ b/src/components/sidebar/PendingActions/index.tsx
@@ -45,6 +45,7 @@ const PendingActionButtons = ({
           <NextLink href={queueLink} passHref legacyBehavior>
             <Tooltip title={`${shortAddress} can confirm ${totalToSign} transaction(s)`} placement="top" arrow>
               <ButtonBase
+                data-testid="missing-signature-info"
                 className={classnames(css.pendingButton, css.missingSignatures)}
                 onClick={closeDrawer}
                 sx={{
@@ -65,6 +66,7 @@ const PendingActionButtons = ({
           <NextLink href={queueLink} passHref legacyBehavior>
             <Tooltip title={`${totalQueued} transactions in the queue`} placement="top" arrow>
               <ButtonBase
+                data-testid="queued-tx-info"
                 className={classnames(css.pendingButton, css.queued)}
                 onClick={closeDrawer}
                 sx={{

From 14d9412d1cd922f3e5774c6dcbf96d91e31d8112 Mon Sep 17 00:00:00 2001
From: Usame Algan <5880855+usame-algan@users.noreply.github.com>
Date: Wed, 7 Feb 2024 17:58:26 +0100
Subject: [PATCH 05/11] fix: ENS resolution (#3219)

---
 src/hooks/wallets/web3.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/hooks/wallets/web3.ts b/src/hooks/wallets/web3.ts
index 3ac3a6792e..a80cfdc1bb 100644
--- a/src/hooks/wallets/web3.ts
+++ b/src/hooks/wallets/web3.ts
@@ -1,6 +1,6 @@
 import { type ChainInfo, RPC_AUTHENTICATION, type RpcUri } from '@safe-global/safe-gateway-typescript-sdk'
 import { INFURA_TOKEN, SAFE_APPS_INFURA_TOKEN } from '@/config/constants'
-import { JsonRpcProvider, BrowserProvider, type Eip1193Provider, type Provider, Network } from 'ethers'
+import { JsonRpcProvider, BrowserProvider, type Eip1193Provider, type Provider } from 'ethers'
 import ExternalStore from '@/services/ExternalStore'
 import { EMPTY_DATA } from '@safe-global/protocol-kit/dist/src/utils/constants'
 
@@ -23,7 +23,7 @@ export const getRpcServiceUrl = (rpcUri: RpcUri): string => {
 export const createWeb3ReadOnly = (chain: ChainInfo, customRpc?: string): JsonRpcProvider | undefined => {
   const url = customRpc || getRpcServiceUrl(chain.rpcUri)
   if (!url) return
-  return new JsonRpcProvider(url, new Network(chain.chainName, chain.chainId), {
+  return new JsonRpcProvider(url, undefined, {
     staticNetwork: true,
   })
 }
@@ -35,7 +35,7 @@ export const createWeb3 = (walletProvider: Eip1193Provider): BrowserProvider =>
 export const createSafeAppsWeb3Provider = (chain: ChainInfo, customRpc?: string): JsonRpcProvider | undefined => {
   const url = customRpc || formatRpcServiceUrl(chain.rpcUri, SAFE_APPS_INFURA_TOKEN)
   if (!url) return
-  return new JsonRpcProvider(url, new Network(chain.chainName, chain.chainId), {
+  return new JsonRpcProvider(url, undefined, {
     staticNetwork: true,
   })
 }

From 4a9006c33a4616da0c76802168a5bcd1eed8e576 Mon Sep 17 00:00:00 2001
From: katspaugh <381895+katspaugh@users.noreply.github.com>
Date: Thu, 8 Feb 2024 10:39:31 +0100
Subject: [PATCH 06/11] Fix: rm old domain link (#3221)

---
 src/components/settings/DataManagement/index.tsx | 16 ----------------
 1 file changed, 16 deletions(-)

diff --git a/src/components/settings/DataManagement/index.tsx b/src/components/settings/DataManagement/index.tsx
index 2547c5e8d0..02e45a3e46 100644
--- a/src/components/settings/DataManagement/index.tsx
+++ b/src/components/settings/DataManagement/index.tsx
@@ -8,8 +8,6 @@ import { addressBookSlice, selectAllAddressBooks } from '@/store/addressBookSlic
 import { addedSafesSlice, selectAllAddedSafes } from '@/store/addedSafesSlice'
 import { safeAppsSlice, selectSafeApps } from '@/store/safeAppsSlice'
 import { selectSettings, settingsSlice } from '@/store/settingsSlice'
-import InfoIcon from '@/public/images/notifications/info.svg'
-import ExternalLink from '@/components/common/ExternalLink'
 import { ImportFileUpload } from '@/components/settings/DataManagement/ImportFileUpload'
 import { ImportDialog } from '@/components/settings/DataManagement/ImportDialog'
 import { SAFE_EXPORT_VERSION } from '@/components/settings/DataManagement/useGlobalImportFileParser'
@@ -98,20 +96,6 @@ const DataManagement = () => {
               settings={settings}
               safeApps={safeApps}
             />
-            <Typography>
-              <SvgIcon
-                component={InfoIcon}
-                inheritViewBox
-                fontSize="small"
-                color="border"
-                sx={{
-                  verticalAlign: 'middle',
-                  mr: 0.5,
-                }}
-              />
-              You can also export your data from the{' '}
-              <ExternalLink href="https://gnosis-safe.io/app/export">old app</ExternalLink>
-            </Typography>
           </Grid>
         </Grid>
       </Paper>

From e881ab14a3212bf73a66ace8990b7b4f61140e99 Mon Sep 17 00:00:00 2001
From: katspaugh <katspaugh@gmail.com>
Date: Thu, 8 Feb 2024 10:42:18 +0100
Subject: [PATCH 07/11] 1.29.0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 6e485592b3..f7c2a23ec7 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "safe-wallet-web",
   "homepage": "https://github.com/safe-global/safe-wallet-web",
   "license": "GPL-3.0",
-  "version": "1.28.0",
+  "version": "1.29.0",
   "type": "module",
   "scripts": {
     "dev": "next dev",

From 74ed3ceee470d92b42a93ae683a442839dc37da4 Mon Sep 17 00:00:00 2001
From: Usame Algan <5880855+usame-algan@users.noreply.github.com>
Date: Thu, 8 Feb 2024 10:56:58 +0100
Subject: [PATCH 08/11] [Counterfactual] Safe creation (#3180)

* feat: Create counterfactual 1/1 safes

* fix: Add feature flag

* fix: Lint issues

* fix: Use incremental saltNonce for all safe creations

* fix: Replace useCounterfactualBalance hook with get function and write tests

* refactor: Move creation logic out of Review component

* fix: useLoadBalance check for undefined value

* fix: Extract saltNonce, safeAddress calculation into a hook

* refactor: Rename redux slice

* fix: Show error message in case saltNonce can't be retrieved

* fix: Disable create button if deploy props are loading

* fix: Revert hook change and update comment
---
 .../new-safe/create/logic/utils.test.ts       |  50 ++++++
 src/components/new-safe/create/logic/utils.ts |  17 ++
 .../create/steps/ReviewStep/index.tsx         | 148 +++++++++++-------
 .../create/steps/ReviewStep/styles.module.css |   4 +
 .../PushNotificationsBanner.test.tsx          |  53 ++-----
 .../__tests__/SafeModules.test.tsx            |  15 +-
 .../__tests__/TransactionGuards.test.tsx      |  20 ++-
 .../transactions/SingleTx/SingleTx.test.tsx   |  54 ++++---
 .../flows/SignMessage/SignMessage.test.tsx    |  39 ++---
 .../tx/SignOrExecuteForm/hooks.test.ts        |  52 ++++--
 .../counterfactual/__tests__/utils.test.ts    |  83 ++++++++++
 .../store/undeployedSafesSlice.ts             |  52 ++++++
 src/features/counterfactual/utils.ts          |  96 ++++++++++++
 .../__tests__/WalletConnectContext.test.tsx   |  82 +++++-----
 .../__tests__/useCompatibilityWarning.test.ts |   8 +-
 src/hooks/__tests__/usePendingActions.test.ts |  12 +-
 src/hooks/__tests__/usePendingTxs.test.ts     |   6 +-
 .../__tests__/useInitSafeCoreSDK.test.ts      |   5 +-
 src/hooks/coreSDK/safeCoreSDK.ts              |  12 +-
 src/hooks/coreSDK/useInitSafeCoreSDK.ts       |   6 +-
 src/hooks/loadables/useLoadBalances.ts        |  12 +-
 src/hooks/loadables/useLoadSafeInfo.ts        |  19 ++-
 src/hooks/loadables/useLoadSafeMessages.ts    |   8 +-
 src/hooks/loadables/useLoadTxHistory.ts       |   4 +-
 src/hooks/loadables/useLoadTxQueue.ts         |   4 +-
 src/hooks/useCollectibles.ts                  |   4 +-
 src/hooks/useSafeInfo.ts                      |   5 +-
 .../useSafeWalletProvider.test.tsx            |   4 +-
 src/store/index.ts                            |   3 +
 src/store/safeInfoSlice.ts                    |   7 +-
 src/tests/builders/safe.ts                    |   8 +
 src/utils/chains.ts                           |   1 +
 32 files changed, 637 insertions(+), 256 deletions(-)
 create mode 100644 src/components/new-safe/create/logic/utils.test.ts
 create mode 100644 src/components/new-safe/create/logic/utils.ts
 create mode 100644 src/features/counterfactual/__tests__/utils.test.ts
 create mode 100644 src/features/counterfactual/store/undeployedSafesSlice.ts
 create mode 100644 src/features/counterfactual/utils.ts

diff --git a/src/components/new-safe/create/logic/utils.test.ts b/src/components/new-safe/create/logic/utils.test.ts
new file mode 100644
index 0000000000..ffc1da67e3
--- /dev/null
+++ b/src/components/new-safe/create/logic/utils.test.ts
@@ -0,0 +1,50 @@
+import * as creationUtils from '@/components/new-safe/create/logic/index'
+import { getAvailableSaltNonce } from '@/components/new-safe/create/logic/utils'
+import * as web3Utils from '@/hooks/wallets/web3'
+import { faker } from '@faker-js/faker'
+import type { DeploySafeProps } from '@safe-global/protocol-kit'
+import { BrowserProvider, type Eip1193Provider } from 'ethers'
+
+describe('getAvailableSaltNonce', () => {
+  jest.spyOn(creationUtils, 'computeNewSafeAddress').mockReturnValue(Promise.resolve(faker.finance.ethereumAddress()))
+
+  let mockProvider: BrowserProvider
+  let mockDeployProps: DeploySafeProps
+
+  beforeAll(() => {
+    mockProvider = new BrowserProvider(jest.fn() as unknown as Eip1193Provider)
+    mockDeployProps = {
+      safeAccountConfig: {
+        threshold: 1,
+        owners: [faker.finance.ethereumAddress()],
+        fallbackHandler: faker.finance.ethereumAddress(),
+      },
+    }
+  })
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('should return initial nonce if no contract is deployed to the computed address', async () => {
+    jest.spyOn(web3Utils, 'isSmartContract').mockReturnValue(Promise.resolve(false))
+    const initialNonce = faker.string.numeric()
+
+    const result = await getAvailableSaltNonce(mockProvider, { ...mockDeployProps, saltNonce: initialNonce })
+
+    expect(result).toEqual(initialNonce)
+  })
+
+  it('should return an increased nonce if a contract is deployed to the computed address', async () => {
+    jest.spyOn(web3Utils, 'isSmartContract').mockReturnValueOnce(Promise.resolve(true))
+    const initialNonce = faker.string.numeric()
+
+    const result = await getAvailableSaltNonce(mockProvider, { ...mockDeployProps, saltNonce: initialNonce })
+
+    jest.spyOn(web3Utils, 'isSmartContract').mockReturnValueOnce(Promise.resolve(false))
+
+    const increasedNonce = (Number(initialNonce) + 1).toString()
+
+    expect(result).toEqual(increasedNonce)
+  })
+})
diff --git a/src/components/new-safe/create/logic/utils.ts b/src/components/new-safe/create/logic/utils.ts
new file mode 100644
index 0000000000..e31e01bfd1
--- /dev/null
+++ b/src/components/new-safe/create/logic/utils.ts
@@ -0,0 +1,17 @@
+import { computeNewSafeAddress } from '@/components/new-safe/create/logic/index'
+import { isSmartContract } from '@/hooks/wallets/web3'
+import type { DeploySafeProps } from '@safe-global/protocol-kit'
+import type { BrowserProvider } from 'ethers'
+
+export const getAvailableSaltNonce = async (provider: BrowserProvider, props: DeploySafeProps): Promise<string> => {
+  const safeAddress = await computeNewSafeAddress(provider, props)
+  const isContractDeployed = await isSmartContract(provider, safeAddress)
+
+  // Safe is already deployed so we try the next saltNonce
+  if (isContractDeployed) {
+    return getAvailableSaltNonce(provider, { ...props, saltNonce: (Number(props.saltNonce) + 1).toString() })
+  }
+
+  // We know that there will be a saltNonce but the type has it as optional
+  return props.saltNonce!
+}
diff --git a/src/components/new-safe/create/steps/ReviewStep/index.tsx b/src/components/new-safe/create/steps/ReviewStep/index.tsx
index b6c7ddfc99..74e8033c2f 100644
--- a/src/components/new-safe/create/steps/ReviewStep/index.tsx
+++ b/src/components/new-safe/create/steps/ReviewStep/index.tsx
@@ -1,11 +1,16 @@
+import { getAvailableSaltNonce } from '@/components/new-safe/create/logic/utils'
 import ErrorMessage from '@/components/tx/ErrorMessage'
+import { createCounterfactualSafe } from '@/features/counterfactual/utils'
 import useWalletCanPay from '@/hooks/useWalletCanPay'
+import { useAppDispatch } from '@/store'
+import { FEATURES } from '@/utils/chains'
+import { useRouter } from 'next/router'
 import { useMemo, useState } from 'react'
 import { Button, Grid, Typography, Divider, Box, Alert } from '@mui/material'
 import lightPalette from '@/components/theme/lightPalette'
 import ChainIndicator from '@/components/common/ChainIndicator'
 import EthHashInfo from '@/components/common/EthHashInfo'
-import { useCurrentChain } from '@/hooks/useChains'
+import { useCurrentChain, useHasFeature } from '@/hooks/useChains'
 import useGasPrice, { getTotalFee } from '@/hooks/useGasPrice'
 import { useEstimateSafeCreationGas } from '@/components/new-safe/create/useEstimateSafeCreationGas'
 import { formatVisualAmount } from '@/utils/formatters'
@@ -101,10 +106,13 @@ const ReviewStep = ({ data, onSubmit, onBack, setStep }: StepRenderProps<NewSafe
   const chain = useCurrentChain()
   const wallet = useWallet()
   const provider = useWeb3()
+  const dispatch = useAppDispatch()
+  const router = useRouter()
   const [gasPrice] = useGasPrice()
-  const saltNonce = useMemo(() => Date.now(), [])
   const [_, setPendingSafe] = usePendingSafe()
   const [executionMethod, setExecutionMethod] = useState(ExecutionMethod.RELAY)
+  const [submitError, setSubmitError] = useState<string>()
+  const isCounterfactualEnabled = useHasFeature(FEATURES.COUNTERFACTUAL)
 
   const ownerAddresses = useMemo(() => data.owners.map((owner) => owner.address), [data.owners])
   const [minRelays] = useLeastRemainingRelays(ownerAddresses)
@@ -117,9 +125,9 @@ const ReviewStep = ({ data, onSubmit, onBack, setStep }: StepRenderProps<NewSafe
     return {
       owners: data.owners.map((owner) => owner.address),
       threshold: data.threshold,
-      saltNonce,
+      saltNonce: Date.now(), // This is not the final saltNonce but easier to use and will only result in a slightly higher gas estimation
     }
-  }, [data.owners, data.threshold, saltNonce])
+  }, [data.owners, data.threshold])
 
   const { gasLimit } = useEstimateSafeCreationGas(safeParams)
 
@@ -133,6 +141,9 @@ const ReviewStep = ({ data, onSubmit, onBack, setStep }: StepRenderProps<NewSafe
       ? formatVisualAmount(getTotalFee(maxFeePerGas, maxPriorityFeePerGas, gasLimit), chain?.nativeCurrency.decimals)
       : '> 0.001'
 
+  // Only 1 out of 1 safe setups are supported for now
+  const isCounterfactual = data.threshold === 1 && data.owners.length === 1 && isCounterfactualEnabled
+
   const handleBack = () => {
     onBack(data)
   }
@@ -140,28 +151,40 @@ const ReviewStep = ({ data, onSubmit, onBack, setStep }: StepRenderProps<NewSafe
   const createSafe = async () => {
     if (!wallet || !provider || !chain) return
 
-    const readOnlyFallbackHandlerContract = await getReadOnlyFallbackHandlerContract(chain.chainId, LATEST_SAFE_VERSION)
+    try {
+      const readOnlyFallbackHandlerContract = await getReadOnlyFallbackHandlerContract(
+        chain.chainId,
+        LATEST_SAFE_VERSION,
+      )
 
-    const props: DeploySafeProps = {
-      safeAccountConfig: {
-        threshold: data.threshold,
-        owners: data.owners.map((owner) => owner.address),
-        fallbackHandler: await readOnlyFallbackHandlerContract.getAddress(),
-      },
-      saltNonce: saltNonce.toString(),
-    }
+      const props: DeploySafeProps = {
+        safeAccountConfig: {
+          threshold: data.threshold,
+          owners: data.owners.map((owner) => owner.address),
+          fallbackHandler: await readOnlyFallbackHandlerContract.getAddress(),
+        },
+      }
 
-    const safeAddress = await computeNewSafeAddress(provider, props)
+      const saltNonce = await getAvailableSaltNonce(provider, { ...props, saltNonce: '0' })
+      const safeAddress = await computeNewSafeAddress(provider, { ...props, saltNonce })
 
-    const pendingSafe = {
-      ...data,
-      saltNonce,
-      safeAddress,
-      willRelay,
-    }
+      if (isCounterfactual) {
+        createCounterfactualSafe(chain, safeAddress, saltNonce, data, dispatch, props, router)
+        return
+      }
+
+      const pendingSafe = {
+        ...data,
+        saltNonce: Number(saltNonce),
+        safeAddress,
+        willRelay,
+      }
 
-    setPendingSafe(pendingSafe)
-    onSubmit(pendingSafe)
+      setPendingSafe(pendingSafe)
+      onSubmit(pendingSafe)
+    } catch (_err) {
+      setSubmitError('Error creating the Safe Account. Please try again later.')
+    }
   }
 
   const isSocialLogin = isSocialLoginWallet(wallet?.label)
@@ -203,50 +226,57 @@ const ReviewStep = ({ data, onSubmit, onBack, setStep }: StepRenderProps<NewSafe
         </Grid>
       </Box>
 
-      <Divider />
-      <Box className={layoutCss.row} display="flex" flexDirection="column" gap={3}>
-        {canRelay && !isSocialLogin && (
-          <Grid container spacing={3}>
-            <ReviewRow
-              name="Execution method"
-              value={
-                <ExecutionMethodSelector
-                  executionMethod={executionMethod}
-                  setExecutionMethod={setExecutionMethod}
-                  relays={minRelays}
+      {!isCounterfactual && (
+        <>
+          <Divider />
+          <Box className={layoutCss.row} display="flex" flexDirection="column" gap={3}>
+            {canRelay && !isSocialLogin && (
+              <Grid container spacing={3}>
+                <ReviewRow
+                  name="Execution method"
+                  value={
+                    <ExecutionMethodSelector
+                      executionMethod={executionMethod}
+                      setExecutionMethod={setExecutionMethod}
+                      relays={minRelays}
+                    />
+                  }
                 />
-              }
-            />
-          </Grid>
-        )}
+              </Grid>
+            )}
 
-        <Grid data-testid="network-fee-section" container spacing={3}>
-          <ReviewRow
-            name="Est. network fee"
-            value={
-              <>
-                <NetworkFee totalFee={totalFee} willRelay={willRelay} chain={chain} />
-
-                {!willRelay && !isSocialLogin && (
-                  <Typography variant="body2" color="text.secondary" mt={1}>
-                    You will have to confirm a transaction with your connected wallet.
-                  </Typography>
-                )}
-              </>
-            }
-          />
-        </Grid>
+            <Grid data-testid="network-fee-section" container spacing={3}>
+              <ReviewRow
+                name="Est. network fee"
+                value={
+                  <>
+                    <NetworkFee totalFee={totalFee} willRelay={willRelay} chain={chain} />
 
-        {isWrongChain && <NetworkWarning />}
+                    {!willRelay && !isSocialLogin && (
+                      <Typography variant="body2" color="text.secondary" mt={1}>
+                        You will have to confirm a transaction with your connected wallet.
+                      </Typography>
+                    )}
+                  </>
+                }
+              />
+            </Grid>
 
-        {!walletCanPay && !willRelay && (
-          <ErrorMessage>Your connected wallet doesn&apos;t have enough funds to execute this transaction</ErrorMessage>
-        )}
-      </Box>
+            {isWrongChain && <NetworkWarning />}
+
+            {!walletCanPay && !willRelay && (
+              <ErrorMessage>
+                Your connected wallet doesn&apos;t have enough funds to execute this transaction
+              </ErrorMessage>
+            )}
+          </Box>
+        </>
+      )}
 
       <Divider />
 
       <Box className={layoutCss.row}>
+        {submitError && <ErrorMessage className={css.errorMessage}>{submitError}</ErrorMessage>}
         <Box display="flex" flexDirection="row" justifyContent="space-between" gap={3}>
           <Button
             data-testid="back-btn"
@@ -264,7 +294,7 @@ const ReviewStep = ({ data, onSubmit, onBack, setStep }: StepRenderProps<NewSafe
             size="stretched"
             disabled={isDisabled}
           >
-            Next
+            Create
           </Button>
         </Box>
       </Box>
diff --git a/src/components/new-safe/create/steps/ReviewStep/styles.module.css b/src/components/new-safe/create/steps/ReviewStep/styles.module.css
index 05cff69a60..2d4e1be420 100644
--- a/src/components/new-safe/create/steps/ReviewStep/styles.module.css
+++ b/src/components/new-safe/create/steps/ReviewStep/styles.module.css
@@ -9,3 +9,7 @@
   text-decoration: line-through;
   color: var(--color-text-secondary);
 }
+
+.errorMessage {
+  margin-top: 0;
+}
diff --git a/src/components/settings/PushNotifications/PushNotificationsBanner/PushNotificationsBanner.test.tsx b/src/components/settings/PushNotifications/PushNotificationsBanner/PushNotificationsBanner.test.tsx
index 448c997e01..d48d520c6c 100644
--- a/src/components/settings/PushNotifications/PushNotificationsBanner/PushNotificationsBanner.test.tsx
+++ b/src/components/settings/PushNotifications/PushNotificationsBanner/PushNotificationsBanner.test.tsx
@@ -1,9 +1,10 @@
 import 'fake-indexeddb/auto'
+import { extendedSafeInfoBuilder } from '@/tests/builders/safe'
 import { toBeHex } from 'ethers'
 import * as tracking from '@/services/analytics'
 import { set } from 'idb-keyval'
 import * as navigation from 'next/navigation'
-import type { ChainInfo, SafeInfo } from '@safe-global/safe-gateway-typescript-sdk'
+import type { ChainInfo } from '@safe-global/safe-gateway-typescript-sdk'
 
 import { PushNotificationsBanner, _getSafesToRegister } from '.'
 import { createPushNotificationPrefsIndexedDb } from '@/services/push-notifications/preferences'
@@ -95,6 +96,14 @@ describe('PushNotificationsBanner', () => {
   })
 
   describe('PushNotificationsBanner', () => {
+    const extendedSafeInfo = {
+      ...extendedSafeInfoBuilder().build(),
+      chainId: '1',
+      address: {
+        value: toBeHex('0x123', 20),
+      },
+    }
+
     beforeEach(() => {
       // Reset indexedDB
       indexedDB = new IDBFactory()
@@ -140,12 +149,7 @@ describe('PushNotificationsBanner', () => {
           safeInfo: {
             loading: false,
             error: undefined,
-            data: {
-              chainId: '1',
-              address: {
-                value: toBeHex('0x123', 20),
-              },
-            } as unknown as SafeInfo,
+            data: extendedSafeInfo,
           },
         },
       })
@@ -187,12 +191,7 @@ describe('PushNotificationsBanner', () => {
             safeInfo: {
               loading: false,
               error: undefined,
-              data: {
-                chainId: '1',
-                address: {
-                  value: toBeHex('0x123', 20),
-                },
-              } as unknown as SafeInfo,
+              data: extendedSafeInfo,
             },
           },
         },
@@ -233,12 +232,7 @@ describe('PushNotificationsBanner', () => {
             safeInfo: {
               loading: false,
               error: undefined,
-              data: {
-                chainId: '1',
-                address: {
-                  value: toBeHex('0x123', 20),
-                },
-              } as unknown as SafeInfo,
+              data: extendedSafeInfo,
             },
           },
         },
@@ -277,12 +271,7 @@ describe('PushNotificationsBanner', () => {
             safeInfo: {
               loading: false,
               error: undefined,
-              data: {
-                chainId: '1',
-                address: {
-                  value: toBeHex('0x123', 20),
-                },
-              } as unknown as SafeInfo,
+              data: extendedSafeInfo,
             },
           },
         },
@@ -317,12 +306,7 @@ describe('PushNotificationsBanner', () => {
             safeInfo: {
               loading: false,
               error: undefined,
-              data: {
-                chainId: '1',
-                address: {
-                  value: toBeHex('0x123', 20),
-                },
-              } as unknown as SafeInfo,
+              data: extendedSafeInfo,
             },
           },
         },
@@ -366,12 +350,7 @@ describe('PushNotificationsBanner', () => {
             safeInfo: {
               loading: false,
               error: undefined,
-              data: {
-                chainId: '1',
-                address: {
-                  value: toBeHex('0x123', 20),
-                },
-              } as unknown as SafeInfo,
+              data: extendedSafeInfo,
             },
           },
         },
diff --git a/src/components/settings/SafeModules/__tests__/SafeModules.test.tsx b/src/components/settings/SafeModules/__tests__/SafeModules.test.tsx
index f0204108a6..f68dafe367 100644
--- a/src/components/settings/SafeModules/__tests__/SafeModules.test.tsx
+++ b/src/components/settings/SafeModules/__tests__/SafeModules.test.tsx
@@ -1,19 +1,18 @@
+import { extendedSafeInfoBuilder } from '@/tests/builders/safe'
 import { render, waitFor } from '@/tests/test-utils'
 import * as useSafeInfoHook from '@/hooks/useSafeInfo'
 import SafeModules from '..'
-import type { AddressEx, SafeInfo } from '@safe-global/safe-gateway-typescript-sdk'
 import { zeroPadValue } from 'ethers'
 
 const MOCK_MODULE_1 = zeroPadValue('0x01', 20)
 const MOCK_MODULE_2 = zeroPadValue('0x02', 20)
 
 describe('SafeModules', () => {
+  const extendedSafeInfo = extendedSafeInfoBuilder().build()
+
   it('should render placeholder label without any modules', async () => {
     jest.spyOn(useSafeInfoHook, 'default').mockImplementation(() => ({
-      safe: {
-        modules: [] as AddressEx[],
-        chainId: '4',
-      } as SafeInfo,
+      safe: extendedSafeInfo,
       safeAddress: '0x123',
       safeError: undefined,
       safeLoading: false,
@@ -26,7 +25,7 @@ describe('SafeModules', () => {
 
   it('should render placeholder label if safe is loading', async () => {
     jest.spyOn(useSafeInfoHook, 'default').mockImplementation(() => ({
-      safe: {} as SafeInfo,
+      safe: extendedSafeInfo,
       safeAddress: '',
       safeError: undefined,
       safeLoading: true,
@@ -39,6 +38,7 @@ describe('SafeModules', () => {
   it('should render module addresses for defined modules', async () => {
     jest.spyOn(useSafeInfoHook, 'default').mockImplementation(() => ({
       safe: {
+        ...extendedSafeInfo,
         modules: [
           {
             value: MOCK_MODULE_1,
@@ -47,8 +47,7 @@ describe('SafeModules', () => {
             value: MOCK_MODULE_2,
           },
         ],
-        chainId: '4',
-      } as SafeInfo,
+      },
       safeAddress: '0x123',
       safeError: undefined,
       safeLoading: false,
diff --git a/src/components/settings/TransactionGuards/__tests__/TransactionGuards.test.tsx b/src/components/settings/TransactionGuards/__tests__/TransactionGuards.test.tsx
index 15e7b4b0b0..b318020784 100644
--- a/src/components/settings/TransactionGuards/__tests__/TransactionGuards.test.tsx
+++ b/src/components/settings/TransactionGuards/__tests__/TransactionGuards.test.tsx
@@ -1,6 +1,6 @@
+import { extendedSafeInfoBuilder } from '@/tests/builders/safe'
 import { render, waitFor } from '@/tests/test-utils'
 import * as useSafeInfoHook from '@/hooks/useSafeInfo'
-import type { SafeInfo } from '@safe-global/safe-gateway-typescript-sdk'
 import { zeroPadValue } from 'ethers'
 import TransactionGuards from '..'
 
@@ -8,13 +8,11 @@ const MOCK_GUARD = zeroPadValue('0x01', 20)
 const EMPTY_LABEL = 'No transaction guard set'
 
 describe('TransactionGuards', () => {
+  const extendedSafeInfo = extendedSafeInfoBuilder().build()
+
   it('should render placeholder label without an tx guard', async () => {
     jest.spyOn(useSafeInfoHook, 'default').mockImplementation(() => ({
-      safe: {
-        guard: null,
-        chainId: '4',
-        version: '1.3.0',
-      } as any as SafeInfo,
+      safe: extendedSafeInfo,
       safeAddress: '0x123',
       safeError: undefined,
       safeLoading: false,
@@ -27,7 +25,7 @@ describe('TransactionGuards', () => {
 
   it('should render null if safe is loading', async () => {
     jest.spyOn(useSafeInfoHook, 'default').mockImplementation(() => ({
-      safe: {} as SafeInfo,
+      safe: extendedSafeInfo,
       safeAddress: '',
       safeError: undefined,
       safeLoading: true,
@@ -41,10 +39,11 @@ describe('TransactionGuards', () => {
   it('should render null if safe version < 1.3.0', async () => {
     jest.spyOn(useSafeInfoHook, 'default').mockImplementation(() => ({
       safe: {
+        ...extendedSafeInfo,
         guard: null,
         chainId: '4',
         version: '1.2.0',
-      } as any as SafeInfo,
+      },
       safeAddress: '0x123',
       safeError: undefined,
       safeLoading: false,
@@ -58,12 +57,11 @@ describe('TransactionGuards', () => {
   it('should render tx guard address if defined', async () => {
     jest.spyOn(useSafeInfoHook, 'default').mockImplementation(() => ({
       safe: {
+        ...extendedSafeInfo,
         guard: {
           value: MOCK_GUARD,
         },
-        chainId: '4',
-        version: '1.3.0',
-      } as SafeInfo,
+      },
       safeAddress: '0x123',
       safeError: undefined,
       safeLoading: false,
diff --git a/src/components/transactions/SingleTx/SingleTx.test.tsx b/src/components/transactions/SingleTx/SingleTx.test.tsx
index eca17836e4..467f2805d8 100644
--- a/src/components/transactions/SingleTx/SingleTx.test.tsx
+++ b/src/components/transactions/SingleTx/SingleTx.test.tsx
@@ -1,7 +1,10 @@
+import { extendedSafeInfoBuilder } from '@/tests/builders/safe'
 import { fireEvent, render } from '@/tests/test-utils'
 import SingleTx from '@/pages/transactions/tx'
 import * as useSafeInfo from '@/hooks/useSafeInfo'
-import type { SafeInfo, TransactionDetails } from '@safe-global/safe-gateway-typescript-sdk'
+import * as gatewaySDK from '@safe-global/safe-gateway-typescript-sdk'
+import type { TransactionDetails } from '@safe-global/safe-gateway-typescript-sdk'
+import { waitFor } from '@testing-library/react'
 
 const MOCK_SAFE_ADDRESS = '0x0000000000000000000000000000000000005AFE'
 const SAFE_ADDRESS = '0x87a57cBf742CC1Fc702D0E9BF595b1E056693e2f'
@@ -30,23 +33,27 @@ jest.mock('next/router', () => ({
   },
 }))
 
-jest.mock('@safe-global/safe-gateway-typescript-sdk', () => ({
-  ...jest.requireActual('@safe-global/safe-gateway-typescript-sdk'),
-  getTransactionDetails: jest.fn(() => Promise.resolve(txDetails)),
-}))
+const extendedSafeInfo = extendedSafeInfoBuilder().build()
 
 jest.spyOn(useSafeInfo, 'default').mockImplementation(() => ({
   safeAddress: SAFE_ADDRESS,
   safe: {
+    ...extendedSafeInfo,
     chainId: '5',
-  } as SafeInfo,
+  },
   safeError: undefined,
   safeLoading: false,
   safeLoaded: true,
 }))
 
 describe('SingleTx', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
   it('renders <SingleTx />', async () => {
+    jest.spyOn(gatewaySDK, 'getTransactionDetails').mockImplementation(() => Promise.resolve(txDetails))
+
     const screen = render(<SingleTx />)
 
     const button = screen.queryByText('Details')
@@ -56,28 +63,22 @@ describe('SingleTx', () => {
   })
 
   it('shows an error when the transaction has failed to load', async () => {
-    const getTransactionDetails = jest.spyOn(
-      require('@safe-global/safe-gateway-typescript-sdk'),
-      'getTransactionDetails',
-    )
-    getTransactionDetails.mockImplementation(() => Promise.reject(new Error('Server error')))
+    jest.spyOn(gatewaySDK, 'getTransactionDetails').mockImplementation(() => Promise.reject(new Error('Server error')))
 
     const screen = render(<SingleTx />)
 
-    expect(await screen.findByText('Failed to load transaction')).toBeInTheDocument()
+    await waitFor(() => {
+      expect(screen.getByText('Failed to load transaction')).toBeInTheDocument()
+    })
 
-    const button = screen.getByText('Details')
-    fireEvent.click(button!)
-
-    expect(screen.getByText('Server error')).toBeInTheDocument()
+    await waitFor(() => {
+      fireEvent.click(screen.getByText('Details'))
+      expect(screen.getByText('Server error')).toBeInTheDocument()
+    })
   })
 
   it('shows an error when transaction is not from the opened Safe', async () => {
-    const getTransactionDetails = jest.spyOn(
-      require('@safe-global/safe-gateway-typescript-sdk'),
-      'getTransactionDetails',
-    )
-    getTransactionDetails.mockImplementation(() =>
+    jest.spyOn(gatewaySDK, 'getTransactionDetails').mockImplementation(() =>
       Promise.resolve({
         ...txDetails,
         safeAddress: MOCK_SAFE_ADDRESS,
@@ -86,11 +87,14 @@ describe('SingleTx', () => {
 
     const screen = render(<SingleTx />)
 
-    expect(await screen.findByText('Failed to load transaction')).toBeInTheDocument()
+    await waitFor(() => {
+      expect(screen.getByText('Failed to load transaction')).toBeInTheDocument()
+    })
 
-    const button = screen.getByText('Details')
-    fireEvent.click(button!)
+    fireEvent.click(screen.getByText('Details'))
 
-    expect(screen.getByText('Transaction with this id was not found in this Safe Account')).toBeInTheDocument()
+    await waitFor(() => {
+      expect(screen.getByText('Transaction with this id was not found in this Safe Account')).toBeInTheDocument()
+    })
   })
 })
diff --git a/src/components/tx-flow/flows/SignMessage/SignMessage.test.tsx b/src/components/tx-flow/flows/SignMessage/SignMessage.test.tsx
index 1d93175fca..c1098a8e54 100644
--- a/src/components/tx-flow/flows/SignMessage/SignMessage.test.tsx
+++ b/src/components/tx-flow/flows/SignMessage/SignMessage.test.tsx
@@ -1,3 +1,4 @@
+import { extendedSafeInfoBuilder } from '@/tests/builders/safe'
 import { hexlify, zeroPadValue, toUtf8Bytes } from 'ethers'
 import type { SafeInfo, SafeMessage, SafeMessageListPage } from '@safe-global/safe-gateway-typescript-sdk'
 import { SafeMessageListItemType } from '@safe-global/safe-gateway-typescript-sdk'
@@ -90,19 +91,21 @@ describe('SignMessage', () => {
   })
 
   const mockUseSafeMessages = useSafeMessages as jest.Mock
+  const extendedSafeInfo = {
+    ...extendedSafeInfoBuilder().build(),
+    version: '1.3.0',
+    address: {
+      value: zeroPadValue('0x01', 20),
+    },
+    chainId: '5',
+    threshold: 2,
+  }
 
   beforeEach(() => {
     jest.clearAllMocks()
 
     jest.spyOn(useSafeInfoHook, 'default').mockImplementation(() => ({
-      safe: {
-        version: '1.3.0',
-        address: {
-          value: zeroPadValue('0x01', 20),
-        },
-        chainId: '5',
-        threshold: 2,
-      } as SafeInfo,
+      safe: extendedSafeInfo,
       safeAddress: zeroPadValue('0x01', 20),
       safeError: undefined,
       safeLoading: false,
@@ -255,16 +258,10 @@ describe('SignMessage', () => {
 
     expect(proposalSpy).toHaveBeenCalledWith(
       expect.objectContaining({
-        safe: {
-          version: '1.3.0',
-          address: {
-            value: zeroPadValue('0x01', 20),
-          },
-          chainId: '5',
-          threshold: 2,
-        } as SafeInfo,
+        safe: extendedSafeInfo,
         message: 'Hello world!',
         safeAppId: 25,
+        //onboard: expect.anything(),
       }),
     )
 
@@ -363,15 +360,9 @@ describe('SignMessage', () => {
 
     expect(confirmationSpy).toHaveBeenCalledWith(
       expect.objectContaining({
-        safe: {
-          version: '1.3.0',
-          address: {
-            value: zeroPadValue('0x01', 20),
-          },
-          chainId: '5',
-          threshold: 2,
-        } as SafeInfo,
+        safe: extendedSafeInfo,
         message: 'Hello world!',
+        onboard: expect.anything(),
       }),
     )
 
diff --git a/src/components/tx/SignOrExecuteForm/hooks.test.ts b/src/components/tx/SignOrExecuteForm/hooks.test.ts
index d0bb6f7125..356c8240de 100644
--- a/src/components/tx/SignOrExecuteForm/hooks.test.ts
+++ b/src/components/tx/SignOrExecuteForm/hooks.test.ts
@@ -1,7 +1,7 @@
+import { extendedSafeInfoBuilder } from '@/tests/builders/safe'
 import { renderHook } from '@/tests/test-utils'
 import { zeroPadValue } from 'ethers'
 import { createSafeTx } from '@/tests/builders/safeTx'
-import type { SafeInfo } from '@safe-global/safe-gateway-typescript-sdk'
 import { type ConnectedWallet } from '@/hooks/wallets/useOnboard'
 import * as useSafeInfoHook from '@/hooks/useSafeInfo'
 import * as wallet from '@/hooks/wallets/useWallet'
@@ -13,6 +13,8 @@ import { type OnboardAPI } from '@web3-onboard/core'
 import { useAlreadySigned, useImmediatelyExecutable, useIsExecutionLoop, useTxActions, useValidateNonce } from './hooks'
 
 describe('SignOrExecute hooks', () => {
+  const extendedSafeInfo = extendedSafeInfoBuilder().build()
+
   beforeEach(() => {
     jest.clearAllMocks()
 
@@ -45,13 +47,14 @@ describe('SignOrExecute hooks', () => {
     it('should return true if nonce is correct', () => {
       jest.spyOn(useSafeInfoHook, 'default').mockImplementation(() => ({
         safe: {
+          ...extendedSafeInfo,
           version: '1.3.0',
           address: { value: zeroPadValue('0x0000', 20) },
           nonce: 100,
           threshold: 2,
           owners: [{ value: zeroPadValue('0x0123', 20) }, { value: zeroPadValue('0x0456', 20) }],
           chainId: '1',
-        } as SafeInfo,
+        },
         safeAddress: zeroPadValue('0x0000', 20),
         safeError: undefined,
         safeLoading: false,
@@ -66,13 +69,14 @@ describe('SignOrExecute hooks', () => {
     it('should return false if nonce is incorrect', () => {
       jest.spyOn(useSafeInfoHook, 'default').mockImplementation(() => ({
         safe: {
+          ...extendedSafeInfo,
           version: '1.3.0',
           address: { value: zeroPadValue('0x0000', 20) },
           nonce: 90,
           threshold: 2,
           owners: [{ value: zeroPadValue('0x0123', 20) }, { value: zeroPadValue('0x0456', 20) }],
           chainId: '1',
-        } as SafeInfo,
+        },
         safeAddress: zeroPadValue('0x0000', 20),
         safeError: undefined,
         safeLoading: false,
@@ -92,12 +96,13 @@ describe('SignOrExecute hooks', () => {
       jest.spyOn(useSafeInfoHook, 'default').mockReturnValue({
         safeAddress: address,
         safe: {
+          ...extendedSafeInfo,
           version: '1.3.0',
           address: { value: address },
           owners: [{ value: address }],
           nonce: 100,
           chainId: '1',
-        } as SafeInfo,
+        },
         safeLoaded: true,
         safeLoading: false,
         safeError: undefined,
@@ -132,12 +137,13 @@ describe('SignOrExecute hooks', () => {
       jest.spyOn(useSafeInfoHook, 'default').mockReturnValue({
         safeAddress: zeroPadValue('0x0000', 20),
         safe: {
+          ...extendedSafeInfo,
           version: '1.3.0',
           address: { value: zeroPadValue('0x0000', 20) },
           owners: [{ value: zeroPadValue('0x0123', 20) }],
           threshold: 1,
           nonce: 100,
-        } as SafeInfo,
+        },
         safeLoaded: true,
         safeLoading: false,
         safeError: undefined,
@@ -154,13 +160,14 @@ describe('SignOrExecute hooks', () => {
       jest.spyOn(useSafeInfoHook, 'default').mockReturnValue({
         safeAddress: zeroPadValue('0x0000', 20),
         safe: {
+          ...extendedSafeInfo,
           version: '1.3.0',
           address: { value: zeroPadValue('0x0000', 20) },
           owners: [{ value: zeroPadValue('0x0123', 20) }],
           threshold: 2,
           nonce: 100,
           chainId: '1',
-        } as SafeInfo,
+        },
         safeLoaded: true,
         safeLoading: false,
         safeError: undefined,
@@ -177,13 +184,14 @@ describe('SignOrExecute hooks', () => {
       jest.spyOn(useSafeInfoHook, 'default').mockReturnValue({
         safeAddress: zeroPadValue('0x0000', 20),
         safe: {
+          ...extendedSafeInfo,
           version: '1.3.0',
           address: { value: zeroPadValue('0x0000', 20) },
           owners: [{ value: zeroPadValue('0x0123', 20) }],
           threshold: 1,
           nonce: 100,
           chainId: '1',
-        } as SafeInfo,
+        },
         safeLoaded: true,
         safeLoading: false,
         safeError: undefined,
@@ -201,13 +209,14 @@ describe('SignOrExecute hooks', () => {
     it('should return sign and execute actions', () => {
       jest.spyOn(useSafeInfoHook, 'default').mockImplementation(() => ({
         safe: {
+          ...extendedSafeInfo,
           version: '1.3.0',
           address: { value: zeroPadValue('0x0000', 20) },
           nonce: 100,
           threshold: 2,
           owners: [{ value: zeroPadValue('0x0123', 20) }, { value: zeroPadValue('0x0456', 20) }],
           chainId: '1',
-        } as SafeInfo,
+        },
         safeAddress: '0x123',
         safeError: undefined,
         safeLoading: false,
@@ -225,13 +234,14 @@ describe('SignOrExecute hooks', () => {
 
       jest.spyOn(useSafeInfoHook, 'default').mockImplementation(() => ({
         safe: {
+          ...extendedSafeInfo,
           version: '1.3.0',
           address: { value: zeroPadValue('0x0000', 20) },
           nonce: 100,
           threshold: 2,
           owners: [{ value: zeroPadValue('0x0123', 20) }, { value: zeroPadValue('0x0456', 20) }],
           chainId: '1',
-        } as SafeInfo,
+        },
         safeAddress: '0x123',
         safeError: undefined,
         safeLoading: false,
@@ -266,13 +276,14 @@ describe('SignOrExecute hooks', () => {
 
       jest.spyOn(useSafeInfoHook, 'default').mockImplementation(() => ({
         safe: {
+          ...extendedSafeInfo,
           version: '1.3.0',
           address: { value: zeroPadValue('0x0000', 20) },
           nonce: 100,
           threshold: 2,
           owners: [{ value: zeroPadValue('0x0123', 20) }, { value: zeroPadValue('0x0456', 20) }],
           chainId: '1',
-        } as SafeInfo,
+        },
         safeAddress: '0x123',
         safeError: undefined,
         safeLoading: false,
@@ -295,13 +306,14 @@ describe('SignOrExecute hooks', () => {
     it('should execute a tx without a txId (immediate execution)', async () => {
       jest.spyOn(useSafeInfoHook, 'default').mockImplementation(() => ({
         safe: {
+          ...extendedSafeInfo,
           version: '1.3.0',
           address: { value: zeroPadValue('0x0000', 20) },
           nonce: 100,
           threshold: 2,
           owners: [{ value: zeroPadValue('0x0123', 20) }, { value: zeroPadValue('0x0456', 20) }],
           chainId: '1',
-        } as SafeInfo,
+        },
         safeAddress: '0x123',
         safeError: undefined,
         safeLoading: false,
@@ -327,13 +339,14 @@ describe('SignOrExecute hooks', () => {
     it('should execute a tx with an id (existing tx)', async () => {
       jest.spyOn(useSafeInfoHook, 'default').mockImplementation(() => ({
         safe: {
+          ...extendedSafeInfo,
           version: '1.3.0',
           address: { value: zeroPadValue('0x0000', 20) },
           nonce: 100,
           threshold: 2,
           owners: [{ value: zeroPadValue('0x0123', 20) }, { value: zeroPadValue('0x0456', 20) }],
           chainId: '1',
-        } as SafeInfo,
+        },
         safeAddress: '0x123',
         safeError: undefined,
         safeLoading: false,
@@ -359,13 +372,14 @@ describe('SignOrExecute hooks', () => {
     it('should throw an error if the tx is undefined', async () => {
       jest.spyOn(useSafeInfoHook, 'default').mockImplementation(() => ({
         safe: {
+          ...extendedSafeInfo,
           version: '1.3.0',
           address: { value: zeroPadValue('0x0000', 20) },
           nonce: 100,
           threshold: 2,
           owners: [{ value: zeroPadValue('0x0123', 20) }, { value: zeroPadValue('0x0456', 20) }],
           chainId: '1',
-        } as SafeInfo,
+        },
         safeAddress: '0x123',
         safeError: undefined,
         safeLoading: false,
@@ -383,13 +397,15 @@ describe('SignOrExecute hooks', () => {
     it('should relay a tx execution', async () => {
       jest.spyOn(useSafeInfoHook, 'default').mockImplementation(() => ({
         safe: {
+          ...extendedSafeInfo,
+          ...extendedSafeInfoBuilder().build(),
           version: '1.3.0',
           address: { value: zeroPadValue('0x0000', 20) },
           nonce: 100,
           threshold: 1,
           owners: [{ value: zeroPadValue('0x0123', 20) }, { value: zeroPadValue('0x0456', 20) }],
           chainId: '1',
-        } as SafeInfo,
+        },
         safeAddress: '0x123',
         safeError: undefined,
         safeLoading: false,
@@ -424,13 +440,15 @@ describe('SignOrExecute hooks', () => {
 
       jest.spyOn(useSafeInfoHook, 'default').mockImplementation(() => ({
         safe: {
+          ...extendedSafeInfo,
+          ...extendedSafeInfoBuilder().build(),
           version: '1.3.0',
           address: { value: zeroPadValue('0x0000', 20) },
           nonce: 100,
           threshold: 2,
           owners: [{ value: zeroPadValue('0x0123', 20) }, { value: zeroPadValue('0x0456', 20) }],
           chainId: '1',
-        } as SafeInfo,
+        },
         safeAddress: '0x123',
         safeError: undefined,
         safeLoading: false,
@@ -476,13 +494,15 @@ describe('SignOrExecute hooks', () => {
 
       jest.spyOn(useSafeInfoHook, 'default').mockImplementation(() => ({
         safe: {
+          ...extendedSafeInfo,
+          ...extendedSafeInfoBuilder().build(),
           version: '1.3.0',
           address: { value: zeroPadValue('0x0000', 20) },
           nonce: 100,
           threshold: 2,
           owners: [{ value: zeroPadValue('0x0123', 20) }, { value: zeroPadValue('0x0456', 20) }],
           chainId: '1',
-        } as SafeInfo,
+        },
         safeAddress: '0x123',
         safeError: undefined,
         safeLoading: false,
diff --git a/src/features/counterfactual/__tests__/utils.test.ts b/src/features/counterfactual/__tests__/utils.test.ts
new file mode 100644
index 0000000000..917f4f3c2a
--- /dev/null
+++ b/src/features/counterfactual/__tests__/utils.test.ts
@@ -0,0 +1,83 @@
+import { getCounterfactualBalance, getUndeployedSafeInfo } from '@/features/counterfactual/utils'
+import { chainBuilder } from '@/tests/builders/chains'
+import { faker } from '@faker-js/faker'
+import type { PredictedSafeProps } from '@safe-global/protocol-kit'
+import { ZERO_ADDRESS } from '@safe-global/protocol-kit/dist/src/utils/constants'
+import { TokenType } from '@safe-global/safe-gateway-typescript-sdk'
+import { BrowserProvider, type Eip1193Provider } from 'ethers'
+
+describe('Counterfactual utils', () => {
+  describe('getUndeployedSafeInfo', () => {
+    it('should return undeployed safe info', async () => {
+      const undeployedSafe: PredictedSafeProps = {
+        safeAccountConfig: {
+          owners: [faker.finance.ethereumAddress()],
+          threshold: 1,
+        },
+        safeDeploymentConfig: {},
+      }
+      const mockAddress = faker.finance.ethereumAddress()
+      const mockChainId = '1'
+
+      const result = await getUndeployedSafeInfo(undeployedSafe, mockAddress, mockChainId)
+
+      expect(result.nonce).toEqual(0)
+      expect(result.deployed).toEqual(false)
+      expect(result.address.value).toEqual(mockAddress)
+      expect(result.chainId).toEqual(mockChainId)
+      expect(result.threshold).toEqual(undeployedSafe.safeAccountConfig.threshold)
+      expect(result.owners[0].value).toEqual(undeployedSafe.safeAccountConfig.owners[0])
+    })
+  })
+
+  describe('getCounterfactualBalance', () => {
+    beforeEach(() => {
+      jest.clearAllMocks()
+    })
+
+    it('should return undefined if there is no provider', () => {
+      const mockSafeAddress = faker.finance.ethereumAddress()
+      const mockChain = chainBuilder().build()
+      const result = getCounterfactualBalance(mockSafeAddress, undefined, mockChain)
+
+      expect(result).resolves.toBeUndefined()
+    })
+
+    it('should return undefined if there is no chain info', () => {
+      const mockSafeAddress = faker.finance.ethereumAddress()
+      const mockProvider = new BrowserProvider(jest.fn() as unknown as Eip1193Provider)
+      mockProvider.getBalance = jest.fn(() => Promise.resolve(1n))
+
+      const result = getCounterfactualBalance(mockSafeAddress, mockProvider, undefined)
+
+      expect(result).resolves.toBeUndefined()
+    })
+
+    it('should return the native balance', () => {
+      const mockSafeAddress = faker.finance.ethereumAddress()
+      const mockProvider = new BrowserProvider(jest.fn() as unknown as Eip1193Provider)
+      const mockChain = chainBuilder().build()
+      const mockBalance = 1000000n
+
+      mockProvider.getBalance = jest.fn(() => Promise.resolve(mockBalance))
+
+      const result = getCounterfactualBalance(mockSafeAddress, mockProvider, mockChain)
+
+      expect(result).resolves.toEqual({
+        fiatTotal: '0',
+        items: [
+          {
+            tokenInfo: {
+              type: TokenType.NATIVE_TOKEN,
+              address: ZERO_ADDRESS,
+              ...mockChain.nativeCurrency,
+            },
+            balance: mockBalance.toString(),
+            fiatBalance: '0',
+            fiatConversion: '0',
+          },
+        ],
+      })
+    })
+  })
+})
diff --git a/src/features/counterfactual/store/undeployedSafesSlice.ts b/src/features/counterfactual/store/undeployedSafesSlice.ts
new file mode 100644
index 0000000000..5d17fbf4ca
--- /dev/null
+++ b/src/features/counterfactual/store/undeployedSafesSlice.ts
@@ -0,0 +1,52 @@
+import { type RootState } from '@/store'
+import { createSelector, createSlice, type PayloadAction } from '@reduxjs/toolkit'
+import type { PredictedSafeProps } from '@safe-global/protocol-kit'
+
+type UndeployedSafesSlice = { [address: string]: PredictedSafeProps }
+
+type UndeployedSafesState = { [chainId: string]: UndeployedSafesSlice }
+
+const initialState: UndeployedSafesState = {}
+
+export const undeployedSafesSlice = createSlice({
+  name: 'undeployedSafes',
+  initialState,
+  reducers: {
+    addUndeployedSafe: (
+      state,
+      action: PayloadAction<{ chainId: string; address: string; safeProps: PredictedSafeProps }>,
+    ) => {
+      const { chainId, address, safeProps } = action.payload
+
+      if (!state[chainId]) {
+        state[chainId] = {}
+      }
+
+      state[chainId][address] = safeProps
+    },
+
+    removeUndeployedSafe: (state, action: PayloadAction<{ chainId: string; address: string }>) => {
+      const { chainId, address } = action.payload
+      if (!state[chainId]) return state
+
+      delete state[chainId][address]
+
+      if (Object.keys(state[chainId]).length > 0) return state
+
+      delete state[chainId]
+    },
+  },
+})
+
+export const { removeUndeployedSafe, addUndeployedSafe } = undeployedSafesSlice.actions
+
+export const selectUndeployedSafes = (state: RootState): UndeployedSafesState => {
+  return state[undeployedSafesSlice.name]
+}
+
+export const selectUndeployedSafe = createSelector(
+  [selectUndeployedSafes, (_, chainId: string, address: string) => [chainId, address]],
+  (undeployedSafes, [chainId, address]): PredictedSafeProps | undefined => {
+    return undeployedSafes[chainId]?.[address]
+  },
+)
diff --git a/src/features/counterfactual/utils.ts b/src/features/counterfactual/utils.ts
new file mode 100644
index 0000000000..b58954338e
--- /dev/null
+++ b/src/features/counterfactual/utils.ts
@@ -0,0 +1,96 @@
+import type { NewSafeFormData } from '@/components/new-safe/create'
+import { LATEST_SAFE_VERSION } from '@/config/constants'
+import { AppRoutes } from '@/config/routes'
+import { addUndeployedSafe } from '@/features/counterfactual/store/undeployedSafesSlice'
+import type { AppDispatch } from '@/store'
+import { addOrUpdateSafe } from '@/store/addedSafesSlice'
+import { upsertAddressBookEntry } from '@/store/addressBookSlice'
+import { defaultSafeInfo } from '@/store/safeInfoSlice'
+import type { DeploySafeProps, PredictedSafeProps } from '@safe-global/protocol-kit'
+import { ZERO_ADDRESS } from '@safe-global/protocol-kit/dist/src/utils/constants'
+import type { SafeVersion } from '@safe-global/safe-core-sdk-types'
+import {
+  type ChainInfo,
+  ImplementationVersionState,
+  type SafeBalanceResponse,
+  TokenType,
+} from '@safe-global/safe-gateway-typescript-sdk'
+import type { BrowserProvider } from 'ethers'
+import type { NextRouter } from 'next/router'
+
+export const getUndeployedSafeInfo = (undeployedSafe: PredictedSafeProps, address: string, chainId: string) => {
+  return Promise.resolve({
+    ...defaultSafeInfo,
+    address: { value: address },
+    chainId,
+    owners: undeployedSafe.safeAccountConfig.owners.map((owner) => ({ value: owner })),
+    nonce: 0,
+    threshold: undeployedSafe.safeAccountConfig.threshold,
+    implementationVersionState: ImplementationVersionState.UP_TO_DATE,
+    fallbackHandler: { value: undeployedSafe.safeAccountConfig.fallbackHandler! },
+    version: LATEST_SAFE_VERSION,
+    deployed: false,
+  })
+}
+
+export const getCounterfactualBalance = async (safeAddress: string, provider?: BrowserProvider, chain?: ChainInfo) => {
+  const balance = await provider?.getBalance(safeAddress)
+
+  if (balance === undefined || !chain) return
+
+  return <SafeBalanceResponse>{
+    fiatTotal: '0',
+    items: [
+      {
+        tokenInfo: {
+          type: TokenType.NATIVE_TOKEN,
+          address: ZERO_ADDRESS,
+          ...chain?.nativeCurrency,
+        },
+        balance: balance.toString(),
+        fiatBalance: '0',
+        fiatConversion: '0',
+      },
+    ],
+  }
+}
+
+export const createCounterfactualSafe = (
+  chain: ChainInfo,
+  safeAddress: string,
+  saltNonce: string,
+  data: NewSafeFormData,
+  dispatch: AppDispatch,
+  props: DeploySafeProps,
+  router: NextRouter,
+) => {
+  const undeployedSafe = {
+    chainId: chain.chainId,
+    address: safeAddress,
+    safeProps: {
+      safeAccountConfig: props.safeAccountConfig,
+      safeDeploymentConfig: {
+        saltNonce,
+        safeVersion: LATEST_SAFE_VERSION as SafeVersion,
+      },
+    },
+  }
+
+  dispatch(addUndeployedSafe(undeployedSafe))
+  dispatch(upsertAddressBookEntry({ chainId: chain.chainId, address: safeAddress, name: data.name }))
+  dispatch(
+    addOrUpdateSafe({
+      safe: {
+        ...defaultSafeInfo,
+        address: { value: safeAddress, name: data.name },
+        threshold: data.threshold,
+        owners: data.owners.map((owner) => ({
+          value: owner.address,
+          name: owner.name || owner.ens,
+        })),
+        chainId: chain.chainId,
+      },
+    }),
+  )
+  router.push({ pathname: AppRoutes.home, query: { safe: `${chain.shortName}:${safeAddress}` } })
+}
diff --git a/src/features/walletconnect/__tests__/WalletConnectContext.test.tsx b/src/features/walletconnect/__tests__/WalletConnectContext.test.tsx
index 1019fad1b8..54ecde09ed 100644
--- a/src/features/walletconnect/__tests__/WalletConnectContext.test.tsx
+++ b/src/features/walletconnect/__tests__/WalletConnectContext.test.tsx
@@ -1,3 +1,4 @@
+import { extendedSafeInfoBuilder } from '@/tests/builders/safe'
 import { toBeHex } from 'ethers'
 import { useContext } from 'react'
 import type { SafeInfo } from '@safe-global/safe-gateway-typescript-sdk'
@@ -42,6 +43,14 @@ const TestComponent = () => {
 }
 
 describe('WalletConnectProvider', () => {
+  const extendedSafeInfo = {
+    ...extendedSafeInfoBuilder().build(),
+    address: {
+      value: toBeHex('0x123', 20),
+    },
+    chainId: '5',
+  }
+
   beforeEach(() => {
     jest.resetAllMocks()
     jest.restoreAllMocks()
@@ -59,12 +68,7 @@ describe('WalletConnectProvider', () => {
         initialReduxState: {
           safeInfo: {
             loading: false,
-            data: {
-              address: {
-                value: toBeHex('0x123', 20),
-              },
-              chainId: '5',
-            } as SafeInfo,
+            data: extendedSafeInfo,
           },
         },
       },
@@ -89,12 +93,7 @@ describe('WalletConnectProvider', () => {
         initialReduxState: {
           safeInfo: {
             loading: false,
-            data: {
-              address: {
-                value: toBeHex('0x123', 20),
-              },
-              chainId: '5',
-            } as SafeInfo,
+            data: extendedSafeInfo,
           },
         },
       },
@@ -106,6 +105,14 @@ describe('WalletConnectProvider', () => {
   })
 
   describe('updateSessions', () => {
+    const extendedSafeInfo = {
+      ...extendedSafeInfoBuilder().build(),
+      address: {
+        value: toBeHex('0x123', 20),
+      },
+      chainId: '5',
+    }
+
     const getUpdateSafeInfoComponent = (safeInfo: SafeInfo) => {
       // eslint-disable-next-line react/display-name
       return () => {
@@ -114,7 +121,7 @@ describe('WalletConnectProvider', () => {
           dispatch(
             safeInfoSlice.actions.set({
               loading: false,
-              data: safeInfo,
+              data: { ...extendedSafeInfo, ...safeInfo },
             }),
           )
         }
@@ -141,12 +148,7 @@ describe('WalletConnectProvider', () => {
           initialReduxState: {
             safeInfo: {
               loading: false,
-              data: {
-                address: {
-                  value: toBeHex('0x123', 20),
-                },
-                chainId: '5',
-              } as SafeInfo,
+              data: extendedSafeInfo,
             },
           },
         },
@@ -183,11 +185,12 @@ describe('WalletConnectProvider', () => {
             safeInfo: {
               loading: false,
               data: {
+                ...extendedSafeInfo,
                 address: {
                   value: toBeHex('0x123', 20),
                 },
                 chainId: '5',
-              } as SafeInfo,
+              },
             },
           },
         },
@@ -220,11 +223,12 @@ describe('WalletConnectProvider', () => {
             safeInfo: {
               loading: false,
               data: {
+                ...extendedSafeInfo,
                 address: {
                   value: toBeHex('0x123', 20),
                 },
                 chainId: '5',
-              } as SafeInfo,
+              },
             },
           },
         },
@@ -237,6 +241,14 @@ describe('WalletConnectProvider', () => {
   })
 
   describe('onRequest', () => {
+    const extendedSafeInfo = {
+      ...extendedSafeInfoBuilder().build(),
+      address: {
+        value: toBeHex('0x123', 20),
+      },
+      chainId: '5',
+    }
+
     it('does not continue with the request if there is no matching topic', async () => {
       jest.spyOn(WalletConnectWallet.prototype, 'init').mockImplementation(() => Promise.resolve())
       jest.spyOn(WalletConnectWallet.prototype, 'updateSessions').mockImplementation(() => Promise.resolve())
@@ -261,12 +273,7 @@ describe('WalletConnectProvider', () => {
           initialReduxState: {
             safeInfo: {
               loading: false,
-              data: {
-                address: {
-                  value: toBeHex('0x123', 20),
-                },
-                chainId: '5',
-              } as SafeInfo,
+              data: extendedSafeInfo,
             },
           },
         },
@@ -325,12 +332,7 @@ describe('WalletConnectProvider', () => {
           initialReduxState: {
             safeInfo: {
               loading: false,
-              data: {
-                address: {
-                  value: toBeHex('0x123', 20),
-                },
-                chainId: '5',
-              } as SafeInfo,
+              data: extendedSafeInfo,
             },
           },
         },
@@ -397,12 +399,7 @@ describe('WalletConnectProvider', () => {
           initialReduxState: {
             safeInfo: {
               loading: false,
-              data: {
-                address: {
-                  value: toBeHex('0x123', 20),
-                },
-                chainId: '5',
-              } as SafeInfo,
+              data: extendedSafeInfo,
             },
           },
         },
@@ -477,12 +474,7 @@ describe('WalletConnectProvider', () => {
           initialReduxState: {
             safeInfo: {
               loading: false,
-              data: {
-                address: {
-                  value: toBeHex('0x123', 20),
-                },
-                chainId: '5',
-              } as SafeInfo,
+              data: extendedSafeInfo,
             },
           },
         },
diff --git a/src/features/walletconnect/components/WcProposalForm/__tests__/useCompatibilityWarning.test.ts b/src/features/walletconnect/components/WcProposalForm/__tests__/useCompatibilityWarning.test.ts
index 747bf1eff9..039fe6d1f8 100644
--- a/src/features/walletconnect/components/WcProposalForm/__tests__/useCompatibilityWarning.test.ts
+++ b/src/features/walletconnect/components/WcProposalForm/__tests__/useCompatibilityWarning.test.ts
@@ -1,5 +1,6 @@
+import { extendedSafeInfoBuilder } from '@/tests/builders/safe'
 import { renderHook } from '@/tests/test-utils'
-import type { ChainInfo, SafeInfo } from '@safe-global/safe-gateway-typescript-sdk'
+import type { ChainInfo } from '@safe-global/safe-gateway-typescript-sdk'
 import type { Web3WalletTypes } from '@walletconnect/web3wallet'
 import { useCompatibilityWarning } from '../useCompatibilityWarning'
 import * as wcUtils from '@/features/walletconnect/services/utils'
@@ -141,9 +142,10 @@ describe('useCompatibilityWarning', () => {
             loading: false,
             error: undefined,
             data: {
-              address: {},
+              ...extendedSafeInfoBuilder().build(),
+              address: { value: '' },
               chainId: '1',
-            } as unknown as SafeInfo,
+            },
           },
         },
       })
diff --git a/src/hooks/__tests__/usePendingActions.test.ts b/src/hooks/__tests__/usePendingActions.test.ts
index cb476277cd..09c560a544 100644
--- a/src/hooks/__tests__/usePendingActions.test.ts
+++ b/src/hooks/__tests__/usePendingActions.test.ts
@@ -1,6 +1,7 @@
 import usePendingActions from '@/hooks/usePendingActions'
+import { extendedSafeInfoBuilder } from '@/tests/builders/safe'
 import { renderHook, waitFor } from '@/tests/test-utils'
-import type { SafeInfo, TransactionListPage, TransactionSummary } from '@safe-global/safe-gateway-typescript-sdk'
+import type { TransactionListPage, TransactionSummary } from '@safe-global/safe-gateway-typescript-sdk'
 import {
   ConflictType,
   DetailedExecutionInfoType,
@@ -46,8 +47,9 @@ describe('usePendingActions hook', () => {
     jest.spyOn(useSafeInfo, 'default').mockReturnValue({
       safeAddress: mockSafeAddress,
       safe: {
+        ...extendedSafeInfoBuilder().build(),
         chainId: '5',
-      } as SafeInfo,
+      },
       safeError: undefined,
       safeLoading: false,
       safeLoaded: true,
@@ -82,8 +84,9 @@ describe('usePendingActions hook', () => {
     jest.spyOn(useSafeInfo, 'default').mockReturnValue({
       safeAddress: mockSafeAddress,
       safe: {
+        ...extendedSafeInfoBuilder().build(),
         chainId: '5',
-      } as SafeInfo,
+      },
       safeError: undefined,
       safeLoading: false,
       safeLoaded: true,
@@ -153,8 +156,9 @@ describe('usePendingActions hook', () => {
     jest.spyOn(useSafeInfo, 'default').mockReturnValue({
       safeAddress: mockSafeAddress,
       safe: {
+        ...extendedSafeInfoBuilder().build(),
         chainId: '5',
-      } as SafeInfo,
+      },
       safeError: undefined,
       safeLoading: false,
       safeLoaded: true,
diff --git a/src/hooks/__tests__/usePendingTxs.test.ts b/src/hooks/__tests__/usePendingTxs.test.ts
index a40d25f367..724964d5b5 100644
--- a/src/hooks/__tests__/usePendingTxs.test.ts
+++ b/src/hooks/__tests__/usePendingTxs.test.ts
@@ -1,6 +1,7 @@
 import { type PendingTx } from '@/store/pendingTxsSlice'
+import { extendedSafeInfoBuilder } from '@/tests/builders/safe'
 import { act, renderHook } from '@/tests/test-utils'
-import type { Label, SafeInfo, Transaction } from '@safe-global/safe-gateway-typescript-sdk'
+import type { Label, Transaction } from '@safe-global/safe-gateway-typescript-sdk'
 import * as useSafeInfoHook from '@/hooks/useSafeInfo'
 import { useHasPendingTxs, usePendingTxsQueue } from '../usePendingTxs'
 
@@ -39,11 +40,12 @@ describe('usePendingTxsQueue', () => {
 
     jest.spyOn(useSafeInfoHook, 'default').mockImplementation(() => ({
       safe: {
+        ...extendedSafeInfoBuilder().build(),
         nonce: 100,
         threshold: 1,
         owners: [{ value: '0x123' }],
         chainId: '5',
-      } as SafeInfo,
+      },
       safeAddress: '0x0000000000000000000000000000000000000001',
       safeError: undefined,
       safeLoading: false,
diff --git a/src/hooks/coreSDK/__tests__/useInitSafeCoreSDK.test.ts b/src/hooks/coreSDK/__tests__/useInitSafeCoreSDK.test.ts
index d11c92f58b..c47cd38ca3 100644
--- a/src/hooks/coreSDK/__tests__/useInitSafeCoreSDK.test.ts
+++ b/src/hooks/coreSDK/__tests__/useInitSafeCoreSDK.test.ts
@@ -1,10 +1,10 @@
+import type { ExtendedSafeInfo } from '@/store/safeInfoSlice'
 import { renderHook } from '@/tests/test-utils'
 import { useInitSafeCoreSDK } from '@/hooks/coreSDK/useInitSafeCoreSDK'
 import * as web3 from '@/hooks/wallets/web3'
 import * as router from 'next/router'
 import * as useSafeInfo from '@/hooks/useSafeInfo'
 import * as coreSDK from '@/hooks/coreSDK/safeCoreSDK'
-import type { SafeInfo } from '@safe-global/safe-gateway-typescript-sdk'
 import { ImplementationVersionState } from '@safe-global/safe-gateway-typescript-sdk'
 import { waitFor } from '@testing-library/react'
 import type Safe from '@safe-global/protocol-kit'
@@ -24,7 +24,7 @@ describe('useInitSafeCoreSDK hook', () => {
         value: '0x1',
       },
       implementationVersionState: ImplementationVersionState.UP_TO_DATE,
-    } as SafeInfo,
+    } as ExtendedSafeInfo,
     safeAddress: mockSafeAddress,
     safeLoaded: true,
     safeError: undefined,
@@ -58,6 +58,7 @@ describe('useInitSafeCoreSDK hook', () => {
       provider: mockProvider,
       address: mockSafeInfo.safe.address.value,
       implementation: mockSafeInfo.safe.implementation.value,
+      undeployedSafe: undefined,
     })
 
     await waitFor(() => {
diff --git a/src/hooks/coreSDK/safeCoreSDK.ts b/src/hooks/coreSDK/safeCoreSDK.ts
index 0f55b5d9ef..c039e9a1d1 100644
--- a/src/hooks/coreSDK/safeCoreSDK.ts
+++ b/src/hooks/coreSDK/safeCoreSDK.ts
@@ -5,7 +5,7 @@ import ExternalStore from '@/services/ExternalStore'
 import { Gnosis_safe__factory } from '@/types/contracts'
 import { invariant } from '@/utils/helpers'
 import type { BrowserProvider, Provider } from 'ethers'
-import Safe from '@safe-global/protocol-kit'
+import Safe, { type PredictedSafeProps } from '@safe-global/protocol-kit'
 import type { SafeVersion } from '@safe-global/safe-core-sdk-types'
 import { EthersAdapter } from '@safe-global/protocol-kit'
 import type { SafeInfo } from '@safe-global/safe-gateway-typescript-sdk'
@@ -54,6 +54,7 @@ type SafeCoreSDKProps = {
   version: SafeInfo['version']
   implementationVersionState: SafeInfo['implementationVersionState']
   implementation: SafeInfo['implementation']['value']
+  undeployedSafe?: PredictedSafeProps
 }
 
 // Safe Core SDK
@@ -64,6 +65,7 @@ export const initSafeSDK = async ({
   version,
   implementationVersionState,
   implementation,
+  undeployedSafe,
 }: SafeCoreSDKProps): Promise<Safe | undefined> => {
   const safeVersion = version ?? (await Gnosis_safe__factory.connect(address, provider).VERSION())
   let isL1SafeSingleton = chainId === chains.eth
@@ -88,6 +90,14 @@ export const initSafeSDK = async ({
     isL1SafeSingleton = true
   }
 
+  if (undeployedSafe) {
+    return Safe.create({
+      ethAdapter: createReadOnlyEthersAdapter(provider),
+      isL1SafeSingleton: isL1SafeSingleton,
+      predictedSafe: undeployedSafe,
+    })
+  }
+
   return Safe.create({
     ethAdapter: createReadOnlyEthersAdapter(provider),
     safeAddress: address,
diff --git a/src/hooks/coreSDK/useInitSafeCoreSDK.ts b/src/hooks/coreSDK/useInitSafeCoreSDK.ts
index 36912162c9..012502131e 100644
--- a/src/hooks/coreSDK/useInitSafeCoreSDK.ts
+++ b/src/hooks/coreSDK/useInitSafeCoreSDK.ts
@@ -1,10 +1,11 @@
+import { selectUndeployedSafe } from '@/features/counterfactual/store/undeployedSafesSlice'
 import { useEffect } from 'react'
 import { useRouter } from 'next/router'
 import useSafeInfo from '@/hooks/useSafeInfo'
 import { initSafeSDK, setSafeSDK } from '@/hooks/coreSDK/safeCoreSDK'
 import { trackError } from '@/services/exceptions'
 import ErrorCodes from '@/services/exceptions/ErrorCodes'
-import { useAppDispatch } from '@/store'
+import { useAppDispatch, useAppSelector } from '@/store'
 import { showNotification } from '@/store/notificationsSlice'
 import { useWeb3ReadOnly } from '@/hooks/wallets/web3'
 import { parsePrefixedAddress, sameAddress } from '@/utils/addresses'
@@ -18,6 +19,7 @@ export const useInitSafeCoreSDK = () => {
   const { query } = useRouter()
   const prefixedAddress = Array.isArray(query.safe) ? query.safe[0] : query.safe
   const { address } = parsePrefixedAddress(prefixedAddress || '')
+  const undeployedSafe = useAppSelector((state) => selectUndeployedSafe(state, safe.chainId, address))
 
   useEffect(() => {
     if (!safeLoaded || !web3ReadOnly || !sameAddress(address, safe.address.value)) {
@@ -34,6 +36,7 @@ export const useInitSafeCoreSDK = () => {
       version: safe.version,
       implementationVersionState: safe.implementationVersionState,
       implementation: safe.implementation.value,
+      undeployedSafe,
     })
       .then(setSafeSDK)
       .catch((_e) => {
@@ -58,5 +61,6 @@ export const useInitSafeCoreSDK = () => {
     safe.version,
     safeLoaded,
     web3ReadOnly,
+    undeployedSafe,
   ])
 }
diff --git a/src/hooks/loadables/useLoadBalances.ts b/src/hooks/loadables/useLoadBalances.ts
index a48c455146..3d52ffe067 100644
--- a/src/hooks/loadables/useLoadBalances.ts
+++ b/src/hooks/loadables/useLoadBalances.ts
@@ -1,3 +1,5 @@
+import { getCounterfactualBalance } from '@/features/counterfactual/utils'
+import { useWeb3 } from '@/hooks/wallets/web3'
 import { useEffect, useMemo } from 'react'
 import { getBalances, type SafeBalanceResponse } from '@safe-global/safe-gateway-typescript-sdk'
 import { useAppSelector } from '@/store'
@@ -27,19 +29,25 @@ export const useLoadBalances = (): AsyncResult<SafeBalanceResponse> => {
   const currency = useAppSelector(selectCurrency)
   const isTrustedTokenList = useTokenListSetting()
   const { safe, safeAddress } = useSafeInfo()
+  const web3 = useWeb3()
+  const chain = useCurrentChain()
   const chainId = safe.chainId
 
   // Re-fetch assets when the entire SafeInfo updates
-  const [data, error, loading] = useAsync<SafeBalanceResponse>(
+  const [data, error, loading] = useAsync<SafeBalanceResponse | undefined>(
     () => {
       if (!chainId || !safeAddress || isTrustedTokenList === undefined) return
 
+      if (!safe.deployed) {
+        return getCounterfactualBalance(safeAddress, web3, chain)
+      }
+
       return getBalances(chainId, safeAddress, currency, {
         trusted: isTrustedTokenList,
       })
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [safeAddress, chainId, currency, isTrustedTokenList, pollCount],
+    [safeAddress, chainId, currency, isTrustedTokenList, pollCount, safe.deployed, web3, chain],
     false, // don't clear data between polls
   )
 
diff --git a/src/hooks/loadables/useLoadSafeInfo.ts b/src/hooks/loadables/useLoadSafeInfo.ts
index 4a694444b1..96ae19e4ac 100644
--- a/src/hooks/loadables/useLoadSafeInfo.ts
+++ b/src/hooks/loadables/useLoadSafeInfo.ts
@@ -1,3 +1,6 @@
+import { selectUndeployedSafe } from '@/features/counterfactual/store/undeployedSafesSlice'
+import { getUndeployedSafeInfo } from '@/features/counterfactual/utils'
+import { useAppSelector } from '@/store'
 import { useEffect } from 'react'
 import { getSafeInfo, type SafeInfo } from '@safe-global/safe-gateway-typescript-sdk'
 import useAsync, { type AsyncResult } from '../useAsync'
@@ -14,12 +17,22 @@ export const useLoadSafeInfo = (): AsyncResult<SafeInfo> => {
   const [pollCount, resetPolling] = useIntervalCounter(POLLING_INTERVAL)
   const { safe } = useSafeInfo()
   const isStoredSafeValid = safe.chainId === chainId && safe.address.value === address
+  const undeployedSafe = useAppSelector((state) => selectUndeployedSafe(state, chainId, address))
 
-  const [data, error, loading] = useAsync<SafeInfo>(() => {
+  const [data, error, loading] = useAsync<SafeInfo | undefined>(async () => {
     if (!chainId || !address) return
-    return getSafeInfo(chainId, address)
+
+    /**
+     * This is the one place where we can't check for `safe.deployed` as we want to update that value
+     * when the local storage is cleared, so we have to check undeployedSafe
+     */
+    if (undeployedSafe) return getUndeployedSafeInfo(undeployedSafe, address, chainId)
+
+    const safeInfo = await getSafeInfo(chainId, address)
+
+    return { ...safeInfo, deployed: true }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [chainId, address, pollCount])
+  }, [chainId, address, pollCount, undeployedSafe])
 
   // Reset the counter when safe address/chainId changes
   useEffect(() => {
diff --git a/src/hooks/loadables/useLoadSafeMessages.ts b/src/hooks/loadables/useLoadSafeMessages.ts
index 7c695b39d8..867da23dcc 100644
--- a/src/hooks/loadables/useLoadSafeMessages.ts
+++ b/src/hooks/loadables/useLoadSafeMessages.ts
@@ -12,13 +12,13 @@ export const useLoadSafeMessages = (): AsyncResult<SafeMessageListPage> => {
 
   const [data, error, loading] = useAsync<SafeMessageListPage>(
     () => {
-      if (!safeLoaded) {
-        return
-      }
+      if (!safeLoaded) return
+      if (!safe.deployed) return Promise.resolve({ results: [] })
+
       return getSafeMessages(safe.chainId, safeAddress)
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [safeLoaded, safe.chainId, safeAddress, safe.messagesTag],
+    [safeLoaded, safe.chainId, safeAddress, safe.messagesTag, safe.deployed],
     false,
   )
 
diff --git a/src/hooks/loadables/useLoadTxHistory.ts b/src/hooks/loadables/useLoadTxHistory.ts
index a9b8dbeef3..284e139619 100644
--- a/src/hooks/loadables/useLoadTxHistory.ts
+++ b/src/hooks/loadables/useLoadTxHistory.ts
@@ -19,10 +19,12 @@ export const useLoadTxHistory = (): AsyncResult<TransactionListPage> => {
   const [data, error, loading] = useAsync<TransactionListPage>(
     () => {
       if (!safeLoaded) return
+      if (!safe.deployed) return Promise.resolve({ results: [] })
+
       return getTxHistory(chainId, safeAddress, hasDefaultTokenlist && showOnlyTrustedTransactions)
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [safeLoaded, chainId, safeAddress, showOnlyTrustedTransactions, hasDefaultTokenlist, txHistoryTag],
+    [safeLoaded, chainId, safeAddress, showOnlyTrustedTransactions, hasDefaultTokenlist, txHistoryTag, safe.deployed],
     false,
   )
 
diff --git a/src/hooks/loadables/useLoadTxQueue.ts b/src/hooks/loadables/useLoadTxQueue.ts
index 8cbaeacf66..e3ab1dc9cb 100644
--- a/src/hooks/loadables/useLoadTxQueue.ts
+++ b/src/hooks/loadables/useLoadTxQueue.ts
@@ -16,10 +16,12 @@ export const useLoadTxQueue = (): AsyncResult<TransactionListPage> => {
   const [data, error, loading] = useAsync<TransactionListPage>(
     () => {
       if (!safeLoaded) return
+      if (!safe.deployed) return Promise.resolve({ results: [] })
+
       return getTransactionQueue(chainId, safeAddress)
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [safeLoaded, chainId, safeAddress, reloadTag],
+    [safeLoaded, chainId, safeAddress, reloadTag, safe.deployed],
     false,
   )
 
diff --git a/src/hooks/useCollectibles.ts b/src/hooks/useCollectibles.ts
index f6257de6ac..ee1601ce08 100644
--- a/src/hooks/useCollectibles.ts
+++ b/src/hooks/useCollectibles.ts
@@ -9,8 +9,10 @@ export const useCollectibles = (pageUrl?: string): AsyncResult<SafeCollectiblesP
 
   const [data, error, loading] = useAsync<SafeCollectiblesPage>(() => {
     if (!safeAddress) return
+    if (!safe.deployed) return Promise.resolve({ results: [] })
+
     return getCollectiblesPage(safe.chainId, safeAddress, undefined, pageUrl)
-  }, [safeAddress, safe.chainId, pageUrl])
+  }, [safeAddress, safe.chainId, pageUrl, safe.deployed])
 
   // Log errors
   useEffect(() => {
diff --git a/src/hooks/useSafeInfo.ts b/src/hooks/useSafeInfo.ts
index 6575e20f95..ea22d5b197 100644
--- a/src/hooks/useSafeInfo.ts
+++ b/src/hooks/useSafeInfo.ts
@@ -1,11 +1,10 @@
 import { useMemo } from 'react'
 import isEqual from 'lodash/isEqual'
-import { type SafeInfo } from '@safe-global/safe-gateway-typescript-sdk'
 import { useAppSelector } from '@/store'
-import { defaultSafeInfo, selectSafeInfo } from '@/store/safeInfoSlice'
+import { defaultSafeInfo, type ExtendedSafeInfo, selectSafeInfo } from '@/store/safeInfoSlice'
 
 const useSafeInfo = (): {
-  safe: SafeInfo
+  safe: ExtendedSafeInfo
   safeAddress: string
   safeLoaded: boolean
   safeLoading: boolean
diff --git a/src/services/safe-wallet-provider/useSafeWalletProvider.test.tsx b/src/services/safe-wallet-provider/useSafeWalletProvider.test.tsx
index 37c84502da..9150a12166 100644
--- a/src/services/safe-wallet-provider/useSafeWalletProvider.test.tsx
+++ b/src/services/safe-wallet-provider/useSafeWalletProvider.test.tsx
@@ -1,3 +1,4 @@
+import type { ExtendedSafeInfo } from '@/store/safeInfoSlice'
 import * as gateway from '@safe-global/safe-gateway-typescript-sdk'
 import * as router from 'next/router'
 
@@ -43,7 +44,8 @@ describe('useSafeWalletProvider', () => {
               address: {
                 value: '0x1234567890000000000000000000000000000000',
               },
-            } as gateway.SafeInfo,
+              deployed: true,
+            } as unknown as ExtendedSafeInfo,
           },
         },
       })
diff --git a/src/store/index.ts b/src/store/index.ts
index 5053c84f8a..8258a6d6ba 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -29,6 +29,7 @@ import { safeAppsSlice } from './safeAppsSlice'
 import { safeMessagesListener, safeMessagesSlice } from './safeMessagesSlice'
 import { pendingSafeMessagesSlice } from './pendingSafeMessagesSlice'
 import { batchSlice } from './batchSlice'
+import { undeployedSafesSlice } from '@/features/counterfactual/store/undeployedSafesSlice'
 
 const rootReducer = combineReducers({
   [chainsSlice.name]: chainsSlice.reducer,
@@ -49,6 +50,7 @@ const rootReducer = combineReducers({
   [safeMessagesSlice.name]: safeMessagesSlice.reducer,
   [pendingSafeMessagesSlice.name]: pendingSafeMessagesSlice.reducer,
   [batchSlice.name]: batchSlice.reducer,
+  [undeployedSafesSlice.name]: undeployedSafesSlice.reducer,
 })
 
 const persistedSlices: (keyof PreloadedState<RootState>)[] = [
@@ -61,6 +63,7 @@ const persistedSlices: (keyof PreloadedState<RootState>)[] = [
   safeAppsSlice.name,
   pendingSafeMessagesSlice.name,
   batchSlice.name,
+  undeployedSafesSlice.name,
 ]
 
 export const getPersistedState = () => {
diff --git a/src/store/safeInfoSlice.ts b/src/store/safeInfoSlice.ts
index a7dbcfafa7..d6a122f3a3 100644
--- a/src/store/safeInfoSlice.ts
+++ b/src/store/safeInfoSlice.ts
@@ -1,7 +1,9 @@
 import { type SafeInfo } from '@safe-global/safe-gateway-typescript-sdk'
 import { makeLoadableSlice } from './common'
 
-export const defaultSafeInfo: SafeInfo = {
+export type ExtendedSafeInfo = SafeInfo & { deployed: boolean }
+
+export const defaultSafeInfo: ExtendedSafeInfo = {
   address: { value: '' },
   chainId: '',
   nonce: -1,
@@ -17,9 +19,10 @@ export const defaultSafeInfo: SafeInfo = {
   txQueuedTag: '',
   txHistoryTag: '',
   messagesTag: '',
+  deployed: true,
 }
 
-const { slice, selector } = makeLoadableSlice('safeInfo', undefined as SafeInfo | undefined)
+const { slice, selector } = makeLoadableSlice('safeInfo', undefined as ExtendedSafeInfo | undefined)
 
 export const safeInfoSlice = slice
 export const selectSafeInfo = selector
diff --git a/src/tests/builders/safe.ts b/src/tests/builders/safe.ts
index d1b6fbf6c5..91db6ba631 100644
--- a/src/tests/builders/safe.ts
+++ b/src/tests/builders/safe.ts
@@ -1,3 +1,4 @@
+import type { ExtendedSafeInfo } from '@/store/safeInfoSlice'
 import { faker } from '@faker-js/faker'
 import { ImplementationVersionState } from '@safe-global/safe-gateway-typescript-sdk'
 import type { SafeInfo, AddressEx } from '@safe-global/safe-gateway-typescript-sdk'
@@ -37,3 +38,10 @@ export function safeInfoBuilder(): IBuilder<SafeInfo> {
     messagesTag: faker.string.numeric(),
   })
 }
+
+export function extendedSafeInfoBuilder(): IBuilder<ExtendedSafeInfo> {
+  return Builder.new<ExtendedSafeInfo>().with({
+    ...safeInfoBuilder().build(),
+    deployed: faker.datatype.boolean(),
+  })
+}
diff --git a/src/utils/chains.ts b/src/utils/chains.ts
index 471ca5bbdc..016458fd1e 100644
--- a/src/utils/chains.ts
+++ b/src/utils/chains.ts
@@ -18,6 +18,7 @@ export enum FEATURES {
   NATIVE_WALLETCONNECT = 'NATIVE_WALLETCONNECT',
   RECOVERY = 'RECOVERY',
   SOCIAL_LOGIN = 'SOCIAL_LOGIN',
+  COUNTERFACTUAL = 'COUNTERFACTUAL',
 }
 
 export const hasFeature = (chain: ChainInfo, feature: FEATURES): boolean => {

From ec8c01d127d2ecd52e299eac40dcb2577a202e74 Mon Sep 17 00:00:00 2001
From: katspaugh <381895+katspaugh@users.noreply.github.com>
Date: Thu, 8 Feb 2024 10:58:52 +0100
Subject: [PATCH 09/11] Docs: Update release-procedure.md

---
 docs/release-procedure.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/release-procedure.md b/docs/release-procedure.md
index ee1e755ed6..2e8002bbd3 100644
--- a/docs/release-procedure.md
+++ b/docs/release-procedure.md
@@ -8,16 +8,16 @@ After the PR is tested and approved by QA, it's merged into the `main` branch. `
 
 Schematically:
 ```
-<feature branches> –> dev -> release/X.Y.Z -> main
+<feature branches> –> dev -> release -> main
 ```
 
 We prepare at least one release every sprint. Sprints are two weeks long.
 
 ### Preparing a release branch
-* Create a code-freeze branch named `release/X.Y.Z`
+* Create a code-freeze branch named `release`
   * If it's a regular release, this branch is typically based off of `dev`
   * For hot fixes, it would be `main` + cherry-picked commits
-* Bump the version in the `package.json`
+* Bump the version in the `package.json` as a separate commit with the commit message equal to the exact version
 * Create a PR with the list of changes
 
   >    💡 To generate a quick changelog:
@@ -42,7 +42,7 @@ git reset --hard origin/main
 ```
 * Pull from the release branch:
 ```
-git pull origin release/3.15.0
+git pull origin release
 ```
 * Push:
 ```

From 8737cb83d2c8c318af4590d4bd16de57f94054c2 Mon Sep 17 00:00:00 2001
From: Usame Algan <5880855+usame-algan@users.noreply.github.com>
Date: Thu, 8 Feb 2024 12:11:14 +0100
Subject: [PATCH 10/11] [Counterfactual] Deploy safe with first transaction
 (#3185)

* feat: Create counterfactual 1/1 safes

* fix: Add feature flag

* fix: Lint issues

* fix: Use incremental saltNonce for all safe creations

* fix: Replace useCounterfactualBalance hook with get function and write tests

* refactor: Move creation logic out of Review component

* fix: useLoadBalance check for undefined value

* fix: Extract saltNonce, safeAddress calculation into a hook

* refactor: Rename redux slice

* fix: Show error message in case saltNonce can't be retrieved

* feat: Deploy counterfactual safe with first transaction

* fix: Get gas limit estimations in parallel

* fix: Add getBalances fallback for safe app calls

* fix: Hide nonce in tx flow for counterfactual safes

* fix: Show txEvents for first tx and close the flow when user submits tx
---
 src/components/safe-apps/AppFrame/index.tsx   |  13 +-
 .../tx-flow/common/TxLayout/index.tsx         |   4 +-
 .../tx/GasParams/GasParams.test.tsx           |   2 +-
 src/components/tx/GasParams/index.tsx         |   6 +-
 src/components/tx/SignOrExecuteForm/hooks.ts  |  16 +-
 src/components/tx/SignOrExecuteForm/index.tsx |  11 +-
 .../counterfactual/CounterfactualForm.tsx     | 174 ++++++++++++++++++
 .../counterfactual/hooks/useDeployGasLimit.ts |  29 +++
 src/features/counterfactual/utils.ts          |  84 +++++++++
 .../__tests__/WalletConnectWallet.test.ts     |   2 +
 src/utils/helpers.ts                          |  16 ++
 11 files changed, 334 insertions(+), 23 deletions(-)
 create mode 100644 src/features/counterfactual/CounterfactualForm.tsx
 create mode 100644 src/features/counterfactual/hooks/useDeployGasLimit.ts

diff --git a/src/components/safe-apps/AppFrame/index.tsx b/src/components/safe-apps/AppFrame/index.tsx
index 8b59b5b613..3b07088f25 100644
--- a/src/components/safe-apps/AppFrame/index.tsx
+++ b/src/components/safe-apps/AppFrame/index.tsx
@@ -1,3 +1,4 @@
+import useBalances from '@/hooks/useBalances'
 import { useContext, useState } from 'react'
 import type { ReactElement } from 'react'
 import { useMemo } from 'react'
@@ -72,6 +73,7 @@ const AppFrame = ({ appUrl, allowedFeaturesList, safeAppFromManifest }: AppFrame
 
   const addressBook = useAddressBook()
   const chain = useCurrentChain()
+  const { balances } = useBalances()
   const router = useRouter()
   const {
     expanded: queueBarExpanded,
@@ -164,10 +166,13 @@ const AppFrame = ({ appUrl, allowedFeaturesList, safeAppFromManifest }: AppFrame
     onGetSafeInfo: useGetSafeInfo(),
     onGetSafeBalances: (currency) => {
       const isDefaultTokenlistSupported = chain && hasFeature(chain, FEATURES.DEFAULT_TOKENLIST)
-      return getBalances(chainId, safeAddress, currency, {
-        exclude_spam: true,
-        trusted: isDefaultTokenlistSupported && TOKEN_LISTS.TRUSTED === tokenlist,
-      })
+
+      return safe.deployed
+        ? getBalances(chainId, safeAddress, currency, {
+            exclude_spam: true,
+            trusted: isDefaultTokenlistSupported && TOKEN_LISTS.TRUSTED === tokenlist,
+          })
+        : Promise.resolve(balances)
     },
     onGetChainInfo: () => {
       if (!chain) return
diff --git a/src/components/tx-flow/common/TxLayout/index.tsx b/src/components/tx-flow/common/TxLayout/index.tsx
index eda536aa11..f51a98fdd1 100644
--- a/src/components/tx-flow/common/TxLayout/index.tsx
+++ b/src/components/tx-flow/common/TxLayout/index.tsx
@@ -1,3 +1,4 @@
+import useSafeInfo from '@/hooks/useSafeInfo'
 import { type ComponentType, type ReactElement, type ReactNode, useContext, useEffect, useState } from 'react'
 import { Box, Container, Grid, Typography, Button, Paper, SvgIcon, IconButton, useMediaQuery } from '@mui/material'
 import { useTheme } from '@mui/material/styles'
@@ -23,6 +24,7 @@ const TxLayoutHeader = ({
   icon: TxLayoutProps['icon']
   subtitle: TxLayoutProps['subtitle']
 }) => {
+  const { safe } = useSafeInfo()
   const { nonceNeeded } = useContext(SafeTxContext)
 
   if (hideNonce && !icon && !subtitle) return null
@@ -41,7 +43,7 @@ const TxLayoutHeader = ({
         </Typography>
       </Box>
 
-      {!hideNonce && nonceNeeded && <TxNonce />}
+      {!hideNonce && safe.deployed && nonceNeeded && <TxNonce />}
     </Box>
   )
 }
diff --git a/src/components/tx/GasParams/GasParams.test.tsx b/src/components/tx/GasParams/GasParams.test.tsx
index 9e4ca9b461..3d6178ef0d 100644
--- a/src/components/tx/GasParams/GasParams.test.tsx
+++ b/src/components/tx/GasParams/GasParams.test.tsx
@@ -65,7 +65,7 @@ describe('GasParams', () => {
     )
 
     expect(getByText('Estimated fee')).toBeInTheDocument()
-    expect(getByText('0.21 SepoliaETH')).toBeInTheDocument()
+    expect(getByText('0.42 SepoliaETH')).toBeInTheDocument()
   })
 
   it("Doesn't show an estimated fee if there is no gasLimit", () => {
diff --git a/src/components/tx/GasParams/index.tsx b/src/components/tx/GasParams/index.tsx
index d223e30376..ce527316ea 100644
--- a/src/components/tx/GasParams/index.tsx
+++ b/src/components/tx/GasParams/index.tsx
@@ -1,3 +1,4 @@
+import { getTotalFee } from '@/hooks/useGasPrice'
 import type { ReactElement, SyntheticEvent } from 'react'
 import { Accordion, AccordionDetails, AccordionSummary, Skeleton, Typography, Link, Grid } from '@mui/material'
 import type { ChainInfo } from '@safe-global/safe-gateway-typescript-sdk'
@@ -51,8 +52,9 @@ export const _GasParams = ({
   const isError = gasLimitError && !gasLimit
 
   // Total gas cost
-  // TODO: Check how to use getTotalFee here
-  const totalFee = !isLoading ? formatVisualAmount(maxFeePerGas * gasLimit, chain?.nativeCurrency.decimals) : '> 0.001'
+  const totalFee = !isLoading
+    ? formatVisualAmount(getTotalFee(maxFeePerGas, maxPriorityFeePerGas, gasLimit), chain?.nativeCurrency.decimals)
+    : '> 0.001'
 
   // Individual gas params
   const gasLimitString = gasLimit?.toString() || ''
diff --git a/src/components/tx/SignOrExecuteForm/hooks.ts b/src/components/tx/SignOrExecuteForm/hooks.ts
index 8628c33745..27b2279d1b 100644
--- a/src/components/tx/SignOrExecuteForm/hooks.ts
+++ b/src/components/tx/SignOrExecuteForm/hooks.ts
@@ -1,3 +1,4 @@
+import { assertTx, assertWallet, assertOnboard } from '@/utils/helpers'
 import { useMemo } from 'react'
 import { type TransactionOptions, type SafeTransaction } from '@safe-global/safe-core-sdk-types'
 import { sameString } from '@safe-global/protocol-kit/dist/src/utils'
@@ -13,8 +14,6 @@ import {
   dispatchTxSigning,
 } from '@/services/tx/tx-sender'
 import { useHasPendingTxs } from '@/hooks/usePendingTxs'
-import type { ConnectedWallet } from '@/hooks/wallets/useOnboard'
-import type { OnboardAPI } from '@web3-onboard/core'
 import { getSafeTxGas, getNonces } from '@/services/tx/tx-sender/recommendedNonce'
 import useAsync from '@/hooks/useAsync'
 import { useUpdateBatch } from '@/hooks/useDraftBatch'
@@ -32,16 +31,6 @@ type TxActions = {
   ) => Promise<string>
 }
 
-function assertTx(safeTx: SafeTransaction | undefined): asserts safeTx {
-  if (!safeTx) throw new Error('Transaction not provided')
-}
-function assertWallet(wallet: ConnectedWallet | null): asserts wallet {
-  if (!wallet) throw new Error('Wallet not connected')
-}
-function assertOnboard(onboard: OnboardAPI | undefined): asserts onboard {
-  if (!onboard) throw new Error('Onboard not connected')
-}
-
 export const useTxActions = (): TxActions => {
   const { safe } = useSafeInfo()
   const onboard = useOnboard()
@@ -135,7 +124,7 @@ export const useTxActions = (): TxActions => {
     }
 
     return { addToBatch, signTx, executeTx }
-  }, [safe, onboard, wallet, addTxToBatch])
+  }, [safe, wallet, addTxToBatch, onboard])
 }
 
 export const useValidateNonce = (safeTx: SafeTransaction | undefined): boolean => {
@@ -162,6 +151,7 @@ export const useRecommendedNonce = (): number | undefined => {
   const [recommendedNonce] = useAsync(
     async () => {
       if (!safe.chainId || !safeAddress) return
+      if (!safe.deployed) return 0
 
       const nonces = await getNonces(safe.chainId, safeAddress)
 
diff --git a/src/components/tx/SignOrExecuteForm/index.tsx b/src/components/tx/SignOrExecuteForm/index.tsx
index 87ee435a0e..eb5b0712aa 100644
--- a/src/components/tx/SignOrExecuteForm/index.tsx
+++ b/src/components/tx/SignOrExecuteForm/index.tsx
@@ -1,3 +1,5 @@
+import CounterfactualForm from '@/features/counterfactual/CounterfactualForm'
+import useSafeInfo from '@/hooks/useSafeInfo'
 import { type ReactElement, type ReactNode, useState, useContext, useCallback } from 'react'
 import madProps from '@/utils/mad-props'
 import DecodedTx from '../DecodedTx'
@@ -71,6 +73,9 @@ export const SignOrExecuteForm = ({
   const [decodedData, decodedDataError, decodedDataLoading] = useDecodeTx(safeTx)
   const isBatchable = props.isBatchable !== false && safeTx && !isDelegateCall(safeTx)
 
+  const { safe } = useSafeInfo()
+  const isCounterfactualSafe = !safe.deployed
+
   // If checkbox is checked and the transaction is executable, execute it, otherwise sign it
   const canExecute = isCorrectNonce && (props.isExecutable || isNewExecutableTx)
   const willExecute = (props.onlyExecute || shouldExecute) && canExecute
@@ -122,7 +127,7 @@ export const SignOrExecuteForm = ({
           </ErrorMessage>
         )}
 
-        {canExecute && !props.onlyExecute && <ExecuteCheckbox onChange={setShouldExecute} />}
+        {canExecute && !props.onlyExecute && !isCounterfactualSafe && <ExecuteCheckbox onChange={setShouldExecute} />}
 
         <WrongChainWarning />
 
@@ -130,7 +135,9 @@ export const SignOrExecuteForm = ({
 
         <RiskConfirmationError />
 
-        {willExecute ? (
+        {isCounterfactualSafe ? (
+          <CounterfactualForm {...props} safeTx={safeTx} isCreation={isCreation} onSubmit={onFormSubmit} onlyExecute />
+        ) : willExecute ? (
           <ExecuteForm {...props} safeTx={safeTx} isCreation={isCreation} onSubmit={onFormSubmit} />
         ) : (
           <SignForm
diff --git a/src/features/counterfactual/CounterfactualForm.tsx b/src/features/counterfactual/CounterfactualForm.tsx
new file mode 100644
index 0000000000..f2423be182
--- /dev/null
+++ b/src/features/counterfactual/CounterfactualForm.tsx
@@ -0,0 +1,174 @@
+import { TxModalContext } from '@/components/tx-flow'
+import useDeployGasLimit from '@/features/counterfactual/hooks/useDeployGasLimit'
+import { removeUndeployedSafe } from '@/features/counterfactual/store/undeployedSafesSlice'
+import { deploySafeAndExecuteTx } from '@/features/counterfactual/utils'
+import useChainId from '@/hooks/useChainId'
+import useSafeInfo from '@/hooks/useSafeInfo'
+import useWalletCanPay from '@/hooks/useWalletCanPay'
+import useOnboard from '@/hooks/wallets/useOnboard'
+import useWallet from '@/hooks/wallets/useWallet'
+import { useAppDispatch } from '@/store'
+import madProps from '@/utils/mad-props'
+import React, { type ReactElement, type SyntheticEvent, useContext, useState } from 'react'
+import { CircularProgress, Box, Button, CardActions, Divider } from '@mui/material'
+import classNames from 'classnames'
+
+import ErrorMessage from '@/components/tx/ErrorMessage'
+import { trackError, Errors } from '@/services/exceptions'
+import { useCurrentChain } from '@/hooks/useChains'
+import { getTxOptions } from '@/utils/transactions'
+import CheckWallet from '@/components/common/CheckWallet'
+import { useIsExecutionLoop } from '@/components/tx/SignOrExecuteForm/hooks'
+import type { SignOrExecuteProps } from '@/components/tx/SignOrExecuteForm'
+import type { SafeTransaction } from '@safe-global/safe-core-sdk-types'
+import AdvancedParams, { useAdvancedParams } from '@/components/tx/AdvancedParams'
+import { asError } from '@/services/exceptions/utils'
+
+import css from '@/components/tx/SignOrExecuteForm/styles.module.css'
+import commonCss from '@/components/tx-flow/common/styles.module.css'
+import { TxSecurityContext } from '@/components/tx/security/shared/TxSecurityContext'
+import useIsSafeOwner from '@/hooks/useIsSafeOwner'
+import NonOwnerError from '@/components/tx/SignOrExecuteForm/NonOwnerError'
+
+export const CounterfactualForm = ({
+  safeTx,
+  disableSubmit = false,
+  onlyExecute,
+  isCreation,
+  isOwner,
+  isExecutionLoop,
+  txSecurity,
+}: SignOrExecuteProps & {
+  isOwner: ReturnType<typeof useIsSafeOwner>
+  isExecutionLoop: ReturnType<typeof useIsExecutionLoop>
+  txSecurity: ReturnType<typeof useTxSecurityContext>
+  safeTx?: SafeTransaction
+}): ReactElement => {
+  const wallet = useWallet()
+  const onboard = useOnboard()
+  const chainId = useChainId()
+  const dispatch = useAppDispatch()
+  const { safeAddress } = useSafeInfo()
+
+  // Form state
+  const [isSubmittable, setIsSubmittable] = useState<boolean>(true)
+  const [submitError, setSubmitError] = useState<Error | undefined>()
+
+  // Hooks
+  const currentChain = useCurrentChain()
+  const { needsRiskConfirmation, isRiskConfirmed, setIsRiskIgnored } = txSecurity
+  const { setTxFlow } = useContext(TxModalContext)
+
+  // Estimate gas limit
+  const { gasLimit, gasLimitError } = useDeployGasLimit(safeTx)
+  const [advancedParams, setAdvancedParams] = useAdvancedParams(gasLimit)
+
+  // On modal submit
+  const handleSubmit = async (e: SyntheticEvent) => {
+    e.preventDefault()
+
+    if (needsRiskConfirmation && !isRiskConfirmed) {
+      setIsRiskIgnored(true)
+      return
+    }
+
+    setIsSubmittable(false)
+    setSubmitError(undefined)
+
+    const txOptions = getTxOptions(advancedParams, currentChain)
+
+    const onSuccess = () => {
+      dispatch(removeUndeployedSafe({ chainId, address: safeAddress }))
+    }
+
+    try {
+      await deploySafeAndExecuteTx(txOptions, chainId, wallet, safeTx, onboard, onSuccess)
+    } catch (_err) {
+      const err = asError(_err)
+      trackError(Errors._804, err)
+      setIsSubmittable(true)
+      setSubmitError(err)
+      return
+    }
+
+    // TODO: Show a success or status screen
+    setTxFlow(undefined)
+  }
+
+  const walletCanPay = useWalletCanPay({
+    gasLimit,
+    maxFeePerGas: advancedParams.maxFeePerGas,
+    maxPriorityFeePerGas: advancedParams.maxPriorityFeePerGas,
+  })
+
+  const cannotPropose = !isOwner && !onlyExecute
+  const submitDisabled =
+    !safeTx ||
+    !isSubmittable ||
+    disableSubmit ||
+    isExecutionLoop ||
+    cannotPropose ||
+    (needsRiskConfirmation && !isRiskConfirmed)
+
+  return (
+    <>
+      <form onSubmit={handleSubmit}>
+        <div className={classNames(css.params)}>
+          <AdvancedParams
+            willExecute
+            params={advancedParams}
+            recommendedGasLimit={gasLimit}
+            onFormSubmit={setAdvancedParams}
+            gasLimitError={gasLimitError}
+            willRelay={false}
+          />
+        </div>
+
+        {/* Error messages */}
+        {cannotPropose ? (
+          <NonOwnerError />
+        ) : isExecutionLoop ? (
+          <ErrorMessage>
+            Cannot execute a transaction from the Safe Account itself, please connect a different account.
+          </ErrorMessage>
+        ) : !walletCanPay ? (
+          <ErrorMessage>Your connected wallet doesn&apos;t have enough funds to execute this transaction.</ErrorMessage>
+        ) : (
+          gasLimitError && (
+            <ErrorMessage error={gasLimitError}>
+              This transaction will most likely fail.
+              {` To save gas costs, ${isCreation ? 'avoid creating' : 'reject'} this transaction.`}
+            </ErrorMessage>
+          )
+        )}
+
+        {submitError && (
+          <Box mt={1}>
+            <ErrorMessage error={submitError}>Error submitting the transaction. Please try again.</ErrorMessage>
+          </Box>
+        )}
+
+        <Divider className={commonCss.nestedDivider} sx={{ pt: 3 }} />
+
+        <CardActions>
+          {/* Submit button */}
+          <CheckWallet allowNonOwner={onlyExecute}>
+            {(isOk) => (
+              <Button variant="contained" type="submit" disabled={!isOk || submitDisabled} sx={{ minWidth: '112px' }}>
+                {!isSubmittable ? <CircularProgress size={20} /> : 'Execute'}
+              </Button>
+            )}
+          </CheckWallet>
+        </CardActions>
+      </form>
+    </>
+  )
+}
+
+const useTxSecurityContext = () => useContext(TxSecurityContext)
+
+export default madProps(CounterfactualForm, {
+  isOwner: useIsSafeOwner,
+  isExecutionLoop: useIsExecutionLoop,
+  txSecurity: useTxSecurityContext,
+})
diff --git a/src/features/counterfactual/hooks/useDeployGasLimit.ts b/src/features/counterfactual/hooks/useDeployGasLimit.ts
new file mode 100644
index 0000000000..a2a7a35e7b
--- /dev/null
+++ b/src/features/counterfactual/hooks/useDeployGasLimit.ts
@@ -0,0 +1,29 @@
+import useAsync from '@/hooks/useAsync'
+import useChainId from '@/hooks/useChainId'
+import useOnboard from '@/hooks/wallets/useOnboard'
+import { getSafeSDKWithSigner } from '@/services/tx/tx-sender/sdk'
+import { estimateSafeDeploymentGas, estimateSafeTxGas, estimateTxBaseGas } from '@safe-global/protocol-kit'
+import type { SafeTransaction } from '@safe-global/safe-core-sdk-types'
+
+const useDeployGasLimit = (safeTx?: SafeTransaction) => {
+  const onboard = useOnboard()
+  const chainId = useChainId()
+
+  const [gasLimit, gasLimitError, gasLimitLoading] = useAsync<bigint | undefined>(async () => {
+    if (!safeTx || !onboard) return
+
+    const sdk = await getSafeSDKWithSigner(onboard, chainId)
+
+    const [gas, safeTxGas, safeDeploymentGas] = await Promise.all([
+      estimateTxBaseGas(sdk, safeTx),
+      estimateSafeTxGas(sdk, safeTx),
+      estimateSafeDeploymentGas(sdk),
+    ])
+
+    return BigInt(gas) + BigInt(safeTxGas) + BigInt(safeDeploymentGas)
+  }, [onboard, chainId, safeTx])
+
+  return { gasLimit, gasLimitError, gasLimitLoading }
+}
+
+export default useDeployGasLimit
diff --git a/src/features/counterfactual/utils.ts b/src/features/counterfactual/utils.ts
index b58954338e..671b2e4689 100644
--- a/src/features/counterfactual/utils.ts
+++ b/src/features/counterfactual/utils.ts
@@ -2,11 +2,20 @@ import type { NewSafeFormData } from '@/components/new-safe/create'
 import { LATEST_SAFE_VERSION } from '@/config/constants'
 import { AppRoutes } from '@/config/routes'
 import { addUndeployedSafe } from '@/features/counterfactual/store/undeployedSafesSlice'
+import { type ConnectedWallet } from '@/hooks/wallets/useOnboard'
+import { asError } from '@/services/exceptions/utils'
+import { assertWalletChain, getUncheckedSafeSDK } from '@/services/tx/tx-sender/sdk'
+import { txDispatch, TxEvent } from '@/services/tx/txEvents'
 import type { AppDispatch } from '@/store'
 import { addOrUpdateSafe } from '@/store/addedSafesSlice'
 import { upsertAddressBookEntry } from '@/store/addressBookSlice'
 import { defaultSafeInfo } from '@/store/safeInfoSlice'
+import { didReprice, didRevert, type EthersError } from '@/utils/ethers-utils'
+import { assertOnboard, assertTx, assertWallet } from '@/utils/helpers'
 import type { DeploySafeProps, PredictedSafeProps } from '@safe-global/protocol-kit'
+import type { SafeTransaction, TransactionOptions } from '@safe-global/safe-core-sdk-types'
+import type { OnboardAPI } from '@web3-onboard/core'
+import type { ContractTransactionResponse } from 'ethers'
 import { ZERO_ADDRESS } from '@safe-global/protocol-kit/dist/src/utils/constants'
 import type { SafeVersion } from '@safe-global/safe-core-sdk-types'
 import {
@@ -14,8 +23,10 @@ import {
   ImplementationVersionState,
   type SafeBalanceResponse,
   TokenType,
+  type SafeInfo,
 } from '@safe-global/safe-gateway-typescript-sdk'
 import type { BrowserProvider } from 'ethers'
+import { createWeb3 } from '@/hooks/wallets/web3'
 import type { NextRouter } from 'next/router'
 
 export const getUndeployedSafeInfo = (undeployedSafe: PredictedSafeProps, address: string, chainId: string) => {
@@ -33,6 +44,79 @@ export const getUndeployedSafeInfo = (undeployedSafe: PredictedSafeProps, addres
   })
 }
 
+export const dispatchTxExecutionAndDeploySafe = async (
+  safeTx: SafeTransaction,
+  txOptions: TransactionOptions,
+  onboard: OnboardAPI,
+  chainId: SafeInfo['chainId'],
+  onSuccess?: () => void,
+) => {
+  const sdkUnchecked = await getUncheckedSafeSDK(onboard, chainId)
+  const eventParams = { groupKey: 'cf-tx' }
+  const safeAddress = await sdkUnchecked.getAddress()
+
+  let result: ContractTransactionResponse | undefined
+  try {
+    const signedTx = await sdkUnchecked.signTransaction(safeTx)
+
+    const wallet = await assertWalletChain(onboard, chainId)
+    const provider = createWeb3(wallet.provider)
+    const signer = await provider.getSigner()
+
+    const deploymentTx = await sdkUnchecked.wrapSafeTransactionIntoDeploymentBatch(signedTx, txOptions)
+
+    // @ts-ignore TODO: Check why TransactionResponse type doesn't work
+    result = await signer.sendTransaction(deploymentTx)
+    txDispatch(TxEvent.EXECUTING, eventParams)
+  } catch (error) {
+    txDispatch(TxEvent.FAILED, { ...eventParams, error: asError(error) })
+    throw error
+  }
+
+  txDispatch(TxEvent.PROCESSING, { ...eventParams, txHash: result!.hash })
+
+  result
+    ?.wait()
+    .then((receipt) => {
+      if (receipt === null) {
+        txDispatch(TxEvent.FAILED, { ...eventParams, error: new Error('No transaction receipt found') })
+      } else if (didRevert(receipt)) {
+        txDispatch(TxEvent.REVERTED, { ...eventParams, error: new Error('Transaction reverted by EVM') })
+      } else {
+        txDispatch(TxEvent.PROCESSED, { ...eventParams, safeAddress })
+      }
+    })
+    .catch((err) => {
+      const error = err as EthersError
+
+      if (didReprice(error)) {
+        txDispatch(TxEvent.PROCESSED, { ...eventParams, safeAddress })
+      } else {
+        txDispatch(TxEvent.FAILED, { ...eventParams, error: asError(error) })
+      }
+    })
+    .finally(() => {
+      onSuccess?.()
+    })
+
+  return result!.hash
+}
+
+export const deploySafeAndExecuteTx = async (
+  txOptions: TransactionOptions,
+  chainId: string,
+  wallet: ConnectedWallet | null,
+  safeTx?: SafeTransaction,
+  onboard?: OnboardAPI,
+  onSuccess?: () => void,
+) => {
+  assertTx(safeTx)
+  assertWallet(wallet)
+  assertOnboard(onboard)
+
+  return dispatchTxExecutionAndDeploySafe(safeTx, txOptions, onboard, chainId, onSuccess)
+}
+
 export const getCounterfactualBalance = async (safeAddress: string, provider?: BrowserProvider, chain?: ChainInfo) => {
   const balance = await provider?.getBalance(safeAddress)
 
diff --git a/src/features/walletconnect/services/__tests__/WalletConnectWallet.test.ts b/src/features/walletconnect/services/__tests__/WalletConnectWallet.test.ts
index c963bfbbcf..ce86f0dbbb 100644
--- a/src/features/walletconnect/services/__tests__/WalletConnectWallet.test.ts
+++ b/src/features/walletconnect/services/__tests__/WalletConnectWallet.test.ts
@@ -274,6 +274,7 @@ describe('WalletConnectWallet', () => {
             },
             requiredNamespaces: {} as ProposalTypes.RequiredNamespaces,
             optionalNamespaces: {} as ProposalTypes.OptionalNamespaces,
+            expiryTimestamp: 2,
           },
           verifyContext: {} as Verify.Context,
         },
@@ -311,6 +312,7 @@ describe('WalletConnectWallet', () => {
             },
             requiredNamespaces: {} as ProposalTypes.RequiredNamespaces,
             optionalNamespaces: {} as ProposalTypes.OptionalNamespaces,
+            expiryTimestamp: 2,
           },
           verifyContext: {} as Verify.Context,
         },
diff --git a/src/utils/helpers.ts b/src/utils/helpers.ts
index 6592417b31..0c90822e51 100644
--- a/src/utils/helpers.ts
+++ b/src/utils/helpers.ts
@@ -1,4 +1,8 @@
 // `assert` does not work with arrow functions
+import type { ConnectedWallet } from '@/hooks/wallets/useOnboard'
+import type { SafeTransaction } from '@safe-global/safe-core-sdk-types'
+import type { OnboardAPI } from '@web3-onboard/core'
+
 export function invariant<T extends unknown>(condition: T, error: string): asserts condition {
   if (condition) {
     return
@@ -6,3 +10,15 @@ export function invariant<T extends unknown>(condition: T, error: string): asser
 
   throw new Error(error)
 }
+
+export function assertTx(safeTx: SafeTransaction | undefined): asserts safeTx {
+  return invariant(safeTx, 'Transaction not provided')
+}
+
+export function assertWallet(wallet: ConnectedWallet | null): asserts wallet {
+  return invariant(wallet, 'Wallet not connected')
+}
+
+export function assertOnboard(onboard: OnboardAPI | undefined): asserts onboard {
+  return invariant(onboard, 'Onboard not connected')
+}

From 0ff4793549304f48b058202342f4b227eaf57042 Mon Sep 17 00:00:00 2001
From: Usame Algan <5880855+usame-algan@users.noreply.github.com>
Date: Thu, 8 Feb 2024 12:49:33 +0100
Subject: [PATCH 11/11] [Counterfactual] Add deploy safe flow (#3199)

* feat: Create counterfactual 1/1 safes

* fix: Add feature flag

* fix: Lint issues

* fix: Use incremental saltNonce for all safe creations

* fix: Replace useCounterfactualBalance hook with get function and write tests

* refactor: Move creation logic out of Review component

* fix: useLoadBalance check for undefined value

* fix: Extract saltNonce, safeAddress calculation into a hook

* refactor: Rename redux slice

* fix: Show error message in case saltNonce can't be retrieved

* fix: Disable create button if deploy props are loading

* fix: Revert hook change and update comment

* feat: Deploy counterfactual safe with first transaction

* fix: Get gas limit estimations in parallel

* fix: Add getBalances fallback for safe app calls

* fix: Hide nonce in tx flow for counterfactual safes

* fix: Show txEvents for first tx and close the flow when user submits tx

* feat: Add deploy safe flow

* refactor: Extract getTotalFeeFormatted and move logic into a local hook

* fix: Allow relaying when deploying a safe

* refactor: Extract safe setup overview component

* fix: Wait for relayed deployment before clearing counterfactual state
---
 .../create/steps/ReviewStep/index.tsx         |  87 ++++---
 .../counterfactual/ActivateAccount.tsx        | 226 ++++++++++++++++++
 .../counterfactual/hooks/useDeployGasLimit.ts |   6 +-
 src/features/counterfactual/utils.ts          |   6 +-
 src/hooks/useGasPrice.ts                      |  13 +
 src/hooks/useWalletCanPay.ts                  |   3 +-
 src/pages/settings/setup.tsx                  |   3 +
 7 files changed, 300 insertions(+), 44 deletions(-)
 create mode 100644 src/features/counterfactual/ActivateAccount.tsx

diff --git a/src/components/new-safe/create/steps/ReviewStep/index.tsx b/src/components/new-safe/create/steps/ReviewStep/index.tsx
index 74e8033c2f..585939ed23 100644
--- a/src/components/new-safe/create/steps/ReviewStep/index.tsx
+++ b/src/components/new-safe/create/steps/ReviewStep/index.tsx
@@ -1,4 +1,5 @@
 import { getAvailableSaltNonce } from '@/components/new-safe/create/logic/utils'
+import type { NamedAddress } from '@/components/new-safe/create/types'
 import ErrorMessage from '@/components/tx/ErrorMessage'
 import { createCounterfactualSafe } from '@/features/counterfactual/utils'
 import useWalletCanPay from '@/hooks/useWalletCanPay'
@@ -11,9 +12,8 @@ import lightPalette from '@/components/theme/lightPalette'
 import ChainIndicator from '@/components/common/ChainIndicator'
 import EthHashInfo from '@/components/common/EthHashInfo'
 import { useCurrentChain, useHasFeature } from '@/hooks/useChains'
-import useGasPrice, { getTotalFee } from '@/hooks/useGasPrice'
+import useGasPrice, { getTotalFeeFormatted } from '@/hooks/useGasPrice'
 import { useEstimateSafeCreationGas } from '@/components/new-safe/create/useEstimateSafeCreationGas'
-import { formatVisualAmount } from '@/utils/formatters'
 import type { StepRenderProps } from '@/components/new-safe/CardStepper/useCardStepper'
 import type { NewSafeFormData } from '@/components/new-safe/create'
 import css from '@/components/new-safe/create/steps/ReviewStep/styles.module.css'
@@ -100,6 +100,52 @@ export const NetworkFee = ({
   )
 }
 
+export const SafeSetupOverview = ({
+  name,
+  owners,
+  threshold,
+}: {
+  name?: string
+  owners: NamedAddress[]
+  threshold: number
+}) => {
+  const chain = useCurrentChain()
+
+  return (
+    <Grid container spacing={3}>
+      <ReviewRow name="Network" value={<ChainIndicator chainId={chain?.chainId} inline />} />
+      {name && <ReviewRow name="Name" value={<Typography>{name}</Typography>} />}
+      <ReviewRow
+        name="Owners"
+        value={
+          <Box data-testid="review-step-owner-info" className={css.ownersArray}>
+            {owners.map((owner, index) => (
+              <EthHashInfo
+                address={owner.address}
+                name={owner.name || owner.ens}
+                shortAddress={false}
+                showPrefix={false}
+                showName
+                hasExplorer
+                showCopyButton
+                key={index}
+              />
+            ))}
+          </Box>
+        }
+      />
+      <ReviewRow
+        name="Threshold"
+        value={
+          <Typography>
+            {threshold} out of {owners.length} owner(s)
+          </Typography>
+        }
+      />
+    </Grid>
+  )
+}
+
 const ReviewStep = ({ data, onSubmit, onBack, setStep }: StepRenderProps<NewSafeFormData>) => {
   const isWrongChain = useIsWrongChain()
   useSyncSafeCreationStep(setStep)
@@ -136,10 +182,7 @@ const ReviewStep = ({ data, onSubmit, onBack, setStep }: StepRenderProps<NewSafe
 
   const walletCanPay = useWalletCanPay({ gasLimit, maxFeePerGas, maxPriorityFeePerGas })
 
-  const totalFee =
-    gasLimit && maxFeePerGas
-      ? formatVisualAmount(getTotalFee(maxFeePerGas, maxPriorityFeePerGas, gasLimit), chain?.nativeCurrency.decimals)
-      : '> 0.001'
+  const totalFee = getTotalFeeFormatted(maxFeePerGas, maxPriorityFeePerGas, gasLimit, chain)
 
   // Only 1 out of 1 safe setups are supported for now
   const isCounterfactual = data.threshold === 1 && data.owners.length === 1 && isCounterfactualEnabled
@@ -193,37 +236,7 @@ const ReviewStep = ({ data, onSubmit, onBack, setStep }: StepRenderProps<NewSafe
   return (
     <>
       <Box className={layoutCss.row}>
-        <Grid container spacing={3}>
-          <ReviewRow name="Network" value={<ChainIndicator chainId={chain?.chainId} inline />} />
-          {data.name && <ReviewRow name="Name" value={<Typography>{data.name}</Typography>} />}
-          <ReviewRow
-            name="Owners"
-            value={
-              <Box data-testid="review-step-owner-info" className={css.ownersArray}>
-                {data.owners.map((owner, index) => (
-                  <EthHashInfo
-                    address={owner.address}
-                    name={owner.name || owner.ens}
-                    shortAddress={false}
-                    showPrefix={false}
-                    showName
-                    hasExplorer
-                    showCopyButton
-                    key={index}
-                  />
-                ))}
-              </Box>
-            }
-          />
-          <ReviewRow
-            name="Threshold"
-            value={
-              <Typography>
-                {data.threshold} out of {data.owners.length} owner(s)
-              </Typography>
-            }
-          />
-        </Grid>
+        <SafeSetupOverview name={data.name} owners={data.owners} threshold={data.threshold} />
       </Box>
 
       {!isCounterfactual && (
diff --git a/src/features/counterfactual/ActivateAccount.tsx b/src/features/counterfactual/ActivateAccount.tsx
new file mode 100644
index 0000000000..860316236f
--- /dev/null
+++ b/src/features/counterfactual/ActivateAccount.tsx
@@ -0,0 +1,226 @@
+import { createNewSafe, relaySafeCreation } from '@/components/new-safe/create/logic'
+import NetworkWarning from '@/components/new-safe/create/NetworkWarning'
+import { NetworkFee, SafeSetupOverview } from '@/components/new-safe/create/steps/ReviewStep'
+import { SafeCreationStatus } from '@/components/new-safe/create/steps/StatusStep/useSafeCreation'
+import ReviewRow from '@/components/new-safe/ReviewRow'
+import { TxModalContext } from '@/components/tx-flow'
+import TxCard from '@/components/tx-flow/common/TxCard'
+
+import TxLayout from '@/components/tx-flow/common/TxLayout'
+import ErrorMessage from '@/components/tx/ErrorMessage'
+import { ExecutionMethod, ExecutionMethodSelector } from '@/components/tx/ExecutionMethodSelector'
+import useDeployGasLimit from '@/features/counterfactual/hooks/useDeployGasLimit'
+import { removeUndeployedSafe, selectUndeployedSafe } from '@/features/counterfactual/store/undeployedSafesSlice'
+import useChainId from '@/hooks/useChainId'
+import { useCurrentChain } from '@/hooks/useChains'
+import useGasPrice, { getTotalFeeFormatted } from '@/hooks/useGasPrice'
+import useIsWrongChain from '@/hooks/useIsWrongChain'
+import { useLeastRemainingRelays } from '@/hooks/useRemainingRelays'
+import useSafeInfo from '@/hooks/useSafeInfo'
+import useWalletCanPay from '@/hooks/useWalletCanPay'
+import useWallet from '@/hooks/wallets/useWallet'
+import { useWeb3 } from '@/hooks/wallets/web3'
+import { asError } from '@/services/exceptions/utils'
+import { isSocialLoginWallet } from '@/services/mpc/SocialLoginModule'
+import { waitForCreateSafeTx } from '@/services/tx/txMonitor'
+import { useAppDispatch, useAppSelector } from '@/store'
+import { hasFeature } from '@/utils/chains'
+import { hasRemainingRelays } from '@/utils/relaying'
+import { Alert, 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'
+
+const useActivateAccount = () => {
+  const chain = useCurrentChain()
+  const [gasPrice] = useGasPrice()
+  const { gasLimit } = useDeployGasLimit()
+
+  const isEIP1559 = chain && hasFeature(chain, FEATURES.EIP1559)
+  const maxFeePerGas = gasPrice?.maxFeePerGas
+  const maxPriorityFeePerGas = gasPrice?.maxPriorityFeePerGas
+
+  const options: DeploySafeProps['options'] = isEIP1559
+    ? {
+        maxFeePerGas: maxFeePerGas?.toString(),
+        maxPriorityFeePerGas: maxPriorityFeePerGas?.toString(),
+        gasLimit: gasLimit?.toString(),
+      }
+    : { gasPrice: maxFeePerGas?.toString(), gasLimit: gasLimit?.toString() }
+
+  const totalFee = getTotalFeeFormatted(maxFeePerGas, maxPriorityFeePerGas, gasLimit, chain)
+  const walletCanPay = useWalletCanPay({ gasLimit, maxFeePerGas, maxPriorityFeePerGas })
+
+  return { options, totalFee, walletCanPay }
+}
+
+const ActivateAccountFlow = () => {
+  const [isSubmittable, setIsSubmittable] = useState<boolean>(true)
+  const [submitError, setSubmitError] = useState<Error | undefined>()
+  const [executionMethod, setExecutionMethod] = useState(ExecutionMethod.RELAY)
+
+  const isWrongChain = useIsWrongChain()
+  const chain = useCurrentChain()
+  const chainId = useChainId()
+  const { safeAddress } = useSafeInfo()
+  const provider = useWeb3()
+  const undeployedSafe = useAppSelector((state) => selectUndeployedSafe(state, chainId, safeAddress))
+  const { setTxFlow } = useContext(TxModalContext)
+  const dispatch = useAppDispatch()
+  const wallet = useWallet()
+  const { options, totalFee, walletCanPay } = useActivateAccount()
+
+  const ownerAddresses = undeployedSafe?.safeAccountConfig.owners || []
+  const [minRelays] = useLeastRemainingRelays(ownerAddresses)
+
+  // Every owner has remaining relays and relay method is selected
+  const canRelay = hasRemainingRelays(minRelays)
+  const willRelay = canRelay && executionMethod === ExecutionMethod.RELAY
+
+  if (!undeployedSafe) return null
+
+  const onSuccess = () => {
+    dispatch(removeUndeployedSafe({ chainId, address: safeAddress }))
+  }
+
+  const createSafe = async () => {
+    if (!provider || !chain) return
+
+    setIsSubmittable(false)
+    setSubmitError(undefined)
+
+    try {
+      if (willRelay) {
+        const taskId = await relaySafeCreation(
+          chain,
+          undeployedSafe.safeAccountConfig.owners,
+          undeployedSafe.safeAccountConfig.threshold,
+          Number(undeployedSafe.safeDeploymentConfig?.saltNonce!),
+        )
+
+        waitForCreateSafeTx(taskId, (status) => {
+          if (status === SafeCreationStatus.SUCCESS) {
+            onSuccess()
+          }
+        })
+      } else {
+        await createNewSafe(provider, {
+          safeAccountConfig: undeployedSafe.safeAccountConfig,
+          saltNonce: undeployedSafe.safeDeploymentConfig?.saltNonce,
+          options,
+        })
+        onSuccess()
+      }
+    } catch (_err) {
+      const err = asError(_err)
+      setIsSubmittable(true)
+      setSubmitError(err)
+      return
+    }
+
+    setTxFlow(undefined)
+  }
+
+  const submitDisabled = !isSubmittable
+  const isSocialLogin = isSocialLoginWallet(wallet?.label)
+
+  return (
+    <TxLayout title="Activate account" hideNonce>
+      <TxCard>
+        <Typography>
+          You&apos;re about to deploy this Safe Account and will have to confirm the transaction with your connected
+          wallet.
+        </Typography>
+
+        <Divider sx={{ mx: -3, my: 2 }} />
+
+        <SafeSetupOverview
+          owners={undeployedSafe.safeAccountConfig.owners.map((owner) => ({ name: '', address: owner }))}
+          threshold={undeployedSafe.safeAccountConfig.threshold}
+        />
+
+        <Divider sx={{ mx: -3, mt: 2, mb: 1 }} />
+        <Box display="flex" flexDirection="column" gap={3}>
+          {canRelay && !isSocialLogin && (
+            <Grid container spacing={3}>
+              <ReviewRow
+                name="Execution method"
+                value={
+                  <ExecutionMethodSelector
+                    executionMethod={executionMethod}
+                    setExecutionMethod={setExecutionMethod}
+                    relays={minRelays}
+                  />
+                }
+              />
+            </Grid>
+          )}
+
+          <Grid data-testid="network-fee-section" container spacing={3}>
+            <ReviewRow
+              name="Est. network fee"
+              value={
+                <>
+                  <NetworkFee totalFee={totalFee} willRelay={willRelay} chain={chain} />
+
+                  {!willRelay && !isSocialLogin && (
+                    <Typography variant="body2" color="text.secondary" mt={1}>
+                      You will have to confirm a transaction with your connected wallet.
+                    </Typography>
+                  )}
+                </>
+              }
+            />
+          </Grid>
+
+          {submitError && (
+            <Box mt={1}>
+              <ErrorMessage error={submitError}>Error submitting the transaction. Please try again.</ErrorMessage>
+            </Box>
+          )}
+
+          {isWrongChain && <NetworkWarning />}
+
+          {!walletCanPay && !willRelay && (
+            <ErrorMessage>
+              Your connected wallet doesn&apos;t have enough funds to execute this transaction
+            </ErrorMessage>
+          )}
+        </Box>
+
+        <Divider sx={{ mx: -3, mt: 2, mb: 1 }} />
+
+        <Box display="flex" flexDirection="row" justifyContent="flex-end" gap={3}>
+          <Button onClick={createSafe} variant="contained" size="stretched" disabled={submitDisabled}>
+            {!isSubmittable ? <CircularProgress size={20} /> : 'Activate'}
+          </Button>
+        </Box>
+      </TxCard>
+    </TxLayout>
+  )
+}
+
+const ActivateAccount = () => {
+  const { safe } = useSafeInfo()
+  const { setTxFlow } = useContext(TxModalContext)
+
+  if (safe.deployed) return null
+
+  const activateAccount = () => {
+    setTxFlow(<ActivateAccountFlow />)
+  }
+
+  return (
+    <Alert severity="info" sx={{ mb: 3 }}>
+      <Typography fontWeight="bold">Activate your account?</Typography>
+      <Typography variant="body2" mb={3}>
+        Activate your account now by deploying it and paying a network fee.
+      </Typography>
+      <Button variant="contained" size="small" onClick={activateAccount}>
+        Activate now
+      </Button>
+    </Alert>
+  )
+}
+
+export default ActivateAccount
diff --git a/src/features/counterfactual/hooks/useDeployGasLimit.ts b/src/features/counterfactual/hooks/useDeployGasLimit.ts
index a2a7a35e7b..2fae468ca3 100644
--- a/src/features/counterfactual/hooks/useDeployGasLimit.ts
+++ b/src/features/counterfactual/hooks/useDeployGasLimit.ts
@@ -10,13 +10,13 @@ const useDeployGasLimit = (safeTx?: SafeTransaction) => {
   const chainId = useChainId()
 
   const [gasLimit, gasLimitError, gasLimitLoading] = useAsync<bigint | undefined>(async () => {
-    if (!safeTx || !onboard) return
+    if (!onboard) return
 
     const sdk = await getSafeSDKWithSigner(onboard, chainId)
 
     const [gas, safeTxGas, safeDeploymentGas] = await Promise.all([
-      estimateTxBaseGas(sdk, safeTx),
-      estimateSafeTxGas(sdk, safeTx),
+      safeTx ? estimateTxBaseGas(sdk, safeTx) : '0',
+      safeTx ? estimateSafeTxGas(sdk, safeTx) : '0',
       estimateSafeDeploymentGas(sdk),
     ])
 
diff --git a/src/features/counterfactual/utils.ts b/src/features/counterfactual/utils.ts
index 671b2e4689..0439528c75 100644
--- a/src/features/counterfactual/utils.ts
+++ b/src/features/counterfactual/utils.ts
@@ -1,10 +1,10 @@
-import type { NewSafeFormData } from '@/components/new-safe/create'
 import { LATEST_SAFE_VERSION } from '@/config/constants'
-import { AppRoutes } from '@/config/routes'
-import { addUndeployedSafe } from '@/features/counterfactual/store/undeployedSafesSlice'
+import type { NewSafeFormData } from '@/components/new-safe/create'
 import { type ConnectedWallet } from '@/hooks/wallets/useOnboard'
 import { asError } from '@/services/exceptions/utils'
 import { assertWalletChain, getUncheckedSafeSDK } from '@/services/tx/tx-sender/sdk'
+import { AppRoutes } from '@/config/routes'
+import { addUndeployedSafe } from '@/features/counterfactual/store/undeployedSafesSlice'
 import { txDispatch, TxEvent } from '@/services/tx/txEvents'
 import type { AppDispatch } from '@/store'
 import { addOrUpdateSafe } from '@/store/addedSafesSlice'
diff --git a/src/hooks/useGasPrice.ts b/src/hooks/useGasPrice.ts
index 6074cd65f2..a5c6ba9ef5 100644
--- a/src/hooks/useGasPrice.ts
+++ b/src/hooks/useGasPrice.ts
@@ -1,5 +1,7 @@
+import { formatVisualAmount } from '@/utils/formatters'
 import type { FeeData } from 'ethers'
 import type {
+  ChainInfo,
   GasPrice,
   GasPriceFixed,
   GasPriceFixedEIP1559,
@@ -133,6 +135,17 @@ export const getTotalFee = (
   return (maxFeePerGas + (maxPriorityFeePerGas || 0n)) * gasLimit
 }
 
+export const getTotalFeeFormatted = (
+  maxFeePerGas: bigint | null | undefined,
+  maxPriorityFeePerGas: bigint | null | undefined,
+  gasLimit: bigint | undefined,
+  chain: ChainInfo | undefined,
+) => {
+  return gasLimit && maxFeePerGas
+    ? formatVisualAmount(getTotalFee(maxFeePerGas, maxPriorityFeePerGas, gasLimit), chain?.nativeCurrency.decimals)
+    : '> 0.001'
+}
+
 const useGasPrice = (): AsyncResult<GasFeeParams> => {
   const chain = useCurrentChain()
   const gasPriceConfigs = chain?.gasPrice
diff --git a/src/hooks/useWalletCanPay.ts b/src/hooks/useWalletCanPay.ts
index f3990f023b..339c5a19bd 100644
--- a/src/hooks/useWalletCanPay.ts
+++ b/src/hooks/useWalletCanPay.ts
@@ -1,3 +1,4 @@
+import { getTotalFee } from '@/hooks/useGasPrice'
 import useWalletBalance from '@/hooks/wallets/useWalletBalance'
 
 const useWalletCanPay = ({
@@ -15,7 +16,7 @@ const useWalletCanPay = ({
   // if gasLimit, maxFeePerGas or their walletBalance are missing
   if (!gasLimit || !maxFeePerGas || walletBalance === undefined) return true
 
-  const totalFee = (maxFeePerGas + BigInt(maxPriorityFeePerGas || 0)) * gasLimit
+  const totalFee = getTotalFee(maxFeePerGas, maxPriorityFeePerGas, gasLimit)
 
   return walletBalance >= totalFee
 }
diff --git a/src/pages/settings/setup.tsx b/src/pages/settings/setup.tsx
index 3229762803..414c1f0da7 100644
--- a/src/pages/settings/setup.tsx
+++ b/src/pages/settings/setup.tsx
@@ -1,3 +1,4 @@
+import ActivateAccount from '@/features/counterfactual/ActivateAccount'
 import type { NextPage } from 'next'
 import Head from 'next/head'
 import { Grid, Paper, Skeleton, SvgIcon, Tooltip, Typography } from '@mui/material'
@@ -24,6 +25,8 @@ const Setup: NextPage = () => {
       <SettingsHeader />
 
       <main>
+        <ActivateAccount />
+
         <Paper data-testid="setup-section" sx={{ p: 4, mb: 2 }}>
           <Grid container spacing={3}>
             <Grid item lg={4} xs={12}>