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

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

2

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

3

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

4

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

5

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

-Blockchain, code, Metaverse, VR
-, ,

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