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

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

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.