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>

</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