feat(Multichain): Multichain Safes with same address

cypress/e2e/pages/create_wallet.pages.js

@@ -17,6 +17,7 @@ const googleSignedinBtn = '[data-testid="signed-in-account-btn"]'
 export const accountInfoHeader = '[data-testid="open-account-center"]'
 export const reviewStepOwnerInfo = '[data-testid="review-step-owner-info"]'
 const reviewStepNextBtn = '[data-testid="review-step-next-btn"]'
+const creationModalLetsGoBtn = '[data-testid="cf-creation-lets-go-btn"]'
 const safeCreationStatusInfo = '[data-testid="safe-status-info"]'
 const startUsingSafeBtn = '[data-testid="start-using-safe-btn"]'
 const sponsorIcon = '[data-testid="sponsor-icon"]'
@@ -123,6 +124,12 @@ export function clickOnReviewStepNextBtn() {
   cy.get(reviewStepNextBtn).click()
   cy.get(reviewStepNextBtn, { timeout: 60000 }).should('not.exist')
 }
+
+export function clickOnLetsGoBtn() {
+  cy.get(creationModalLetsGoBtn).click()
+  cy.get(creationModalLetsGoBtn, { timeout: 60000 }).should('not.exist')
+}
+
 export function verifyOwnerInfoIsPresent() {
   return cy.get(reviewStepOwnerInfo).shoul('exist')
 }

cypress/e2e/pages/load_safe.pages.js

@@ -210,7 +210,7 @@ export function verifyDataInReviewSection(safeName, ownerName, threshold = null,
   cy.findByText(ownerName).should('be.visible')
   if (ownerAddress !== null) cy.get(safeDataForm).contains(ownerAddress).should('be.visible')
   if (threshold !== null) cy.get(safeDataForm).contains(threshold).should('be.visible')
-  if (network !== null) cy.get(sidebar.chainLogo).eq(1).contains(network).should('be.visible')
+  if (network !== null) cy.get(sidebar.chainLogo).eq(0).contains(network).should('be.visible')
 }
 
 export function clickOnAddBtn() {

cypress/e2e/pages/owners.pages.js

@@ -80,7 +80,7 @@ export function verifyOwnerDeletionWindowDisplayed() {
 }
 
 function clickOnThresholdDropdown() {
-  cy.get(thresholdDropdown).eq(1).click()
+  cy.get(thresholdDropdown).eq(0).click()
 }
 
 export function getThresholdOptions() {

cypress/e2e/smoke/create_safe_cf.cy.js

@@ -39,6 +39,7 @@ describe('[SMOKE] CF Safe creation tests', () => {
         },
       ]
       checkDataLayerEvents(safe_created)
+      createwallet.clickOnLetsGoBtn()
       createwallet.verifyCFSafeCreated()
     })
   })

cypress/e2e/smoke/import_export_data.cy.js

@@ -3,7 +3,6 @@ import * as file from '../pages/import_export.pages'
 import * as main from '../pages/main.page'
 import * as constants from '../../support/constants'
 import * as ls from '../../support/localstorage_data.js'
-import * as createwallet from '../pages/create_wallet.pages'
 import * as sideBar from '../pages/sidebar.pages'
 import { getSafes, CATEGORIES } from '../../support/safes/safesHandler.js'
 
@@ -16,10 +15,7 @@ describe('[SMOKE] Import Export Data tests', () => {
 
   beforeEach(() => {
     cy.clearLocalStorage()
-    cy.visit(constants.dataSettingsUrl).then(() => {
-      main.acceptCookies()
-      createwallet.selectNetwork(constants.networks.sepolia)
-    })
+    cy.visit(constants.dataSettingsUrl)
   })
 
   it('[SMOKE] Verify Safe can be accessed after test file upload', () => {

jest.setup.js

@@ -5,13 +5,15 @@
 // Learn more: https://github.com/testing-library/jest-dom
 import '@testing-library/jest-dom/extend-expect'
 import { TextEncoder, TextDecoder } from 'util'
+import { Headers, Request, Response } from 'node-fetch'
 
 jest.mock('@web3-onboard/coinbase', () => jest.fn())
 jest.mock('@web3-onboard/injected-wallets', () => ({ ProviderLabel: { MetaMask: 'MetaMask' } }))
 jest.mock('@web3-onboard/keystone/dist/index', () => jest.fn())
 jest.mock('@web3-onboard/ledger/dist/index', () => jest.fn())
 jest.mock('@web3-onboard/trezor', () => jest.fn())
 jest.mock('@web3-onboard/walletconnect', () => jest.fn())
+jest.mock('safe-client-gateway-sdk')
 
 const mockOnboardState = {
   chains: [],
@@ -68,3 +70,8 @@ Object.defineProperty(Uint8Array, Symbol.hasInstance, {
       : Uint8Array[Symbol.hasInstance].call(this, potentialInstance)
   },
 })
+
+// These are required for safe-client-gateway-sdk
+globalThis.Request = Request
+globalThis.Response = Response
+globalThis.Headers = Headers

package.json

@@ -57,7 +57,7 @@
     "@safe-global/api-kit": "^2.4.6",
     "@safe-global/protocol-kit": "^4.1.1",
     "@safe-global/safe-apps-sdk": "^9.1.0",
-    "@safe-global/safe-deployments": "^1.37.8",
+    "@safe-global/safe-deployments": "^1.37.10",
     "@safe-global/safe-gateway-typescript-sdk": "3.22.3-beta.15",
     "@safe-global/safe-modules-deployments": "^2.2.1",
     "@sentry/react": "^7.91.0",
@@ -91,6 +91,7 @@
     "react-hook-form": "7.41.1",
     "react-papaparse": "^4.0.2",
     "react-redux": "^9.1.2",
+    "safe-client-gateway-sdk": "git+https://github.com/safe-global/safe-client-gateway-sdk.git#v1.53.0-next-7344903",
     "semver": "^7.6.3",
     "zodiac-roles-deployments": "^2.2.5"
   },

src/components/address-book/EntryDialog/index.tsx

@@ -7,8 +7,8 @@ import ModalDialog from '@/components/common/ModalDialog'
 import NameInput from '@/components/common/NameInput'
 import useChainId from '@/hooks/useChainId'
 import { useAppDispatch } from '@/store'
-import { upsertAddressBookEntry } from '@/store/addressBookSlice'
 import madProps from '@/utils/mad-props'
+import { upsertAddressBookEntries } from '@/store/addressBookSlice'
 
 export type AddressEntry = {
   name: string
@@ -22,13 +22,13 @@ function EntryDialog({
     address: '',
   },
   disableAddressInput = false,
-  chainId,
+  chainIds,
   currentChainId,
 }: {
   handleClose: () => void
   defaultValues?: AddressEntry
   disableAddressInput?: boolean
-  chainId?: string
+  chainIds?: string[]
   currentChainId: string
 }): ReactElement {
   const dispatch = useAppDispatch()
@@ -41,7 +41,7 @@ function EntryDialog({
   const { handleSubmit, formState } = methods
 
   const submitCallback = handleSubmit((data: AddressEntry) => {
-    dispatch(upsertAddressBookEntry({ ...data, chainId: chainId || currentChainId }))
+    dispatch(upsertAddressBookEntries({ ...data, chainIds: chainIds ?? [currentChainId] }))
     handleClose()
   })
 
@@ -51,7 +51,12 @@ function EntryDialog({
   }
 
   return (
-    <ModalDialog open onClose={handleClose} dialogTitle={defaultValues.name ? 'Edit entry' : 'Create entry'}>
+    <ModalDialog
+      open
+      onClose={handleClose}
+      dialogTitle={defaultValues.name ? 'Edit entry' : 'Create entry'}
+      hideChainIndicator={chainIds && chainIds.length > 1}
+    >
       <FormProvider {...methods}>
         <form onSubmit={onSubmit}>
           <DialogContent>

src/components/address-book/ImportDialog/index.tsx

@@ -7,7 +7,7 @@ import type { ParseResult } from 'papaparse'
 import { type ReactElement, useState, type MouseEvent, useMemo } from 'react'
 
 import ModalDialog from '@/components/common/ModalDialog'
-import { upsertAddressBookEntry } from '@/store/addressBookSlice'
+import { upsertAddressBookEntries } from '@/store/addressBookSlice'
 import { useAppDispatch } from '@/store'
 
 import css from './styles.module.css'
@@ -60,7 +60,7 @@ const ImportDialog = ({ handleClose }: { handleClose: () => void }): ReactElemen
 
     for (const entry of entries) {
       const [address, name, chainId] = entry
-      dispatch(upsertAddressBookEntry({ address, name, chainId: chainId.trim() }))
+      dispatch(upsertAddressBookEntries({ address, name, chainIds: [chainId.trim()] }))
     }
 
     trackEvent({ ...ADDRESS_BOOK_EVENTS.IMPORT, label: entries.length })

src/components/common/ChainIndicator/index.tsx

@@ -5,16 +5,19 @@ import { useAppSelector } from '@/store'
 import { selectChainById, selectChains } from '@/store/chainsSlice'
 import css from './styles.module.css'
 import useChainId from '@/hooks/useChainId'
-import { Skeleton } from '@mui/material'
+import { Skeleton, Stack, Typography } from '@mui/material'
 import isEmpty from 'lodash/isEmpty'
+import FiatValue from '../FiatValue'
 
 type ChainIndicatorProps = {
   chainId?: string
   inline?: boolean
   className?: string
   showUnknown?: boolean
   showLogo?: boolean
+  onlyLogo?: boolean
   responsive?: boolean
+  fiatValue?: string
 }
 
 const fallbackChainConfig = {
@@ -29,11 +32,13 @@ const fallbackChainConfig = {
 
 const ChainIndicator = ({
   chainId,
+  fiatValue,
   className,
   inline = false,
   showUnknown = true,
   showLogo = true,
   responsive = false,
+  onlyLogo = false,
 }: ChainIndicatorProps): ReactElement | null => {
   const currentChainId = useChainId()
   const id = chainId || currentChainId
@@ -63,6 +68,7 @@ const ChainIndicator = ({
         [css.indicator]: !inline,
         [css.withLogo]: showLogo,
         [css.responsive]: responsive,
+        [css.onlyLogo]: onlyLogo,
       })}
     >
       {showLogo && (
@@ -74,8 +80,16 @@ const ChainIndicator = ({
           loading="lazy"
         />
       )}
-
-      <span className={css.name}>{chainConfig.chainName}</span>
+      {!onlyLogo && (
+        <Stack>
+          <span className={css.name}>{chainConfig.chainName}</span>
+          {fiatValue && (
+            <Typography fontWeight={700} textAlign="left" fontSize="14px">
+              <FiatValue value={fiatValue} />
+            </Typography>
+          )}
+        </Stack>
+      )}
     </span>
   ) : null
 }

src/components/common/ChainIndicator/styles.module.css

@@ -26,6 +26,10 @@
   justify-content: flex-start;
 }
 
+.onlyLogo {
+  min-width: 0;
+}
+
 @media (max-width: 899.95px) {
   .indicator {
     min-width: 35px;

src/components/common/CheckWallet/index.test.tsx

@@ -1,10 +1,14 @@
-import { render } from '@/tests/test-utils'
+import { getByLabelText, render } from '@/tests/test-utils'
 import CheckWallet from '.'
 import useIsOnlySpendingLimitBeneficiary from '@/hooks/useIsOnlySpendingLimitBeneficiary'
 import useIsSafeOwner from '@/hooks/useIsSafeOwner'
 import useIsWrongChain from '@/hooks/useIsWrongChain'
 import useWallet from '@/hooks/wallets/useWallet'
 import { chainBuilder } from '@/tests/builders/chains'
+import { useIsWalletDelegate } from '@/hooks/useDelegates'
+import { faker } from '@faker-js/faker'
+import { extendedSafeInfoBuilder } from '@/tests/builders/safe'
+import useSafeInfo from '@/hooks/useSafeInfo'
 
 // mock useWallet
 jest.mock('@/hooks/wallets/useWallet', () => ({
@@ -38,6 +42,25 @@ jest.mock('@/hooks/useIsWrongChain', () => ({
   default: jest.fn(() => false),
 }))
 
+jest.mock('@/hooks/useDelegates', () => ({
+  __esModule: true,
+  useIsWalletDelegate: jest.fn(() => false),
+}))
+
+jest.mock('@/hooks/useSafeInfo', () => ({
+  __esModule: true,
+  default: jest.fn(() => {
+    const safeAddress = faker.finance.ethereumAddress()
+    return {
+      safeAddress,
+      safe: extendedSafeInfoBuilder()
+        .with({ address: { value: safeAddress } })
+        .with({ deployed: true })
+        .build(),
+    }
+  }),
+}))
+
 const renderButton = () =>
   render(<CheckWallet checkNetwork={false}>{(isOk) => <button disabled={!isOk}>Continue</button>}</CheckWallet>)
 
@@ -62,7 +85,7 @@ describe('CheckWallet', () => {
     expect(container.querySelector('button')).toBeDisabled()
 
     // Check the tooltip text
-    expect(container.querySelector('span[aria-label]')).toHaveAttribute('aria-label', 'Please connect your wallet')
+    getByLabelText(container, 'Please connect your wallet')
   })
 
   it('should disable the button when the wallet is connected to the right chain but is not an owner', () => {
@@ -98,10 +121,7 @@ describe('CheckWallet', () => {
     const { container } = renderButton()
 
     expect(container.querySelector('button')).toBeDisabled()
-    expect(container.querySelector('span[aria-label]')).toHaveAttribute(
-      'aria-label',
-      'Your connected wallet is not a signer of this Safe Account',
-    )
+    getByLabelText(container, 'Your connected wallet is not a signer of this Safe Account')
 
     const { container: allowContainer } = render(
       <CheckWallet allowSpendingLimit>{(isOk) => <button disabled={!isOk}>Continue</button>}</CheckWallet>,
@@ -110,6 +130,60 @@ describe('CheckWallet', () => {
     expect(allowContainer.querySelector('button')).not.toBeDisabled()
   })
 
+  it('should not disable the button for delegates', () => {
+    ;(useIsSafeOwner as jest.MockedFunction<typeof useIsSafeOwner>).mockReturnValueOnce(false)
+    ;(useIsWalletDelegate as jest.MockedFunction<typeof useIsWalletDelegate>).mockReturnValueOnce(true)
+
+    const { container } = renderButton()
+
+    expect(container.querySelector('button')).not.toBeDisabled()
+  })
+
+  it('should disable the button for counterfactual Safes', () => {
+    ;(useIsSafeOwner as jest.MockedFunction<typeof useIsSafeOwner>).mockReturnValueOnce(true)
+
+    const safeAddress = faker.finance.ethereumAddress()
+    const mockSafeInfo = {
+      safeAddress,
+      safe: extendedSafeInfoBuilder()
+        .with({ address: { value: safeAddress } })
+        .with({ deployed: false })
+        .build(),
+    }
+
+    ;(useSafeInfo as jest.MockedFunction<typeof useSafeInfo>).mockReturnValueOnce(
+      mockSafeInfo as unknown as ReturnType<typeof useSafeInfo>,
+    )
+
+    const { container } = renderButton()
+
+    expect(container.querySelector('button')).toBeDisabled()
+    getByLabelText(container, 'You need to activate the Safe before transacting')
+  })
+
+  it('should enable the button for counterfactual Safes if allowed', () => {
+    ;(useIsSafeOwner as jest.MockedFunction<typeof useIsSafeOwner>).mockReturnValueOnce(true)
+
+    const safeAddress = faker.finance.ethereumAddress()
+    const mockSafeInfo = {
+      safeAddress,
+      safe: extendedSafeInfoBuilder()
+        .with({ address: { value: safeAddress } })
+        .with({ deployed: false })
+        .build(),
+    }
+
+    ;(useSafeInfo as jest.MockedFunction<typeof useSafeInfo>).mockReturnValueOnce(
+      mockSafeInfo as unknown as ReturnType<typeof useSafeInfo>,
+    )
+
+    const { container } = render(
+      <CheckWallet allowUndeployedSafe>{(isOk) => <button disabled={!isOk}>Continue</button>}</CheckWallet>,
+    )
+
+    expect(container.querySelector('button')).toBeEnabled()
+  })
+
   it('should allow non-owners if specified', () => {
     ;(useIsSafeOwner as jest.MockedFunction<typeof useIsSafeOwner>).mockReturnValueOnce(false)