feat: show notifications for WC requests (#2638)

* feat: show notifications for WC requests

* refactor: move notification logic to own file

src/services/safe-wallet-provider/notifications.ts

@@ -0,0 +1,39 @@
+import type { AppInfo } from '.'
+
+export const showNotification = (title: string, options?: NotificationOptions) => {
+  if (Notification.permission !== 'granted' || document.hasFocus()) {
+    return
+  }
+
+  const notification = new Notification(title, {
+    icon: '/images/safe-logo-green.png',
+    ...options,
+  })
+
+  notification.onclick = () => {
+    window.focus()
+    notification.close()
+  }
+
+  setTimeout(() => {
+    notification.close()
+  }, 5_000)
+}
+
+export const NotificationMessages: Record<
+  string,
+  (appInfo: AppInfo) => { title: string; options: NotificationOptions }
+> = {
+  SIGNATURE_REQUEST: (appInfo: AppInfo) => ({
+    title: 'Signature request',
+    options: {
+      body: `${appInfo.name} wants you to sign a message. Open the Safe{Wallet} to continue.`,
+    },
+  }),
+  TRANSACTION_REQUEST: (appInfo: AppInfo) => ({
+    title: 'Transaction request',
+    options: {
+      body: `${appInfo.name} wants to submit a transaction. Open the Safe{Wallet} to continue.`,
+    },
+  }),
+}

src/services/safe-wallet-provider/useSafeWalletProvider.tsx

@@ -16,6 +16,7 @@ import { getTransactionDetails } from '@safe-global/safe-gateway-typescript-sdk'
 import { getAddress } from 'ethers/lib/utils'
 import { AppRoutes } from '@/config/routes'
 import useChains from '@/hooks/useChains'
+import { NotificationMessages, showNotification } from './notifications'
 
 export const _useTxFlowApi = (chainId: string, safeAddress: string): WalletSDK | undefined => {
   const { setTxFlow } = useContext(TxModalContext)
@@ -39,6 +40,9 @@ export const _useTxFlowApi = (chainId: string, safeAddress: string): WalletSDK |
       const id = Math.random().toString(36).slice(2)
       setTxFlow(<SignMessageFlow logoUri={appInfo.iconUrl} name={appInfo.name} message={message} requestId={id} />)
 
+      const { title, options } = NotificationMessages.SIGNATURE_REQUEST(appInfo)
+      showNotification(title, options)
+
       return new Promise((resolve) => {
         const unsubscribe = safeMsgSubscribe(SafeMsgEvent.SIGNATURE_PREPARED, ({ requestId, signature }) => {
           if (requestId === id) {
@@ -85,6 +89,9 @@ export const _useTxFlowApi = (chainId: string, safeAddress: string): WalletSDK |
           />,
         )
 
+        const { title, options } = NotificationMessages.TRANSACTION_REQUEST(appInfo)
+        showNotification(title, options)
+
         return new Promise((resolve) => {
           const unsubscribe = txSubscribe(TxEvent.SAFE_APPS_REQUEST, async ({ safeAppRequestId, safeTxHash, txId }) => {
             if (safeAppRequestId === id) {