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

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

2

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

3

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

4

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

5

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

-Blockchain, code, Metaverse, VR
-, ,

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