Add browser notifications for wallet transactions

.changeset/amber-tulips-sprint.md

@@ -0,0 +1,5 @@
+---
+'wallet': patch
+---
+
+add browser notifications for wallet transactions

apps/wallet/src/entrypoints/background.ts

@@ -4,6 +4,7 @@
 // eslint-disable-next-line @typescript-eslint/triple-slash-reference
 /// <reference path="../../.wxt/wxt.d.ts" />
 
+import { storage } from '@wxt-dev/storage'
 import { Buffer } from 'buffer'
 import { defineBackground } from 'wxt/sandbox'
 
@@ -14,6 +15,12 @@ import { INACTIVITY_ALARM_NAME, lock } from '../data/session'
 import { getWalletCore } from '../data/wallet'
 import { RpcMessage } from '../lib/messages'
 import { handleRpcRequest } from '../lib/rpc-handler'
+import { PENDING_TXS_KEY } from '../lib/storage-keys'
+import {
+  checkPendingTransactions,
+  startTxMonitor,
+  TX_MONITOR_ALARM,
+} from '../lib/tx-monitor'
 
 export default defineBackground({
   type: 'module',
@@ -41,6 +48,18 @@ export default defineBackground({
 
     chrome.alarms.onAlarm.addListener(alarm => {
       if (alarm.name === INACTIVITY_ALARM_NAME) lock()
+      if (alarm.name === TX_MONITOR_ALARM) {
+        void checkPendingTransactions().catch(error => {
+          console.error('Failed to check pending transactions', error)
+        })
+      }
+    })
+
+    // Start tx monitor alarm when pending transactions are added
+    storage.watch<unknown[]>(PENDING_TXS_KEY, pendingTxs => {
+      if (pendingTxs && pendingTxs.length > 0) {
+        void startTxMonitor()
+      }
     })
 
     chrome.runtime.onInstalled.addListener(() => {

apps/wallet/src/hooks/use-notification-permission-check.ts

@@ -0,0 +1,22 @@
+import { useEffect } from 'react'
+
+import { useToast } from '@status-im/components'
+import { storage } from '@wxt-dev/storage'
+
+import { NOTIFICATION_PROMPTED_KEY } from '../lib/storage-keys'
+
+export function useNotificationPermissionCheck() {
+  const toast = useToast()
+
+  useEffect(() => {
+    storage.getItem<boolean>(NOTIFICATION_PROMPTED_KEY).then(prompted => {
+      if (prompted) return
+
+      storage.setItem(NOTIFICATION_PROMPTED_KEY, true)
+      toast.positive(
+        'To receive transaction alerts, make sure notifications are enabled for this browser in System Settings.',
+      )
+    })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+}

apps/wallet/src/lib/notifications.ts

@@ -0,0 +1,58 @@
+import { storage } from '@wxt-dev/storage'
+
+import { NOTIFICATIONS_ENABLED_KEY } from './storage-keys'
+
+async function isEnabled(): Promise<boolean> {
+  try {
+    return (await storage.getItem<boolean>(NOTIFICATIONS_ENABLED_KEY)) ?? true
+  } catch (error) {
+    console.warn('Failed to read notification setting', error)
+    return true
+  }
+}
+
+async function createNotification(
+  title: string,
+  message: string,
+): Promise<boolean> {
+  try {
+    if (!(await isEnabled())) return false
+    chrome.notifications.create({
+      type: 'basic',
+      iconUrl: chrome.runtime.getURL('icons/128.png'),
+      title,
+      message,
+    })
+    return true
+  } catch (error) {
+    console.warn('Failed to create notification', error)
+    return false
+  }
+}
+
+export async function notifyTransactionSent(
+  amount: string,
+  asset: string,
+): Promise<boolean> {
+  return createNotification('Transaction Sent', `Sending ${amount} ${asset}…`)
+}
+
+export async function notifyTransactionConfirmed(
+  amount: string,
+  asset: string,
+): Promise<boolean> {
+  return createNotification(
+    'Transaction Confirmed',
+    `${amount} ${asset} sent successfully`,
+  )
+}
+
+export async function notifyTransactionFailed(
+  amount: string,
+  asset: string,
+): Promise<boolean> {
+  return createNotification(
+    'Transaction Failed',
+    `${amount} ${asset} transaction failed`,
+  )
+}

apps/wallet/src/lib/storage-keys.ts

@@ -0,0 +1,5 @@
+export const NOTIFICATIONS_ENABLED_KEY = 'local:notifications:enabled' as const
+export const TX_NOTIFIED_KEY = 'local:tx-monitor:notified' as const
+export const PENDING_TXS_KEY =
+  'local:pending-transactions:transactions' as const
+export const NOTIFICATION_PROMPTED_KEY = 'local:notifications:prompted' as const

apps/wallet/src/lib/tx-helpers.ts

@@ -0,0 +1,13 @@
+export function extractTxHash(hash: unknown): string | null {
+  if (typeof hash === 'string') return hash
+  if (hash && typeof hash === 'object') {
+    const obj = hash as Record<string, unknown>
+    if ('result' in obj && typeof obj.result === 'string') return obj.result
+    if ('txid' in obj && typeof obj.txid === 'string') return obj.txid
+  }
+  return null
+}
+
+export function truncateAddress(address: string, chars = 5): string {
+  return `${address.slice(0, chars)}...${address.slice(-chars)}`
+}

apps/wallet/src/lib/tx-monitor.ts

@@ -0,0 +1,126 @@
+import { storage } from '@wxt-dev/storage'
+
+import {
+  notifyTransactionConfirmed,
+  notifyTransactionFailed,
+} from './notifications'
+import { PENDING_TXS_KEY, TX_NOTIFIED_KEY } from './storage-keys'
+import { extractTxHash } from './tx-helpers'
+
+type PendingTx = {
+  hash: unknown
+  value: number
+  asset: string
+  displayAmount?: string
+}
+
+async function fetchReceipt(
+  txHash: string,
+): Promise<{ status: string } | null> {
+  try {
+    const url = `${import.meta.env.WXT_STATUS_API_URL}/api/trpc/rpc.proxy`
+    const res = await fetch(url, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        json: {
+          method: 'eth_getTransactionReceipt',
+          params: [txHash],
+          id: 1,
+          chainId: 1,
+        },
+      }),
+    })
+    const body = (await res.json()) as {
+      result: { data: { json: { result: { status: string } | null } } }
+    }
+    return body.result.data.json.result
+  } catch {
+    return null
+  }
+}
+
+export const TX_MONITOR_ALARM = 'tx-monitor'
+// 0.5 minutes = 30 seconds, minimum allowed by Chrome MV3
+const TX_MONITOR_INTERVAL_MINUTES = 0.5
+
+export async function startTxMonitor(): Promise<void> {
+  const existing = await chrome.alarms.get(TX_MONITOR_ALARM)
+  if (!existing) {
+    chrome.alarms.create(TX_MONITOR_ALARM, {
+      periodInMinutes: TX_MONITOR_INTERVAL_MINUTES,
+    })
+  }
+}
+
+export async function checkPendingTransactions(): Promise<void> {
+  const pendingTxs = (await storage.getItem<PendingTx[]>(PENDING_TXS_KEY)) ?? []
+
+  if (pendingTxs.length === 0) {
+    await chrome.alarms.clear(TX_MONITOR_ALARM)
+    const notified = await storage.getItem<string[]>(TX_NOTIFIED_KEY)
+    if (Array.isArray(notified) && notified.length > 0) {
+      await storage.setItem(TX_NOTIFIED_KEY, [])
+    }
+    return
+  }
+
+  const notified = (await storage.getItem<string[]>(TX_NOTIFIED_KEY)) ?? []
+  const notifiedSet = new Set(notified)
+  const newlyNotified: string[] = []
+  const settledHashes = new Set<string>()
+
+  const receipts = await Promise.all(
+    pendingTxs.map(tx => {
+      const txHash = extractTxHash(tx.hash)
+      return txHash
+        ? fetchReceipt(txHash).then(r => ({ tx, txHash, receipt: r }))
+        : null
+    }),
+  )
+
+  for (const entry of receipts) {
+    if (!entry || !entry.receipt) continue
+
+    const { tx, txHash, receipt } = entry
+    const alreadyNotified = notifiedSet.has(txHash)
+    const amount = tx.displayAmount ?? String(tx.value)
+    const asset = tx.asset ?? 'ETH'
+
+    if (receipt.status === '0x1') {
+      if (!alreadyNotified) {
+        const fired = await notifyTransactionConfirmed(amount, asset)
+        if (fired) {
+          newlyNotified.push(txHash)
+          notifiedSet.add(txHash)
+        }
+      }
+      settledHashes.add(txHash)
+    } else if (receipt.status === '0x0') {
+      if (!alreadyNotified) {
+        const fired = await notifyTransactionFailed(amount, asset)
+        if (fired) {
+          newlyNotified.push(txHash)
+          notifiedSet.add(txHash)
+        }
+      }
+      settledHashes.add(txHash)
+    }
+  }
+
+  if (settledHashes.size > 0) {
+    const remaining = pendingTxs.filter(tx => {
+      const txHash = extractTxHash(tx.hash)
+      return !txHash || !settledHashes.has(txHash)
+    })
+    await storage.setItem(PENDING_TXS_KEY, remaining)
+
+    if (remaining.length === 0) {
+      await chrome.alarms.clear(TX_MONITOR_ALARM)
+    }
+  }
+
+  if (newlyNotified.length > 0) {
+    await storage.setItem(TX_NOTIFIED_KEY, [...notified, ...newlyNotified])
+  }
+}

apps/wallet/src/providers/pending-transactions-context.tsx

@@ -11,6 +11,7 @@ type Activity = ApiOutput['activities']['activities']['activities'][0]
 type PendingTransaction = Activity & {
   status: 'pending'
   uniqueId: string
+  displayAmount?: string
 }
 
 type PendingTransactionsContext = {
@@ -68,11 +69,11 @@ export function PendingTransactionsProvider({
   }, [storage])
 
   useEffect(() => {
-    if (!isLoading) {
-      storage.set({ transactions: pendingTransactions }).catch(error => {
-        console.error('Failed to save pending transactions:', error)
-      })
-    }
+    if (isLoading) return
+
+    storage.set({ transactions: pendingTransactions }).catch(error => {
+      console.error('Failed to save pending transactions:', error)
+    })
   }, [pendingTransactions, storage, isLoading])
 
   const addPendingTransaction = (

apps/wallet/src/providers/signer-context.tsx

@@ -10,6 +10,8 @@ import { type Address, createPublicClient, type Hex, http } from 'viem'
 import { mainnet } from 'viem/chains'
 import { formatEther } from 'viem/utils'
 
+import { extractTxHash } from '@/lib/tx-helpers'
+
 import { apiClient } from './api-client'
 import { usePassword } from './password-context'
 import { useWallet } from './wallet-context'
@@ -190,22 +192,6 @@ export function SignerProvider({ children }: { children: React.ReactNode }) {
         }
       }
 
-      const extractTxHash = (id: unknown): string | undefined => {
-        if (typeof id === 'string') {
-          return id
-        }
-        if (id && typeof id === 'object') {
-          const obj = id as Record<string, unknown>
-          if ('result' in obj && typeof obj.result === 'string') {
-            return obj.result
-          }
-          if ('txid' in obj) {
-            return obj.txid as string
-          }
-        }
-        return undefined
-      }
-
       if (tx.data) {
         const ERC20_TRANSFER_SIGNATURE = '0xa9059cbb'
         const isErc20Transfer = tx.data