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

コロナによる需要変化 コロナパンデミックの影響で、人々は外に出られなくなり、自宅で過ごす時間が増えました。 この自粛ムードの中、下記のようなビジネスの需要変化が引き起こされています。 【利用者減少】 ...

2

米国レストランの決済時に毎日お世話になっていた「Square」のビジネスモデルについて本日はふれていきたいと思います。 「Square」とは、ネットにつながったモバイル端末と専用のカードリーダーを用意 ...

3

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

4

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

5

ナイキのSNKRSが、なぜこれほどまでに人気なのか?調べてみました。 きっかけは米国での友達との会話。彼は自分のシューズをみせて、「これ20万円もしたんだぜ。」と語ってくれました。 あまり靴に興味がな ...

-Blockchain, code, Metaverse, VR
-, ,

Copyright© BUSINESS HACKER , 2021 All Rights Reserved Powered by AFFINGER5.