XNT-Mobile-Wallet/UI_VIEWS_IMPLEMENTATION.md

UI Views Implementation

✅ Completed Views

Đã implement 3 views chính với Shadcn-vue components và mobile-first design:

1. WalletView (src/views/Wallet/WalletView.vue)

Features:

• ✅ Balance display (Available + Pending)
• ✅ Receiving address with copy button
• ✅ Action buttons (Send, Backup File, Backup Seed)
• ✅ Wallet status indicator
• ✅ Loading states
• ✅ Mobile responsive design

Components used:

• Card (CardHeader, CardTitle, CardContent)
• Button (primary, outline variants)
• Label, Separator
• Lucide icons (Wallet, Send, FileDown, Key, Copy, Check)

Mock data:

• Balance: 125.45678900 XNT
• Address: nep1qxy2kgdygjrsqtzq2n0yrf2493p83kkfjhx0wlh

TODO:

• Integrate with useNeptuneWallet composable
• Implement send transaction flow
• Implement backup features with Tauri commands

---

2. UTXOView (src/views/UTXO/UTXOView.vue)

Features:

• ✅ Summary cards (Total Count + Total Amount)
• ✅ UTXO list with mobile cards + desktop table
• ✅ Refresh button
• ✅ Loading & empty states
• ✅ Responsive layout (cards on mobile, table on desktop)

Components used:

• Card (CardHeader, CardTitle, CardContent)
• Button (outline, icon variants)
• Label, Separator
• Lucide icons (Database, RefreshCw)

Mock data:

• 3 UTXOs with hashes, amounts, block heights
• Total: 125.50000000 XNT

Layout:

• Mobile (<768px): Individual UTXO cards
• Desktop (≥768px): Data table

TODO:

• Integrate with getUtxos() API
• Add pagination for large lists
• Add sorting/filtering

---

3. NetworkView (src/views/Network/NetworkView.vue)

Features:

• ✅ Network information display
• ✅ Current block height
• ✅ Last update time
• ✅ Connection status indicators
• ✅ Refresh button
• ✅ Error state with retry
• ✅ Loading states

Components used:

• Card (CardHeader, CardTitle, CardContent)
• Button (outline variant)
• Label, Separator
• Lucide icons (Network, Activity, RefreshCw, AlertCircle)

Mock data:

• Network: Neptune mainnet
• Block Height: 123,456
• Status: Connected, Synced

Auto-refresh: Ready for 60s polling (commented out)

TODO:

• Integrate with getBlockHeight() API
• Enable auto-refresh polling
• Add more network stats (peer count, etc.)

---

🎨 Design System

Colors (from Tailwind + Shadcn)

• Primary: Royal Blue oklch(0.488 0.15 264.5)
• Background: White (light) / Dark blue tint (dark)
• Muted: Light gray backgrounds
• Foreground: Text colors
• Border: Subtle borders
• Destructive: Error/alert red

Typography

• Font: Montserrat Variable Font
• Sizes: text-xs, text-sm, text-base, text-lg, text-2xl, text-4xl
• Weights: font-medium, font-semibold, font-bold

Spacing

• Padding: p-3, p-4, p-6
• Gap: gap-2, gap-3, gap-4, gap-6
• Margin: Tailwind utilities

Components

• Card: Border, shadow, rounded corners
• Button: Primary (filled), Outline, Ghost, Icon
• Icons: Lucide Vue Next (size-4, size-5, size-6)

---

📱 Mobile Optimization

Responsive Breakpoints

• Mobile: < 768px (sm)
• Desktop: ≥ 768px (md)

Mobile Features

• ✅ Touch-optimized buttons (min 44px height)
• ✅ Card-based layouts for mobile
• ✅ Table view for desktop
• ✅ Bottom navigation (4 tabs)
• ✅ Safe area insets for notched devices
• ✅ Smooth scrolling
• ✅ No overscroll

Layout Structure

┌─────────────────────┐
│ Header (56px)       │
├─────────────────────┤
│                     │
│ Main Content        │
│ (scrollable)        │
│                     │
├─────────────────────┤
│ Bottom Nav (48px)   │
└─────────────────────┘

---

🔄 Router Configuration

Updated routes:

{
  path: '/',
  component: Layout,
  children: [
    { path: '', name: 'wallet', component: WalletPage },       // Default
    { path: '/utxo', name: 'utxo', component: UTXOPage },
    { path: '/network', name: 'network', component: NetworkPage },
    { path: '/transaction-history', name: 'transaction-history', component: TransactionHistoryPage },
  ]
}

Bottom Navigation Order:

1. 💰 Wallet (/) - Default
2. 📦 UTXO (/utxo)
3. 🌐 Network (/network)
4. 📜 History (/transaction-history)

---

🚧 Commented Out Logic

WASM-related code (temporarily disabled)

// import { useNeptuneWallet } from '@/composables/useNeptuneWallet'
// const { getBalance, getUtxos, getBlockHeight } = useNeptuneWallet()

API Calls (ready to uncomment)

// const loadWalletData = async () => {
//   const result = await getBalance()
//   availableBalance.value = result.balance
// }

Auto-refresh Polling (ready to enable)

// let pollingInterval: number | null = null
// const startPolling = () => { ... }
// onMounted(() => { startPolling() })

---

🎯 Integration Steps

Phase 1: Enable API Calls (No WASM)

1. Uncomment useNeptuneWallet imports
2. Uncomment API call functions
3. Test with mock API data
4. Remove mock data

Phase 2: Enable WASM

1. Fix Tauri + WASM loading issues
2. Uncomment WASM-related logic
3. Test wallet generation flow
4. Test full integration

Phase 3: Implement Tauri Commands

1. generate_keys_from_seed
2. create_keystore
3. decrypt_keystore
4. build_transaction

---

📊 Current Status

View	UI	Mock Data	API Ready	WASM Ready	Status
Wallet	✅	✅	🚧	❌	UI Done
UTXO	✅	✅	🚧	❌	UI Done
Network	✅	✅	🚧	❌	UI Done

Legend:

• ✅ Complete
• 🚧 Ready to integrate
• ❌ Blocked on Tauri/WASM

---

🧪 Testing

Manual Testing Steps

1. Start dev server: npm run dev
2. Navigate to each view:
   • http://localhost:5173/ → Wallet
   • http://localhost:5173/utxo → UTXO
   • http://localhost:5173/network → Network
3. Test responsive:
   • Desktop view (>768px)
   • Mobile view (<768px)
   • Chrome DevTools mobile emulation
4. Test interactions:
   • Copy address button
   • Refresh buttons
   • Bottom navigation
   • Dark mode toggle

---

📝 Notes

• Dark Mode: Fully supported via Shadcn theme variables
• Icons: Lucide Vue Next (tree-shakeable)
• Animations: Tailwind transitions + CSS animations
• Accessibility: ARIA labels, keyboard navigation
• Performance: Lazy-loaded routes, optimized re-renders

---

🚀 Next Steps

1. ✅ UI Complete - All 3 views designed and implemented
2. 🚧 Fix Tauri WASM - Resolve CSP and asset loading issues
3. 🚧 Integrate APIs - Connect to Neptune node
4. 🚧 Implement Tauri Commands - Keystore, transaction signing
5. 🚧 Add Transaction History View - List of past transactions
6. 🚧 E2E Testing - Full wallet flow testing

---

🎨 Screenshots (Recommended)

Take screenshots of:

• Wallet view (light + dark mode)
• UTXO view (mobile cards + desktop table)
• Network view (all states)
• Bottom navigation active states

Store in: docs/screenshots/