日報その9-logo

日報その9@eth-ipfs解説してみた。

先日紹介したEthereum + InterPlanetary File System (IPFS)+ React.jsなもりもりなソースについて今日はやりました。

とりあえず、react初めてってことでソース追ってみました。たぶんあっているはず

import {Table, Grid, Button, Form } 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 {
 //配列の初期値を作成している
 //画面の使われている変数でthis.state.ipfsHashとかがあるからここから動的に取得しているはず
    state = {
      ipfsHash:null,
      buffer:'',
      ethAddress:'',
      blockNumber:'',
      transactionHash:'',
      gasUsed:'',
      txReceipt: ''   
    };
//ファイルをアップロードするときのformにcaptureFileがあるからファイルデータ
//=(event)で代入的なことをしているのか
    captureFile =(event) => {
//ここはたぶんお作法的なこと
        event.stopPropagation()
        event.preventDefault()
        const file = event.target.files[0]
        let reader = new window.FileReader()
//ipfs addするためにfileをbuffer化している。(というよりもbuffer化するための下準備?)
        reader.readAsArrayBuffer(file)
        reader.onloadend = () => this.convertToBuffer(reader)    
      };
//ここでbuffer化している
    convertToBuffer = async(reader) => {
      //file is converted to a buffer to prepare for uploading to IPFS
        const buffer = await Buffer.from(reader.result);
      //set this buffer -using es6 syntax
//setStateは見た感じstate配列にいれるための関数っぽいな。reactで定義してる?
//stateのbufferにいれている
        this.setState({buffer});
    };

//Get Transaction Receiptボタンを押した際の挙動
    onClick = async () => {

    try{
    //取得するまでwaitingを配列に入れる
        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
//ethと対話している感じかな。取得できたらtxReceiptを配列に入れている
        await web3.eth.getTransactionReceipt(this.state.transactionHash, (err, txReceipt)=>{
          console.log(err,txReceipt);
          this.setState({txReceipt});
        }); //await for getTransactionReceipt

//txReceiptからblockNumber,gasUsedを取得してさっきのwaitingを更新
        await this.setState({blockNumber: this.state.txReceipt.blockNumber});
        await this.setState({gasUsed: this.state.txReceipt.gasUsed});    
      } //try
    catch(error){
        console.log(error);
      } //catch
  } //onClick

//fileをアップロードしてボタンをクリックしたときのアクション
//エラーハンドリングしていないからなかったらエラー発生する
    onSubmit = async (event) => {
//これやっぱりお作法なのか?あとで調べる。
      event.preventDefault();

      //bring in user's metamask account address
//metamaskからアカウントを取得
      const accounts = await web3.eth.getAccounts();
     
      console.log('Sending from Metamask account: ' + accounts[0]);

      //obtain contract address from storehash.js
//storehash.jsで定義されているaddresを取得してethAddressにいれている
//optionsはfileのconstを取得してくる的なやつかね?
      const ethAddress= await storehash.options.address;
//それでethAddressをstateに入れる
      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 
//fileを整形してbuffer化したものをipfs addしてる。やっぱりbufferしないとだめだったのか
      await ipfs.add(this.state.buffer, (err, ipfsHash) => {
        console.log(err,ipfsHash);
        //setState by setting ipfsHash to ipfsHash[0].hash 
//ipfs addして取得したipfs hashをstateに入れる
        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
//contractにipfs hashを送信
//これmethodsって何指定している?ファイル全体?
        storehash.methods.sendHash(this.state.ipfsHash).send({
          from: accounts[0] 
        }, (error, transactionHash) => {
          console.log(transactionHash);
//返り値のtransaction hashを取得
//stateに入れる
          this.setState({transactionHash});
        }); //storehash 
      }) //await ipfs.add 
    }; //onSubmit 
  
    render() {
//this.state.xxxxはstateの配列から動的に取得している。
      return (
        <div className="App">
          <header className="App-header">
            <h1> Ethereum and InterPlanetary File System(IPFS) with Create React App</h1>
          </header>
          
          <hr />

        <Grid>
          <h3> Choose file to send to 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}> Get Transaction Receipt </Button>

              <Table bordered responsive>
                <thead>
                  <tr>
                    <th>Tx Receipt Category</th>
                    <th>Values</th>
                  </tr>
                </thead>
               
                <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>
        </Grid>
     </div>
      );
    } //render
}

export default App;

なかなか読みやすかった!よさ気ですね〜がっつり勉強しないと。

あとERC721の適用やってました。OpenZeppelinのsampleでtokenの発行まではできた。あとはipfs hashの適用だが、そもそもERC721の実装忘れていたので復習。

あとはフロントをドキュメントを書きやすいように整形する。それでOpenSeaと連携すれば一区切りかな。でもこれだけじゃ面白くないよな〜って感じています。最近考えているのはソースコードのERC721化。ipfs hashだとサーバー上にファイルを置かないので容量の心配もない(CPUはどうなるかわからんけど)。自分のソースコードの売買ってどうなんだろね。現状のDAppsのユーザーは開発者が多いから一定人気がでそうな反面、基本的にOSSだからあんまり流行らないかな〜。悩み。

作業時間 2h
おしまい

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

たえがとうございます!(山口県)
4

DaiDai | BlockChain開発

池袋で活動している24歳のブロックチェーンエンジニア。こつこつをモットーにブロックチェーンサービスを作成中!noteに活動履歴があるので見てね!お気軽にフォローしてください。ご相談等あればDMください。 https://twitter.com/yamamotodaa

DaiDai日報まとめました

ゴリラが人に成長していく過程を見れます。
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。