diff --git a/src/services/safe-wallet-provider/notifications.ts b/src/services/safe-wallet-provider/notifications.ts new file mode 100644 index 0000000000..c57452f856 --- /dev/null +++ b/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.`, + }, + }), +} diff --git a/src/services/safe-wallet-provider/useSafeWalletProvider.tsx b/src/services/safe-wallet-provider/useSafeWalletProvider.tsx index 23bd53b99b..5930a7edb3 100644 --- a/src/services/safe-wallet-provider/useSafeWalletProvider.tsx +++ b/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() + 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) {