Merge pull request #14 from zama-ai/feat/use-cdn

feat: use CDN
zama-ai · Dec 16, 2024 · 74eb9c7 · 74eb9c7
2 parents d07b5c7 + 60f9560
commit 74eb9c7
Show file tree

Hide file tree

Showing 13 changed files with 71 additions and 58 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -18,8 +18,12 @@ module.exports = {
   },
   plugins: ['react-refresh'],
   rules: {
-    'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
     '@typescript-eslint/no-unsafe-call': 'off',
+    '@typescript-eslint/no-unsafe-argument': 'off',
     '@typescript-eslint/no-explicit-any': 'off',
     '@typescript-eslint/no-non-null-assertion': 'off',
     '@typescript-eslint/no-unsafe-assignment': 'off',

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
@@ -2,6 +2,10 @@
 <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>fhEVM React demo</title>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "node scripts/dev.js",
+    "dev": "vite dev",
     "build": "tsc && vite build",
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
@@ -26,7 +26,7 @@
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.4.7",
-    "fhevmjs": "^0.6.1",
+    "fhevmjs": "^0.6.2",
     "prettier": "^3.4.1",
     "typescript": "^5.4.5",
     "vite": "^5.4.11",

diff --git a/scripts/dev.js b/scripts/dev.js
diff --git a/src/App.tsx b/src/App.tsx
@@ -8,21 +8,33 @@ function App() {
   const [isInitialized, setIsInitialized] = useState(false);
 
   useEffect(() => {
+    // Trick to avoid double init with HMR
+    if (window.fhevmjsInitialized) return;
+    window.fhevmjsInitialized = true;
     init()
       .then(() => {
         setIsInitialized(true);
       })
-      .catch(() => setIsInitialized(false));
+      .catch((e) => {
+        console.log(e);
+        setIsInitialized(false);
+      });
   }, []);
 
   if (!isInitialized) return null;
 
   return (
     <>
       <h1>fhevmjs</h1>
-      <Connect>{(account, provider) => <Devnet account={account} provider={provider} />}</Connect>
+      <Connect>
+        {(account, provider) => (
+          <Devnet account={account} provider={provider} />
+        )}
+      </Connect>
       <p className="read-the-docs">
-        <a href="https://docs.zama.ai/fhevm">See the documentation for more information</a>
+        <a href="https://docs.zama.ai/fhevm">
+          See the documentation for more information
+        </a>
       </p>
     </>
   );

diff --git a/src/components/Connect/Connect.tsx b/src/components/Connect/Connect.tsx
@@ -23,7 +23,9 @@ export const Connect: React.FC<{
   };
 
   const hasValidNetwork = async (): Promise<boolean> => {
-    const currentChainId: string = await window.ethereum.request({ method: 'eth_chainId' });
+    const currentChainId: string = await window.ethereum.request({
+      method: 'eth_chainId',
+    });
     return AUTHORIZED_CHAIN_ID.includes(currentChainId.toLowerCase());
   };
 
@@ -124,7 +126,9 @@ export const Connect: React.FC<{
   const connectInfos = (
     <div className="Connect__info">
       {!connected && <button onClick={connect}>Connect your wallet</button>}
-      {connected && <div className="Connect__account">Connected with {account}</div>}
+      {connected && (
+        <div className="Connect__account">Connected with {account}</div>
+      )}
     </div>
   );
 

diff --git a/src/components/Devnet/Devnet.tsx b/src/components/Devnet/Devnet.tsx
@@ -13,7 +13,7 @@ export type DevnetProps = {
 
 const CONTRACT_ADDRESS = '0x309cf2aae85ad8a1db70ca88cfd4225bf17a7482';
 
-export const Devnet = ({ account, provider }: DevnetProps) => {
+export const Devnet = ({ account }: DevnetProps) => {
   const [handles, setHandles] = useState<Uint8Array[]>([]);
   const [encryption, setEncryption] = useState<Uint8Array>();
   const [eip712, setEip712] =

diff --git a/src/fhevmjs.ts b/src/fhevmjs.ts
@@ -1,5 +1,5 @@
 import { isAddress } from 'ethers';
-import { initFhevm, createInstance, FhevmInstance } from 'fhevmjs';
+import { initFhevm, createInstance, FhevmInstance } from 'fhevmjs/bundle';
 import {
   getPublicKey,
   getPublicParams,
@@ -21,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;

diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
@@ -4,4 +4,6 @@ interface Window {
   ethereum: import('ethers').Eip1193Provider & {
     on: (event: string, cb: (param: any) => any) => void;
   };
+  fhevmjs: import('fhevmjs');
+  fhevmjsInitialized: boolean;
 }
diff --git a/vite.config.ts b/vite.config.ts
@@ -2,26 +2,14 @@ import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import { nodePolyfills } from 'vite-plugin-node-polyfills';
 
-const workerImportMetaUrlRE =
-  /\bnew\s+(?:Worker|SharedWorker)\s*\(\s*(new\s+URL\s*\(\s*('[^']+'|"[^"]+"|`[^`]+`)\s*,\s*import\.meta\.url\s*\))/g;
-
 // https://vitejs.dev/config/
 export default defineConfig({
   assetsInclude: ['**/*.bin'],
   plugins: [react(), nodePolyfills()],
   server: {
-    port: 9000,
     headers: {
       'Cross-Origin-Opener-Policy': 'same-origin',
       'Cross-Origin-Embedder-Policy': 'require-corp',
     },
   },
-  worker: {
-    format: 'es',
-    rollupOptions: {
-      output: {
-        entryFileNames: '[name].js',
-      },
-    },
-  },
 });