Merge branch 'dev' into replace-owner-tests

.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/yarn/action.yml

@@ -13,3 +13,6 @@ runs:
     - name: Yarn install
       shell: bash
       run: yarn install --frozen-lockfile
+    - name: Yarn after install
+      shell: bash
+      run: yarn after-install

.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/e2e/pages/dashboard.pages.js

@@ -45,10 +45,8 @@ export function verifyTxQueueWidget() {
     cy.contains(noTransactionStr).should('not.exist')
 
     // Queued txns
-    cy.contains(
-      `a[href^="/transactions/tx?id=multisig_0x"]`,
-      '13' + 'Send' + '0.00002 GOR' + 'to' + 'gor:0xE297...9665' + '1/1',
-    ).should('exist')
+    cy.contains(`a[href^="/transactions/tx?id=multisig_0x"]`, '13' + 'Send' + '-0.00002 GOR' + '1/1').should('exist')
+
     cy.contains(`a[href="${constants.transactionQueueUrl}${encodeURIComponent(constants.TEST_SAFE)}"]`, viewAllStr)
   })
 }

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/owners.pages.js

@@ -16,12 +16,12 @@ const thresHoldDropDownIcon = 'svg[data-testid="ArrowDropDownIcon"]'
 const thresholdList = 'ul[role="listbox"]'
 
 const disconnectBtnStr = 'Disconnect'
-const notConnectedStatus = 'Not connected'
 const e2eWalletStr = 'E2E Wallet'
 const max50charsLimitStr = 'Maximum 50 symbols'
 const nextBtnStr = 'Next'
 const executeBtnStr = 'Execute'
 const backbtnStr = 'Back'
+const notConnectedStatus = 'Connect'
 
 export const safeAccountNonceStr = 'Safe Account nonce'
 export const nonOwnerErrorMsg = 'Your connected wallet is not an owner of this Safe Account'
@@ -63,7 +63,7 @@ export function clickOnWalletExpandMoreIcon() {
 
 export function clickOnDisconnectBtn() {
   cy.get('button').contains(disconnectBtnStr).click()
-  cy.get('span').contains(notConnectedStatus)
+  cy.get('button').contains(notConnectedStatus)
 }
 
 export function waitForConnectionStatus() {

cypress/e2e/smoke/add_owner.cy.js

@@ -3,6 +3,8 @@ import * as main from '../../e2e/pages/main.page'
 import * as owner from '../pages/owners.pages'
 import * as addressBook from '../pages/address_book.page'
 
+
+// TODO: Need to add tests to testRail
 describe('Adding an owner', () => {
   beforeEach(() => {
     cy.visit(constants.setupUrl + constants.SEPOLIA_TEST_SAFE_1)

cypress/e2e/smoke/import_export_data.cy.js

@@ -20,6 +20,7 @@ describe('Import Export Data', () => {
     file.verifyImportModalData()
     file.clickOnImportBtnDataImportModal()
     file.clickOnImportedSafe(safe)
+    file.clickOnClosePushNotificationsBanner()
   })
 
   it("Verify safe's address book imported data", () => {
@@ -45,6 +46,8 @@ describe('Import Export Data', () => {
   })
 
   it('Verifies data for export in Data tab', () => {
+    file.clickOnShowMoreTabsBtn()
+    file.verifDataTabBtnIsVisible()
     file.clickOnDataTab()
     file.verifyImportModalData()
     file.verifyFileDownload()

cypress/support/e2e.js

@@ -28,5 +28,7 @@ import './safe-apps-commands'
 before(() => {
   cy.on('window:before:load', (window) => {
     window.localStorage.setItem('SAFE_v2__show_terms', false)
+    // So that tests that rely on this feature don't randomly fail
+    window.localStorage.setItem('SAFE_v2__AB_human-readable', true)
   })
 })

next.config.mjs

@@ -1,14 +1,21 @@
 import path from 'path'
 import withBundleAnalyzer from '@next/bundle-analyzer'
-import NextPwa from 'next-pwa'
+import withPWAInit from '@ducanh2912/next-pwa'
 
-const withPWA = NextPwa({
-  disable: process.env.NODE_ENV === 'development',
+const SERVICE_WORKERS_PATH = './src/service-workers'
+
+const withPWA = withPWAInit({
   dest: 'public',
+  workboxOptions: {
+    mode: 'production',
+  },
   reloadOnOnline: false,
   /* Do not precache anything */
   publicExcludes: ['**/*'],
   buildExcludes: [/./],
+  customWorkerSrc: SERVICE_WORKERS_PATH,
+  // Prefer InjectManifest for Web Push
+  swSrc: `${SERVICE_WORKERS_PATH}/index.ts`,
 })
 
 /** @type {import('next').NextConfig} */

package.json

@@ -3,7 +3,7 @@
   "homepage": "https://github.com/safe-global/safe-wallet-web",
   "license": "GPL-3.0",
   "type": "module",
-  "version": "1.18.0",
+  "version": "1.19.0",
   "scripts": {
     "dev": "next dev",
     "start": "next dev",
@@ -19,7 +19,8 @@
     "routes": "node scripts/generate-routes.js > src/config/routes.ts && prettier -w src/config/routes.ts && cat src/config/routes.ts",
     "css-vars": "ts-node-esm ./scripts/css-vars.ts > ./src/styles/vars.css && prettier -w src/styles/vars.css",
     "generate-types": "typechain --target ethers-v5 --out-dir src/types/contracts ./node_modules/@safe-global/safe-deployments/dist/assets/**/*.json ./node_modules/@safe-global/safe-modules-deployments/dist/assets/**/*.json ./node_modules/@openzeppelin/contracts/build/contracts/ERC20.json ./node_modules/@openzeppelin/contracts/build/contracts/ERC721.json",
-    "postinstall": "yarn generate-types && yarn css-vars",
+    "after-install": "yarn patch-package && yarn generate-types && yarn css-vars",
+    "postinstall": "yarn after-install",
     "analyze": "cross-env ANALYZE=true yarn build",
     "cypress:open": "cross-env TZ=UTC cypress open --e2e",
     "cypress:canary": "cross-env TZ=UTC cypress open --e2e -b chrome:canary",
@@ -39,6 +40,7 @@
   },
   "dependencies": {
     "@date-io/date-fns": "^2.15.0",
+    "@ducanh2912/next-pwa": "^9.5.0",
     "@emotion/cache": "^11.10.1",
     "@emotion/react": "^11.10.0",
     "@emotion/server": "^11.10.0",
@@ -65,17 +67,18 @@
     "@web3-onboard/ledger": "2.3.2",
     "@web3-onboard/trezor": "^2.4.2",
     "@web3-onboard/walletconnect": "^2.4.5",
+    "blo": "^1.1.1",
     "classnames": "^2.3.1",
     "date-fns": "^2.29.2",
-    "ethereum-blockies-base64": "^1.0.2",
     "ethers": "5.7.2",
     "exponential-backoff": "^3.1.0",
+    "firebase": "^10.3.1",
     "framer-motion": "^10.13.1",
     "fuse.js": "^6.6.2",
+    "idb-keyval": "^6.2.1",
     "js-cookie": "^3.0.1",
     "lodash": "^4.17.21",
     "next": "^13.2.0",
-    "next-pwa": "^5.6.0",
     "papaparse": "^5.3.2",
     "qrcode.react": "^3.1.0",
     "react": "18.2.0",
@@ -118,14 +121,17 @@
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-unused-imports": "^2.0.0",
+    "fake-indexeddb": "^4.0.2",
     "jest": "^29.6.2",
     "jest-environment-jsdom": "^29.6.2",
+    "patch-package": "^8.0.0",
     "pre-commit": "^1.2.2",
     "prettier": "^2.7.0",
     "ts-node": "^10.8.2",
     "ts-prune": "^0.10.3",
     "typechain": "^8.0.0",
     "typescript": "4.9.4",
-    "typescript-plugin-css-modules": "^4.2.2"
+    "typescript-plugin-css-modules": "^4.2.2",
+    "webpack": "^5.88.2"
   }
 }