Wie schreibe ich eine Komponente in Drizzle React? [geschlossen]

Die Komponenten sind für die folgenden Funktionen:

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];
}

Dies sind die letzten Komponenten, die ich brauche, um das Dapp fertigzustellen, und ich weiß nicht, wie ich sie schreiben soll.

Dies ist die home.js des Projekts als Referenz:

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;
Änderungen vorgenommen, um die Frage zu klären, bitte überprüfen Sie die neue bearbeitete Version.

Antworten (1)

Ich bin mir nicht sicher, ob ich die Frage habe, aber Drizzle unterstützt derzeit ContractForm nicht mit der Eigenschaft methodArgs. Es gibt mehrere Probleme diesbezüglich

  1. https://github.com/trufflesuite/drizzle-react-components/issues/2
  2. https://github.com/trufflesuite/drizzle-react-components/issues/17

Sie können eine eigene Komponente schreiben, um das Problem zu lösen.