Skip to content

feat: optimize wallet connection flow and add network switching#153

Merged
Smartdevs17 merged 28 commits intoSmartdevs17:mainfrom
Ghadaffijr:feat/wallet-ux
Mar 29, 2026
Merged

feat: optimize wallet connection flow and add network switching#153
Smartdevs17 merged 28 commits intoSmartdevs17:mainfrom
Ghadaffijr:feat/wallet-ux

Conversation

@Ghadaffijr
Copy link
Copy Markdown
Contributor

This PR significantly improves the Web3 wallet connection UX by introducing graceful loading states, error handling, and native network switching, fulfilling all requirements for issue #27.

Closes #27

Key Changes

  • Wagmi Config: Enabled ssr: true in wagmi.ts to support auto-reconnection on page refresh, and added the Sepolia chain for testing.
  • WalletConnect UX: Completely overhauled WalletConnect.tsx to include inline loading spinners during connection attempts (isPending).
  • Error Handling: Added graceful, UI-friendly error alerts if a user rejects a connection or a wallet fails to connect.
  • Network Switcher: Implemented useSwitchChain to allow users to toggle between available networks natively from the UI.
  • Conflict Resolution: Cleaned up residual merge conflict markers inherited from upstream main in Header.tsx.

How to Test

  1. Checkout this branch: git checkout feat/wallet-ux
  2. Run npm run dev and navigate to the auth page.
  3. Click a wallet option to see the Connecting... state.
  4. Reject the connection in your wallet to verify the red error banner appears.
  5. Connect successfully to see the new Network Switcher UI.
  6. Refresh the page to verify the wallet stays connected (Auto-reconnect).
Screenshot 2026-03-26 132413 Screenshot 2026-03-26 132439

@vercel
Copy link
Copy Markdown

vercel bot commented Mar 26, 2026

@Ghadaffijr is attempting to deploy a commit to the smartdevs17's projects Team on Vercel.

A member of the Team first needs to authorize it.

@drips-wave
Copy link
Copy Markdown

drips-wave bot commented Mar 26, 2026

@Ghadaffijr 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

@Smartdevs17
Copy link
Copy Markdown
Owner

merge conflict

@Ghadaffijr Ghadaffijr force-pushed the feat/wallet-ux branch 2 times, most recently from b3cdbdf to a27af29 Compare March 27, 2026 19:43
Added missing `QrCode` icon import from `lucide-react` to fix the `react/jsx-no-undef` ESLint error failing the CI pipeline.
Cleaned up duplicated `useRouter` import from `next/navigation` created during conflict resolution.
@Ghadaffijr
Copy link
Copy Markdown
Contributor Author

All merge conflicts have been resolved, unused imports/comments have been cleaned up, and the CI pipeline is completely green. This is ready for a final review and merge!

@Smartdevs17 Smartdevs17 merged commit 914528c into Smartdevs17:main Mar 29, 2026
4 of 7 checks passed
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.

Frontend: Optimize wallet connection flow

2 participants