Blockchain code Metaverse VR

Crypto×VR×SmartContract(405)

スポンサーリンク

//tips

//smart contract

Request詳細ページのtableに詳細情報を表示させる。

import React,{Component} from 'react';
import {Table,Button} from 'semantic-ui-react';
import web3 from '../ethereum/web3';
import Campaign from '../ethereum/campaign';

class RequestRow extends Component{

onApprove=async()=>{
const campaign =Campaign(this.props.address);
const accounts =await web3.eth.getAccounts();
await campaign.methods.approveRequest(this.props.id).send({
from: accounts[0]

});

};

onFinalize=async()=>{
const campaign =Campaign(this.props.address);
const accounts =await web3.eth.getAccounts();
await campaign.methods.finalizeRequest(this.props.id).send({
from: accounts[0]

});

};

render(){
const {Row,Cell}=Table;
const {id,request,approversCount}=this.props;
const readyToFinalize=request.approvalCount>approversCount/2;
//valueの大元は.solのstruct Requestのvalueを指す
//requestが保有するものとcampaignが保有するものは異なる
//const approversCount=await campaign.methods.approversCount().call();
//index.jsの方でpropsオブジェクトに追加
//this.propsで指定しているものはrenderRows()でreturnさせたもの
//request.completeはboolなので完了しているリクエストのボタンは隠す

return(
<Row disabled={request.complete} positive={readyToFinalize && !request.complete}>
<Cell>{id}</Cell>
<Cell>{request.description}</Cell>
<Cell>{web3.utils.fromWei(request.value,'ether')}</Cell>
<Cell>{request.recipient}</Cell>
<Cell>{request.approvalCount}/{approversCount}</Cell>

<Cell>
{request.complete ? null:(
<Button color="green" basic onClick={this.onApprove}>
Approve
</Button>
)}
</Cell>
<Cell>
{request.complete ? null:(
<Button color="teal" basic onClick={this.onFinalize}>
Finalize
</Button>
)}
</Cell>

</Row>
);
}
}

export default RequestRow;

これにて一通りDappsコンテンツ作成は完了。あとはdeploy周りをなんとかして確認する。

Deployもaccount1にrenkbyネットワークのものを追加したら無事にtransactionを取得。

Npm dev runしてみると下記のエラーが発生。

TypeError: this.props.campaigns.map is not a function

This error happened while generating the page. Any console logs will be displayed in the terminal window.

renderCampaigns(){
> 23 | const items = this.props.campaigns.map(address=>{

探っていくと新規バージョンのsemantic ui reactを導入してしまうと生じる問題のよう。

npm install --save semantic-ui-react@0.77.1

While resolving: kickstart@1.0.0
npm ERR! Found: react@17.0.2
npm ERR! node_modules/react
npm ERR! react@"^17.0.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@">=0.14.0 <= 16" from semantic-ui-react@0.77.1
npm ERR! node_modules/semantic-ui-react
npm ERR! semantic-ui-react@"0.77.1" from the root project

semantic-ui-reactを単純に下げようとすると、そもそものreactのバージョンで適合できないとのこと。

強引にnpm rm react@17.0.2で削除して16.0.0を入れた。npm list --depth=0で階層のパッケージのバージョンを確認。

kickstart % npm list --depth=0
/kickstart
├── @truffle/hdwallet-provider@1.7.0
├── fs-extra@10.0.0
├── ganache-cli@6.12.2
├── mocha@9.1.3
├── next-routes@1.4.2
├── next@12.0.4
├── react@16.0.0
├── semantic-ui-css@2.4.1
├── semantic-ui-react@2.0.4
├── solc@0.4.17
└── web3@1.6.1

今度はライブラリの別のエラーが発生。

const HtmlContext = (0, _react).createContext(null);
^
TypeError: (0 , _react).createContext is not a function

エラーの堂々巡りになってきたので環境確認中。

人気の記事

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.