i want to code this react function to get data from thirdweb and display

Question

Help me to get fetch information from blockchain and display in the browser. i want know how to call this thirdweb functions in react. Below code is a solidity code used to create a user in our system.

function createUser(string memory _userId, string memory _fName, string memory _lName, string memory _mobile, string memory _dob, uint256 _age, string memory _nationality, string memory _gender) public {
        if(!chkexisitinguserId(_userId)){
            users[_userId] = User(_fName, _lName, _mobile, _dob, _age,_nationality,_gender);
            noofUser++;
            allUserId[k] = _userId;
            k++;
        }
    }

function getUser(string memory _userId) public view returns (string memory, string memory, string memory, string memory, uint256, string memory, string memory) {
        User memory user = users[_userId];
        return (user.fName, user.lName, user.mobile, user.dob, user.age, user.nationality, user.gender);
    }

The below code is thirdweb libary code to interact with smart contract. The below code is stored in refer.js file.

import { useContract, useContractWrite } from "@thirdweb-dev/react";

export default function Component() {
  const { contract } = useContract("0xBB417720eBc8b76AdeAe2FF4670bbc650C3E791f");
  const { mutateAsync: createUser, isLoading } = useContractWrite(contract, "createUser")

  const call = async () => {
    try {
      const data = await createUser([ "John0312", "John", "s", "8090890367", "03-11-2000", 20, "India", "M" ]);
      console.info("contract call successs", data);
    } catch (err) {
      console.error("contract call failure", err);
    }
    
  }
}

export default function Component() {
  const { contract } = useContract("0xBB417720eBc8b76AdeAe2FF4670bbc650C3E791f");
  const { data, isLoading } = useContractRead(contract, "getUser", _userId)
}

The smart contract is deployed in thirdweb and trying to access it. I am stuck at how to call this "call" async function from app.js.

import React, { useEffect } from 'react'
function App(){
const handleclick = async (e) => {
    await call();
  }
 return (
<button onClick={handleclick}>click me</button>
  )
}

export default App

it generates error like undefined function call().

score 0 · Answer 1 · answered Feb 16 '23 at 18:42

I would create a new hook (useCall.js) who's job is simply to instantiate the useContract and useContractWrite hooks, then define the call() method for you to use in any component.

In this example, call() is the only thing returned from the hook. It's wrapped inside useCallback to ensure it's only defined when createUser is defined.

export default function useCall() {
  const { contract } = useContract("0xBB417720eBc8b76AdeAe2FF4670bbc650C3E791f");
  const { mutateAsync: createUser, isLoading } = useContractWrite(contract, "createUser")

  const call = React.useCallback(async () => {
    try {
      const data = await createUser([ "John0312", "John", "s", "8090890367", "03-11-2000", 20, "India", "M" ]);
      console.info("contract call successs", data);
    } catch (err) {
      console.error("contract call failure", err);
    }
  }, [createUser]);
  
  return call;
}

Now inside of any component you can use the hook and get the call() function:

import useCall from './useCall';

export default function Component() {
  const call = useCall();

  useEffect(() => {
    (async () => {
      await call();
    })();
  }, []);
}

score 0 · Answer 2 · answered Jul 28 '23 at 10:10

0

You have to pass second argument of

const { contract } = useContract("0xBB417720eBc8b76AdeAe2FF4670bbc650C3E791f");

as contract json

const { contract } = useContract("0xBB417720eBc8b76AdeAe2FF4670bbc650C3E791f",CONTRAT_API);

answered Jul 28 '23 at 10:10

Desai Hardik

109
2
7

i want to code this react function to get data from thirdweb and display

2 Answers2