XNT-Mobile-Wallet/TAURI_WASM_FIX.md

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 '#<AxiosURLSearchParams>'

✅ Solutions Applied

1. CSP (Content Security Policy) Update

File: src-tauri/tauri.conf.json

Added required CSP directives for WASM:

{
  "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

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

{
  "dependencies": {
    "axios": "^1.7.9"  // Fixed from invalid "1.13.2"
  }
}

🧪 Testing

1. Browser (Should work)

npm run dev

Open http://localhost:5173/auth → Create wallet → Should work

2. Tauri (Should work now)

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

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:

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

npm run tauri:build

📚 References

• Tauri CSP Documentation
• Vite WASM Plugin
• wasm-bindgen with Vite

🎯 Summary

Problem: Tauri CSP blocked WASM execution
Solution: Add 'wasm-unsafe-eval' + asset: protocol + proper Vite config
Status: Should work now! 🚀