Add multichain safe creation flow tests

cypress/e2e/pages/create_wallet.pages.js

@@ -17,7 +17,7 @@ const googleConnectBtn = '[data-testid="google-connect-btn"]'
 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"]'
+export 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"]'
@@ -41,6 +41,14 @@ export const noTokensAlert = '[data-testid="no-tokens-alert"]'
 const networkCheckbox = '[data-testid="network-checkbox"]'
 const cancelIcon = '[data-testid="CancelIcon"]'
 const thresholdItem = '[data-testid="threshold-item"]'
+export const payNowLaterMessageBox = '[data-testid="pay-now-later-message-box"]'
+export const safeSetupOverview = '[data-testid="safe-setup-overview"]'
+export const networksLogoList = '[data-testid="network-list"]'
+export const reviewStepSafeName = '[data-testid="review-step-safe-name"]'
+export const reviewStepThreshold = '[data-testid="review-step-threshold"]'
+export const cfSafeCreationSuccessMsg = '[data-testid="account-success-message"]'
+export const cfSafeActivationMsg = '[data-testid="safe-activation-message"]'
+export const cfSafeInfo = '[data-testid="safe-info"]'
 
 const sponsorStr = 'Your account is sponsored by Goerli'
 const safeCreationProcessing = 'Transaction is being executed'
@@ -342,3 +350,26 @@ export function assertCFSafeThresholdAndSigners(chainId, threshold, expectedOwne
     throw new Error(`No safe found with threshold ${threshold} on chain ID ${chainId}.`)
   }
 }
+
+function checkNetworkLogo(network) {
+  cy.get('img').then((logos) => {
+    const isLogoPresent = [...logos].some((img) => img.getAttribute('src').includes(network))
+    expect(isLogoPresent).to.be.true
+  })
+}
+
+export function checkNetworkLogoInReviewStep(networks) {
+  cy.get(networksLogoList).within(() => {
+    networks.forEach((network) => {
+      checkNetworkLogo(network)
+    })
+  })
+}
+
+export function checkNetworkLogoInSafeCreationModal(networks) {
+  cy.get(cfSafeInfo).within(() => {
+    networks.forEach((network) => {
+      checkNetworkLogo(network)
+    })
+  })
+}

cypress/e2e/regression/create_tx.cy.js

@@ -3,6 +3,7 @@ import * as main from '../../e2e/pages/main.page'
 import * as createtx from '../../e2e/pages/create_tx.pages'
 import { getSafes, CATEGORIES } from '../../support/safes/safesHandler.js'
 import * as wallet from '../../support/utils/wallet.js'
+import * as tx from '../../e2e/pages/transactions.page'
 
 let staticSafes = []
 
@@ -23,15 +24,12 @@ describe('Create transactions tests', () => {
     staticSafes = await getSafes(CATEGORIES.static)
   })
 
-  beforeEach(() => {
+  // Added to prod
+  it('Verify submitting a tx and that clicking on notification shows the transaction in queue', () => {
     cy.visit(constants.BALANCE_URL + staticSafes.SEP_STATIC_SAFE_6)
     wallet.connectSigner(signer)
     createtx.clickOnNewtransactionBtn()
     createtx.clickOnSendTokensBtn()
-  })
-
-  // Added to prod
-  it('Verify submitting a tx and that clicking on notification shows the transaction in queue', () => {
     happyPathToStepTwo()
     createtx.verifySubmitBtnIsEnabled()
     createtx.changeNonce(14)
@@ -42,4 +40,14 @@ describe('Create transactions tests', () => {
     createtx.verifyQueueLabel()
     createtx.verifyTransactionSummary(sendValue)
   })
+
+  it('Verify relay is available on tx execution', () => {
+    let safe = main.changeSafeChainName(staticSafes.MATIC_STATIC_SAFE_28, 'sep')
+    cy.visit(constants.BALANCE_URL + safe)
+    wallet.connectSigner(signer)
+    createtx.clickOnNewtransactionBtn()
+    createtx.clickOnSendTokensBtn()
+    happyPathToStepTwo()
+    cy.contains(tx.relayRemainingAttemptsStr).should('exist')
+  })
 })

cypress/e2e/regression/multichain_create_safe.cy.js

@@ -1,7 +1,5 @@
 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 ls from '../../support/localstorage_data.js'
 import { getSafes, CATEGORIES } from '../../support/safes/safesHandler.js'
 import * as wallet from '../../support/utils/wallet.js'
 import * as createwallet from '../pages/create_wallet.pages'
@@ -13,8 +11,6 @@ let staticSafes = []
 
 const walletCredentials = JSON.parse(Cypress.env('CYPRESS_WALLET_CREDENTIALS'))
 const signer = walletCredentials.OWNER_4_PRIVATE_KEY
-// DO NOT use OWNER_2_PRIVATE_KEY for safe creation. Used for CF safes.
-const signer2 = walletCredentials.OWNER_2_PRIVATE_KEY
 
 describe('Multichain safe creation tests', () => {
   before(async () => {

cypress/e2e/regression/multichain_create_safe_flow.cy.js

@@ -0,0 +1,64 @@
+import * as constants from '../../support/constants.js'
+import * as main from '../pages/main.page.js'
+import { getSafes, CATEGORIES } from '../../support/safes/safesHandler.js'
+import * as wallet from '../../support/utils/wallet.js'
+import * as createwallet from '../pages/create_wallet.pages.js'
+import * as owner from '../pages/owners.pages.js'
+
+let staticSafes = []
+
+const walletCredentials = JSON.parse(Cypress.env('CYPRESS_WALLET_CREDENTIALS'))
+const signer = walletCredentials.OWNER_4_PRIVATE_KEY
+
+describe('Multichain safe creation flow tests', () => {
+  before(async () => {
+    staticSafes = await getSafes(CATEGORIES.static)
+  })
+
+  beforeEach(() => {
+    cy.visit(constants.welcomeUrl + '?chain=sep')
+    cy.wait(2000)
+    wallet.connectSigner(signer)
+  })
+
+  it('Verify Review screen for multichain safe creation flow', () => {
+    createwallet.clickOnContinueWithWalletBtn()
+    createwallet.clickOnCreateNewSafeBtn()
+    createwallet.selectMultiNetwork(1, constants.networks.polygon.toLowerCase())
+    createwallet.clickOnNextBtn()
+    createwallet.clickOnNextBtn()
+    main.verifyElementsExist([
+      createwallet.payNowLaterMessageBox,
+      createwallet.safeSetupOverview,
+      createwallet.networksLogoList,
+      createwallet.reviewStepOwnerInfo,
+      createwallet.reviewStepSafeName,
+      createwallet.reviewStepThreshold,
+      createwallet.reviewStepNextBtn,
+    ])
+    createwallet.checkNetworkLogoInReviewStep([constants.networkKeys.polygon, constants.networkKeys.sepolia])
+  })
+
+  it('Verify that selected networks are displayed in preview multichain safe', () => {
+    createwallet.clickOnContinueWithWalletBtn()
+    createwallet.clickOnCreateNewSafeBtn()
+    createwallet.selectMultiNetwork(1, constants.networks.polygon.toLowerCase())
+    createwallet.clickOnNextBtn()
+    createwallet.clickOnNextBtn()
+    createwallet.checkNetworkLogoInReviewStep([constants.networkKeys.polygon, constants.networkKeys.sepolia])
+  })
+
+  it('Verify Success safe creation screen for multichain creation', () => {
+    createwallet.clickOnContinueWithWalletBtn()
+    createwallet.clickOnCreateNewSafeBtn()
+    createwallet.selectMultiNetwork(1, constants.networks.polygon.toLowerCase())
+    createwallet.clickOnNextBtn()
+    owner.clickOnAddSignerBtn()
+    owner.typeOwnerAddressCreateSafeStep(1, constants.SEPOLIA_OWNER_2)
+    createwallet.clickOnNextBtn()
+    createwallet.clickOnReviewStepNextBtn()
+    main.verifyElementsExist([createwallet.cfSafeActivationMsg, createwallet.cfSafeCreationSuccessMsg])
+    createwallet.checkNetworkLogoInSafeCreationModal([constants.networkKeys.polygon, constants.networkKeys.sepolia])
+    createwallet.clickOnLetsGoBtn()
+  })
+})

cypress/support/constants.js

@@ -127,6 +127,7 @@ export const networks = {
   polygon: 'Polygon',
   gnosis: 'Gnosis',
   zkSync: 'zkSync Era',
+  base: 'Base',
 }
 
 export const tokenAbbreviation = {

src/components/new-safe/create/steps/ReviewStep/index.tsx

@@ -103,13 +103,13 @@ export const SafeSetupOverview = ({
             }
             arrow
           >
-            <Box display="inline-block">
+            <Box data-testid="network-list" display="inline-block">
               <NetworkLogosList networks={networks} />
             </Box>
           </Tooltip>
         }
       />
-      {name && <ReviewRow name="Name" value={<Typography>{name}</Typography>} />}
+      {name && <ReviewRow name="Name" value={<Typography data-testid="review-step-safe-name">{name}</Typography>} />}
       <ReviewRow
         name="Signers"
         value={
@@ -132,7 +132,7 @@ export const SafeSetupOverview = ({
       <ReviewRow
         name="Threshold"
         value={
-          <Typography>
+          <Typography data-testid="review-step-threshold">
             {threshold} out of {owners.length} {owners.length > 1 ? 'signers' : 'signer'}
           </Typography>
         }
@@ -365,14 +365,14 @@ const ReviewStep = ({ data, onSubmit, onBack, setStep }: StepRenderProps<NewSafe
 
   return (
     <>
-      <Box className={layoutCss.row}>
+      <Box data-testid="safe-setup-overview" className={layoutCss.row}>
         <SafeSetupOverview name={data.name} owners={data.owners} threshold={data.threshold} networks={data.networks} />
       </Box>
 
       {isCounterfactualEnabled && (
         <>
           <Divider />
-          <Box className={layoutCss.row}>
+          <Box data-testid="pay-now-later-message-box" className={layoutCss.row}>
             <PayNowPayLater
               totalFee={totalFee}
               isMultiChain={isMultiChainDeployment}

src/features/counterfactual/CounterfactualSuccessScreen.tsx

@@ -79,8 +79,8 @@ const CounterfactualSuccessScreen = () => {
           <CheckRoundedIcon sx={{ width: 50, height: 50 }} color="success" />
         </Box>
 
-        <Box textAlign="center">
-          <Typography variant="h3" fontWeight="bold" mb={1}>
+        <Box data-testid="safe-activation-message" textAlign="center">
+          <Typography data-testid="account-success-message" variant="h3" fontWeight="bold" mb={1}>
             {isCFCreation ? 'Your account is almost set!' : 'Your account is all set!'}
           </Typography>
           <Typography variant="body2">
@@ -98,7 +98,7 @@ const CounterfactualSuccessScreen = () => {
         </Box>
 
         {safeAddress && (
-          <Box p={2} bgcolor="background.main" borderRadius={1} fontSize={14}>
+          <Box data-testid="safe-info" p={2} bgcolor="background.main" borderRadius={1} fontSize={14}>
             <NetworkLogosList networks={networks.length > 0 ? networks : chain ? [chain] : []} />
             <Typography variant="h5" mt={2}>
               {safeName}