Merge branch 'dev' of github.com:safe-global/safe-wallet-web into ana…

…lytics

.github/workflows/deploy-dockerhub.yml

@@ -13,25 +13,50 @@ on:
 jobs:
   dockerhub-push:
     runs-on: ubuntu-latest
+    if: github.ref == 'refs/heads/main' || github.ref == 'refs/heads/dev' || (github.event_name == 'release' && github.event.action == 'released')
     steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
+    - uses: docker/setup-qemu-action@v3
+      with:
+        platforms: arm64
+    - uses: docker/setup-buildx-action@v3
     - name: Dockerhub login
-      uses: docker/login-action@v2
+      uses: docker/login-action@v3
       with:
         username: ${{ secrets.DOCKER_USER }}
         password: ${{ secrets.DOCKER_PASSWORD }}
-    - name: Deploy Dockerhub main
+    - name: Deploy Main
       if: github.ref == 'refs/heads/main'
-      run: bash scripts/github/deploy_docker.sh staging
-      env:
-        DOCKERHUB_PROJECT: ${{ secrets.DOCKER_PROJECT }}
-    - name: Deploy Dockerhub dev
+      uses: docker/build-push-action@v5
+      with:
+        push: true
+        tags: safeglobal/safe-wallet-web:staging
+        platforms: |
+          linux/amd64
+          linux/arm64
+        cache-from: type=gha
+        cache-to: type=gha,mode=max
+    - name: Deploy Develop
       if: github.ref == 'refs/heads/dev'
-      run: bash scripts/github/deploy_docker.sh dev
-      env:
-        DOCKERHUB_PROJECT: ${{ secrets.DOCKER_PROJECT }}
-    - name: Deploy Dockerhub tag
-      if: startsWith(github.ref, 'refs/tags/')
-      run: bash scripts/github/deploy_docker.sh ${GITHUB_REF##*/}
-      env:
-        DOCKERHUB_PROJECT: ${{ secrets.DOCKER_PROJECT }}
+      uses: docker/build-push-action@v5
+      with:
+        push: true
+        tags: safeglobal/safe-wallet-web:dev
+        platforms: |
+          linux/amd64
+          linux/arm64
+        cache-from: type=gha
+        cache-to: type=gha,mode=max
+    - name: Deploy Tag
+      if: (github.event_name == 'release' && github.event.action == 'released')
+      uses: docker/build-push-action@v5
+      with:
+        push: true
+        tags: |
+          safeglobal/safe-wallet-web:${{ github.event.release.tag_name }}
+          safeglobal/safe-wallet-web:latest
+        platforms: |
+          linux/amd64
+          linux/arm64
+        cache-from: type=gha
+        cache-to: type=gha,mode=max

Dockerfile

@@ -1,34 +1,21 @@
-FROM node:18-alpine AS base
-ENV NEXT_TELEMETRY_DISABLED 1
-
-FROM base AS builder
-
+FROM node:18-alpine
 RUN apk add --no-cache libc6-compat git python3 py3-pip make g++ libusb-dev eudev-dev linux-headers
 WORKDIR /app
-
-# Install dependencies
-COPY package.json yarn.lock* ./
-RUN yarn --frozen-lockfile
 COPY . .
-RUN yarn run after-install
 
-RUN yarn build
-
-# Production image
-FROM base AS runner
-WORKDIR /app
+# install deps
+RUN yarn install --frozen-lockfile
+RUN yarn after-install
 
 ENV NODE_ENV production
-ENV REVERSE_PROXY_UI_PORT 8080
 
-RUN addgroup --system --gid 1001 nodejs && adduser --system --uid 1001 nextjs
-COPY --from=builder /app/out ./out
-
-# Set the correct permission for prerender cache
-RUN mkdir .next && chown nextjs:nodejs .next
+# Next.js collects completely anonymous telemetry data about general usage.
+# Learn more here: https://nextjs.org/telemetry
+# Uncomment the following line in case you want to disable telemetry during the build.
+ENV NEXT_TELEMETRY_DISABLED 1
 
-USER nextjs
+EXPOSE 3000
 
-EXPOSE ${REVERSE_PROXY_UI_PORT}
+ENV PORT 3000
 
-CMD npx -y serve out -p ${REVERSE_PROXY_UI_PORT}
+CMD ["yarn", "static-serve"]

cypress/e2e/pages/create_wallet.pages.js

@@ -1,4 +1,5 @@
 import * as constants from '../../support/constants'
+import * as main from '../pages/main.page'
 
 const welcomeLoginScreen = '[data-testid="welcome-login"]'
 const expandMoreIcon = 'svg[data-testid="ExpandMoreIcon"]'
@@ -11,12 +12,64 @@ export const removeOwnerBtn = 'button[aria-label="Remove owner"]'
 const connectingContainer = 'div[class*="connecting-container"]'
 const createNewSafeBtn = 'span[data-track="create-safe: Continue to creation"]'
 const connectWalletBtn = 'Connect wallet'
-
+const googleConnectBtn = '[data-testid="google-connect-btn"]'
+const googleSignedinBtn = '[data-testid="signed-in-account-btn"]'
+const googleAccountInfoHeader = '[data-testid="open-account-center"]'
+const reviewStepOwnerInfo = '[data-testid="review-step-owner-info"]'
+const reviewStepNextBtn = '[data-testid="review-step-next-btn"]'
+const safeCreationStatusInfo = '[data-testid="safe-status-info"]'
+const startUsingSafeBtn = '[data-testid="start-using-safe-btn"]'
+const sponsorIcon = '[data-testid="sponsor-icon"]'
+const networkFeeSection = '[data-tetid="network-fee-section"]'
+
+const sponsorStr = 'Your account is sponsored by Goerli'
+const safeCreationProcessing = 'Transaction is being executed'
+const safeCreationComplete = 'Your Safe Account is being indexed'
 const changeNetworkWarningStr = 'Change your wallet network'
 const safeAccountSetupStr = 'Safe Account setup'
 const policy1_2 = '1/1 policy'
 export const walletName = 'test1-sepolia-safe'
 export const defaltSepoliaPlaceholder = 'Sepolia Safe'
+const welcomeToSafeStr = 'Welcome to Safe'
+
+export function verifySafeIsBeingCreated() {
+  cy.get(safeCreationStatusInfo).should('have.text', safeCreationProcessing)
+}
+
+export function verifySafeCreationIsComplete() {
+  cy.get(safeCreationStatusInfo).should('exist').and('have.text', safeCreationComplete)
+  cy.get(startUsingSafeBtn).should('exist').click()
+  cy.get(welcomeToSafeStr).should('exist')
+}
+
+export function clickOnReviewStepNextBtn() {
+  cy.get(reviewStepNextBtn).click()
+}
+export function verifyOwnerInfoIsPresent() {
+  return cy.get(reviewStepOwnerInfo).shoul('exist')
+}
+
+export function verifySponsorMessageIsPresent() {
+  main.verifyElementsExist([sponsorIcon, networkFeeSection])
+  // Goerli is generated
+  cy.get(networkFeeSection).contains(sponsorStr).should('exist')
+}
+
+export function verifyGoogleConnectBtnIsDisabled() {
+  cy.get(googleConnectBtn).should('be.disabled')
+}
+
+export function verifyGoogleConnectBtnIsEnabled() {
+  cy.get(googleConnectBtn).should('not.be.disabled')
+}
+
+export function verifyGoogleSignin() {
+  return cy.get(googleSignedinBtn).should('exist')
+}
+
+export function verifyGoogleAccountInfoInHeader() {
+  return cy.get(googleAccountInfoHeader).should('exist')
+}
 
 export function verifyPolicy1_1() {
   cy.contains(policy1_2).should('exist')

cypress/e2e/pages/main.page.js

@@ -1,8 +1,12 @@
 import * as constants from '../../support/constants'
 
 const acceptSelection = 'Accept selection'
+const executeStr = 'Execute'
 export const modalDialogCloseBtn = '[data-testid="modal-dialog-close-btn"]'
 
+export function clickOnExecuteBtn() {
+  cy.get('button').contains(executeStr).click()
+}
 export function clickOnSideMenuItem(item) {
   cy.get('p').contains(item).click()
 }

cypress/e2e/pages/navigation.page.js

@@ -0,0 +1,5 @@
+export const sideNavSettingsIcon = '[data-testid="settings-nav-icon"]'
+
+export function clickOnSideNavigation(option) {
+  cy.get(option).should('exist').click()
+}

cypress/e2e/pages/owners.pages.js

@@ -20,6 +20,7 @@ const thresholdOption = 'li[role="option"]'
 const existingOwnerAddressInput = (index) => `input[name="owners.${index}.address"]`
 const existingOwnerNameInput = (index) => `input[name="owners.${index}.name"]`
 const singleOwnerNameInput = 'input[name="name"]'
+const finishTransactionBtn = '[data-testid="finish-transaction-btn"]'
 
 const disconnectBtnStr = 'Disconnect'
 const notConnectedStatus = 'Connect'
@@ -31,11 +32,16 @@ const backbtnStr = 'Back'
 const removeOwnerStr = 'Remove owner'
 const selectedOwnerStr = 'Selected owner'
 const addNewOwnerStr = 'Add new owner'
+const processedTransactionStr = 'Transaction was successful'
 
 export const safeAccountNonceStr = 'Safe Account nonce'
 export const nonOwnerErrorMsg = 'Your connected wallet is not an owner of this Safe Account'
 export const disconnectedUserErrorMsg = 'Please connect your wallet'
 
+export function verifyOwnerTransactionComplted() {
+  cy.get(processedTransactionStr).should('exist')
+  cy.get(finishTransactionBtn).should('exist')
+}
 export function verifyNumberOfOwners(count) {
   const indices = Array.from({ length: count }, (_, index) => index)
   const names = indices.map(existingOwnerNameInput)

cypress/e2e/pages/safeapps.pages.js

@@ -7,6 +7,7 @@ export const contractMethodIndex = '[name="contractMethodIndex"]'
 export const saveToLibraryBtn = 'button[title="Save to Library"]'
 export const downloadBatchBtn = 'button[title="Download batch"]'
 export const deleteBatchBtn = 'button[title="Delete Batch"]'
+const appModal = '[data-testid="app-info-modal"]'
 
 const addBtnStr = /add/i
 const noAppsStr = /no Safe Apps found/i
@@ -208,9 +209,16 @@ function verifyDisclaimerIsVisible() {
 }
 
 export function clickOnContinueBtn() {
+  cy.get(appModal).should('exist')
   return cy.findByRole('button', { name: continueBtnStr }).click().wait(1000)
 }
 
+export function checkLocalStorage() {
+  clickOnContinueBtn().should(() => {
+    expect(window.localStorage.getItem(constants.BROWSER_PERMISSIONS_KEY)).to.eq(localStorageItem)
+  })
+}
+
 export function verifyCameraCheckBoxExists() {
   cy.findByRole('checkbox', { name: cameraCheckBoxStr }).should('exist')
 }

cypress/e2e/safe-apps/browser_permissions.cy.js

@@ -30,8 +30,6 @@ describe('Browser permissions tests', () => {
     safeapps.verifyWarningDefaultAppMsgIsDisplayed()
     safeapps.verifyCameraCheckBoxExists()
     safeapps.clickOnContinueBtn()
-    safeapps.clickOnContinueBtn().should(() => {
-      expect(window.localStorage.getItem(constants.BROWSER_PERMISSIONS_KEY)).to.eq(safeapps.localStorageItem)
-    })
+    safeapps.checkLocalStorage()
   })
 })

cypress/e2e/smoke/create_safe_google.cy.js

@@ -0,0 +1,50 @@
+import * as constants from '../../support/constants'
+import * as main from '../pages/main.page'
+import * as createwallet from '../pages/create_wallet.pages'
+import * as owner from '../pages/owners.pages'
+import * as navigation from '../pages/navigation.page'
+
+describe('Safe creation Google tests', () => {
+  beforeEach(() => {
+    cy.visit(constants.welcomeUrl + '?chain=gor')
+    cy.clearLocalStorage()
+    main.acceptCookies()
+    // TODO: Need credentials to finish API Google login
+    // createwallet.loginGoogleAPI()
+  })
+
+  it('Verify that "Connect with Google" option is disabled for the networks without Relay on the Welcome page', () => {
+    owner.clickOnWalletExpandMoreIcon()
+    owner.clickOnDisconnectBtn()
+    createwallet.selectNetwork(constants.networks.polygon)
+    createwallet.verifyGoogleConnectBtnIsDisabled()
+  })
+
+  it.skip('Verify a successful connection with google', () => {
+    createwallet.verifyGoogleSignin()
+  })
+
+  it.skip('Verify Google account info in the header after account connection', () => {
+    createwallet.verifyGoogleAccountInfoInHeader()
+  })
+
+  it.skip('Verify a successful safe creation with a Google account', { defaultCommandTimeout: 90000 }, () => {
+    createwallet.verifyGoogleSignin().click()
+    createwallet.verifyOwnerInfoIsPresent()
+    createwallet.clickOnReviewStepNextBtn()
+    createwallet.verifySafeIsBeingCreated()
+    createwallet.verifySafeCreationIsComplete()
+  })
+
+  it.skip('Verify a successful transaction creation with Google account', { defaultCommandTimeout: 90000 }, () => {
+    createwallet.verifyGoogleSignin().click()
+    createwallet.clickOnReviewStepNextBtn()
+    createwallet.verifySafeCreationIsComplete()
+    navigation.clickOnSideNavigation(navigation.sideNavSettingsIcon)
+    owner.openAddOwnerWindow()
+    owner.typeOwnerAddress(constants.SEPOLIA_OWNER_2)
+    owner.clickOnNextBtn()
+    main.clickOnExecuteBtn()
+    owner.verifyOwnerTransactionComplted()
+  })
+})

src/components/common/SocialSigner/index.tsx

@@ -114,6 +114,7 @@ export const SocialSigner = ({
         {isSocialLogin && userInfo ? (
           <Track {...CREATE_SAFE_EVENTS.CONTINUE_TO_CREATION}>
             <Button
+              data-testid="signed-in-account-btn"
               variant="outlined"
               sx={{ px: 2, py: 1, borderWidth: '1px !important' }}
               onClick={onLogin}
@@ -148,6 +149,7 @@ export const SocialSigner = ({
         ) : (
           <Track {...MPC_WALLET_EVENTS.CONNECT_GOOGLE} label={isWelcomePage ? 'welcomePage' : 'navBar'}>
             <Button
+              data-testid="google-connect-btn"
               variant="outlined"
               onClick={login}
               size="small"