in

Reading from a smart contract in react/javascript

Hi everyone. Im doing a university project where we have to tokenize assets. At this point ive made an erc721 token with code found online. All is well, the token functions and displays on my metamask wallet. Meaning the token compiled and deployed successfully (I think). Now what I need is to just simply display the address of the owner of the token that i minted. I made the tokenid = 1. When i call the ownerOf function on remix ide, where the only parameter is tokenid (and i then input 1 as the tokenid) it displays my metamask wallet as the acccount address. Meaning the ownerOf function is working. All good and well. What i need to do now is to call this function using my javascript/html user interface. Please see below the code pertaining to both. I am getting an error saying that the ownerOf function does not exist. How do i go about calling the ownerOf function of my smart contract, on my user interface application (developed with react.js)?

​

Code for App.js (react html/js file):

import logo from ‘./logo.svg’;
import ‘./App.css’;
import Web3 from ‘web3’;

const web3 = new Web3(“http://localhost:3000”);
const contractABI = ‘[{“inputs”:[{“internalType”:”address”,”name”:”_operator”,”type”:”address”},{“internalType”:”address”,”name”:”_from”,”type”:”address”},{“internalType”:”uint256″,”name”:”_tokenId”,”type”:”uint256″},{“internalType”:”bytes”,”name”:”_data”,”type”:”bytes”}],”name”:”onERC721Received”,”outputs”:[{“internalType”:”bytes4″,”name”:””,”type”:”bytes4″}],”stateMutability”:”nonpayable”,”type”:”function”}]’;//json to single line online

const contractAddress = “0xAd5596234Cb68F43335Cb751be2C33aD8eD386f0″;

const contract = new web3.eth.Contract(JSON.parse(contractABI), contractAddress);

contract.methods.ownerOf().call(function(err,res){if(!err) {console.log(res);} else{console.log(err);} });

function App() {
return (
<div className=”App”>
<header className=”App-header”>
<h1> Hello world </h1>
<img src={logo} className=”App-logo” alt=”logo” />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>

<h1>The input element</h1>

<form action=”/action_page.php”>

<label for=”tokenid”>TokenID: </label>
<input type=”text” id=”tokenid” name=”tokenid”></input><br/><br/>
<label for=”wallet address”>Wallet Address: </label>
<input type=”text” id=”walletaddress” name=”walletaddress” readonly=”true”></input><br/><br/>
<input type=”submit” value=”Submit”></input>

</form>

<br/>

<a
className=”App-link”
href=”https://reactjs.org”
target=”_blank”
rel=”noopener noreferrer”
>
Learn React
</a>
</header>
</div>
);
}

export default App;

My erc721 token smart contract (the ownerOf function)

https://preview.redd.it/cv5910ixrs971.png?width=1366&format=png&auto=webp&s=2db65828510f959bb93012bfae0a058db16bf242

What do you think?

Leave a Reply

Your email address will not be published. Required fields are marked *

GIPHY App Key not set. Please check settings

3 Comments

  1. Here’s an answer to a FAQ from the CryptoDevHub Wiki which addresses your question: https://cryptodevhub.io/wiki/ethereum-virtual-machine-faq#how-do-i-call-a-deployed-smart-contract

    If you’re completely new to Solidity / Smart Contract development you might enjoy the CryptoDevHub Wiki’s “Getting Started” guide: https://cryptodevhub.io/wiki/blockchain-development-tutorial

    It teaches you everything you need to know to get from complete beginner to proficient Smart Contract developer.

    Also feel free to drop by the Discord to meet fellow developers and ask further questions: https://cryptodevhub.io/discord

$GAMI is a part of the growing $SHINU ecosystem, a token built around ShinuSwap, the rug-proof crypto exchange

Step Daddy Doge | Fair Launch | 200 Members