Skip to content

feat(notifications): implement Web Push notifications for payment confirmations - #612

Closed
frankrichard99 wants to merge 3 commits into
kellymusk:devfrom
frankrichard99:feat/496-web-push-notifications
Closed

frankrichard99 wants to merge 3 commits into
kellymusk:devfrom
frankrichard99:feat/496-web-push-notifications

Conversation

@frankrichard99

@frankrichard99 frankrichard99 commented Aug 31, 2026

Copy link
Copy Markdown
Contributor

Summary

Implements Web Push notification support so merchants receive instant alerts when payments are confirmed.

What's included

  • Opt-in toggle on /settings page with clear states (on/off/unsupported/denied)
  • Service worker registration at app load for background delivery
  • Push subscription lifecycle: subscribe → register with backend → unsubscribe → remove from backend
  • iOS graceful fallback: Detects unsupported browsers and shows helpful message about adding to Home Screen
  • Permission handling: Tracks Notification.permission, shows guidance when denied
  • Backend integration: Three new endpoints (/push/subscribe, /push/unsubscribe, /push/status)

Files changed

File Action Description
lib/api.ts Modified Added PushSubscriptionRequest/Response/Status types and registerPushSubscription, unregisterPushSubscription, getPushSubscriptionStatus methods
hooks/use-push-notifications.ts Created Hook managing SW registration, permission state, subscribe/unsubscribe, iOS fallback
components/push-notification-toggle.tsx Created UI toggle with backend sync, error handling, and state indicators
app/(app)/settings/page.tsx Modified Added Notifications section with PushNotificationToggle
public/sw.js Replaced Clean custom SW that caches static assets and imports push-handler.js
app/layout.tsx Modified Added inline script for early SW registration

Backend contract

The backend should:

  1. Accept POST /push/subscribe with { endpoint, p256dh, auth } → store subscription
  2. Accept DELETE /push/unsubscribe → remove subscription
  3. Return GET /push/status with { enabled: boolean }
  4. On payment confirmed webhook, call the push service with payload:
    {
      "title": "Payment received",
      "body": "You received 500 XLM from a customer",
      "url": "/transactions",
      "tag": "aframp-payment"
    }
    
    ## Closes #496 

- Add /settings/api-keys page with list, create, and revoke flows
- Add ApiKey type and API methods (list, create, revoke) to lib/api.ts
- Add Settings link to wallet sidebar
- Show full key once after creation with copy-to-clipboard
- Mask key values after initial creation
- Confirm before revoking with destructive action dialog
- Handle loading, empty, and error states consistently

Closes kellymusk#498
- Add /settings page with editable merchant name and personal name
- Add change-email flow with verification email before updating
- Add danger zone with delete account confirmation dialog
- Update session provider to expose refreshMe and cached me data
- Update wallet page to read merchant name from session context
  so changes reflect immediately without a page reload
- Add Profile nav link to settings layout alongside API Keys

Closes kellymusk#497
…firmations

- Add usePushNotifications hook for SW registration, permission handling,
  subscription management, and iOS graceful fallback
- Add PushNotificationToggle component with backend sync via custom events
- Add push subscription API methods (subscribe, unsubscribe, status)
- Add Notifications section to /settings page with opt-in toggle
- Replace stale generated sw.js with clean custom service worker that
  imports the existing push-handler.js for push events and notification clicks
- Register service worker at root layout for background delivery
- Handle unsupported browsers, denied permissions, and loading states

Closes kellymusk#496
@kelly-musk kelly-musk closed this Sep 4, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants