Blockchain code Metaverse VR

Crypto×VR×SmartContract(392)

スポンサーリンク

//tips

//smart contract

Lottery-reactのweb3.js生成の続きから始める。

import Web3 from 'web3';

const web3 = new Web3(window.web3.currentProvider);
//これによりテストネットワークとキーにアクセスできるようになる

export default web3;//これはweb3 v1.0のもの。メタマスクが生成する0番台ではない

これをApp.jsに反映。

import web3 from './web3';

class App extends Component {

render(){
web3.eth.getAccounts().then(console.log);

ととし、ブラウザのコンソールにweb3インスタンスのアカウントが表示されるかを確認。

web3.eth.getAccounts().then(console.log);

ここでweb3接続アカウントを表示させる形にしているが、なぜかアカウントが表示されない。
ここは一旦質問。

今度はlottery-reactではなく、lotteryフォルダの方に行き、deploy.js及びcompile.jsを修正。

こちらでnode deploy.jsを実行。

十分なテストコインがないので実行できないとエラー。0.4ethはアカウントにあるのでこの問題についても確認。rinkebyはfaucetが現在うまく機能しておらず問題になっているよう。

この内容をlottery-reactに反映させるためlottery.jsを新たに作成し、

import web3 from './web3';

//下記は一旦lotteryをチェーンにデプロイした後に取得できるもの
const address =''//transactionアドレスを入れる deploy実行時に出てくるもの

const abi=[];//deploy実行時に出てくるabi []で囲まれているもの

export default new web3.eth.Contract(abi,address);

このようにして、ローカルコピーをrinkebyのデプロイ済みのコントラクトに渡すよう。テストプロジェクトで行ったlottery.methods.enter().sendでのアクセスをするのと同じ要領とのこと。

渡し方としてはlottery.jsでlottery-reactにコントラクトの内容を使用できるようにする。

import web3 from './web3';

//下記は一旦lotteryをチェーンにデプロイした後に取得できるもの
const address =''//transactionアドレスを入れる deploy実行時に出てくるもの

const abi=[];//deploy実行時に出てくるabi []で囲まれているもの

export default new web3.eth.Contract(abi,address); //lottery.methods.enter().sendでのアクセスと同じ要領とのこと

これを作っておいて、下記のApp.jsのasync componentDidMountにて連動させる。コピーしたものを入れ物に移し替える要領なのだろうか。そして、実際にはrender以下でブラウザに表示する。index.htmlではなくApp.jsにて表示内容を決めている。

少し2つのweb3の関係が見えてきた気がする。

State周りとconstructorでなぜthis.state={manager:’’};だけ定義しているかなどまだ理解が及んでいないところはあるが作りながら理解していく。

import React ,{Component} from 'react';
import logo from './logo.svg';
import './App.css';
import web3 from './web3';
//import { RENDER } from 'ci-info';
import lottery from './lottery';//デプロイに使用したアドレスが入っている

class App extends Component {

state={
manager:'',
players:[],
balance:'',
value:''
};

constructor(props){
super(props);//JavaScriptはこれを呼ぶまでthisは使わせない
//propsの結果はコンポーネント呼び出しのとき渡された値

this.state={manager:''};
}

async componentDidMount(){

//大元のlotteryコントラクトから引っ張る内容
const manager=await lottery.methods.manager().call();
const players=await lottery.methods.getPlayers().call();
const balance=await web3.eth.getBalance(lottery.options.address);

this.setState({manager,players,balance});
}

onSubmit=async(event)=>{
event.preventDefault();
//Event オブジェクトの preventDefault メソッドを使用することで、
//イベントが発生したときにイベントに対してブラウザで設定されているデフォルトの動作をキャンセルさせることができる

const accounts=await web3.eth.getAccounts();

await lottery.methods.enter().send({
from:aacounts[0],
value:web3.utils.toWei(this.state.value,'ether')
});
};

render(){
web3.eth.getAccounts().then(console.log);

return (
<div>
<h2>Lottery Contract</h2>
<p>
This contract is managed by {this.state.manager}.
There are currently {this.state.players.length} people entered,
competing to win {web3.utils.fromWei(this.state.balance,'either')} ether!

</p>
<hr/>
<form onSubmit={this.onSubmit}>
<h4>Want to try your luck?</h4>
<div>
<label>Amount of ether to enter</label>
<input
value={this.state.value}
onChange={event =>{this.state({value:event.target.value})}}
/>
</div>
<button>Enter</button>
</form>

</div>
);
}
}

export default App;

 

人気の記事

1

皆さん、ついに、エアラインでも、サブスクリプションが始まったのはご存じですか? まだ実験段階ですが、ANAが、定額全国住み放題サービスを提供する「ADDress」と組んで、国内線を4回まで定額利用可能 ...

2

無料でネットショップを開けるアプリとして多くの人に驚きを与えたBASE株式会社が、2019年10月25日東証マザーズに上場しました。2020年2月時点で90万店を超えるショップを抱えるまでに成長してい ...

3

2011年にサービスを開始してから圧倒的な成長率を誇るインテリア通販サイト 【FLYMEe/フライミー】を皆さんご存じでしょうか。 「自分のイメージするインテリア、本当に欲しいインテリアがどこにあるの ...

4

ついに、noteの月間アクティブユーザー数が4400万人(2020年3月時点)に到達しました。 そもそも、「note」とは、クリエイターが、文章やマンガ、写真、音声を投稿することができ、ユーザーはその ...

5

ボードゲームカフェが1日2回転で儲かるという記事をみつけたので興味を持ち、調べてみました。 まずは、需要がどれくらいあるのか、市場のようすからみていきましょう。 世界最大のボードゲーム市場はドイツで、 ...

-Blockchain, code, Metaverse, VR
-, ,

Copyright© BUSINESS HUNTER , 2023 All Rights Reserved Powered by AFFINGER5.