//tips
//smart contract
ついになぜmetamask連携してdeploy.jsが起動できないか分かった。walletのaccountも同時に参照され、強制的にaccount1のものをみるよう。
私の場合はaccount4で接続を試みていたので失敗したとのこと。現在account4で接続するにはどうしたらよいかを確認中。
Show.jsのUI表示部分を継続して修正していく。
render(){
return(
<Layout>
<h3>CampaignShow</h3>
<Grid>
<Grid.Row>
<Grid.Column width={10}>
{this.renderCards()}
</Grid.Column>
</Grid.Row>
<Grid.Row>
<Grid.Column>
<Link route={`/campaigns/${this.props.address}/requests`}>
<a>
<Button primary>View Requests</Button>
</a>
</Link>
</Grid.Column>
</Grid.Row>
</Grid>
<Grid.Column width={6}>
<ContributeForm address={this.props.address}/>
</Grid.Column>
</Layout>
);
}
このように <Grid.Row>を組み込むことで、表示コンポーネントを分割することができた。少しずれが生じたので、そこは <Grid.Column>でカバーしている。
Requestフォルダのrequestページの中身をフォルダ内のindex.jsのRequestIndex表示により定義していく。
Requestsフォルダにもnew.jsを作成。階層が異なるフォルダにも同名のフォルダを作成しているので混乱しないように気をつける。
import React ,{Component} from 'react';
class RequestNew extends Component{
render(){
return <h3>Create a request</h3>;
}
}
export default RequestNew;
このうえで、route.jsを対応させる。campaigns/requests/newを追加している。
const { route } = require('next/dist/server/router');
const routes=require('next-routes')();
//オフィシャルドキュメント通り()をつける
//require()で関数を返すので
routes
.add('/campaigns/new','/campaigns/new')
.add('/campaigns/:address','/campaigns/show')
.add('/campaigns/:address/requests','campaigns/requests/index')
.add('/campaigns/:address/requests/new','campaigns/requests/new');
//第一引数のURLルートの場合第二引数のページを表示する仕組み
//:をつけることで何にでも対応できるようになる
//実際の入力はindex.jsで対応
//第二引数は表示したいページ内容
module.exports=routes;
このようにルート設定を変更した時にはnpm run devで再接続する必要があるので忘れない。
new.jsを拡充していく。
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';
class RequestNew extends Component{
state={
value:'',
description:'',
recipient:''
};
//campaign内の新規リクエスト作成部分
//URLからアドレス取得してpropsへ
static async getInitalProps(props){
//index.jsと同じ
const {address}=props.query;
return{address};
}
render(){
return(
<Form>
<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>
</Form>
);
}
}
export default RequestNew;
