//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
エラーの堂々巡りになってきたので環境確認中。
