UI/UX: Add "Connect Wallet" Loading State & Error Handling (Apertre3.0) #87
Description
Description: Currently, if the wallet connection fails or takes time, the user might not see feedback.
Task: Update the "Connect Wallet" button to show a spinner/loading text while connecting. Catch errors (e.g., user rejected connection) and display a user-friendly alert or toast message.
Technical Scope (Frontend):
Component: Likely involves Navbar.tsx or a dedicated WalletConnect.tsx component.
Libraries: React (state management), Ethers.js (provider interaction), and Tailwind CSS (for styling the loading spinner/alerts).
Logic:
Add a loading state to disable the button and show a spinner while window.ethereum.request is changing.
Wrap the connection logic in a try...catch block.
If an error occurs (e.g., error code 4001 for user rejection), display a user-friendly toast or alert instead of a console error.
Why: Improves user experience by preventing frustration during connection lag.