Merge pull request #6 from zama-ai/update-bundle

feat: use bundle
zama-ai · Dec 16, 2024 · 2b6840b · 2b6840b
2 parents f4c5e07 + a7a5bb7
commit 2b6840b
Show file tree

Hide file tree

Showing 13 changed files with 138 additions and 87 deletions.
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -0,0 +1,25 @@
+name: Test
+
+on:
+  pull_request:
+    branches:
+      - main
+  push:
+    branches:
+      - main
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [20.x]
+    steps:
+      - uses: actions/checkout@v3
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+      - run: npm ci
+      - run: npm run prettier:check
+      - run: npm run build
diff --git a/README.md b/README.md
@@ -18,9 +18,7 @@ Copy `.env.example` to `.env` and update the gateway URL, ACL address, and KMS a
 npm run dev
 ```
 
-The server listens on [http://localhost:4173/](http://localhost:4173/)
-
-Note: HMR is currently broken because Vite does not handle WASM correctly. A workaround has been implemented as a script: running `npm run dev` will execute a build watch alongside Vite preview. If you have a solution for enabling the Vite dev server with HMR, feel free to open a pull request! :)
+The server listens on [http://localhost:5173/](http://localhost:5173/)
 
 ## Build
 

diff --git a/index.html b/index.html
@@ -1,10 +1,11 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
+    <script src="https://cdn.zama.ai/fhevmjs/0.6.2/fhevmjs.umd.cjs" type="text/javascript"></script>
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + Vue + TS</title>
+    <title>fhEVM Vue demo</title>
   </head>
   <body>
     <div id="app"></div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -4,19 +4,22 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "node scripts/dev.js",
+    "dev": "vite",
     "build": "vue-tsc && vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "prettier": "prettier --write \"**/*.{js,json,md,sol,ts,yml}\"",
+    "prettier:check": "prettier --check \"**/*.{js,json,md,sol,ts,yml}\""
   },
   "dependencies": {
     "ethers": "^6.13.4",
-    "fhevmjs": "^0.6.0",
+    "fhevmjs": "^0.6.2",
     "idb": "^8.0.0",
+    "typescript": "5.6.2",
     "vue": "^3.5.13"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.2.1",
-    "typescript": "^5.7.2",
+    "prettier": "^3.4.2",
     "vite": "^5.4.11",
     "vite-plugin-node-polyfills": "^0.22.0",
     "vue-tsc": "^2.1.10"

diff --git a/scripts/dev.js b/scripts/dev.js
@@ -1,23 +1,23 @@
-import { build, preview } from 'vite';
+import { build, preview } from "vite";
 
 (async () => {
   try {
     await preview({
-      BASE_URL: '/',
-      MODE: 'production',
+      BASE_URL: "/",
+      MODE: "production",
       DEV: false,
       PROD: true,
     });
-    console.log('Preview server is running...');
-    console.log('Listening on http://localhost:4173\n');
+    console.log("Preview server is running...");
+    console.log("Listening on http://localhost:4173\n");
 
     const watcher = await build({
       build: {
         watch: {},
       },
     });
-    console.log('Build in watch mode is running...');
+    console.log("Build in watch mode is running...");
   } catch (err) {
-    console.error('Error:', err);
+    console.error("Error:", err);
   }
 })();
diff --git a/src/components/Connect.vue b/src/components/Connect.vue
@@ -20,8 +20,6 @@ const refreshNetwork = async () => {
     loading.value = true;
     await createFhevmInstance();
     loading.value = false;
-  } else {
-    setValidNetwork(false);
   }
 };
 

diff --git a/src/components/Devnet.vue b/src/components/Devnet.vue
@@ -5,13 +5,12 @@ import { getInstance } from '../fhevmjs';
 
 const toHexString = (bytes: Uint8Array) => bytes.reduce((str, byte) => str + byte.toString(16).padStart(2, '0'), '');
 
-const handles = ref(null);
-const inputProof = ref(null);
+const handles = ref<Uint8Array[] | null>(null);
+const inputProof = ref<Uint8Array | null>(null);
 
 const instance = getInstance();
 
-const encrypt = async (val: number) => {
-  const now = Date.now();
+const encrypt = async () => {
   const enc = await instance
     .createEncryptedInput(
       getAddress('0x309cf2aae85ad8a1db70ca88cfd4225bf17a7456'),

diff --git a/src/fhevmStorage.ts b/src/fhevmStorage.ts
@@ -1,4 +1,4 @@
-import { openDB, DBSchema, IDBPDatabase } from 'idb';
+import { openDB, DBSchema, IDBPDatabase } from "idb";
 
 interface PublicParamsDB extends DBSchema {
   publicKeyStore: {
@@ -17,32 +17,36 @@ interface PublicParamsDB extends DBSchema {
   };
 }
 
-const dbPromise: Promise<IDBPDatabase<PublicParamsDB>> = openDB<PublicParamsDB>('fhevm', 1, {
-  upgrade(db) {
-    if (!db.objectStoreNames.contains('paramsStore')) {
-      db.createObjectStore('paramsStore', { keyPath: 'acl' });
-    }
-    if (!db.objectStoreNames.contains('publicKeyStore')) {
-      db.createObjectStore('publicKeyStore', { keyPath: 'acl' });
-    }
+const dbPromise: Promise<IDBPDatabase<PublicParamsDB>> = openDB<PublicParamsDB>(
+  "fhevm",
+  1,
+  {
+    upgrade(db) {
+      if (!db.objectStoreNames.contains("paramsStore")) {
+        db.createObjectStore("paramsStore", { keyPath: "acl" });
+      }
+      if (!db.objectStoreNames.contains("publicKeyStore")) {
+        db.createObjectStore("publicKeyStore", { keyPath: "acl" });
+      }
+    },
   },
-});
+);
 
 export async function storePublicParams(
   acl: string,
-  value: { publicParamsId: string; publicParams: Uint8Array }
+  value: { publicParamsId: string; publicParams: Uint8Array },
 ): Promise<void> {
   const db = await dbPromise;
-  await db.put('paramsStore', { acl, value });
+  await db.put("paramsStore", { acl, value });
   console.log(`Stored public params for: ${acl}`);
 }
 
 export async function getPublicParams(
-  acl: string
+  acl: string,
 ): Promise<{ publicParamsId: string; publicParams: Uint8Array } | null> {
   const db = await dbPromise;
   try {
-    const result = await db.get('paramsStore', acl);
+    const result = await db.get("paramsStore", acl);
     return result ? result.value : null;
   } catch (e) {
     return null;
@@ -51,17 +55,19 @@ export async function getPublicParams(
 
 export async function storePublicKey(
   acl: string,
-  value: { publicKeyId: string; publicKey: Uint8Array }
+  value: { publicKeyId: string; publicKey: Uint8Array },
 ): Promise<void> {
   const db = await dbPromise;
-  await db.put('publicKeyStore', { acl, value });
+  await db.put("publicKeyStore", { acl, value });
   console.log(`Stored public key for: ${acl}`);
 }
 
-export async function getPublicKey(acl: string): Promise<{ publicKeyId: string; publicKey: Uint8Array } | null> {
+export async function getPublicKey(
+  acl: string,
+): Promise<{ publicKeyId: string; publicKey: Uint8Array } | null> {
   const db = await dbPromise;
   try {
-    const result = await db.get('publicKeyStore', acl);
+    const result = await db.get("publicKeyStore", acl);
     return result ? result.value : null;
   } catch (e) {
     return null;

diff --git a/src/fhevmjs.ts b/src/fhevmjs.ts
@@ -1,6 +1,11 @@
-import { isAddress } from 'ethers';
-import { initFhevm, createInstance, FhevmInstance } from 'fhevmjs';
-import { getPublicKey, getPublicParams, storePublicKey, storePublicParams } from './fhevmStorage';
+import { isAddress } from "ethers";
+import { initFhevm, createInstance, FhevmInstance } from "fhevmjs/bundle";
+import {
+  getPublicKey,
+  getPublicParams,
+  storePublicKey,
+  storePublicParams,
+} from "./fhevmStorage";
 
 const ACL_ADDRESS: string = import.meta.env.VITE_ACL_ADDRESS;
 
@@ -16,9 +21,7 @@ type Keypairs = {
   };
 };
 
-export const init = async () => {
-  await initFhevm({ thread: navigator.hardwareConcurrency });
-};
+export const init = initFhevm;
 
 let instancePromise: Promise<FhevmInstance>;
 let instance: FhevmInstance;
@@ -33,7 +36,7 @@ export const createFhevmInstance = async () => {
   const storedPublicParams = await getPublicParams(ACL_ADDRESS);
   const publicParams = storedPublicParams
     ? {
-        '2048': storedPublicParams,
+        "2048": storedPublicParams,
       }
     : null;
   instancePromise = createInstance({
@@ -56,14 +59,23 @@ export const createFhevmInstance = async () => {
   }
 };
 
-export const setKeypair = (contractAddress: string, userAddress: string, keypair: Keypair) => {
+export const setKeypair = (
+  contractAddress: string,
+  userAddress: string,
+  keypair: Keypair,
+) => {
   if (!isAddress(contractAddress) || !isAddress(userAddress)) return;
   keypairs[userAddress][contractAddress] = keypair;
 };
 
-export const getKeypair = (contractAddress: string, userAddress: string): Keypair | null => {
+export const getKeypair = (
+  contractAddress: string,
+  userAddress: string,
+): Keypair | null => {
   if (!isAddress(contractAddress) || !isAddress(userAddress)) return null;
-  return keypairs[userAddress] ? keypairs[userAddress][contractAddress] || null : null;
+  return keypairs[userAddress]
+    ? keypairs[userAddress][contractAddress] || null
+    : null;
 };
 
 export const getInstance = (): FhevmInstance => {

diff --git a/src/main.ts b/src/main.ts
@@ -1,5 +1,5 @@
-import { createApp } from 'vue'
-import './style.css'
-import App from './App.vue'
+import { createApp } from "vue";
+import "./style.css";
+import App from "./App.vue";
 
-createApp(App).mount('#app')
+createApp(App).mount("#app");