diff --git a/TAURI_WASM_FIX.md b/TAURI_WASM_FIX.md deleted file mode 100644 index 683cbf0..0000000 --- a/TAURI_WASM_FIX.md +++ /dev/null @@ -1,173 +0,0 @@ -# Tauri + WASM Integration Fix - -## πŸ” Problem - -WASM works in browser (`npm run dev`) but fails in Tauri webview (`npm run tauri:dev`) with error: -``` -Cannot assign to read only property 'toString' of object '#' -``` - -## βœ… Solutions Applied - -### 1. **CSP (Content Security Policy) Update** - -**File:** `src-tauri/tauri.conf.json` - -Added required CSP directives for WASM: - -```json -{ - "security": { - "csp": { - "default-src": "'self' 'unsafe-inline' asset: https://asset.localhost", - "script-src": "'self' 'unsafe-inline' 'unsafe-eval' 'wasm-unsafe-eval'", - // ... other directives with asset: protocol - }, - "assetProtocol": { - "enable": true, - "scope": ["**"] - } - } -} -``` - -**Key changes:** -- βœ… Added `'wasm-unsafe-eval'` to `script-src` - **REQUIRED for WASM execution in Tauri 2.x** -- βœ… Added `asset:` and `https://asset.localhost` to relevant directives -- βœ… Enabled `assetProtocol` to serve assets with proper MIME types - -### 2. **Vite Config Update** - -**File:** `vite.config.ts` - -```typescript -export default defineConfig({ - optimizeDeps: { - exclude: ['@neptune/native'], // Only exclude native module - // ❌ NOT excluding @neptune/wasm - it must be bundled! - }, - - build: { - assetsInlineLimit: 0, // Don't inline WASM as base64 - }, - - assetsInclude: ['**/*.wasm'], // Serve WASM with correct MIME type -}) -``` - -**Key changes:** -- βœ… Removed `@neptune/wasm` from `exclude` and `external` -- βœ… Added `assetsInlineLimit: 0` to prevent base64 encoding -- βœ… Added `assetsInclude` for WASM MIME type - -### 3. **Package.json Fix** - -```json -{ - "dependencies": { - "axios": "^1.7.9" // Fixed from invalid "1.13.2" - } -} -``` - -## πŸ§ͺ Testing - -### 1. Browser (Should work) -```bash -npm run dev -``` -Open http://localhost:5173/auth β†’ Create wallet β†’ Should work - -### 2. Tauri (Should work now) -```bash -npm run tauri:dev -``` -Create wallet β†’ Should work without CSP/WASM errors - -## πŸ› Additional Debugging - -### If WASM still doesn't load: - -#### Check 1: WASM File in Dist -```bash -npm run build -ls dist/assets/*.wasm # Should see neptune_wasm_bg-*.wasm -``` - -#### Check 2: Browser DevTools (in Tauri) -1. Open Tauri app -2. Right-click β†’ Inspect Element -3. Console tab β†’ Check for errors -4. Network tab β†’ Filter `.wasm` β†’ Check if WASM loads (200 status) - -#### Check 3: CSP Errors -In DevTools Console, look for: -``` -Refused to execute WebAssembly script... -``` -If you see this β†’ CSP is still blocking WASM - -### Temporary Debug: Disable CSP - -If nothing works, temporarily disable CSP to isolate the issue: - -```json -// src-tauri/tauri.conf.json -{ - "security": { - "dangerousDisableAssetCspModification": true, // Disable CSP temporarily - "csp": null // Remove CSP entirely for testing - } -} -``` - -⚠️ **WARNING:** Only use this for debugging! Re-enable CSP for production. - -## πŸ“ Why This Happens - -### Tauri vs Browser Differences - -| Feature | Browser | Tauri Webview | -|---------|---------|---------------| -| CSP | Permissive by default | Strict by default | -| WASM | Always allowed | Needs `'wasm-unsafe-eval'` | -| Asset loading | HTTP(S) | Custom `asset://` protocol | -| MIME types | Auto-detected | Must be configured | - -### WASM Loading in Tauri - -1. Vite bundles WASM file β†’ `dist/assets/neptune_wasm_bg-*.wasm` -2. Tauri serves it via `asset://localhost/assets/...` -3. CSP must allow: - - `script-src 'wasm-unsafe-eval'` β†’ Execute WASM - - `connect-src asset:` β†’ Fetch WASM file -4. AssetProtocol must serve with `Content-Type: application/wasm` - -## πŸ”„ Next Steps After Fix - -### 1. Test Full Wallet Flow -- βœ… Generate wallet (WASM) -- βœ… Display seed phrase -- βœ… Confirm seed phrase -- 🚧 Create keystore (needs Tauri commands) - -### 2. Implement Tauri Commands -See `TAURI_COMMANDS_TODO.md` (if it exists, otherwise create it) - -### 3. Build & Test Production -```bash -npm run tauri:build -``` - -## πŸ“š References - -- [Tauri CSP Documentation](https://tauri.app/v2/reference/config/#securityconfig) -- [Vite WASM Plugin](https://vitejs.dev/guide/features.html#webassembly) -- [wasm-bindgen with Vite](https://rustwasm.github.io/wasm-bindgen/reference/deployment.html) - -## 🎯 Summary - -**Problem:** Tauri CSP blocked WASM execution -**Solution:** Add `'wasm-unsafe-eval'` + `asset:` protocol + proper Vite config -**Status:** Should work now! πŸš€ - diff --git a/TAURI_WASM_SETUP.md b/TAURI_WASM_SETUP.md deleted file mode 100644 index 18acfaa..0000000 --- a/TAURI_WASM_SETUP.md +++ /dev/null @@ -1,309 +0,0 @@ -# Tauri + WASM Setup Guide - -## πŸ› Problem - -**Symptom:** -- βœ… WASM works in browser (`npm run dev`) -- ❌ WASM fails in Tauri (`npm run tauri:dev`) -- Error: `Cannot assign to read only property 'toString'` - -**Root Cause:** Tauri webview requires special configuration to load WASM files correctly. - ---- - -## βœ… Solution: Vite Plugins for WASM - -### 1. Install Required Plugins - -```bash -pnpm add -D vite-plugin-wasm vite-plugin-top-level-await -``` - -**Why these plugins?** -- `vite-plugin-wasm`: Handles WASM file loading and initialization -- `vite-plugin-top-level-await`: Enables top-level await (required by WASM) - -### 2. Update `vite.config.ts` - -```typescript -import wasm from 'vite-plugin-wasm' -import topLevelAwait from 'vite-plugin-top-level-await' - -export default defineConfig({ - plugins: [ - vue(), - tailwindcss(), - wasm(), // βœ… Add WASM support - topLevelAwait(), // βœ… Add top-level await support - // ... other plugins - ], - - // Rest of config... -}) -``` - -### 3. Tauri CSP Configuration - -**File:** `src-tauri/tauri.conf.json` - -Ensure CSP includes: -```json -{ - "security": { - "csp": { - "script-src": "'self' 'unsafe-inline' 'unsafe-eval' 'wasm-unsafe-eval'" - } - } -} -``` - -**Key directive:** `'wasm-unsafe-eval'` is **REQUIRED** for WASM in Tauri 2.x - ---- - -## 🎯 How It Works - -### Before (Without Plugins) - -``` -Tauri loads index.html - ↓ -Vite bundles JS (WASM as regular asset) - ↓ -Browser tries to load WASM - ↓ -πŸ’₯ WASM initialization fails - ↓ -Error: Cannot assign to read only property -``` - -**Why it fails:** -- Vite doesn't know how to bundle WASM for Tauri -- WASM file is treated as regular asset -- Tauri webview can't initialize WASM correctly - -### After (With Plugins) - -``` -Tauri loads index.html - ↓ -vite-plugin-wasm handles WASM bundling - ↓ -WASM file served with correct headers - ↓ -vite-plugin-top-level-await enables async init - ↓ -βœ… WASM loads successfully -``` - -**Why it works:** -- `vite-plugin-wasm` handles WASM as special asset type -- Correct MIME type (`application/wasm`) -- Proper initialization order -- Compatible with Tauri's security model - ---- - -## πŸ“Š Comparison - -| Aspect | Browser (dev) | Tauri (without plugins) | Tauri (with plugins) | -|--------|---------------|-------------------------|----------------------| -| WASM Loading | βœ… Works | ❌ Fails | βœ… Works | -| MIME Type | Auto | ❌ Wrong | βœ… Correct | -| Initialization | βœ… Success | ❌ Conflict | βœ… Success | -| CSP Compatibility | N/A | ❌ Issues | βœ… Compatible | - ---- - -## πŸ” Debugging - -### Check if WASM is Loading - -**In Browser DevTools (F12 in Tauri window):** - -1. **Network Tab:** - ``` - Look for: neptune_wasm_bg.wasm - Status: 200 OK - Type: application/wasm - ``` - -2. **Console Tab:** - ``` - Should see: βœ… WASM initialized successfully - Should NOT see: ❌ WASM init error - ``` - -3. **Sources Tab:** - ``` - Check if WASM file is listed under "webpack://" or "(no domain)" - ``` - -### Common Issues - -#### Issue 1: WASM file not found (404) -**Cause:** WASM not bundled correctly -**Fix:** Ensure `vite-plugin-wasm` is installed and configured - -#### Issue 2: CSP violation -**Cause:** Missing `'wasm-unsafe-eval'` in CSP -**Fix:** Add to `script-src` in `tauri.conf.json` - -#### Issue 3: Module initialization error -**Cause:** Top-level await not supported -**Fix:** Install `vite-plugin-top-level-await` - ---- - -## πŸ§ͺ Testing Steps - -### 1. Test in Browser (Should Work) -```bash -npm run dev -``` -- Open http://localhost:5173 -- Navigate to `/auth` β†’ Create Wallet -- Check console: Should see "βœ… WASM initialized successfully" - -### 2. Test in Tauri (Now Should Work) -```bash -npm run tauri:dev -``` -- Tauri window opens -- Navigate to `/auth` β†’ Create Wallet -- Open DevTools (F12) -- Check console: Should see "βœ… WASM initialized successfully" -- Should NOT see any `toString` errors - -### 3. Test Wallet Generation -```typescript -// In CreateWalletFlow.vue -const { generateWallet } = useNeptuneWallet() - -// Click "Create Wallet" button -const result = await generateWallet() - -// Should return: -{ - receiver_identifier: "...", - seed_phrase: ["word1", "word2", ..., "word18"] -} -``` - ---- - -## πŸ“¦ Package Versions - -**Installed:** -```json -{ - "devDependencies": { - "vite-plugin-wasm": "^3.5.0", - "vite-plugin-top-level-await": "^1.6.0" - } -} -``` - -**Compatible with:** -- Vite 7.x -- Tauri 2.x -- Vue 3.x - ---- - -## πŸ”§ Configuration Files - -### `vite.config.ts` -```typescript -import wasm from 'vite-plugin-wasm' -import topLevelAwait from 'vite-plugin-top-level-await' - -export default defineConfig({ - plugins: [ - vue(), - wasm(), - topLevelAwait(), - // ... other plugins - ], -}) -``` - -### `tauri.conf.json` -```json -{ - "app": { - "security": { - "csp": { - "script-src": "'self' 'unsafe-inline' 'unsafe-eval' 'wasm-unsafe-eval'" - } - } - } -} -``` - -### `package.json` -```json -{ - "dependencies": { - "@neptune/wasm": "file:./packages/neptune-wasm" - }, - "devDependencies": { - "vite-plugin-wasm": "^3.5.0", - "vite-plugin-top-level-await": "^1.6.0" - } -} -``` - ---- - -## πŸ’‘ Why Browser Works But Tauri Doesn't - -### Browser (Chrome/Firefox) -- **Permissive WASM loading:** Browsers automatically handle WASM -- **Built-in support:** No special config needed -- **Dev server:** Vite dev server serves WASM with correct headers - -### Tauri (Webview) -- **Strict security:** CSP enforced by default -- **Custom protocol:** Assets loaded via `tauri://` protocol -- **WASM restrictions:** Requires `'wasm-unsafe-eval'` in CSP -- **Asset handling:** Needs proper Vite configuration - -**Tauri = Embedded Browser + Rust Backend** -- More secure (CSP enforced) -- More restrictive (needs explicit config) -- Different asset loading (custom protocol) - ---- - -## πŸš€ Result - -**Before:** -```bash -npm run dev # βœ… WASM works -npm run tauri:dev # ❌ WASM fails (toString error) -``` - -**After:** -```bash -npm run dev # βœ… WASM works -npm run tauri:dev # βœ… WASM works! πŸŽ‰ -``` - ---- - -## πŸ“š Resources - -- [vite-plugin-wasm GitHub](https://github.com/Menci/vite-plugin-wasm) -- [vite-plugin-top-level-await GitHub](https://github.com/Menci/vite-plugin-top-level-await) -- [Tauri Security Documentation](https://tauri.app/v2/reference/config/#securityconfig) -- [WebAssembly with Vite](https://vitejs.dev/guide/features.html#webassembly) - ---- - -## 🎯 Summary - -**Problem:** Tauri can't load WASM without proper Vite configuration -**Solution:** Install `vite-plugin-wasm` + `vite-plugin-top-level-await` -**Result:** WASM works in both browser AND Tauri! πŸš€ - diff --git a/UI_VIEWS_IMPLEMENTATION.md b/UI_VIEWS_IMPLEMENTATION.md deleted file mode 100644 index b07a7c2..0000000 --- a/UI_VIEWS_IMPLEMENTATION.md +++ /dev/null @@ -1,319 +0,0 @@ -# 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/`