0

The components are for the following functions:

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

These are the last components I need to finish the dapp, and I don’t know how to write them.

This is the project's home.js for reference:

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;
1
  • Changes done to clarify question, please review the new edited version. – Andy Oct 3 '18 at 22:28
0

I’m not sure that I’ve got the question, but at this moment Drizzle doesn’t support ContractForm with methodArgs property. There are multiple issues regarding it

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

You can write own component to solve the issue.

Not the answer you're looking for? Browse other questions tagged or ask your own question.