Merge pull request #3 from zkonduit/feat--populate-files

feat: populate files button

app/App.tsx

@@ -1,7 +1,7 @@
 'use client'
 import React, { useEffect, useState } from 'react'
 
-import init from '@ezkljs/engine'
+import init from '@ezkljs/engine/web/ezkl.js'
 
 import ElgamalRandomVar from './components/ElgamalRandomVar'
 import ElgamalEncrypt from './components/ElgamalEncrypt'
@@ -31,8 +31,92 @@ export default function Home() {
     setFiles((prevFiles) => ({ ...prevFiles, [id]: file }))
   }
 
+  async function populateWithSampleFiles() {
+
+    const sampleFiles: Files = {};
+
+    // Fetch the elgamal_cipher.txt file
+    const cipherResponse = await fetch('/data/elgamal_cipher.txt');
+    const cipherBlob: Blob = await cipherResponse.blob();
+    sampleFiles['elgamal_cipher'] = new File([cipherBlob], "elgamal_cipher.txt");
+
+    // Fetch the elgamal_sk.txt file
+    const skResponse = await fetch('/data/elgamal_var/sk.txt');
+    const skBlob: Blob = await skResponse.blob();
+    sampleFiles['elgamal_sk'] = new File([skBlob], "elgamal_sk.txt");
+
+    // Fetch the elgamal_pk.txt file
+    const pkResponse = await fetch('/data/elgamal_var/pk.txt');
+    const pkBlob: Blob = await pkResponse.blob();
+    sampleFiles['elgamal_pk'] = new File([pkBlob], "elgamal_pk.txt");
+
+    // Fetch the elgamal_message.txt file
+    const messageResponse = await fetch('/data/message.txt');
+    const messageBlob: Blob = await messageResponse.blob();
+    sampleFiles['elgamal_message'] = new File([messageBlob], "elgamal_message.txt");
+
+    // Fetch the elgamal_r.txt file
+    const rResponse = await fetch('/data/elgamal_var/r.txt');
+    const rBlob: Blob = await rResponse.blob();
+    sampleFiles['elgamal_r'] = new File([rBlob], "elgamal_r.txt");
+
+    // Fetch the data_prove.txt file
+    const dataProveResponse = await fetch('/data/test.witness.json');
+    const dataProveBlob: Blob = await dataProveResponse.blob();
+    sampleFiles['data_prove'] = new File([dataProveBlob], "data_prove.txt");
+
+    // Fetch the pk_prove.txt file
+    const pkProveResponse = await fetch('/data/test.provekey');
+    const pkProveBlob: Blob = await pkProveResponse.blob();
+    sampleFiles['pk_prove'] = new File([pkProveBlob], "pk_prove.txt");
+
+    // Fetch the model_ser_prove.txt file
+    const modelSerProveResponse = await fetch('/data/test_network.compiled');
+    const modelSerProveBlob: Blob = await modelSerProveResponse.blob();
+    sampleFiles['model_ser_prove'] = new File([modelSerProveBlob], "model_ser_prove.txt");
+
+    // Fetch the circuit_settings_ser_prove.txt file
+    const circuitSettingsSerProveResponse = await fetch('/data/settings.json');
+    const circuitSettingsSerProveBlob: Blob = await circuitSettingsSerProveResponse.blob();
+    sampleFiles['circuit_settings_ser_prove'] = new File([circuitSettingsSerProveBlob], "circuit_settings_ser_prove.txt");
+
+    // Fetch the srs_ser_prove.txt file
+    const srsSerProveResponse = await fetch('/data/kzg');
+    const srsSerProveBlob: Blob = await srsSerProveResponse.blob();
+    sampleFiles['srs_ser_prove'] = new File([srsSerProveBlob], "srs_ser_prove.txt");
+
+    // Fetch the proof_js.txt file
+    const proofJsResponse = await fetch('/data/test.proof');
+    const proofJsBlob: Blob = await proofJsResponse.blob();
+    sampleFiles['proof_js'] = new File([proofJsBlob], "proof_js.txt");
+
+    // Fetch the vk.txt file
+    const vkResponse = await fetch('/data/test.key');
+    const vkBlob: Blob = await vkResponse.blob();
+    sampleFiles['vk'] = new File([vkBlob], "vk.txt");
+
+    // Fetch the circuit_settings_ser_verify.txt file
+    const circuitSettingsSerVerifyResponse = await fetch('/data/settings.json');
+    const circuitSettingsSerVerifyBlob: Blob = await circuitSettingsSerVerifyResponse.blob();
+    sampleFiles['circuit_settings_ser_verify'] = new File([circuitSettingsSerVerifyBlob], "circuit_settings_ser_verify.txt");
+
+    // Fetch the srs_ser_verify.txt file
+    const srsSerVerifyResponse = await fetch('/data/kzg');
+    const srsSerVerifyBlob: Blob = await srsSerVerifyResponse.blob();
+    sampleFiles['srs_ser_verify'] = new File([srsSerVerifyBlob], "srs_ser_verify.txt");
+
+    // Fetch the message_hash.txt file
+    const messageHashResponse = await fetch('/data/message.txt');
+    const messageHashBlob: Blob = await messageHashResponse.blob();
+    sampleFiles['message_hash'] = new File([messageHashBlob], "message_hash.txt");
+
+    setFiles(sampleFiles);
+  }
+
+
   return (
     <div className='App'>
+      <button onClick={populateWithSampleFiles}>Populate with sample files</button>
       <ElgamalRandomVar/>  
 
       <ElgamalEncrypt

app/Utils.tsx

@@ -6,7 +6,7 @@ import {
   prove, 
   poseidonHash, 
   verify 
-} from '@ezkljs/engine'
+} from '@ezkljs/engine/web'
 import JSZip from 'jszip'
 import { saveAs } from 'file-saver'
 import JSONBig from 'json-bigint'
@@ -225,10 +225,21 @@ export async function handleGenElgamalDecryptionButton<T extends FileMapping>(
   }
 }
 
+interface HashResult {
+  output: Uint8ClampedArray;
+  executionTime: number;
+}
+
 
-export async function handleGenHashButton(message: File): Promise<Uint8Array> {
+export async function handleGenHashButton(message: File): Promise<HashResult> {
   const message_hash = await readUploadedFileAsBuffer(message)
-  return poseidonHash(message_hash)
+  const start = performance.now();  // Start the timer
+  const output =  poseidonHash(message_hash)
+  const end = performance.now();  // End the timer
+  return {
+    output: output,
+    executionTime: end - start
+  }
 }
 
 interface VerifyResult {

app/components/ElgamalDecrypt.tsx

@@ -33,16 +33,25 @@ export default function ElgamalDecryption({ files, handleFileChange }: ElgamalDe
       <button
         id='genDecryptionButton'
         onClick={async () => {
+          // Set loading state
+          setDecryptionResult('Loading...')
+
           if (Object.values(files).every((file) => file instanceof File)) {
-            const {output, executionTime} = await handleGenElgamalDecryptionButton(
-              files as { [key: string]: File },
-            )
-            setBuffer(output)
-            setDecryptionResult(
-              output
-                ? 'Cipher decryption successful. Execution time: ' + executionTime + ' ms'
-                : 'Cipher decryption failed',
-            )
+            handleGenElgamalDecryptionButton(files as { [key: string]: File })
+              .then(({ output, executionTime }) => {
+                setBuffer(output)
+
+                // Update result based on the outcome
+                setDecryptionResult(
+                  output
+                    ? 'Decryption successful. Execution time: ' + executionTime + ' ms'
+                    : 'Decryption failed'
+                )
+              })
+              .catch(error => {
+                console.error("An error occurred:", error);
+                setDecryptionResult("An error occurred: " + error);
+              })
           }
         }}
         disabled={!Object.values(files).every((file) => file instanceof File)}

app/components/ElgamalEncrypt.tsx

@@ -41,16 +41,25 @@ export default function ElgamalEncryption({ files, handleFileChange }: ElgamalEn
       <button
         id='genElgamalEncryptionButton'
         onClick={async () => {
+          // Set loading state
+          setEncryptionResult("Loading...");
+
           if (Object.values(files).every((file) => file instanceof File)) {
-            const {output, executionTime} = await handleGenElgamalEncryptionButton(
-              files as { [key: string]: File },
-            )
-            setBuffer(output)
-            setEncryptionResult(
-              output
-                ? 'Cipher generation successful. Execution time: ' + executionTime + 'ms'
-                : 'Cipher generation failed',
-            )
+            handleGenElgamalEncryptionButton(files as { [key: string]: File })
+              .then(({ output, executionTime }) => {
+                setBuffer(output);
+
+                // Update result based on the outcome
+                setEncryptionResult(
+                  output
+                    ? 'Cipher generation successful. Execution time: ' + executionTime + ' ms'
+                    : 'Cipher generation failed'
+                );
+              })
+              .catch(error => {
+                console.error("An error occurred:", error);
+                setEncryptionResult("Error");
+              });
           }
         }}
         disabled={!Object.values(files).every((file) => file instanceof File)}

app/components/GenProof.tsx

@@ -56,16 +56,25 @@ export default function GenProof({ files, handleFileChange }: GenProofProps) {
       <button
         id='genProofButton'
         onClick={async () => {
+          // Set loading state
+          setProofResult('Loading...')
+
           if (Object.values(files).every((file) => file instanceof File)) {
-            const {output, executionTime} = await handleGenProofButton(
-              files as { [key: string]: File },
-            )
-            setBuffer(output)
-            setProofResult(
-              output
-                ? 'Proof generation successful. Execution time: ' + executionTime + ' ms'
-                : 'Proof generation failed',
-            )
+            handleGenProofButton(files as { [key: string]: File })
+              .then(({ output, executionTime }) => {
+                setBuffer(output)
+
+                // Update result based on the outcome
+                setProofResult(
+                  output
+                    ? 'Proof generation successful. Execution time: ' + executionTime + ' ms'
+                    : 'Proof generation failed'
+                )
+              })
+              .catch((error) => {
+                console.error('An error occurred:', error)
+                setProofResult('Error')
+              })
           }
         }}
         disabled={!Object.values(files).every((file) => file instanceof File)}

app/components/Hash.tsx

@@ -7,7 +7,7 @@ interface HashProps {
 }
 
 export default function Hash({ message, handleFileChange }: HashProps) {
-  const [buffer, setBuffer] = useState<Uint8Array | null>(null)
+  const [buffer, setBuffer] = useState<Uint8ClampedArray | null>(null)
   const [hashResult, setHashResult] = useState<string | null>(null)
 
   return (
@@ -23,9 +23,23 @@ export default function Hash({ message, handleFileChange }: HashProps) {
       <button
         id='genHashButton'
         onClick={async () => {
-          const result = await handleGenHashButton(message as File) // 'as' cast should be safe b/c of disabled button
-          setBuffer(result)
-          setHashResult(result ? `Hash: ${result}` : 'Hash Generation failed')
+          // Set loading state
+          setHashResult('Loading...')
+          handleGenHashButton(message as File)
+            .then(({output, executionTime}) => {
+              setBuffer(output)
+
+              // Update result based on the outcome
+              setHashResult(
+                output
+                  ? 'Hash generation successful. Execution time: ' + executionTime + ' ms'
+                  : 'Hash generation failed'
+              )
+            })
+            .catch(error => {
+              console.error("An error occurred:", error);
+              setHashResult("An error occurred: " + error);
+            })
         }}
         disabled={!message}
       >
@@ -34,7 +48,7 @@ export default function Hash({ message, handleFileChange }: HashProps) {
       {buffer && (
         <FileDownload
           fileName='hash.txt'
-          buffer={buffer}
+          buffer={new Uint8Array(buffer.buffer)}
           handleDownloadCompleted={function (): void {
             setBuffer(null)
           }}

app/components/Verify.tsx

@@ -43,11 +43,23 @@ export default function Verify({ files, handleFileChange }: VerifyProps) {
       <button
         id='verifyButton'
         onClick={async () => {
+          // Set loading state
+          setVerifyResult('Loading...')
+
           if (Object.values(files).every((file) => file instanceof File)) {
-            const {output, executionTime} = await handleVerifyButton(
-              files as { [key: string]: File },
-            )
-            setVerifyResult(output ? 'True. Execution time ' + executionTime + ' ms' : 'False')
+            handleVerifyButton(files as { [key: string]: File })
+              .then(({ output, executionTime }) => {
+                // Update result based on the outcome
+                setVerifyResult(
+                  output
+                    ? 'Verification successful. Execution time: ' + executionTime + ' ms'
+                    : 'Verification failed'
+                )
+              })
+              .catch(error => {
+                console.error("An error occurred:", error);
+                setVerifyResult("An error occurred: " + error);
+              })
           }
         }}
         disabled={!Object.values(files).every((file) => file instanceof File)}

jest.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+    preset: 'ts-jest',
+    testEnvironment: 'node',
+  };

package.json

@@ -6,19 +6,22 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "test": "jest"
   },
   "dependencies": {
-    "@ezkljs/engine": "^0.0.2",
+    "@ezkljs/engine": "0.0.5",
     "@types/file-saver": "^2.0.5",
     "@types/json-bigint": "^1.0.1",
     "@types/node": "20.4.5",
     "@types/react": "18.2.18",
     "@types/react-dom": "18.2.7",
     "autoprefixer": "10.4.14",
+    "env": "^0.0.2",
     "eslint": "8.46.0",
     "eslint-config-next": "13.4.12",
     "file-saver": "^2.0.5",
+    "fs": "0.0.1-security",
     "json-bigint": "^1.0.0",
     "jszip": "^3.10.1",
     "next": "13.4.12",
@@ -27,5 +30,9 @@
     "react-dom": "18.2.0",
     "tailwindcss": "3.3.3",
     "typescript": "5.1.6"
+  },
+  "devDependencies": {
+    "@types/jest": "^29.5.3",
+    "jest": "^29.6.3"
   }
 }