Search code examples
reactjsethereumsolidityweb3js

How to call solidity view function in react js


I have developed a smart contract and in that I have used mapping that stores the txn hash with respect to the tokenID as key. Now I want to retrieve the data from mapping through a function as shown below: enter image description here

How do I call this function in reactJS. My existing react code looks like this:

import Web3 from 'web3';
import TokenContract from './token.json';
let selectedAccount;
let tokenContract;
let isInitialized = false;
export const init = async () => {
  let provider = window.ethereum; //
  if (typeof provider !== 'undefined') {
    //metamask is installed
    provider
      .request({ method: 'eth_requestAccounts' })
      .then((accounts) => {
        selectedAccount = accounts[0];
        console.log(`selected account is ${selectedAccount}`);
      })
      .catch((err) => {
        console.log(err);
        return;
      });
    window.ethereum.on('accountsChanged', function (accounts) {
      selectedAccount = accounts[0];
      console.log(`Selected account changed to ${selectedAccount}`);
    });
  }
  const web3 = new Web3(provider);
  const networkId = await web3.eth.net.getId();
  console.log(networkId);
  tokenContract = new web3.eth.Contract(
    TokenContract.abi,
    TokenContract.networks[networkId].address
  );
  isInitialized = true;
};
export const itembyS = async () => {
  if (!isInitialized) {
    await init();
  }
  // console.log(nftContract.methods.name.call());
  return tokenContract.methods
    .itemBySupplier(
      '0x107f47d7365753a46e4f4ed50d5b8aeb98ce49c5e386934d78de6b11c1c57836'
    )
    .send({ from: selectedAccount });
};
export const set_price = async () => {
  if (!isInitialized) {
    await init();
  }
  // console.log(nftContract.methods.name.call());
  return tokenContract.methods
    .itemForSale(
      '7587149587204262818851617673388522346017622877308530488095316631546074977880',
      240
    )
    .send({ from: selectedAccount });
};
export const purchased_by_manu = async () => {
  if (!isInitialized) {
    await init();
  }
  // console.log(nftContract.methods.name.call());
  return tokenContract.methods
    .purchasedByManufacturer(
      '0x7864dddf2FF4bF04C66482993b497A7bD19C7Bdc',
      selectedAccount,
      '0x107f47d7365753a46e4f4ed50d5b8aeb98ce49c5e386934d78de6b11c1c57836'
    )
    .send({ from: selectedAccount });
};
export const purchased_by_retail = async () => {
  if (!isInitialized) {
    await init();
  }
  // console.log(nftContract.methods.name.call());
  return tokenContract.methods
    .purchasedByManufacturer(
      '0x7864dddf2FF4bF04C66482993b497A7bD19C7Bdc',
      selectedAccount,
      '0x207f47d7365753a46e4f4ed50d5b8aeb98ce49c5e386934d78de6b11c1c57836'
    )
    .send({ from: selectedAccount });
};
export const setApprove_all = async () => {
  if (!isInitialized) {
    await init();
  }
  // console.log(nftContract.methods.name.call());
  return tokenContract.methods
    .setApprovalForAll('0xee3abf06609eC752aA72037154230bF54C3FBC81', true)
    .send({ from: selectedAccount });
};
export const packagedByManu = async () => {
  if (!isInitialized) {
    await init();
  }
  // console.log(nftContract.methods.name.call());
  return tokenContract.methods
    .packagedByManufacturer(
      '0x107f47d7365753a46e4f4ed50d5b8aeb98ce49c5e386934d78de6b11c1c57836',
      '0x507f47d7365753a46e4f4ed50d5b8aeb98ce49c5e386934d78de6b11c1c57836'
    )
    .send({ from: selectedAccount });
};
export const purchased_by_ret = async () => {
  if (!isInitialized) {
    await init();
  }
  // console.log(nftContract.methods.name.call());
  return tokenContract.methods
    .purchasedByRetailer(
      '0x21147c5E9f14D765496eFcD4A29dd126d2eb64Da',
      selectedAccount,
      '0x507f47d7365753a46e4f4ed50d5b8aeb98ce49c5e386934d78de6b11c1c57836'
    )
    .send({ from: selectedAccount });
};
//export const token =async ()=> {
 // if (!isInitialized) {
  //  await init();
//}
//return (tokenContract.methods
 // .verify2Info(
 //   '0xcb4cc26cfaf6f98c89be75b1df3583c01cc2daa1b6eb04ce785c80d4bbf82cd3'
 // )
 // .call());

How do I call the view method from react JS.


Solution

  • you can use

    tokenContract.methods.verifyInfo(tokenId).call();