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

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

2

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

3

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

4

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

5

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

-Blockchain, code, Metaverse, VR
-, ,

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