Merge with dev

.env.example

@@ -32,5 +32,12 @@ NEXT_PUBLIC_CYPRESS_MNEMONIC=
 NEXT_PUBLIC_SAFE_GELATO_RELAY_SERVICE_URL_PRODUCTION=
 NEXT_PUBLIC_SAFE_GELATO_RELAY_SERVICE_URL_STAGING=
 
+# Firebase Cloud Messaging
+NEXT_PUBLIC_FIREBASE_OPTIONS_PRODUCTION=
+NEXT_PUBLIC_FIREBASE_VAPID_KEY_PRODUCTION=
+
+NEXT_PUBLIC_FIREBASE_OPTIONS_STAGING=
+NEXT_PUBLIC_FIREBASE_VAPID_KEY_STAGING=
+
 # Redefine
 NEXT_PUBLIC_REDEFINE_API=

.github/workflows/build/action.yml

@@ -43,3 +43,7 @@ runs:
         NEXT_PUBLIC_SAFE_RELAY_SERVICE_URL_STAGING: ${{ fromJSON(inputs.secrets).NEXT_PUBLIC_SAFE_GELATO_RELAY_SERVICE_URL_STAGING }}
         NEXT_PUBLIC_IS_OFFICIAL_HOST: ${{ fromJSON(inputs.secrets).NEXT_PUBLIC_IS_OFFICIAL_HOST }}
         NEXT_PUBLIC_REDEFINE_API: ${{ fromJSON(inputs.secrets).NEXT_PUBLIC_REDEFINE_API }}
+        NEXT_PUBLIC_FIREBASE_OPTIONS_PRODUCTION: ${{ fromJSON(inputs.secrets).NEXT_PUBLIC_FIREBASE_OPTIONS_PRODUCTION }}
+        NEXT_PUBLIC_FIREBASE_OPTIONS_STAGING: ${{ fromJSON(inputs.secrets).NEXT_PUBLIC_FIREBASE_OPTIONS_STAGING }}
+        NEXT_PUBLIC_FIREBASE_VAPID_KEY_PRODUCTION: ${{ fromJSON(inputs.secrets).NEXT_PUBLIC_FIREBASE_VAPID_KEY_PRODUCTION }}
+        NEXT_PUBLIC_FIREBASE_VAPID_KEY_STAGING: ${{ fromJSON(inputs.secrets).NEXT_PUBLIC_FIREBASE_VAPID_KEY_STAGING }}

.github/workflows/deploy.yml

@@ -67,9 +67,9 @@ jobs:
       # Extract branch name
       - name: Extract branch name
         shell: bash
-        ## Cut off "refs/heads/" and only allow alphanumeric characters,
+        ## Cut off "refs/heads/", only allow alphanumeric characters and convert to lower case,
         ## e.g. "refs/heads/features/hello-1.2.0" -> "features_hello_1_2_0"
-        run: echo "branch=$(echo $GITHUB_HEAD_REF | sed 's/refs\/heads\///' | sed 's/[^a-z0-9]/_/ig')" >> $GITHUB_OUTPUT
+        run: echo "branch=$(echo $GITHUB_HEAD_REF | sed 's/refs\/heads\///' | sed 's/[^a-z0-9]/_/ig' | sed 's/[A-Z]/\L&/g')" >> $GITHUB_OUTPUT
         id: extract_branch
 
       # Deploy to S3

.github/workflows/e2e.yml

@@ -9,7 +9,7 @@ concurrency:
 
 jobs:
   e2e:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-20.04
     name: Smoke E2E tests
     steps:
       - uses: actions/checkout@v3

.gitignore

@@ -49,6 +49,7 @@ yalc.lock
 
 /public/sw.js
 /public/sw.js.map
+/public/worker-*.js
 /public/workbox-*.js
 /public/workbox-*.js.map
 /public/fallback*

README.md

@@ -42,6 +42,10 @@ Here's the list of all the required and optional variables:
 | `NEXT_PUBLIC_SAFE_GELATO_RELAY_SERVICE_URL_STAGING`    | optional     | Relay URL on staging
 | `NEXT_PUBLIC_IS_OFFICIAL_HOST`                         | optional     | Whether it's the official distribution of the app, or a fork; has legal implications. Set to true only if you also update the legal pages like Imprint and Terms of use
 | `NEXT_PUBLIC_REDEFINE_API`                             | optional     | Redefine API base URL
+| `NEXT_PUBLIC_FIREBASE_OPTIONS_PRODUCTION`              | optional     | Firebase Cloud Messaging (FCM) `initializeApp` options on production
+| `NEXT_PUBLIC_FIREBASE_VAPID_KEY_PRODUCTION`            | optional     | FCM vapid key on production
+| `NEXT_PUBLIC_FIREBASE_OPTIONS_STAGING`                 | optional     | FCM `initializeApp` options on staging
+| `NEXT_PUBLIC_FIREBASE_VAPID_KEY_STAGING`               | optional     | FCM vapid key on staging
 
 If you don't provide some of the optional vars, the corresponding features will be disabled in the UI.
 

cypress.config.js

@@ -11,6 +11,7 @@ export default defineConfig({
 
   e2e: {
     baseUrl: 'http://localhost:3000',
+    testIsolation: false,
   },
 
   chromeWebSecurity: false,

cypress/e2e/pages/address_book.page.js

@@ -2,6 +2,8 @@ export const acceptSelection = 'Accept selection'
 export const addressBook = 'Address book'
 const createEntryBtn = 'Create entry'
 
+const beameriFrameContainer = '#beamerOverlay .iframeCointaner'
+const beamerInput = 'input[id="beamer"]'
 const nameInput = 'input[name="name"]'
 const addressInput = 'input[name="address"]'
 const saveBtn = 'Save'
@@ -13,6 +15,8 @@ const exportFileModalBtnSection = '.MuiDialogActions-root'
 const exportFileModalExportBtn = 'Export'
 const importBtn = 'Import'
 const exportBtn = 'Export'
+const whatsNewBtnStr = "What's new"
+const beamrCookiesStr = 'accept the "Beamer" cookies'
 
 export function clickOnImportFileBtn() {
   cy.contains(importBtn).click()
@@ -91,3 +95,20 @@ export function clickDeleteEntryModalDeleteButton() {
 export function verifyEditedNameNotExists(name) {
   cy.get(name).should('not.exist')
 }
+
+export function clickOnWhatsNewBtn(force = false) {
+  cy.contains(whatsNewBtnStr).click({ force: force })
+}
+
+export function acceptBeamerCookies() {
+  cy.contains(beamrCookiesStr)
+}
+
+export function verifyBeamerIsChecked() {
+  cy.get(beamerInput).should('be.checked')
+}
+
+export function verifyBeameriFrameExists() {
+  cy.wait(1000)
+  cy.get(beameriFrameContainer).should('exist')
+}

cypress/e2e/pages/balances.pages.js

@@ -7,6 +7,7 @@ const hideAssetBtn = 'button[aria-label="Hide asset"]'
 const hiddeTokensBtn = '[data-testid="toggle-hidden-assets"]'
 const hiddenTokenCheckbox = 'input[type="checkbox"]'
 const paginationPageList = 'ul[role="listbox"]'
+const currencyDropDown = 'div[id="currency"]'
 const hiddenTokenSaveBtn = 'Save'
 const hideTokenDefaultString = 'Hide tokens'
 

cypress/e2e/pages/batches.pages.js

@@ -23,6 +23,7 @@ const tokenAddressInput = 'input[name="tokenAddress"]'
 const listBox = 'ul[role="listbox"]'
 const amountInput = '[name="amount"]'
 const nonceInput = 'input[name="nonce"]'
+const executeOptionsContainer = 'div[role="radiogroup"]'
 
 export function addToBatch(EOA, currentNonce, amount, verify = false) {
   fillTransactionData(EOA, amount)
@@ -49,8 +50,12 @@ function setNonceAndProceed(currentNonce) {
 }
 
 function executeTransaction() {
-  cy.contains(yesExecuteString, { timeout: 4000 }).click()
-  cy.contains(addToBatchBtn).should('not.exist')
+  cy.waitForSelector(() => {
+    return cy.get(executeOptionsContainer).then(() => {
+      cy.contains(yesExecuteString, { timeout: 4000 }).click()
+      cy.contains(addToBatchBtn).should('not.exist')
+    })
+  })
 }
 
 function addToBatchButton() {

cypress/e2e/pages/create_tx.pages.js

@@ -8,6 +8,7 @@ const amountInput = 'input[name="amount"]'
 const nonceInput = 'input[name="nonce"]'
 const gasLimitInput = '[name="gasLimit"]'
 const rotateLeftIcon = '[data-testid="RotateLeftIcon"]'
+const transactionItemExpandable = 'div[id^="transfer"]'
 
 const viewTransactionBtn = 'View transaction'
 const transactionDetailsTitle = 'Transaction details'
@@ -26,6 +27,8 @@ const editBtnStr = 'Edit'
 const executionParamsStr = 'Execution parameters'
 const noLaterStr = 'No, later'
 const signBtnStr = 'Sign'
+const expandAllBtnStr = 'Expand all'
+const collapseAllBtnStr = 'Collapse all'
 
 export function clickOnNewtransactionBtn() {
   // Assert that "New transaction" button is visible
@@ -90,7 +93,7 @@ export function changeNonce(value) {
 }
 
 export function verifyConfirmTransactionData() {
-  cy.contains(yesStr).should('exist')
+  cy.contains(yesStr).should('exist').click()
   cy.contains(estimatedFeeStr).should('exist')
 
   // Asserting the sponsored info is present
@@ -130,7 +133,7 @@ export function clickOnSignTransactionBtn() {
 }
 
 export function waitForProposeRequest() {
-  cy.intercept('POST', constants.proposeEndPoint).as('ProposeTx')
+  cy.intercept('POST', constants.proposeEndpoint).as('ProposeTx')
   cy.wait('@ProposeTx')
 }
 
@@ -149,3 +152,40 @@ export function verifyQueueLabel() {
 export function verifyTransactionSummary(sendValue) {
   cy.contains(TransactionSummary + `${sendValue} ${constants.tokenAbbreviation.gor}`).should('exist')
 }
+
+export function verifyDateExists(date) {
+  cy.contains('div', date).should('exist')
+}
+
+export function verifyImageAltTxt(index, text) {
+  cy.get('img').eq(index).should('have.attr', 'alt', text).should('be.visible')
+}
+
+export function verifyStatus(status) {
+  cy.contains('div', status).should('exist')
+}
+
+export function verifyTransactionStrExists(str) {
+  cy.contains(str).should('exist')
+}
+
+export function verifyTransactionStrNotVible(str) {
+  cy.contains(str).should('not.be.visible')
+}
+
+export function clickOnTransactionExpandableItem(name, actions) {
+  cy.contains('div', name)
+    .next()
+    .click()
+    .within(() => {
+      actions()
+    })
+}
+
+export function clickOnExpandAllBtn() {
+  cy.contains(expandAllBtnStr).click()
+}
+
+export function clickOnCollapseAllBtn() {
+  cy.contains(collapseAllBtnStr).click()
+}

cypress/e2e/pages/import_export.pages.js

@@ -1,12 +1,14 @@
 import { format } from 'date-fns'
 const path = require('path')
 
+const enablePushNotificationsStr = 'Enable push notifications'
 const addressBookBtnStr = 'Address book'
 const dataImportModalStr = 'Data import'
 const appsBtnStr = 'Apps'
 const bookmarkedAppsBtnStr = 'Bookmarked apps'
 const settingsBtnStr = 'Settings'
 const appearenceTabStr = 'Appearance'
+const showMoreTabsBtn = '[data-testid="KeyboardArrowRightIcon"]'
 const dataTabStr = 'Data'
 const tab = 'div[role="tablist"] a'
 export const prependChainPrefixStr = 'Prepend chain prefix to addresses'
@@ -41,6 +43,12 @@ export function clickOnImportedSafe(safe) {
   cy.contains(safe).click()
 }
 
+export function clickOnClosePushNotificationsBanner() {
+  cy.waitForSelector(() => {
+    return cy.get('h6').contains(enablePushNotificationsStr).siblings('.MuiButtonBase-root').click({ force: true })
+  })
+}
+
 export function clickOnAddressBookBtn() {
   cy.contains(addressBookBtnStr).click()
 }
@@ -82,6 +90,13 @@ export function clickOnAppearenceBtn() {
   cy.contains(tab, appearenceTabStr).click()
 }
 
+export function clickOnShowMoreTabsBtn() {
+  cy.get(showMoreTabsBtn).click()
+}
+
+export function verifDataTabBtnIsVisible() {
+  cy.contains(tab, dataTabStr).should('be.visible')
+}
 export function clickOnDataTab() {
   cy.contains(tab, dataTabStr).click()
 }

cypress/e2e/pages/load_safe.pages.js

@@ -29,6 +29,11 @@ export function selectGoerli() {
   cy.contains('span', constants.networks.goerli)
 }
 
+export function selectPolygon() {
+  cy.get('ul li').contains(constants.networks.polygon).click()
+  cy.contains('span', constants.networks.polygon)
+}
+
 export function verifyNameInputHasPlceholder() {
   cy.get(nameInput).should('have.attr', 'placeholder').should('match', constants.goerlySafeName)
 }

cypress/e2e/pages/main.page.js

@@ -15,3 +15,13 @@ export function verifyGoerliWalletHeader() {
 export function verifyHomeSafeUrl(safe) {
   cy.location('href', { timeout: 10000 }).should('include', constants.homeUrl + safe)
 }
+
+export function checkTextsExistWithinElement(element, texts) {
+  texts.forEach((text) => {
+    cy.wrap(element).findByText(text).should('exist')
+  })
+}
+
+export function verifyCheckboxeState(element, index, state) {
+  cy.get(element).eq(index).should(state)
+}