React new version

[claudiogbarreto]

index.js

import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; // import "bootstrap/dist/css/bootstrap.css"; // import "bootstrap/dist/css/bootstrap-theme.css";

ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') );

// If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals reportWebVitals();

App.js

import { Container, Button, Form, Table } from 'react-bootstrap'; import React, { Component } from "react"; //import logo from ‘./logo.svg’; import "./App.css"; import web3 from "./web3"; import ipfs from "./ipfs"; import storehash from "./storehash"; class App extends Component {

state = {
  ipfsHash:null,
  buffer:'',
  ethAddress:'',
  blockNumber:'',
  transactionHash:'',
  gasUsed:'',
  txReceipt: ''   
};

captureFile =(event) => { event.stopPropagation() event.preventDefault() const file = event.target.files[0] let reader = new window.FileReader() reader.readAsArrayBuffer(file) reader.onloadend = () => this.convertToBuffer(reader)
}; convertToBuffer = async(reader) => { //file is converted to a buffer for upload to IPFS const buffer = await Buffer.from(reader.result); //set this buffer -using es6 syntax this.setState({buffer}); }; onClick = async () => { try{ this.setState({blockNumber:"waiting.."}); this.setState({gasUsed:"waiting..."}); //get Transaction Receipt in console on click //See: https://web3js.readthedocs.io/en/1.0/web3-eth.html#gettransactionreceipt await web3.eth.getTransactionReceipt(this.state.transactionHash, (err, txReceipt)=>{ console.log(err,txReceipt); this.setState({txReceipt}); }); //await for getTransactionReceipt await this.setState({blockNumber: this.state.txReceipt.blockNumber}); await this.setState({gasUsed: this.state.txReceipt.gasUsed});
} //try catch(error){ console.log(error); } //catch } //onClick onSubmit = async (event) => { event.preventDefault(); //bring in user's metamask account address const accounts = await web3.eth.getAccounts();

  console.log('Sending from Metamask account: ' + accounts[0]);
//obtain contract address from storehash.js
  const ethAddress= await storehash.options.address;
  this.setState({ethAddress});
//save document to IPFS,return its hash#, and set hash# to state
//https://github.com/ipfs/interface-ipfs-core/blob/master/SPEC/FILES.md#add 
  await ipfs.add(this.state.buffer, (err, ipfsHash) => {
    console.log(err,ipfsHash);
    //setState by setting ipfsHash to ipfsHash[0].hash 
    this.setState({ ipfsHash:ipfsHash[0].hash });

// call Ethereum contract method "sendHash" and .send IPFS hash to etheruem contract //return the transaction hash from the ethereum contract //see, this https://web3js.readthedocs.io/en/1.0/web3-eth-contract.html#methods-mymethod-send

    storehash.methods.sendHash(this.state.ipfsHash).send({
      from: accounts[0] 
    }, (error, transactionHash) => {
      console.log(transactionHash);
      this.setState({transactionHash});
    }); //storehash 
  }) //await ipfs.add 
}; //onSubmit

render() {

  return (
    <div className="App">
      <header className="App-header">
        <h1> Ethereum and IPFS with Create React App</h1>
      </header>
      
      <hr />

Choose file to send to IPFS

Send it

---

Get Transaction Receipt

            <tbody>
              <tr>
                <td>IPFS Hash # stored on Eth Contract</td>
                <td>{this.state.ipfsHash}</td>
              </tr>
              <tr>
                <td>Ethereum Contract Address</td>
                <td>{this.state.ethAddress}</td>
              </tr>
              <tr>
                <td>Tx Hash # </td>
                <td>{this.state.transactionHash}</td>
              </tr>
              <tr>
                <td>Block Number # </td>
                <td>{this.state.blockNumber}</td>
              </tr>
              <tr>
                <td>Gas Used</td>
                <td>{this.state.gasUsed}</td>
              </tr>
            
            </tbody>
        </Table>
    </Container>
 </div>
  );
} //render

} //App export default App;

Tx Receipt Category	Values