Construir um DApp com Ethereum + Sistema de Arquivos InterPlanetário (IPFS)+ React.js.

npm i create-react-app
npm install react-bootstrap
npm install fs-extra
npm install ipfs-api
npm install web3@^1.0.0-beta.26

pragma solidity ^0.4.17;
contract Contract {
string ipfsHash;

function sendHash(string x) public {
  ipfsHash = x;
}
function getHash() public view returns (string x) {
  return ipfsHash;
}}

    //substitui a metamask v0.2 por nossa versão 1.0.
    //1.0 nos permite usar async e await ao invés de promisesimport Web3 from 'web3';
    const web3 = new Web3(window.web3.currentProvider);export default web3;

    import web3 from './web3';//acessar nossa cópia local para o contrato implantado na testnet rinkeby
    //usar o seu prórpio endereço de contrato addressconst = '0xb84b12e953f5bcf01b05f926728e855f2d4a67a9';//usar a ABI da sua contractconst abi = [
     {
       "constant": true,
       "inputs": [],
       "name": "getHash",
       "outputs": [
         {
           "name": "x",
           "type": "string"
         }
       ],
       "payable": false,
       "stateMutability": "view",
       "type": "function"
     },
     {
       "constant": false,
       "inputs": [
         {
           "name": "x",
           "type": "string"
         }
       ],
       "name": "sendHash",
       "outputs": [],
       "payable": false,
       "stateMutability": "nonpayable",
       "type": "function"
     }
    ]export default new web3.eth.Contract(abi, address);

    //usar o nó infura.io, caso contrário, o ipfs exige que você execute um //daemon no seu computador/servidor.const IPFS = require('ipfs-api');
    const ipfs = new IPFS({ host: 'ipfs.infura.io', port: 5001, protocol: 'https' });//execute com o  daemon local
    // const ipfsApi = require('ipfs-api');
    // const ipfs = new ipfsApi('localhost', '5001', {protocol:'http'});export default ipfs;

import React, { Component } from 'react';
//importe logo de './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) => {
     //O arquivo é convertido em um buffer para ser carregado no IPFS 
       const buffer = await Buffer.from(reader.result);
     //defina o buffer -usando a sintaxe es6
       this.setState({buffer});
   };onClick = async () => {try{
       this.setState({blockNumber:"waiting.."});
       this.setState({gasUsed:"waiting..."});//obter o recibo de transação no console ao clicar
//Veja: https://web3js.readthedocs.io/en/1.0/web3-eth.html#gettransactionreceiptawait web3.eth.getTransactionReceipt(this.state.transactionHash, (err, txReceipt)=>{
         console.log(err,txReceipt);
         this.setState({txReceipt});
       }); //esperar por getTransactionReceiptawait this.setState({blockNumber: this.state.txReceipt.blockNumber});
       await this.setState({gasUsed: this.state.txReceipt.gasUsed});   
     } //try
   catch(error){
       console.log(error);
     } //catch
 } //onClickonSubmit = async (event) => {
     event.preventDefault();     //trazer o endereço da conta da metamask do usuário
     const accounts = await web3.eth.getAccounts();


     console.log('Enviando da conta Metamask: ' + accounts[0]);    //obter o endereço do contrato de storehash.js
     const ethAddress= await storehash.options.address;
     this.setState({ethAddress});    //salve o documento no IPFS, retorne seu hash# e defina o hash# para 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 definindo ipfsHash para ipfsHash[0].hash
       this.setState({ ipfsHash:ipfsHash[0].hash });   // chame o método de contrato Ethereum "sendHash" e envie o hash IPFS para o contrato ethereum
 //retorne o hash da transação do contrato ethereum contract
//veja isto 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
   }; //onSubmitrender() {


     return (
       <div className="App">
         <header className="App-header">
           <h1> Ethereum e IPFS com Create React App</h1>
         </header>


         <hr /><Grid>
         <h3> Escolha o arquivo para enviar ao IPFS </h3>
         <Form onSubmit={this.onSubmit}>
           <input
             type = "file"
             onChange = {this.captureFile}
           />
            <Button
            bsStyle="primary"
            type="submit">
            Send it
            </Button>
         </Form><hr/>
<Button onClick = {this.onClick}> Obter recibo de transação </Button>  <Table bordered responsive>
               <thead>
                 <tr>
                   <th>Categoria de Recibo Tx</th>
                   <th>Valores</th>
                 </tr>
               </thead>


               <tbody>
                 <tr>
                   <td>Hash # IPFS armazenado no contrato Eth</td>
                   <td>{this.state.ipfsHash}</td>
                 </tr>
                 <tr>
                   <td>Endereço do Contrato Address</td>
                   <td>{this.state.ethAddress}</td>
                 </tr>                  <tr>
                   <td>Tx Hash # </td>
                   <td>{this.state.transactionHash}</td>
                 </tr>                  <tr>
                   <td> Número do bloco # </td>
                   <td>{this.state.blockNumber}</td>
                 </tr>                  <tr>
                   <td>Gas Utilizado</td>
                   <td>{this.state.gasUsed}</td>
                 </tr>


               </tbody>
           </Table>
       </Grid>
    </div>
     );
   } //render
} //Appexport default App;

/*algum css que adicionei*/
input[type="file"] {
display: inline-block;
}.table {
max-width: 90%;
margin: 10px;
}
.table th {
text-align: center;
}
/*end of my css*/

/*https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-stylesheet*/
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-theme.css';