Blockchain code Metaverse VR

Crypto×VR×SmartContract(399)

スポンサーリンク

//tips

//smart contract

New.jsのnew campaignページ作成の続きを行なっていく。

前回同様にreact.semantic-uiの機能を参照しながら作成。

インプットフォームを組み込む。下記のような形になった。

import React,{Comment, Component} from 'react';
//2階層上のフォルダの中からインポート
import Layout from '../../components/Layout';
import {Form,Button,Input} from 'semantic-ui-react';
import factory from '../../ethereum/factory';
import web3 from '../../ethereum/web3';//web3.eth.getAccounts();使用のため

class CampaignNew extends Component{

//イベントハンドラーの設定用
state={
minimumContribution:''
};

//eventが発生したら自動的に呼ばれる
//contract上の関数を呼び出す時にはasyncが使われる
onSubmit=async (event)=>{
event.preventDefault();

const accounts=await web3.eth.getAccounts();
//新たなキャンペーンを作成
await factory.methods
.createCampaign(this.state.minimumContribution)
.send({
from:accounts[0]
});
};

render(){

return(
<Layout>
<h3>create a Campaign</h3>
<Form onSubmit={this.onSubmit}>
<Form.Field>
<label>Minimum Contribution</label>
<Input
label="wei"
labelPosition="right"
value={this.state.minimumContribution}
onChange={event=>
this.setState({minimumContribution:event.target.value})}
/>
</Form.Field>
<Button primary>Create!</Button>
</Form>
</Layout>
);
}

}

export default CampaignNew;

ただ、このままではブラウザではエラーをうまく表示できないことがわかった。別途実装する必要がありそう。

import React,{Comment, Component} from 'react';
//2階層上のフォルダの中からインポート
import Layout from '../../components/Layout';
import {Form,Button,Input,Message} from 'semantic-ui-react';
import factory from '../../ethereum/factory';
import web3 from '../../ethereum/web3';//web3.eth.getAccounts();使用のため

class CampaignNew extends Component{

//イベントハンドラーの設定用
state={
minimumContribution:'',
errorMessage:'',
loading:false//spiner用
};

//eventが発生したら自動的に呼ばれる
//contract上の関数を呼び出す時にはasyncが使われる
onSubmit=async (event)=>{
event.preventDefault();
this.setState({loading:true, errorMessage=''});//errorMessage=''は再度提出時に前回メッセージをクリアする

try{

const accounts=await web3.eth.getAccounts();
//新たなキャンペーンを作成
await factory.methods
.createCampaign(this.state.minimumContribution)
.send({
from:accounts[0]
});
}catch(err){
this.setState({errorMessage:err.message});

}
this.setState({loading:false});//メタマスクの処理が完了したらloadingスピナーの動きを解除
//スピナー状態にすることで複数回submitされるのを防ぐ
};
//errorがbool認識されてしまっているので!!this.state.errorMessage
//文字列が入っていればtrueを返すようにしている

render(){

return(
<Layout>
<h3>create a Campaign</h3>
<Form onSubmit={this.onSubmit} error={!!this.state.errorMessage}>
<Form.Field>
<label>Minimum Contribution</label>
<Input
label="wei"
labelPosition="right"
value={this.state.minimumContribution}
onChange={event=>
this.setState({minimumContribution:event.target.value})}
/>
</Form.Field>

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

}

export default CampaignNew;

また、npm install next-routes --legacy-peer-depsを導入して、フォルダ内の保存の際にアドレスも加えられるようにしておく。

この場合にはserver.jsでnextアプリを立ち上げ、routes.jsで異なるパスを定義してあげる形を取る。

const routes=require('next-routes')();
//オフィシャルドキュメント通り()をつける
//require()で関数を返すので

module.exports=routes;

すごいシンプル。

serverの方も作成。

const { Console } = require('console');
const {createServer}=require('http');

const next=require('next');

//新しいappインスタンスを作成
const app=next({
dev:process.env.NODE_ENV !=='production'
//productionモードでないことを確認
});

const routes=require('./routes');
const handler= routes.getRequestHandler(app);

app.prepare().then(()=>{
createServer(handler).listen(3000,(err)=>{
if(err)throw err;
Console.log('Ready on localhost:3000');
//npm run devをターミナルで実行するときちんと表示される。
//"dev": "node server.js"に変更しておく

});
});

これをもとにヘッダーを改変し、クリック時にリンクの場所に遷移するようにさせる。

import React from 'react';
import {Menu, MenuHeader} from 'semantic-ui-react';
import {Link} from '../routes';
//menuとlinkは一部衝突するので調整が必要

const Layout = (props) => {
return(
<Menu style={{marginTop:'10px'}}>

<Link route='/'>
<a className="item">Crowdcoin
</a>
</Link>

<Menu.Menu position="right">
<Link route='/'>
<a className="item">Campaigns
</a>
</Link>

<Link route='/campaigns/new'>
<a className="item">+
</a>
</Link>

</Menu.Menu>
</Menu>
);
};
export default Layout;

Layoutに組み込まれているHeaderの方を修正。

人気の記事

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.