feat(frontend): reusable Button, wallet persistence, loading states, query caching

[king-aj-the-first]

closes #828
closes #829
closes #830
closes #831

PR description
Summary

• Implement UI consistency and frontend reliability: add/verify reusable Button, replace raw <button> usage, persist wallet connection & improve reconnection flow, ensure loading skeletons exist, and enable React Query caching/persistence for balances and prices.

What I changed

• UI / Buttons: Standardized button usage by using the existing Button component across many components and replacing native <button> occurrences for consistent variants, sizes, loading and accessibility.

  • Files updated (examples): Button.tsx, FAQ.tsx, ThemeToggle.tsx, ContractDetailsCard.tsx, GoalCard.tsx, page.tsx, Sidebar.tsx, NetworkSwitchModal.tsx.

• Wallet connection & reconnection: Improved WalletContext to persist last network, detect extension disconnect/lock, show reconnect UI, and invalidate caches when disconnect detected.

  • Key file: WalletContext.tsx
  • Behavior: detects lock/disconnect, sets connectionStatus (locked/disconnected), triggers cache invalidation for balances and surfaces WalletReconnectBanner.

• Loading states: Verified and preserved existing loading skeleton components and used them where appropriate (spinner, skeleton lines, card/table/transaction skeletons).

  • Key file: LoadingState.tsx

• Client-side caching / React Query: Ensured React Query is configured with persistence and sensible TTLs; moved wallet balance fetching to React Query with keys and TTLs so balances and CoinGecko prices are cached (stale-while-revalidate).

  • Key file: QueryProvider.tsx
  • Balance caching: queryKey: ['balances', address] with staleTime: 30s, cacheTime: 5min; invalidation on wallet disconnect is applied.

Acceptance criteria coverage

• Reusable Button used across the app (variants, sizes, loading, icons, ARIA): implemented.
• Loading skeletons exist and used: present.
• Wallet state persistence, disconnect detection, reconnect prompt: implemented via WalletContext and WalletReconnectBanner.
• React Query caching & persistence: configured and balances now cached with TTL and invalidated on disconnect.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
nestera	Error		May 30, 2026 4:31pm

[drips-wave]

@king-aj-the-first 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! 🚀

Learn more about application limits