set gasLimit in useWeb3Contract hook Nextjs

[Belingheri]

In the lesson 10: NextJS Smart Contract Lottery (Full Stack / Front End) we use useWeb3Contract to have the runContractFunction and run a method into then chain:

  const {
        runContractFunction: enterRaffle,
        isLoading,
        isFetching,
    } = useWeb3Contract({
        abi: abi,
        contractAddress: raffleAddress!, // specify the networkId
        functionName: "enterRaffle",
        params: {},
        msgValue: entranceFee,
    })

I use this method to call my own contract, but due to cannot estimate gas; transaction may fail or may require manual gas limit i need to set the gasLimit manually.

The question is where / how can i set this parameter ?

I do not found answer in the react-moralis docs do you have any ideas?

thanks

[paulcoffee85]

Maybe like this:

  runContractFunction: myContractMethod,
  isLoading,
  isFetching,
} = useWeb3Contract({
  abi: myContractAbi,
  contractAddress: myContractAddress,
  functionName: "myContractMethod",
  params: [param1, param2],
  gasLimit: 500000, // <===set gas limit here
});

[paulcoffee85]

If above doesn't work. The react-moralis library does not provide any specific documentation on setting the gas limit for the useWeb3Contract hook, as it is a more general feature of the web3 library. However, you can find more information about gas limits and how to set them in the web3 documentation: https://web3js.readthedocs.io/en/v1.3.4/web3-eth-contract.html#methods-mymethod-send

[Belingheri]

I the doc i found:

export declare type Web3ExecuteFunctionParameters = {
    contractAddress?: string;
    abi?: object;
    functionName?: string;
    params?: Record<string, unknown>;
    msgValue?: number | string;
};

i tried anyway getting:

Argument of type '{ abi: ({ inputs: { internalType: string; name: string; type: string; }[]; stateMutability: string; type: string; name?: undefined; anonymous?: undefined; outputs?: undefined; } | { inputs: { internalType: string; name: string; type: string; }[]; ... 4 more ...; outputs?: undefined; } | { ...; } | { ...; })[]; ... 4...' is not assignable to parameter of type 'Web3ExecuteFunctionParameters'.
  Object literal may only specify known properties, and 'gasLimit' does not exist in type 'Web3ExecuteFunctionParameters'

So i suppose that the react-moralis lib is not good for my purpose...
Do you (@paulcoffee85 ) know some high-level lib to interact with the contracts?, because i dont want to implement all the stuff like event, detect success, detect errors ecc...

[alymurtazamemon]

@Belingheri You can also use the thirdweb for interacting with smart contracts.

[Belingheri]

@Belingheri You can also use the thirdweb for interacting with smart contracts.

thank you the thirdweb lib have the parameter gasLimit :

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

// Your smart contract address
const contractAddress = "{{contract_address}}";

function App() {
  const { contract } = useContract(contractAddress);
  const { mutateAsync, isLoading, error } = useContractWrite(
    contract,
    "setName",
  );

  return (
    <Web3Button
      contractAddress={contractAddress}
      action={() =>
        mutateAsync([
          "My Name",
          {
            gasLimit: 1000000, // override default gas limit
            value: ethers.utils.parseEther("0.1"), // send 0.1 ether with the contract call
          },
        ])
      }
    >
      Send Transaction
    </Web3Button>
  );
}

export default App;

Now i can use my contract

[alymurtazamemon]

@Belingheri You can add the gas configurations in the hardhat.config.js file for the network you are working on. And this error also happens due to the error in the processing (logic) of code so check it as well.

[Belingheri]

I not understand, i m working on front-end so i have not the hardhat.config.js .

[alymurtazamemon]

@Belingheri But aren't you calling smart contracts functions?

[Belingheri]

yes but in the front end repo i don't have the file hardhat.config.js i use it only when i deploy the contract.

[Belingheri]

thanks to @alymurtazamemon

@Belingheri You can also use the thirdweb for interacting with smart contracts.

I switch to thirdweb, this lib have the gasLimit option:

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

// Your smart contract address
const contractAddress = "{{contract_address}}";

function App() {
  const { contract } = useContract(contractAddress);
  const { mutateAsync, isLoading, error } = useContractWrite(
    contract,
    "setName",
  );

  return (
    <Web3Button
      contractAddress={contractAddress}
      action={() =>
        mutateAsync([
          "My Name",
          {
            gasLimit: 1000000, // override default gas limit
            value: ethers.utils.parseEther("0.1"), // send 0.1 ether with the contract call
          },
        ])
      }
    >
      Send Transaction
    </Web3Button>
  );
}

export default App;