feat/wallet lock screen - #45
Conversation
…activity - Add frontend/wallet/app/dashboard/page.tsx with useInactivityLock hook LOCK_TIMEOUT_MS = 5 * 60 * 1000, clears sessionStorage and redirects to /lock after 5 minutes of no mousemove/keydown/touchstart/click/scroll useRef for timer ID and last-activity timestamp to avoid re-renders - Add frontend/wallet/app/lock/page.tsx with passkey unlock flow Calls wallet.login() to trigger WebAuthn assertion Verifies restored address matches pre-lock stored address to prevent account-switching attacks Shows error state for failed auth or account mismatch
|
@ezedike-evan is attempting to deploy a commit to the miracle656's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
@ezedike-evan Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits. You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀 |
Miracle656
left a comment
Miracle656
left a comment
There was a problem hiding this comment.
Thanks for the implementation — the logic is solid. The inactivity hook, account-switch detection, lock screen UI, and brand styling are all on point.
However, the files were added to the wrong directory. Everything landed in frontend/website/ (the marketing site) instead of frontend/wallet/ (the actual wallet app).
Please move the following files:
| Current path | Correct path |
|---|---|
frontend/website/app/dashboard/page.tsx |
frontend/wallet/app/dashboard/page.tsx |
frontend/website/app/lock/page.tsx |
frontend/wallet/app/lock/page.tsx |
And revert the changes to frontend/website/package.json and frontend/website/package-lock.json — the SDK dependency should go in frontend/wallet/package.json, which already has the wallet app's dependencies.
The frontend/wallet/ directory was just pushed to main — pull the latest and work from there. Once the files are in the right place this is ready to merge.
|
@Miracle656 the change you asked of has been implemented, please review |
* feat(mobile): load brand fonts at startup via expo-font The mobile shell rendered everything in the system font. Load the four brand typefaces at startup with useFonts and hold render behind the splash screen so the UI never flashes a system font. - theme/typography.ts: font assets + role→family map + role text styles, mirroring the web wallet (Lora 600 italic headings, Anton accent caps at 0.08em, Inter body, Inconsolata addresses/hashes). - app/_layout.tsx: preventAutoHideAsync + useFonts(fontAssets); render held until fonts resolve, then hideAsync. - app/fonts.tsx: a /fonts specimen screen rendering all four roles. Closes #432 * feat(mobile): add shared UI primitives Build the reusable components every screen composes from, as native ports of the web wallet's core CSS classes so feature screens don't re-implement layout chrome. - theme/colors.ts: native palette mirroring globals.css :root vars. - components/ui/Screen.tsx (.wallet-shell shell + safe area), Card.tsx (.card/.card-md), Button.tsx (.btn-gold/.btn-ghost gold variants), AddressChip.tsx (.address-chip, Inconsolata + tap-to-copy via expo-clipboard), Highlight.tsx (.hl gold underlay). - app/_layout.tsx: wrap in SafeAreaProvider (required by Screen). - app/ui.tsx: /ui gallery rendering every primitive for side-by-side check. Closes #433 * feat(mobile): build the swap UI surface Port the layout of the web wallet's swap page to mobile: in/out token selectors (tap to open a token sheet), the amount input, a direction-flip control, and an empty-quote state. Quoting (backlog #45) and execution (backlog #46) fill in the receive amount and quote area later, so those render an empty state for now. Composes the shared UI primitives (Screen, Card, Button) and the typography/colour tokens. Closes #472 --------- Co-authored-by: ezedike-evan <120946193+ezedike-evan@users.noreply.github.com>
2 participants
Description
Adds an inactivity lock to the Veil wallet that fires after 5 minutes of
no user interaction, clears the session, and requires passkey
re-authentication to resume.
Related Issue
Fixes #39
Type of Change
Changes Made
useInactivityLockhook indashboard/page.tsx— tracks activityvia
mousemove,keydown,touchstart,click,scrollonwindow;uses
useReffor timer and timestamp to avoid re-renders; clearssessionStorageand redirects to/lockafterLOCK_TIMEOUT_MSfrontend/wallet/app/lock/page.tsx— minimal lock screen with Veilwordmark, lock icon, and "Unlock with passkey" button that calls
wallet.login()and verifies the restored address matches the pre-lockstored address before redirecting to
/dashboardfrontend/wallet/app/layout.tsxandpackage.jsonto bootstrapthe wallet Next.js app
Testing
/dashboardand leave idle for 5 minutes — wallet shouldredirect to
/lockandsessionStorageshould be empty/dashboardChecklist
Additional Notes
LOCK_TIMEOUT_MSis a named constant at the top ofdashboard/page.tsxfor easy adjustment
sessionStoragebefore and afterlogin()— a mismatched address clears the session and blocks accessNEXT_PUBLIC_FACTORY_ADDRESS,NEXT_PUBLIC_RPC_URL, andNEXT_PUBLIC_NETWORK_PASSPHRASEenv vars must be set for the walletapp to connect to the Soroban network
Closes #39