diff --git a/.eslintrc.cjs b/.eslintrc.cjs index be2d504..0b6318f 100644 --- 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 new file mode 100644 index 0000000..c37e774 --- /dev/null +++ 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 index a9c0e35..be168d6 100644 --- 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 index 23c73c1..f4894f9 100644 --- a/index.html +++ b/index.html @@ -2,6 +2,10 @@ + fhEVM React demo diff --git a/package-lock.json b/package-lock.json index 53f65b4..aa7f6ac 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,7 +22,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", @@ -2816,10 +2816,11 @@ } }, "node_modules/fhevmjs": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/fhevmjs/-/fhevmjs-0.6.1.tgz", - "integrity": "sha512-y8G92We5oHHIunA7TykvUR5Sv1jYEQmBfEHJZb6q3GZRPoaHPbmN5QB+R+6NmVk/dch9osbjUnMlGZe7tV4bQA==", + "version": "0.6.2", + "resolved": "https://registry.npmjs.org/fhevmjs/-/fhevmjs-0.6.2.tgz", + "integrity": "sha512-Kiq59DiqusavaCft8AzSVF2G92ZrNyf3u2dmu3zqlOxK5TGXAIY7PNICrV4xvT+pVxiAF88auNP+tH/dFqx1iA==", "dev": true, + "license": "BSD-3-Clause-Clear", "dependencies": { "bigint-buffer": "^1.1.5", "commander": "^11.0.0", @@ -6802,9 +6803,9 @@ } }, "fhevmjs": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/fhevmjs/-/fhevmjs-0.6.1.tgz", - "integrity": "sha512-y8G92We5oHHIunA7TykvUR5Sv1jYEQmBfEHJZb6q3GZRPoaHPbmN5QB+R+6NmVk/dch9osbjUnMlGZe7tV4bQA==", + "version": "0.6.2", + "resolved": "https://registry.npmjs.org/fhevmjs/-/fhevmjs-0.6.2.tgz", + "integrity": "sha512-Kiq59DiqusavaCft8AzSVF2G92ZrNyf3u2dmu3zqlOxK5TGXAIY7PNICrV4xvT+pVxiAF88auNP+tH/dFqx1iA==", "dev": true, "requires": { "bigint-buffer": "^1.1.5", diff --git a/package.json b/package.json index d0811b1..2866574 100644 --- 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 deleted file mode 100644 index 01e2308..0000000 --- a/scripts/dev.js +++ /dev/null @@ -1,23 +0,0 @@ -import { build, preview } from 'vite'; - -(async () => { - try { - await preview({ - BASE_URL: '/', - MODE: 'production', - DEV: false, - PROD: true, - }); - 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...'); - } catch (err) { - console.error('Error:', err); - } -})(); diff --git a/src/App.tsx b/src/App.tsx index b12f3a0..4849175 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -8,11 +8,17 @@ 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; @@ -20,9 +26,15 @@ function App() { return ( <>

fhevmjs

- {(account, provider) => } + + {(account, provider) => ( + + )} +

- See the documentation for more information + + See the documentation for more information +

); diff --git a/src/components/Connect/Connect.tsx b/src/components/Connect/Connect.tsx index e06f0f9..90e4733 100644 --- 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 => { - 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 = (
{!connected && } - {connected &&
Connected with {account}
} + {connected && ( +
Connected with {account}
+ )}
); diff --git a/src/components/Devnet/Devnet.tsx b/src/components/Devnet/Devnet.tsx index f8a4e6a..86bb570 100644 --- 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([]); const [encryption, setEncryption] = useState(); const [eip712, setEip712] = diff --git a/src/fhevmjs.ts b/src/fhevmjs.ts index 1e7f0bf..694474c 100644 --- 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; let instance: FhevmInstance; diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts index e7bd798..5d28713 100644 --- 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 index f4b046a..ab42657 100644 --- 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', - }, - }, - }, });