useDapp useCall useEffect

Question

I need call contract function in useEffect

How to get same result with useDapp ? Any example of this case ?

// define standard web3 call
const feth = async (address) => {
  const contract = new.web3.eth.Contract(ContractAddress, ContractABI)
  const response = await contract.methods.getDataByUserAddress(address).call()
  return response
}

// call when page open
useEffect(() => {
    if(isAddress(props.match.params.address))
      fetch(props.match.params.address)
}, [props.match.params.address]);

Pobepto · Answer 1 · 2022-12-12T21:01:35.620

If I understand correctly, it is about this library - useDApp.

In your example you use web3.js, but as I understood from the documentation for useDApp, it works with ethers.js.

To use the library you need to install it and ethers:

npm install @usedapp/core ethers

Further it is quite simple, here is a sample from the documentation with some changes for your question:

const UserAddressComponent = (props: { chainId: number, address: string }) => {
  const wethAddress = WETH_ADDRESSES[props.chainId]
  const wethInterface = new utils.Interface(WethAbi)
  const contract = new Contract(wethAddress, wethInterface)

  const { state, send } = useContractFunction(contract, 'getDataByUserAddress')

  useEffect(() => {
    if (isAddress(props.address)) {
      send(props.address)
    }
  }, [props.address]);

  return (
    <div>
      <p>Status: {state.status}</p>
    </div>
  )
}

The basic idea here is that we use the useContractFunction hook which allows us to send a transaction that executes a function of a contract on a blockchain.

To use useContractFunction you must provide a contract object from the ether.js library and a string function name.

It returns an object, which you can destruct and get from there send method and state object:

send is used to make requests and matches all arguments to solidity contract arguments.
state object can be used to track the status of a transaction.

You can read more about all the hooks and methods in the documentation of the library

Your answer looks like it was created by ChatGPT, which is [currently banned](https://meta.stackoverflow.com/q/421831/20153035). Please check out [this Meta FAQ](https://stackoverflow.com/help/gpt-policy) — Fastnlight, Dec 12 '22 at 20:08
@Fastnlight but there is nothing from chatGPT, all the information is taken from the documentation and slightly adapted to the user's question — Pobepto, Dec 12 '22 at 20:13
The section at the bottom (`I hope this helps! Let me know if you have any other questions.`) is known to be included in ChatGPT answers. If you in fact did not use ChatGPT, I recommend you remove that section to prevent other users from questioning your answer. However, the formatting of the answer is very similar to that of ChatGPT, so some users may still call it out. — Fastnlight, Dec 12 '22 at 20:16
@Fastnlight I see your point, I'll change my answer, thank you — Pobepto, Dec 12 '22 at 20:19

useDapp useCall useEffect

1 Answers1