Build dashboard from on chain data

[siberiankebab]

Hello all,

Following my question https://forum.moralis.io/t/moralis-provider-white-screen/18224/5, I continued to play with Moralis, and now i am trying to build a dashboard that query on chain data (return value of view functions from contracts deployed on eth or goerli).

I did a first test and tried with useWeb3ExecuteFunction https://github.com/MoralisWeb3/react-moralis#useweb3executefunction. It was successful.

Now i would like to not have to connect my wallet to query data and i would these data to be updated in real time, to have these data on a frontpage. I saw differents way:

_ usemoralisweb3api
_ useapicontract
_ https://docs.moralis.io/reference/evm-api-overview

In react, useapicontract is the easiest way right ? I choose to go with this one.
I followed the example as in the github example:

but got the following error when i click on the button:

I am pretty sure it’s not something complex, i appreciate any help

[johnversus]

Try logging the error message from useApiContract hook using useEffect to get more details about the error

const { error } = useApiContract

[siberiankebab]

Here is the message when I log the error

The thing i don’t understand: why does it return “Returned values aren’t, did it run Out of Gas?” ? No blockchain transaction is involved, so no gas is involved right ?

edit: i checked my code, abi/address/inputs are correct. I didn’t mention the network (goerli) in the parameters for useApiContract, is it important?

[johnversus]

Yes, Chain is required in your case. The default chain value is eth.

[siberiankebab]

I did it just after writing my previous message, it was the reason it was not working. Now i am able to return a value if i click on the button. Do you know where there is a template available for a whole dashboard? i would like my code to return the value without having a button.

An example:

The thing is, in my code here the parameters are fixed for the function runContractFunction, and i don’t know the way to call runContractFunction with different parameters.

[cryptokid]

you could get this error when the ABI is invalid or not the expected one

[siberiankebab]

ABI was correct, i was able to execute runContractFunction (my mistake was that i forgot to add the chain in useApiContract) . Now i am looking for a way to execute runContractFunction for different contract functions on the same page (my previous message):

[alex]

In the same component, you can have multiple instances of the useAPIContract hook and give different reference names to runContractFunction:

const { runContractFunction: runFunctionOne } = useApiContract( { ... } );
const { runContractFunction: runFunctionTwo } = useApiContract( { ... } );

...

runFunctionOne();

Or if you need to use multiple properties like data, error:

const functionOne = useApiContract( { ... } );
const functionTwo = useApiContract( { ... } );

...

functionOne.runContractFunction();