Blockchain code Metaverse VR

Crypto×VR×SmartContract(402)

スポンサーリンク

//tips

//smart contract

少しUiの部分を調整。グリッドをsemantic reactで実装する。

Show.jsのcampaignshowコンポーネントに組み込む。import後にGridを追加してやれば良い。10や6はページの表示領域を示すもののよう。ここはsemantic UI reactのページを参照。

render(){
return(
<Layout>
<h3>CampaignShow</h3>
<Grid>
<Grid.Column width={10}>
{this.renderCards()}
</Grid.Column>
</Grid>
<Grid.Column width={6}>
<ContributeForm />
</Grid.Column>
</Layout>
);
}

これだけで左にcard、右にformという形でページを表示することができるようになった。

Formでの送信をeventで取り扱えるように変更する。この流れは以前にもやったようにstateが絡むもの。

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

class ContributeForm extends Component{
state={

value:'',
errorMessage:'',
loading:false

};

//onSubmitはレンダリングの時ではなくイベントのタイミングのみで呼び出したい
onSubmit=async event =>{
event.preventDefault();
//<ContributeForm address={this.props.address}/>を追加したので
//webインスタンスを取得することができる
const campaign =Campaign(this.props.address);

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

//getlistfuncを実行してcontributefuncを.solから呼べるようにする

try{
const accounts=await web3.eth.getAccounts();
await campaign.methods.contribute().sende({
from:accounts[0],
value:web3.utils.toWei(this.state.value,'ether')

});
//さらに変更したらページを更新したい
//その場合はrouterにも関係するので再度同じページを読み込ませrefresh
//addressは変更されないが記載内容は変更されるdonateが一人加算など
Router.replaceRoute(`/campaigns/${this.props.address}`)

}catch(err){
this.setState({errorMessage:err.message});
}
//スピニングのストップ
this.setState({loading:false,value:''});

};

//donateボタンコンポーネントの部品化
render(){
return(
<Form onSubmit={this.onSubmit} error={!!this.state.errorMessage} >
<Form.Field>
<label>Amount to contribute</label>
<Input
value={this.state.value}
onChange={event=>this.setState({value:event.target.value})}
label="ether"
labelPosition="right"

/>
</Form.Field>
<Message error header="Oops!" content={this.state.errorMessage}/>
<Button primary loading={this.state.loading}>
Contribute!
</Button>
</Form>
);

}
}

export default ContributeForm;

このような形にContributeFormを更新できた。

ここからもう少し詳細な内容も実装していく。

まずはview requestsリンクを作成し、request用のrequestsフォルダも追加する。

requestsフォルダの中にindex.jsを作成。
import React,{Component} from 'react';

class RequestIndex extends Component{

render(){
return(
<h3>Request List</h3>
);
};
}

export default RequestIndex;

各Campaignsのrequests詳細をみれるページを作成したので、そちらのrouteを通す。

routes
.add('/campaigns/new','/campaigns/new')
.add('/campaigns/:address','/campaigns/show')
.add('/campaigns/:address/requests','campaigns/requests/index');

これでひとまずページ遷移の土台は整った。

人気の記事

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.