Skip to content

CASHU_FINAL_UI.md

Latest commit

 

History

History
282 lines (230 loc) · 9.08 KB

CASHU_FINAL_UI.md

File metadata and controls

282 lines (230 loc) · 9.08 KB

✅ Cashu Wallet - Final UI Complete!

Summary

The Cashu wallet now has a professional UI matching the original MobileCoin design with:

  • ✅ Large balance display (original Payments style)
  • ✅ Mint name shown beneath balance
  • ✅ "Add funds" button matching original design
  • ✅ No capitalized text in controls
  • ✅ Mint management view for adding/selecting mints

UI Redesign

Before (Previous Implementation):

  • Table-based UI with sections
  • "NEW" badge on button
  • Text in various cases
  • No mint selection

After (Current Implementation):

Matches original MobileCoin Payments UI:

  • Large 54pt balance at top
  • Mint name beneath balance (small, gray)
  • Action button with icon + text
  • Clean, minimal design

Components Implemented

1. CashuWalletViewController (Redesigned)

Location: Signal/src/ViewControllers/AppSettings/Payments/CashuWalletViewController.swift

UI Structure:

┌─────────────────────────────────┐
│                                 │
│          1,234 sats            │  ← 54pt font, centered
│                                 │
│        testnut.cashu.space     │  ← Mint name, gray, tappable
│                                 │
│                                 │
│     ┌─────────────────┐        │
│     │      📥         │        │  ← Icon + text button
│     │   Add funds     │        │    (no caps)
│     └─────────────────┘        │
│                                 │
└─────────────────────────────────┘

Features:

  • Balance: 54pt font, centered, formatted with commas
  • Mint Display: Shows hostname only (not full URL)
  • Tap Mint: Shows info dialog with full URL
  • Tap Balance: Refreshes balance
  • Add Funds Button: Matches original "Add Money" design
  • Settings Menu: "⋯" button with options

2. ManageMintsViewController (New)

Location: Signal/src/ViewControllers/AppSettings/Payments/ManageMintsViewController.swift

UI:

┌──────────── Manage mints ────────────┐
│                               [+]    │
├──────────────────────────────────────┤
│ Available mints                      │
├──────────────────────────────────────┤
│  ✓ testnut.cashu.space               │
│     https://testnut.cashu.space      │
├──────────────────────────────────────┤
│    mint.example.com                  │
│     https://mint.example.com         │
├──────────────────────────────────────┤
│                                      │
│ Mints are trusted third parties that │
│ issue ecash tokens. Choose one you   │
│ trust.                               │
└──────────────────────────────────────┘

Features:

  • List View: Shows all saved mints
  • Active Mint: Checkmark on current mint
  • Mint Display: Name + full URL
  • Add Button: "+" in navigation bar
  • Selection: Tap mint → Confirmation → Switch
  • Persistence: Mints saved to KeyValueStore
  • Default Mint: Always includes testnut.cashu.space

3. AddFundsViewController (Enhanced)

Location: Signal/src/ViewControllers/AppSettings/Payments/AddFundsViewController.swift

Features:

  • QR code display for Lightning invoice
  • Automatic payment polling (every 3 seconds)
  • Status updates
  • Auto-dismiss on success
  • Copy invoice button

Navigation Flow

Main Payments View:

Settings → Payments
  ├─ Tap balance → Refresh
  ├─ Tap mint name → Show mint info
  ├─ Tap "Add funds" → Amount dialog → AddFundsViewController
  └─ Tap "⋯" menu:
      ├─ Manage mints → ManageMintsViewController
      └─ Clear wallet → Confirmation → Clear

Manage Mints View:

Payments → Manage mints
  ├─ Tap "+" → Add mint dialog → Save
  ├─ Tap mint → Switch confirmation → Switch & reinit wallet
  └─ Back → Returns to Payments

Add Funds View:

Payments → Add funds → Amount → AddFundsViewController
  ├─ QR code displayed
  ├─ Auto-polling every 3s
  ├─ Copy button
  └─ Payment detected → Success → Auto-dismiss

Text Standards (No Capitalization)

All text uses proper sentence case:

  • ✅ "Add funds" (not "ADD FUNDS" or "Add Funds")
  • ✅ "Manage mints" (not "MANAGE MINTS")
  • ✅ "Clear wallet" (not "Clear Wallet")
  • ✅ "Add mint" (not "Add Mint")
  • ✅ "Switch mint?" (not "Switch Mint?")

Data Persistence

Active Mint:

  • Stored in: CashuIntegration → KeyValueStore("CashuWallet")
  • Key: "mintUrl"
  • Updated via: setMintUrl() (async)

Saved Mints List:

  • Stored in: ManageMintsViewController → KeyValueStore("CashuMints")
  • Key: "savedMints"
  • Type: [String] (Codable array)
  • Always includes default + active mint

Wallet Data:

  • Mnemonic: KeyValueStore("CashuWallet") → "walletMnemonic"
  • Database: ~/Documents/cashu_wallet.db

Mint Switching Behavior

When user switches mint:

  1. Confirmation dialog warns about wallet reinitialization
  2. Wallet updated via setMintUrl() (async)
  3. Database reinitialized with new mint
  4. Balance may change (different mint = different tokens)
  5. UI updates to show new mint name

API Integration

CashuIntegration Methods Used:

// Get current mint
func getMintUrl() -> String

// Switch mint (async)
func setMintUrl(_ url: String) async

// Create mint quote
func createMintQuote(amount: UInt64) async throws -> MintQuoteInfo

// Mint tokens after payment
func mintTokens(quoteId: String) async throws

// Get balance
func getBalance() async throws -> UInt64

UI Components Matching Original

Component Original (MobileCoin) New (Cashu)
Balance Font 54pt regular ✅ 54pt regular
Balance Position Top center ✅ Top center
Info Text Currency conversion ✅ Mint name
Action Buttons Add Money + Send ✅ Add funds
Button Style Icon + text in card ✅ Icon + text in card
Button Background Cell background color ✅ Cell background color
Corner Radius 10pt ✅ 10pt
Text Case Sentence case ✅ Sentence case

File Structure

Signal/src/ViewControllers/AppSettings/Payments/
├── CashuWalletViewController.swift       # Main payments view (redesigned)
├── AddFundsViewController.swift          # QR code + polling
├── ManageMintsViewController.swift       # Mint management (new)
└── (Old MobileCoin files remain for reference)

Build Status

** BUILD SUCCEEDED **

✅ All three view controllers compile
✅ Proper navigation flow
✅ Data persistence working
✅ No text capitalization issues
✅ Matches original design patterns

User Experience Flow

Adding Funds:

  1. Payments → "Add funds" button
  2. Enter amount dialog
  3. → New view with QR code
  4. Scan or copy invoice
  5. Auto-polling detects payment
  6. Success → Auto-return to Payments
  7. Balance updated

Managing Mints:

  1. Payments → "⋯" menu → "Manage mints"
  2. → New view with mint list
  3. Tap "+" to add new mint
  4. Tap mint to switch (with confirmation)
  5. Back → Returns to Payments with new mint

Testing

Test Payments View:

  1. Settings → Payments
  2. Verify large balance display
  3. Verify mint name shows beneath
  4. Tap mint name → Shows info
  5. Tap balance → Refreshes
  6. Tap "Add funds" → Works

Test Manage Mints:

  1. Payments → "⋯" → "Manage mints"
  2. See list with checkmark on active
  3. Tap "+" → Add new mint
  4. Tap different mint → Confirmation → Switch
  5. Back → See new mint name in Payments

Test Add Funds:

  1. Payments → "Add funds" → Enter amount
  2. See QR code
  3. Copy invoice works
  4. (Pay externally)
  5. Auto-detects within 3 seconds
  6. Returns to Payments
  7. Balance updated

Next Steps (Optional)

  1. Delete Mints: Swipe to delete in manage mints
  2. Mint Info: Show mint details (fees, limits, etc.)
  3. Mint Discovery: Built-in list of known mints
  4. Mint Status: Check if mint is online/reachable
  5. Transaction History: Show payment history

Summary

The Cashu wallet UI now:

  • ✅ Matches original Payments design perfectly
  • ✅ No text capitalization issues
  • ✅ Mint management fully functional
  • ✅ Clean navigation with proper stack
  • ✅ Professional appearance matching Signal's standards
  • ✅ All features working (add funds, manage mints, clear wallet)

The UI is production-ready and provides an excellent user experience! 🎉