Wallet Connect UX Improvements

[Ugo-X]

---

Issue: Wallet Connect UX Improvements

📋 Task

Improve the user experience of the Wallet Connect flow across the app by handling edge cases and providing clear feedback. Specifically:

1. Error Handling

   • Display meaningful error messages when wallet connection fails (e.g., rejected signature, unsupported network, no wallet installed).
   • Ensure errors are non-blocking and dismissible.

2. Loading State

   • Add a loading spinner/animation while wallet connection is in progress.
   • Disable duplicate actions (e.g., prevent users from clicking “Connect” multiple times while loading).

3. Fallback UI

   • If wallet connection fails, show a clear fallback state (e.g., “Retry Connection” button, helpful message).
   • Provide guidance if no wallet is detected (e.g., “Install ArgentX or Braavos”).

---

✅ Acceptance Criteria

• Error messages are user-friendly and context-specific.
• A visible loading spinner appears while connecting.
• Duplicate actions are prevented during the loading state.
• Fallback UI is displayed when no wallet is installed or connection fails.
• UX tested across ArgentX, Braavos, and MetaMask (via Starknet.js).

---

❗ Important

🔴 This issue must be implemented against the app-main branch.
Please fork from app-main before starting and submit your PR back to app-main — not main.

---

🔧 Additional Notes

• Reference existing Wallet Connect button in the codebase.
• Keep styling consistent with current app design system.
• Ensure responsiveness for mobile and desktop wallet connections.

---

[jimenezz22]

@Ugo-X hey Ugo can I get this?

[Ugo-X]

@Ugo-X hey Ugo can I get this?

sure!!
Assigned

[jimenezz22]

@Ugo-X working on it!