Sw9jjY0d

1import '../assets/css/Login-Form-Dark.css';
2import '../assets/css/styles.css';
3import {Component, useEffect, useState} from 'react';
4import { voteKeyGenerator, zkProvider}  from './zkProvider';
5import { Accounts, Election, web3 } from "./web3_utility";
6import { withRouter } from 'react-router-dom';
7import {initialize, metadata } from 'zokrates-js';
8
9class VoteKeyGeneratorForm extends Component {
10    constructor(props){
11        super(props);
12        this.state = {
13            secretKey: "Secret Key",
14            voteKey: "",
15            voteKeyGenerator: null,
16            hashBinary: null,
17            zokFile: null
18          };
19          this.handleChange = this.handleChange.bind(this);
20          this.generateVoteKey = this.generateVoteKey.bind(this);
21          this.getHashBinary = this.getHashBinary.bind(this);
22          this.getZokFile = this.getZokFile.bind(this);
23          this.compileZok = this.compileZok.bind(this);
24        }
25   handleChange = (e) => {
26    const val  = e.target.value;
27    this.setState({
28      [e.target.name]: val
29    });
30    console.log('State: ' + e.target.name + ' Value:' + val);
31    };
32    generateVoteKey = (e) => {
33      e.preventDefault();
34      console.log(this.state.secretKey);
35      console.log(this.state.hashBinary);
36      const sk = this.state.secretKey;
37      let vk;
38      initialize().then((zkProvider) => {
39        
40        let hashABI = {
41          "inputs": [
42            {
43              "name": "alpha",
44              "public": true,
45              "type": "array",
46              "components": {
47                "size": 2,
48                "type": "field"
49              }
50            }
51          ],
52          "outputs": [
53            {
54              "type": "field"
55            }
56          ]
57        };
58        //@TODO: Convert hashABI into direct JSON read
59        console.log("Computing Witness fo")
60        console.log("COMPILER ZOK-JS: " + metadata.version)
61        let { witness, output } = zkProvider.computeWitness(this.state.voteKeyGenerator, [["1337","0"]]);
62        console.log("Witness:" + witness);
63        console.log("Output: " + output);
64        vk = output;
65      });
66 //    let vk = zkProvider.computeWitness(this.state.hashBinary, this.state.secretKey);
67    // let vk = MiMCHash(sk);
68      this.setState({voteKey : vk});
69      console.log("Your vote key is: " + vk);
70
71    }
72    /**
73     * 
74     * @param {event object recieved from onClick} e 
75     * Submits the Vote Key to the chain (Secret Key never leaves the DApp)
76     */
77    submitVoteKey = async (e) => {
78        e.preventDefault();
79        console.log("Sending request to Blockchain network \n");
80        console.log(this.state +  "\n");
81        await Election.methods
82          .generateVoteKey(this.state.voteKey)
83          .send({ from: Accounts[0], gas: 400000 });
84       
85          console.log("End of Conduct \n");
86    }
87    getZokFile = (event) => {
88      console.log("Get Zok File caled");
89      const file = event.target.files[0];
90      console.log('files: ' + file);
91      const reader = new FileReader();
92      reader.readAsText(file);
93      reader.addEventListener('load', (e) => {
94        const buffer = reader.result;
95        const bufferLength = buffer.length;
96        console.log("Data loaded successfully");
97        this.setState({zokFile: buffer.toString()/*CHANGED*/});
98      });
99    }
100    compileZok = (e) => {
101      e.preventDefault();
102      console.log(this.state.zokFile);
103      console.log(zkProvider);
104      this.setState({voteKeyGenerator: zkProvider.compile(this.state.zokFile)});
105      console.log("artifact compiled: " + this.state.voteKeyGenerator);
106    }
107    render() {
108            return (
109              <div>
110                <meta charSet="utf-8" />
111                <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
112                <title>DApp</title>
113                <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css" />
114                <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Alfa+Slab+One" />
115                <link rel="stylesheet" href="assets/fonts/ionicons.min.css" />
116                <link rel="stylesheet" href="assets/css/Login-Form-Dark.css" />
117                <link rel="stylesheet" href="assets/css/styles.css" />
118                <section className="login-dark">
119                  <nav className="navbar navbar-light navbar-expand-md">
120                    <div className="container-fluid"><a className="navbar-brand link-light" href="#" style={{color: 'var(--bs-yellow)', fontFamily: '"Alfa Slab One", serif'}}>&nbsp; NFT AUCTION</a><button data-bs-toggle="collapse" className="navbar-toggler" data-bs-target="#navcol-1"><span className="visually-hidden">Toggle navigation</span><span className="navbar-toggler-icon" /></button>
121                      <div className="collapse navbar-collapse" id="navcol-1">
122                        <ul className="navbar-nav">
123                          <li className="nav-item"><a className="nav-link active" href="/conductElection.html" style={{fontFamily: '"Alfa Slab One", serif', color: 'var(--bs-yellow)'}}>Conduct Election</a></li>
124                          <li className="nav-item"><a className="nav-link" href="/generateVoteKey.html"  style={{color: 'var(--bs-yellow)', fontFamily: '"Alfa Slab One", serif'}}>Generate Vote Key</a></li>
125                          <li className="nav-item"><a className="nav-link" href="/submitVote.html" style={{fontFamily: '"Alfa Slab One", serif', color: 'var(--bs-yellow)'}}>Submit Vote</a></li>
126                          <li className="nav-item" />
127                        </ul>
128                      </div>
129                    </div>
130                  </nav>
131                  <form method="post" id="VoteKeyGenerationForm">
132                    <h2 className="visually-hidden">Vote Key Generation Form</h2>
133                    <div className="illustration"><i className="icon ion-ios-locked-outline" /></div>
134                    <div className="mb-3" />
135                    <div className="mb-3"><input className="form-control" type="password" id="secretKey" name="secretKey" onChange = {this.handleChange} placeholder="Enter a Secret Key" /></div>
136                    <input type="file" id="fileGetter_Hash" onChange={this.getZokFile}></input>        <input type="file" id="fileGetter_Hash" onChange={this.getHashBinary}></input>
137                    <div className="mb-3"><button className="btn btn-primary d-block w-100" type="submit" onClick= {this.compileZok}>Compile </button></div>
138                    
139                    <div className="mb-3"><button className="btn btn-primary d-block w-100" type="submit" onClick= {this.generateVoteKey}>Generate Vote Key</button></div>
140                    <div className="mb-3"><button className="btn btn-primary d-block w-100" type="submit"  onClick= {this.submitVoteKey}>Submit Vote Key</button></div>
141                    
142                    <a className="forgot" href="/conductElection.html">Want to start your own election?</a>
143                  </form>
144                </section>
145              </div>
146            );
147            }
148      //***************** BUGGY ************************ */
149    getHashBinary = (event) => { 
150      console.log('getHashBinary called \n');
151      const file = event.target.files[0];
152      console.log('files: ' + file);
153 //   this.blobToBuffer(event.target.files[0]);
154      const reader = new FileReader();
155      reader.readAsArrayBuffer(file);
156      reader.addEventListener('load', (e) => {
157        const buffer = reader.result;
158        const bufferLength = buffer.length;
159        console.log("Data loaded successfully");
160   //     const data = reader.result.slice(reader.result.)
161        console.log("Reader Loaded.\n")
162        console.log("Buffer Length: " + buffer.byteLength);
163        var binArray = new Uint8Array(buffer);
164       // var binArray = new Uint8Array(buffer.slice(),8);
165        console.log("binArray length : " + binArray.length)
166        //var binaryString = String.fromCharCode.apply(null,binArray) ;
167        //console.log("binaryString: " + binaryString);
168
169        this.setState({hashBinary: binArray/*CHANGED*/});
170      });
171      reader.addEventListener('progress', (event) => {
172        if (event.loaded && event.total) {
173          const percent = (event.loaded / event.total) * 100;
174          console.log(`Progress: ${Math.round(percent)}`);
175        }
176      });
177        // The file's text will be printed here
178       // console.log(this.sate.hashBinary);
179    //reader.readAsBinaryString(file);
180    }
181    
182}
183export default withRouter(VoteKeyGeneratorForm)