Blockchain code Metaverse VR

Crypto×VR×SmartContract(403)

スポンサーリンク

//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;

人気の記事

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.