Dapp-Development
如何在 Drizzle React 中編寫組件?
這些組件用於以下功能:
function tokenURI(uint256 _tokenId) public view returns (string) { require(exists(_tokenId)); return tokenURIs[_tokenId]; } function ownerOf(uint256 _tokenId) public view returns (address) { address owner = tokenOwner[_tokenId]; require(owner != address(0)); return owner; } function exists(uint256 _tokenId) public view returns (bool) { address owner = tokenOwner[_tokenId]; return owner != address(0); function tokenOfOwnerByIndex(address _owner, uint256 _index) public view returns (uint256) { require(_index < balanceOf(_owner)); return ownedTokens[_owner][_index]; }
這些是我完成 dapp 所需的最後一個組件,我不知道如何編寫它們。
這是項目的 home.js 供參考:
import React, { Component } from 'react' import { AccountData, ContractData, ContractForm } from 'drizzle-react- components' import web3 from './web3' import luxuryjewel from './luxuryjewel' class Home extends Component { state = { balance: '', value: '', message: '', designer_: '', price: '', supply: '' }; async componentDidMount() { const balance = await web3.eth.getBalance(luxuryjewel.options.address); const designer_ = await luxuryjewel.methods.designer().call(); const price = await luxuryjewel.methods.getCurrentPrice().call(); const supply = await luxuryjewel.methods.totalSupply().call(); this.setState({ balance, designer_, price, supply }); } onSubmit = async (event) => { event.preventDefault(); const accounts = await web3.eth.getAccounts(); this.setState({ message: 'Waiting on transaction success...'}); await luxuryjewel.methods.buyToken().send({ from: accounts[0], value: web3.utils.toWei(this.state.value, 'ether') }); this.setState({ message: 'The Jewel is yours!'}); }; render() { return ( <main className="container"> <div className="pure-u-1-1"> <h2>Luxury Jewel Contract</h2> <br/> <br/> <h3>Your Active Account</h3> <AccountData accountIndex="0" units="ether" precision="3" /> <br/> <strong>Administrator Address:</strong> <ContractData contract="LuxuryJewel" method="owner" hideIndicator /> <br/> <br/> <strong>Name:</strong> <ContractData contract="LuxuryJewel" method="name" hideIndicator /> <br/> <br/> <strong>Symbol:</strong> <ContractData contract="LuxuryJewel" method="symbol" hideIndicator /> <br/> <br/> <strong>Designer:</strong> <ContractData contract="LuxuryJewel" method="designer" hideIndicator /> <br/> <br/> <strong>Limited Edition:</strong> <ContractData contract="LuxuryJewel" method="limited_edition" hideIndicator /> <br/> <br/> <strong>Total Supply:</strong> <ContractData contract="LuxuryJewel" method="totalSupply" /> <br/> <br/> <strong>Price:</strong> {''} {web3.utils.fromWei(this.state.price, 'ether')} ether <br/> <br/> <strong>Set Price:</strong> <br/> <ContractForm contract="LuxuryJewel" method="setCurrentPrice" /> <br/> <br/> <strong>Safe Transfer From:</strong> <br/> <ContractForm contract="LuxuryJewel" method="safeTransferFrom" /> <br/> <br/> <strong>My Token Balance:</strong> <ContractData contract="LuxuryJewel" method="balanceOf" methodArgs={[this.props.accounts[0]]} /> <br/> <br/> <strong>Contract Balance:</strong> {''} {web3.utils.fromWei(this.state.balance, 'ether')} ether </div> <br/> <br/> <form onSubmit={this.onSubmit}> <h4>Buy The Jewel Token</h4> <div> <label><strong>Price:</strong> {''} {web3.utils.fromWei(this.state.price, 'ether')} ether <br/> Enter the price amount in the field </label> <input value={this.state.value} onChange={event => this.setState({ value: event.target.value })} /> </div> <button>Buy</button> </form> <hr/> <h1>{this.state.message}</h1> <br/> <br/> </main> ); } } export default Home;
我不確定我是否有問題,但此時 Drizzle 不支持具有 methodArgs 屬性的 ContractForm。關於它有多個問題
- https://github.com/trufflesuite/drizzle-react-components/issues/2
- https://github.com/trufflesuite/drizzle-react-components/issues/17
您可以編寫自己的組件來解決問題。