Skip to content

feat: add sticky action bar on LinkedAccounts page (#688)#704

Merged
greatest0fallt1me merged 1 commit into
Predictify-org:mainfrom
GreatShinro:feature/linked-accounts-sticky-bar
Jul 27, 2026
Merged

feat: add sticky action bar on LinkedAccounts page (#688)#704
greatest0fallt1me merged 1 commit into
Predictify-org:mainfrom
GreatShinro:feature/linked-accounts-sticky-bar

Conversation

@GreatShinro

@GreatShinro GreatShinro commented Jul 26, 2026

Copy link
Copy Markdown
Contributor

Summary

Adds a sticky bottom action bar to the LinkedAccounts page that appears when the user scrolls past the header, providing quick access to primary wallet actions.

Closes #688

Changes

  • New page: src/pages/LinkedAccounts.tsx — Full page with connected wallet info card, available wallets grid, and sticky bottom action bar
  • Route: app/(dashboard)/linked-accounts/page.tsx — Next.js route wrapper
  • Tests: src/pages/__tests__/LinkedAccounts.test.tsx — 20 passing tests
  • Test setup: jest.setup.js — Added navigator.clipboard mock

Sticky Action Bar Behavior

  • Hidden by default, appears on scroll past the page header
  • Uses getBoundingClientRect for scroll detection (no scroll library dependency)
  • Shows wallet name, copy address, disconnect, and view on explorer buttons
  • When no wallet connected, shows a connect button instead
  • Respects prefers-reduced-motion via Tailwind motion-reduce classes

Accessibility (WCAG 2.1 AA)

  • role="toolbar" with aria-label="Wallet actions" on the sticky bar
  • aria-live="polite" region announces wallet connection status changes
  • All interactive elements have visible focus-visible rings
  • Reduced motion support via Tailwind utility classes

Responsive

  • Mobile (<640px): compact labels, icon-only on small screens
  • Tablet+ (640px+): full action labels visible
  • Desktop (1024px+): content constrained to max-w-4xl

Test Coverage (20/20 passing)

  • Rendering: heading, wallet info, balance, copy/disconnect buttons, not-connected state
  • Available wallets: filtering connected wallet, connect actions
  • Sticky bar: toolbar role, scroll behavior, wallet info in bar, connect button
  • Accessibility: aria-live region, announcements, accessible labels

Add LinkedAccounts page with wallet info card, available wallets grid,
and sticky bottom action bar that appears on scroll past the header.

- Sticky toolbar with primary wallet actions (copy, disconnect, explorer)
- Appears/disappears based on scroll position via getBoundingClientRect
- WCAG 2.1 AA: role=toolbar, aria-label, aria-live announcements
- Responsive: mobile compact labels, desktop full labels
- 20 passing tests covering rendering, actions, scroll behavior, a11y
@vercel

vercel Bot commented Jul 26, 2026

Copy link
Copy Markdown

@GreatShinro is attempting to deploy a commit to the Jagadeesh B's projects Team on Vercel.

A member of the Team first needs to authorize it.

@greatest0fallt1me
greatest0fallt1me merged commit c908d65 into Predictify-org:main Jul 27, 2026
1 check failed
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