Merge pull request #1 from sachayves/master

edits and UX improvements

index.html

@@ -58,7 +58,7 @@
         <br>
         Ethereum trustless <b>zk-mixer</b>.
         <br><br><br>
-        <div class="alertBox"><b>WARNING</b>: experimental code, use only in Göerli testnet, without any real value.</div>
+        <div class="alertBox"><b>WARNING</b>: experimental code, use only in Göerli testnet. Do not use with real ETH.</div>
         <br><br>
 
         <!-- deposit -->
@@ -67,9 +67,11 @@
             <div class="col-md">
               <h5 class="card-title">Deposit</h5>
               <hr>
-              In order to make a deposit, will generate a zkSNARK proof that proves that you know a <i>secret</i> & <i>nullifier</i> for the <i>commitment</i>, and that that <i>commitment</i> has been added into the MerkleTree following the tree <i>state transition function</i> (which ensures that for the new <i>root</i>, there is only one leaf addition and no deletion).
-              <br>
-              If the zk-proof verification passes, the new <i>root</i> & <i>commitment</i> will be stored in to the <b>miksi</b> Smart Contract, and the ETH will be deposited.
+              Under the hood, we'll generate a zkSNARK proof that proves you know a <i>secret</i> for a <i>commitment</i>. And that this commitment has been correctly added to the MerkleTree containing all the commitments in the mixer.
+              </br>
+	      </br>
+		We'll send this proof, along with the new <i>commitment</i> and the hash of the updated MerkleTree, to the <b>miksi</b> smart-contract. The contract will then verify the proof. If the proof is valid, both the new <i>root</i> and the <i>commitment</i> will be added to the contract, and the ETH will be deposited.
+	      
               <br><br>
               <button onclick="deposit('deposit')" class="btn color_primary float-right">Deposit 1 ETH</button>
               <br><br>
@@ -79,16 +81,18 @@
             <div class="col-md">
               <h5 class="card-title">Withdraw</h5>
               <hr>
-              To be able to withdraw, will generate a zkSNARK proof that proves that you know a <i>secret</i> for a public <i>nullifier</i>, which <i>commitment</i> is in the MerkleTree which <i>root</i> is stored in the <b>miksi</b> Smart Contract.
-              <br>
-              If the zk-proof verification passes and the nullifier was not already used, the <b>miksi</b> Smart Contract will send the ETH to the specified address.
+              Under the hood, we'll generate a zkSNARK proof that proves you know a <i>secret</i> for a <i>commitment</i> in the MerkleTree that you wish to withdraw from.
+              </br>
+	      </br>
+              We'll send this proof, along with your withdrawal address, to the <b>miksi</b> smart-contract. The contract will then verify the proof. If the proof is valid, and it's the first time it's been correctly verified for this <i>commitment</i>, the contract will send the associated ETH to your withdrawal address.
               <br><br>
-              <textarea id="jsonWithdraw" class="form-control" style="width:100%;" placeholder="paste here your secret & nullifier"></textarea>
+              <textarea id="jsonWithdraw" class="form-control" style="width:100%;" placeholder="{''secret'': <secret>, ''nullifier'': <nullifier>, ''key'', <key>}"></textarea>
               <br>
-              <input id="withdrawAddress" class="form-control" placeholder="address where to withdraw"></input>
+              <input id="withdrawAddress" class="form-control" placeholder="withdrawal address"></input>
               <br>
               <button onclick="withdraw('withdraw')" class="btn color_primary float-right">Withdraw 1 ETH</button>
               <br>
+	      <br>
               <div id="withdrawRes"></div>
             </div>
           </div>
@@ -108,7 +112,7 @@
 
           <h5><i class="fa fa-info" aria-hidden="true"></i> Info</h5>
           <hr>
-          Spec & core code: <a href="https://github.com/arnaucube/miksi-core" target="_blank">https://github.com/arnaucube/miksi-core</a>
+          Specs and core code: <a href="https://github.com/arnaucube/miksi-core" target="_blank">https://github.com/arnaucube/miksi-core</a>
           <br>
           What is a <a href="https://en.wikipedia.org/wiki/Cryptocurrency_tumbler" target="_blank">mixer</a>?
           <br><br><br>

index.js

@@ -46,7 +46,7 @@ function loadCircuit(circuitname) {
 
 async function deposit(circuitname) {
   if (!metamask) {
-    toastr.error("Please install/connect Metamask");
+    toastr.error("Please connect Metamask by clicking on the button at the top of the page");
     return;
   }
   if (window.ethereum.networkVersion!='5') {
@@ -55,7 +55,7 @@ async function deposit(circuitname) {
     return;
   }
   document.getElementById("depositRes").innerHTML = `
-    Generating zkProof & making the deposit
+    Please wait. Generating the zk-proof and making the deposit...
   `;
   console.log("circuit:", circuitname);
 
@@ -146,15 +146,17 @@ async function deposit(circuitname) {
   };
   console.log("jw", JSON.stringify(jw));
   document.getElementById("depositRes").innerHTML = `
-  <b>Please store the secret data in a safe place:</b><br>
+  </br>
     <input class="form-control" onClick="this.select();" readonly value='`+JSON.stringify(jw)+`'>
     </input>
+</br>
+<b>Please store the data above in a safe place (anyone who has it will be able to withdraw your deposited ETH from the contract).</b>
   `;
 }
 
 async function withdraw(circuitname) {
   if (!metamask) {
-    toastr.error("Please install/connect Metamask");
+    toastr.error("Please connect Metamask by clicking on the button at the top of the page");
     return;
   }
   if (window.ethereum.networkVersion!='5') {
@@ -163,12 +165,12 @@ async function withdraw(circuitname) {
     return;
   }
   document.getElementById("withdrawRes").innerHTML = `
-    Generating zkProof & making the withdraw
+    Please wait. Generating the zk-proof and making the withdrawal...
   `;
   console.log("circuit:", circuitname);
   let jw;
   try {
-  jw = JSON.parse(document.getElementById("jsonWithdraw").value);
+     jw = JSON.parse(document.getElementById("jsonWithdraw").value); 
   } catch(e) {
     toastr.error("Error reading secret & nullifier: " + e);
   }
@@ -254,7 +256,8 @@ async function withdraw(circuitname) {
       } else {
         let link = `<a href="https://goerli.etherscan.io/tx/`+transactionHash+`" target="_blank">
               https://goerli.etherscan.io/tx/`+transactionHash+`</a>`;
-        println(link);
+         println(link);
+	 document.getElementById("withdrawRes").innerHTML = 'Success :)'
       }
     });
 }