feat: add push notifications

.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 }}

.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.
 

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

@@ -19,7 +19,7 @@
     "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",
+    "postinstall": "yarn patch-package && yarn generate-types && yarn css-vars",
     "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 +39,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",
@@ -52,7 +53,7 @@
     "@safe-global/safe-core-sdk-utils": "^1.7.4",
     "@safe-global/safe-deployments": "1.25.0",
     "@safe-global/safe-ethers-lib": "^1.9.4",
-    "@safe-global/safe-gateway-typescript-sdk": "^3.9.0",
+    "@safe-global/safe-gateway-typescript-sdk": "^3.12.0",
     "@safe-global/safe-modules-deployments": "^1.0.0",
     "@safe-global/safe-react-components": "^2.0.6",
     "@sentry/react": "^7.28.1",
@@ -70,12 +71,13 @@
     "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 +120,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"
   }
 }

src/components/batch/BatchIndicator/BatchTooltip.tsx

@@ -1,28 +1,9 @@
 import { type ReactElement, useEffect, useState } from 'react'
 import { Box, SvgIcon } from '@mui/material'
-import Tooltip, { type TooltipProps, tooltipClasses } from '@mui/material/Tooltip'
-import { styled } from '@mui/material/styles'
+
 import SuccessIcon from '@/public/images/common/success.svg'
 import { TxEvent, txSubscribe } from '@/services/tx/txEvents'
-
-const StyledTooltip = styled(({ className, ...props }: TooltipProps) => (
-  <Tooltip {...props} classes={{ popper: className }} />
-))(({ theme }) => ({
-  [`& .${tooltipClasses.tooltip}`]: {
-    backgroundColor: theme.palette.background.paper,
-    color: theme.palette.text.primary,
-    fontSize: theme.typography.pxToRem(16),
-    fontWeight: 700,
-    border: `1px solid ${theme.palette.border.light}`,
-    marginTop: theme.spacing(2) + ' !important',
-  },
-  [`& .${tooltipClasses.arrow}`]: {
-    color: theme.palette.background.paper,
-  },
-  [`& .${tooltipClasses.arrow}:before`]: {
-    border: `1px solid ${theme.palette.border.light}`,
-  },
-}))
+import { CustomTooltip } from '@/components/common/CustomTooltip'
 
 const BatchTooltip = ({ children }: { children: ReactElement }) => {
   const [showTooltip, setShowTooltip] = useState<boolean>(false)
@@ -40,10 +21,9 @@ const BatchTooltip = ({ children }: { children: ReactElement }) => {
   }, [])
 
   return (
-    <StyledTooltip
+    <CustomTooltip
       open={showTooltip}
       onClose={() => setShowTooltip(false)}
-      arrow
       title={
         <Box display="flex" flexDirection="column" alignItems="center" p={2} gap={2}>
           <Box fontSize="53px">
@@ -54,7 +34,7 @@ const BatchTooltip = ({ children }: { children: ReactElement }) => {
       }
     >
       <div>{children}</div>
-    </StyledTooltip>
+    </CustomTooltip>
   )
 }
 

src/components/common/CustomTooltip/index.tsx

@@ -0,0 +1,22 @@
+import { styled } from '@mui/material/styles'
+import Tooltip, { tooltipClasses } from '@mui/material/Tooltip'
+import { type TooltipProps } from '@mui/material/Tooltip'
+
+export const CustomTooltip = styled(({ className, ...props }: TooltipProps) => (
+  <Tooltip {...props} classes={{ popper: className }} arrow />
+))(({ theme }) => ({
+  [`& .${tooltipClasses.tooltip}`]: {
+    backgroundColor: theme.palette.background.paper,
+    color: theme.palette.text.primary,
+    fontSize: theme.typography.pxToRem(16),
+    fontWeight: 700,
+    border: `1px solid ${theme.palette.border.light}`,
+    marginTop: theme.spacing(2) + ' !important',
+  },
+  [`& .${tooltipClasses.arrow}`]: {
+    color: theme.palette.background.paper,
+  },
+  [`& .${tooltipClasses.arrow}:before`]: {
+    border: `1px solid ${theme.palette.border.light}`,
+  },
+}))

src/components/common/Header/index.tsx

@@ -15,6 +15,7 @@ import SafeLogo from '@/public/images/logo.svg'
 import Link from 'next/link'
 import useSafeAddress from '@/hooks/useSafeAddress'
 import BatchIndicator from '@/components/batch/BatchIndicator'
+import { PushNotificationsBanner } from '@/components/settings/PushNotifications/PushNotificationsBanner'
 
 type HeaderProps = {
   onMenuToggle?: Dispatch<SetStateAction<boolean>>
@@ -71,7 +72,9 @@ const Header = ({ onMenuToggle, onBatchToggle }: HeaderProps): ReactElement => {
       )}
 
       <div className={css.element}>
-        <NotificationCenter />
+        <PushNotificationsBanner>
+          <NotificationCenter />
+        </PushNotificationsBanner>
       </div>
 
       <div className={classnames(css.element, css.connectWallet)}>