CODEWITHSUNDEEP
javascriptreactjssoliditythirdweb
Gowtham
Gowtham

Reputation: 11

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

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().

Upvotes: 1

Views: 662

Answers (2)

Desai Hardik
Desai Hardik

Reputation: 218

You have to pass second argument of

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

as contract json

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

Upvotes: 0

Wesley LeMahieu
Wesley LeMahieu

Reputation: 2613

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();
    })();
  }, []);
}

Upvotes: 0

Related Questions