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

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

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.