Blockchain code Metaverse VR

Crypto×VR×SmartContract(404)

スポンサーリンク

//tips

//smart contract

一通りrequest newページのUIの整理。これで新たなリクエストを作成するページができた

import React ,{Component} from 'react';
import {Form,Button,Message,Input} from 'semantic-ui-react';
import Campaign from '../../../ethereum/campaign';
import web3 from '../../../ethereum/web3';
import {Link,Router} from '../../../routes';
import Layout from '../../../components/Layout';

class RequestNew extends Component{

state={
value:'',
description:'',
recipient:'',
loading:false,
errorMessage:''
};

//campaign内の新規リクエスト作成部分
//URLからアドレス取得してpropsへ
static async getInitalProps(props){
//index.jsと同じ
const {address}=props.query;
return{address};
}

onSubmit=async event=>{

event.preventDefault();

const campaign=Campaign(this.props.address);
const {description,value,recipient}=this.state;

this.setState({loading:true,errorMessage:''});

try{
const accounts= await web3.eth.getAccounts();
//.solのcreateRequest()を呼び出し
await campaign.methods.createRequest(
description,
web3.utils.toWei(value,'ether'),
recipient
).send({from:accounts[0]});

Router.pushRoute(`/campaigns/${this.props.address}/requests`)

}catch(err){
this.setState({errorMessage:err.message})

}
this.setState({loading:false});
};

render(){
return(
<Layout>
<Link route={`/campaigns/${this.props.address}/requests`}>
<a>
Back
</a>
</Link>
<h3>Create a request</h3>

<Form onSubmit={this.onSubmit} error={!!this.state.errorMessage}>
<Form.Field>
<Label>Description</Label>
<Input
value={this.state.description}
onChange={event=>
this.setState({description:event.target.value})}
/>
</Form.Field>

<Form.Field>
<Label>Value in Ethere</Label>
<Input
value={this.state.value}
onChange={event=>
this.setState({value:event.target.value})}

/>
</Form.Field>

<Form.Field>
<Label>Recipient</Label>
<Input
value={this.state.recipient}
onChange={event=>
this.setState({recipient:event.target.value})}
/>
</Form.Field>
<Message error header="Oops!" content={this.state.errorMessage}/>
<Button primary loading={this.state.loading}> Create!</Button>

</Form>
</Layout>

);
}
}

export default RequestNew;

ここからはrequest index ページを作成して、campaign内のそれぞれのrequestを表示できるようにしていく。

ただ、作成済みのrequestsを簡単に入手することはできず、(arrayが含まれていることが要因のよう)

function getRequestsCount() public view returns(uint){
return requests.length;
}

を使用してループ処理で各リクエスト情報を集約する必要があるとのこと。下記のようにpromise.allとarray().fill().map()を組み合わせることで情報は集められた。

class RequestIndex extends Component{

//campaign内の新規リクエスト作成部分
//URLからアドレス取得してpropsへ
static async getInitalProps(props){
//show.jsと比較してみるとわかりやすい
const {address}=props.query;
const campaign=Campaign(address);
//ここから全てのrequestの数を得られる

const requestCount=await campaign.methods.getRequestsCount().call();

//requestの数から情報集約する
//このrequestsの中身には各requestのdescriptionに始まり、予算額、受取人などの情報が格納される
//しかも前半はarrayで格納、後半はプロパティをそのまま格納されており、2度同じ情報を記載されている
const requests=await Promise.all(
Array(parseInt(requestCount))//array().fill().map()をすることで見やすいリストに変換できる
//[0,1,2,3,4,5,]のような感じに分けて表示してくれる
.fill()
.map((element,index)=>{
return campaign.methods.requests(index).call();
})

);

return{address,requests,requestCount};
}

同時に上記情報を格納するUIのテーブルも実装する。

ImportでTable機能を取り込んだとに

render(){
//Table部分を定義してreturn下で使えるようにする
const{Header,Row,HeaderCell,Body}=Table;

return(
<Layout>
<h3>Requests</h3>
<Link route={`/campaigns/${this.props.address}/requests/new`}>
<a>
<Button primary>Add Request</Button>
</a>
</Link>
<Table>
<Header>
<Row>
<HeaderCell> ID </HeaderCell>
<HeaderCell> Description </HeaderCell>
<HeaderCell> Amount </HeaderCell>
<HeaderCell> Recipient </HeaderCell>
<HeaderCell> Approval Count </HeaderCell>
<HeaderCell> Approve </HeaderCell>
<HeaderCell> Finalize </HeaderCell>

</Row>
</Header>
</Table>
</Layout>

各Table機能の表示部分を実際のレンダリング箇所に組み込む。

ここからさらにそれぞれのrequestに応じて行を追加させていきたいのでRequestRow.jsファイルを新たに作成し、機能として加えていく。これはページの部品部分なのでcomponentフォルダに格納。

 

人気の記事

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.