feat: accessibility, performance & design polish#16
Open
anirudhpareek wants to merge 2 commits intoLilFatFrank:mainfrom
Open
feat: accessibility, performance & design polish#16anirudhpareek wants to merge 2 commits intoLilFatFrank:mainfrom
anirudhpareek wants to merge 2 commits intoLilFatFrank:mainfrom
Conversation
…ations - Add CSS animation tokens and shimmer @Keyframes to globals.css - Create lib/motionVariants.ts with shared fadeUp, scaleIn, stagger variants - NumberPad: replace CSS active with Motion spring press physics per key - ActionButton: Motion whileHover/whileTap spring (disabled-safe) - Modal: responsive spring variants (bottom-sheet mobile, scale desktop) - Footer: layoutId sliding pill indicator replaces static opacity - page.tsx: amount display springs on keypress, balance shimmer skeleton, dropdown spring easing with scale - p/page.tsx: layoutId tab switcher, wallet balance shimmer skeletons, staggered activity list - SendModal/ReceiveModal/SendClaimModal: AnimatePresence mode="wait" with fadeUp/scaleIn per state - Add SuccessParticles canvas confetti component, fired on success state in all send modals Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Accessibility: - Modal: role=dialog, aria-modal, focus trap, Escape key, focus restore - Footer: role=tablist/tab, aria-selected, aria-current, text labels - ActionButton: aria-label, text label, h-11 touch target - All modals: htmlFor/id on inputs, role=alert on error states - QR scan buttons: aria-label="Scan QR code" - SuccessParticles: aria-hidden on canvas - globals.css: :focus-visible ring for keyboard nav Design: - PrivacyBadge component (shield + "Private" pill) on home screen - "Available Balance:" label on balance display - Granular fee breakdown: Network Fee + Privacy Routing (with sublabel) - Privacy confirmation banner on all success states Performance: - /api/fee deduplicated via module-level promise cache (getCachedFee) - force-dynamic moved from layout to individual pages - Modal components lazy-loaded via next/dynamic (renamed to lazyLoad) - useUserRegistration deps stabilized to primitives Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
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
role=dialog,aria-modal, Escape key, focus restore),role=tablist/tab+aria-selectedon footer nav,aria-labelon all icon-only buttons,htmlFor/idon all form inputs,role=alerton error states, global:focus-visiblekeyboard ring,aria-hiddenon decorative canvas/api/feededuplicated via module-level promise cache,force-dynamicscoped to page level (not layout), modal components lazy-loaded vianext/dynamic,useUserRegistrationdeps stabilized to primitivesPrivacyBadgecomponent (shield + "Private" pill) on home screen, "Available Balance:" label on balance display, granular fee breakdown (Network Fee + Privacy Routing with sublabel replacing "Partner Fees"), privacy confirmation banner on all send/claim success states, text labels on action buttons and footer tabsTest plan
🤖 Generated with Claude Code