neptune-privacy/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:**

```typescript
{
  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)

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

### API Calls (ready to uncomment)

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

### Auto-refresh Polling (ready to enable)

```typescript
// 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/`