Wallet Connect UX Improvements

---

# 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.

---