feat(pwa): PWA install prompt and offline-ready UI - #447
Open
only1isaac wants to merge 1 commit into
Open
Conversation
|
@only1isaac is attempting to deploy a commit to the Topmatrixmor2014 Team on Vercel. A member of the Team first needs to authorize it. |
- Add frontend/hooks/useNetworkStatus.ts: wraps navigator.onLine with
online/offline event listeners, exposes isOnline, wasOffline,
lastOnlineAt, installPromptReady, and triggerInstallPrompt. Captures
beforeinstallprompt as a module-level singleton so it is never missed.
- Add frontend/lib/offlineQueue.ts: IndexedDB-backed queue for payment
actions taken while offline. Exports enqueue, getQueue, getQueueLength,
drainQueue, and startSync which auto-drains on the online event.
- Add frontend/lib/cacheData.ts: IndexedDB-backed API-response cache with
per-entry timestamps. Exports set, get, remove, clear, fetchWithCache,
and buildAgeLabel for human-readable cache age strings.
- Add frontend/components/InstallPrompt.tsx: custom PWA install card
shown after 3+ visits (tracked in localStorage). Includes benefits
messaging (faster access, offline payments, push notifications),
Install / Not Now / Don't show again actions, and gtag analytics for
accepted / dismissed outcomes.
- Update frontend/components/OfflineBanner.tsx: enhanced banner using
useNetworkStatus and offlineQueue. Shows cached data age, queued-action
count, and an animated Back-online confirmation strip on reconnection.
- Update frontend/pages/_app.tsx: remove inline InstallBanner and
BeforeInstallPromptEvent; import and render InstallPrompt instead.
- Add frontend/components/FeeEstimator.tsx: fee-tier selector (Economy /
Standard / Fast) with live Horizon fee stats.
- Fix pre-existing TypeScript errors that blocked the CI build:
- HighlightedTransactionRow: payment.type "payment_received" → "received",
payment.hash → payment.transactionHash, null|string → undefined
- transactionSearch: payment.type "payment" comparisons → "sent"|"received",
payment.hash → payment.transactionHash
- transactionSearchIndex: same type and field fixes as above
- SendPaymentForm: remove unsupported baseFee param from
buildPaymentTransaction / buildSorobanTipTransaction calls
- settings.tsx: remove duplicate signTransactionWithWallet import,
fix void return type from pause/resumeTurretsFunction
Closes FinChippay#372
only1isaac
force-pushed
the
feature/pwa-install-prompt-offline-ui
branch
from
July 27, 2026 22:07
49391ce to
78fc53f
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Implements the full PWA Install Prompt and Offline-Ready UI as described in issue #372.
Changes
New files
frontend/hooks/useNetworkStatus.tsnavigator.onLinewith event listeners. ExposesisOnline,wasOffline,lastOnlineAt,installPromptReady,triggerInstallPrompt. Captures thebeforeinstallpromptevent as a module-level singleton.frontend/lib/offlineQueue.tsenqueue,getQueue,getQueueLength,drainQueue,startSync(auto-drains on theonlineevent).frontend/lib/cacheData.tsset,get,remove,clear,fetchWithCache,buildAgeLabel.frontend/components/InstallPrompt.tsxfrontend/components/FeeEstimator.tsxUpdated files
frontend/components/OfflineBanner.tsxuseNetworkStatus. Shows cached data age, queued-action count, animated Back-online strip.frontend/pages/_app.tsxInstallBannerandBeforeInstallPromptEvent; imports and rendersInstallPrompt.Pre-existing TypeScript build errors fixed
HighlightedTransactionRow:payment.type === "payment_received"→"received",payment.hash→payment.transactionHashtransactionSearch/transactionSearchIndex: same type and field correctionsSendPaymentForm: removed unsupportedbaseFeeparam frombuildPaymentTransaction/buildSorobanTipTransactionsettings.tsx: duplicate import removed,voidreturn from pause/resume handled correctlyAcceptance criteria status
What was tested
npm run buildpasses with zero TypeScript errorsCloses #372