Add deposit zkProof generation

css/style.css

@@ -73,24 +73,6 @@ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc66ff', end
   -webkit-touch-callout: none; /* Disable Android and iOS callouts*/
 }
 
-#qrcode > img {
-	border: 8px solid #ffffff;
-}
-
-.upload-btn-wrapper {
-  position: relative;
-  overflow: hidden;
-  display: inline-block;
-}
-
-.upload-btn-wrapper input[type=file] {
-  font-size: 100px;
-  position: absolute;
-  left: 0;
-  top: 0;
-  opacity: 0;
-}
-
 .balanceBox {
 	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#cc66ff+0,FF00B9+98 */
 	background: #cc66ff; /* Old browsers */
@@ -106,6 +88,14 @@ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc66ff', end
 	padding: 10px;
 	/* box-shadow: 0px 0px 30px grey; */
 }
+
 .balanceBox > h3 {
 	font-weight: 900;
 }
+
+.alertBox {
+  border: 1px #FF00B9 solid;
+  border-radius: 5px;
+  padding: 20px;
+  color: #FF00B9;
+}

index.html

@@ -53,7 +53,10 @@
         <i>From Esperanto, <b>miksi</b> (miks·i): to mingle, to blend, to mix, to shuffle</i>
         <br>
         Ethereum trustless <b>zk-mixer</b>.
-        <br><br><br>
+        <br><br>
+        <div class="alertBox"><b>WARNING</b>: experimental code, use only in Göerli testnet, and without real value.</div>
+        <br><br>
+
         <!-- deposit -->
         <div class="tab-pane fade show active" id="deposit" role="tabpanel" aria-labelledby="deposit-tab">
           <div class="row">
@@ -62,7 +65,7 @@
               <hr>
               Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.
               <br><br>
-              <button onclick="todo()" class="btn color_primary float-right">Deposit 1 ETH</button>
+              <button onclick="deposit('deposit')" class="btn color_primary float-right">Deposit 1 ETH</button>
               <br><br><br>
             </div>
             <div class="col-md">
@@ -166,6 +169,13 @@
   <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
   <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.min.js"></script> -->
 
+  <script src="lib/wasmsnark_bn128.js"></script>
+  <script src="lib/snarkjs.js"></script>
+  <!-- <script src="node_modules/web3/dist/web3.min.js"></script> -->
+  <script src="lib/miksi-browser.js"></script>
+
+  <script src="index.js"></script>
+
 
 </body>
 

index.js

@@ -0,0 +1,49 @@
+var circuit = {};
+var provingKey = {};
+var witnessCalc = {};
+
+function loadCircuit(circuitname) {
+  fetch("circuits-files/"+circuitname+"-proving_key.bin").then( (response) => {
+    return response.arrayBuffer();
+  }).then( (b) => {
+    provingKey[circuitname] = b;
+    console.log("proving_key loaded for", circuitname);
+  });
+
+  fetch("circuits-files/"+circuitname+".wasm").then( (response) => {
+    return response.arrayBuffer();
+  }).then( (b) => {
+    witnessCalc[circuitname] = b;
+    console.log("w", b);
+    console.log("witnessCalc loaded for", circuitname);
+  });
+}
+
+async function deposit(circuitname) {
+  console.log("circuit:", circuitname);
+
+  // TODO
+  const secret = "1234567890";
+  const nullifier = "567891234";
+  const commitments = [];
+
+  // witness
+  console.log(witnessCalc[circuitname]);
+  const witness = await miksi.calcWitness(witnessCalc[circuitname], secret, nullifier, commitments);
+  console.log("w", witness);
+
+  // proof
+  const start = new Date().getTime();
+  console.log(provingKey[circuitname]);
+  const proof = await window.groth16GenProof(witness.buffer, provingKey[circuitname]);
+  const end = new Date().getTime();
+  const time = end - start;
+  console.log("circuit " + circuitname + " took " + time + "ms to compute");
+  console.log(proof);
+}
+
+loadCircuit("deposit");
+loadCircuit("withdraw");
+
+
+// var web3 = new Web3(Web3.givenProvider || "ws://localhost:8545");

package.json

@@ -4,6 +4,7 @@
   "description": "",
   "main": "index.js",
   "scripts": {
+    "build": "browserify node_modules/snarkjs/index.js -o lib/snarkjs.js --standalone snarkjs --ignore-missing",
     "predeploy": "npm install",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
@@ -12,6 +13,12 @@
   "dependencies": {
     "axios": "^0.18.0",
     "bootstrap": "^4.2.1",
-    "toastr": "^2.1.4"
+    "toastr": "^2.1.4",
+    "wasmsnark": "0.0.10",
+    "snarkjs": "^0.1.31",
+    "web3": "^1.0.0-beta.30"
+  },
+  "devDependencies": {
+    "browserify": "^16.5.0"
   }
 }