Merge pull request #43 from ChainSafe/willem/switch-to-vite

Switch to vite for demo-wallet and add deployment

.github/workflows/deploy-demo.yml

@@ -0,0 +1,52 @@
+name: Build and Deploy demo to Netlify
+
+on:
+    # Runs on pushes targeting the default branch
+    push:
+      branches: ['main']
+    # Allows you to run this workflow manually from the Actions tab
+    workflow_dispatch:
+
+jobs:
+  build:
+    runs-on: ubuntu-22.04
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Install Just
+        uses: extractions/setup-just@v2
+
+      - name: install wasm-pack
+        uses: jetli/[email protected]
+        with:
+          version: latest
+
+      - name: build pkg
+        run: just build
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+
+      - uses: pnpm/action-setup@v4
+
+      - name: Install dependencies
+        run: pnpm i
+
+      - name: Build
+        run: pnpm build
+
+      - name: Deploy to Netlify
+        uses: nwtgck/[email protected]
+        with:
+          publish-dir: './packages/demo-wallet/dist'
+          production-branch: main
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          deploy-message: "Deploy from GitHub Actions"
+          enable-pull-request-comment: false
+          enable-commit-comment: true
+          overwrites-pull-request-comment: true
+        env:
+          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
+        timeout-minutes: 1

.gitignore

@@ -19,5 +19,5 @@ packages/demo-wallet/dist/*
 packages/e2e-tests/dist/*
 ./dist/*
 
-!packages/demo-wallet/dist/serve.json
+!packages/demo-wallet/dist/_headers
 !packages/e2e-tests/dist/serve.json

Cargo.toml

@@ -65,7 +65,7 @@ zcash_client_backend = { git = "https://github.com/ChainSafe/librustzcash", rev
 zcash_client_memory = { git = "https://github.com/ChainSafe/librustzcash", rev = "37c765025386912c6152ba5e9816099a067497e5", features = ["orchard"] }
 zcash_primitives = { git = "https://github.com/ChainSafe/librustzcash", rev = "37c765025386912c6152ba5e9816099a067497e5" }
 zcash_address = { git = "https://github.com/ChainSafe/librustzcash", rev = "37c765025386912c6152ba5e9816099a067497e5" }
-zcash_proofs = { git = "https://github.com/ChainSafe/librustzcash", rev = "37c765025386912c6152ba5e9816099a067497e5", default-features = false, features = ["bundled-prover"] }
+zcash_proofs = { git = "https://github.com/ChainSafe/librustzcash", rev = "37c765025386912c6152ba5e9816099a067497e5", default-features = false, features = ["bundled-prover", "multicore"] }
 zip321 = { git = "https://github.com/ChainSafe/librustzcash", rev = "37c765025386912c6152ba5e9816099a067497e5" }
 
 

README.md

@@ -117,6 +117,10 @@ Browser tests are run in a headless browser environment and can be run with
 just test-web
 ```
 
+## Known Issues
+
+You might notice the demo-wallet builds using parcel despite being configured to use Vite for development. This is due to a [known issue](https://github.com/vitejs/vite/issues/7015) with vite where it cannot correctly handle what it deems to be a cyclic dependency introduced by `wasm_bindgen_rayon` webworkers. Other bundlers tested to not seem to be affected.
+
 ## Security Warnings
 
 These libraries are currently under development, have received no reviews or audit, and come with no guarantees whatsoever.

justfile

@@ -2,7 +2,7 @@ default:
     just --list
 
 build *features:
-    wasm-pack build --no-opt -t web --scope webzjs --release --out-dir ./packages/webz-core --no-default-features --features="wasm wasm-parallel {{features}}" -Z build-std="panic_abort,std"
+    wasm-pack build -t web --scope webzjs --release --out-dir ./packages/webz-core --no-default-features --features="wasm wasm-parallel {{features}}" -Z build-std="panic_abort,std"
 
 # All Wasm Tests
 test-web *features:

package.json

@@ -1,19 +1,14 @@
 {
   "scripts": {
     "preinstall": "npx only-allow pnpm",
-    "build": "parcel build --no-cache --no-autoinstall packages/demo-wallet",
     "serve": "pnpm --filter ./packages/demo-wallet run serve",
-    "start:dev": "parcel --no-autoinstall packages/demo-wallet",
+    "dev": "pnpm --filter ./packages/demo-wallet run dev",
+    "build": "pnpm --filter ./packages/demo-wallet run build",
     "test:e2e": "pnpm --filter ./packages/e2e-tests test"
   },
   "dependencies": {
-    "@webzjs/webz-core": "workspace:^",
-    "@webzjs/demo-wallet": "workspace:^"
-  },
-  "devDependencies": {
-    "@parcel/core": "^2.12.0",
-    "parcel": "^2.12.0",
-    "process": "^0.11.10"
+    "@webzjs/demo-wallet": "workspace:^",
+    "@webzjs/webz-core": "workspace:^"
   },
   "packageManager": "[email protected]+sha512.0a203ffaed5a3f63242cd064c8fb5892366c103e328079318f78062f24ea8c9d50bc6a47aa3567cabefd824d170e78fa2745ed1f16b132e16436146b7688f19b"
 }

packages/demo-wallet/dist/_headers

@@ -0,0 +1,3 @@
+/*
+    Cross-Origin-Opener-Policy: same-origin
+    Cross-Origin-Embedder-Policy: require-corp

packages/demo-wallet/src/index.html → packages/demo-wallet/index.html

@@ -3,10 +3,9 @@
   <head>
     <meta charset="utf-8" />
     <title>WebZjs Wallet Demo</title>
-    <script src="enable-threads.js"></script>
   </head>
   <body>
     <div id="app"></div>
-    <script type="module" src="index.js"></script>
+    <script type="module" src="./src/index.jsx"></script>
   </body>
 </html>

packages/demo-wallet/package.json

@@ -1,8 +1,10 @@
 {
   "name": "@webzjs/demo-wallet",
-  "source": "src/index.html",
+  "source": "index.html",
   "scripts": {
-    "serve": "serve dist"
+    "dev": "vite",
+    "serve": "vite preview",
+    "build": "parcel build index.html"
   },
   "dependencies": {
     "@types/react": "^18.3.9",
@@ -15,10 +17,13 @@
     "react-dom": "^18.2.0",
     "react-qr-code": "^2.0.15",
     "react-toastify": "^10.0.5",
-    "typescript": "^5.6.2",
     "usehooks-ts": "^3.1.0"
   },
   "devDependencies": {
-    "serve": "^14.2.3"
+    "@vitejs/plugin-react": "^4.3.2",
+    "typescript": "^5.6.2",
+    "vite": "^5.4.9",
+    "@parcel/core": "^2.12.0",
+    "parcel": "^2.12.0"
   }
 }

packages/demo-wallet/src/App/Actions.tsx

@@ -19,6 +19,7 @@ export async function init(state: State, dispatch: React.Dispatch<Action>) {
       dispatch({ type: "set-account-seeds", payload: seeds });
     }
   } else {
+    console.info("No saved wallet detected. Creating new wallet");
     wallet = new WebWallet("main", MAINNET_LIGHTWALLETD_PROXY, 1);
   }
 

packages/demo-wallet/tsconfig.json

@@ -0,0 +1,24 @@
+{
+    "compilerOptions": {
+      "target": "ES2020",
+      "useDefineForClassFields": true,
+      "lib": ["ES2020", "DOM", "DOM.Iterable"],
+      "module": "ESNext",
+      "skipLibCheck": true,
+
+      /* Bundler mode */
+      "moduleResolution": "bundler",
+      "allowImportingTsExtensions": true,
+      "isolatedModules": true,
+      "moduleDetection": "force",
+      "noEmit": true,
+      "jsx": "react-jsx",
+
+      /* Linting */
+      // "strict": true,
+      // "noUnusedLocals": true,
+      // "noUnusedParameters": true,
+      "noFallthroughCasesInSwitch": true
+    },
+    "include": ["src"]
+  }

packages/demo-wallet/tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["./src/utils.ts","./src/app/actions.tsx","./src/app/app.tsx","./src/app/constants.tsx","./src/app/components/addaccount.tsx","./src/app/components/header.tsx","./src/app/components/receivefunds.tsx","./src/app/components/sendfunds.tsx","./src/app/components/settings.tsx","./src/app/components/summary.tsx"],"version":"5.6.2"}

packages/demo-wallet/vite.config.ts

@@ -0,0 +1,23 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    headers: {
+      // required to support web-workers spawning web-workers
+      "Cross-Origin-Opener-Policy": "same-origin",
+      "Cross-Origin-Embedder-Policy": "require-corp",
+    },
+  },
+  build: {
+    rollupOptions: {
+      input: {
+        main: "index.html",
+        worker: "node_modules/@webzjs/webz-core/snippets/wasm-bindgen-rayon-3e04391371ad0a8e/src/workerHelpers.worker.js",
+      },
+    },
+    manifest: true,
+  },
+});

packages/e2e-tests/package.json

@@ -14,6 +14,8 @@
     "@playwright/test": "^1.47.2",
     "@types/node": "^22.7.4",
     "@webzjs/webz-core": "workspace:^",
-    "serve": "^14.2.3"
+    "serve": "^14.2.3",
+    "@parcel/core": "^2.12.0",
+    "parcel": "^2.12.0"
   }
 }