UI/UX improvements for better accessibility and user experience #18

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

cc @dni @arcbtc @EdiWeeks