UI/UX improvements for better accessibility and user experience #18
Description
Enhancement: UI/UX Improvements for Watch-Only Extension
Context:
The watch-only extension is a powerful tool for managing Bitcoin wallets, but the current UI could be significantly improved for better accessibility, especially for non-technical users.
Issues and Proposed Improvements:
1. Wallet Display Layout
Current: Wallets are listed in a basic table/list view
Proposed: Display wallets at the top of the screen in a carousel/row view similar to how LNbits displays "pockets" (wallets)
- More visual and scannable
- Consistent with the main LNbits UI pattern
- Easier to switch between multiple wallets
2. Balance Display in Fiat Currency
Current: Only shows Bitcoin amounts
Proposed:
- Display balance in user's chosen fiat currency (USD, EUR, GBP, etc.)
- Make this configurable in a consistent way with LNbits "pockets" settings
- Show both BTC and fiat amounts
3. Right Panel Information
Current: Technical information that may not be helpful to average users
Proposed:
- Update with more useful, user-friendly information
- Add images/links to signing devices (hardware wallets)
- Include educational content about watch-only wallets
- Add usage scenarios and best practices
4. "New payment" Button Spacing
Issue: Button needs padding/margin to the right
Fix: Add appropriate margin-right to improve spacing
5. Top Button Alignment
Issue: Settings, Trezor, and Connect buttons appear randomly aligned at the top
Fix: Standardize alignment and spacing for these action buttons
6. "Scan blockchain" Button Label
Current: "Scan blockchain" - technical terminology
Proposed: Rename to "Refresh" or "Update Balance"
- More intuitive for non-technical users
- Clearer about what the action does
7. Account Extended Public Key Input
Issue: Single-line input is difficult to read/verify long xpub keys
Proposed: Make it multi-line (textarea) when adding a new watch-only wallet
- Easier to verify the key is correct
- Better visibility of the full key
8. "Trezor" Button Issues
Issues:
- Seems quite vendor-specific (what about Ledger, Coldcard, etc.?)
- Currently leads to a 404 error
Proposed: - Either fix the link or make it more generic
- Consider "Connect Hardware Wallet" with support for multiple vendors
- If keeping vendor-specific, ensure links work
9. Settings Pop-up Improvements
Issues:
- No introduction explaining what settings do
- Labels are not intuitive (e.g., "What is a receive gap limit?")
- Missing hints/help text
Proposed: - Add introductory text at the top of settings dialog
- Use clearer labels with explanations
- Add hint text or tooltips for technical terms
- Consider grouping related settings
10. "Configure and Connect" Clarity
Issue: Not clear what this feature is for or how to use it
Proposed:
- Add explanation text describing the purpose
- Include step-by-step instructions
- Add visual indicators of connection status
Target Audience:
This extension should be usable by someone who wants to monitor their hardware wallet balance without needing deep technical knowledge of xpubs, gap limits, or blockchain scanning.
Related Issues:
- See Rename 'Wallets' to 'Pockets' to avoid confusion with Bitcoin wallet terminology lnbits#3378 for the "wallets" → "pockets" terminology discussion