How to set gasPrice for magic connector in Wagmi

[EmanueleBordoni]

Describe the bug
I'm unable to make a payable transaction because gas is insufficient

To Reproduce

const MarketplaceContract = {
    address: props.marketplace,
    abi: Marketplace.abi,
  };
  const marketplaceWrite = useContractWrite({
    ...MarketplaceContract,
    functionName: "buyItem",
    enabled: false,
  });

  const handleBuyButton = async (wet, listId) => {
    const result = await marketplaceWrite.writeAsync({
      args: [props.collection, listId],
      value: wet,
      overrides:{
        gasPrice:200000000000000,
      }
    });
    console.log(result);
  };

Error
Error: Error forwarded from node: err: insufficient funds for gas * price + value: address 0xd4B5Bb35EB6049... have 0 want 1000000000000000 (supplied gas 275010499)

TransactionExecutionError: An internal error was received.

Request Arguments:
  from:   0xd4B5Bb35EB6049...
  to:     0x595C33f0A02CC23...
  value:  0.001 ETH
Details: Magic RPC Error: [-32603] Error forwarded from node: insufficient funds for gas * price + value
Version: viem@0.3.21

Additional context
Does someone have a similar function that could help me with this problem?

[EmanueleBordoni]

I tried using gas: 6000. The error is solved but another appears:

ContractFunctionExecutionError: An unknown error occurred while executing the contract function "buyItem".

Contract Call:
  address:   0x595C33f0A02CC...
  function:  buyItem(address collection, uint256 listId)
  args:             (0x9c2c30bf2964..., 1)
  sender:    0xd4B5Bb35EB6049...

Docs: https://viem.sh/docs/contract/simulateContract.html
Details: data?.slice is not a function
Version: viem@0.3.21

The new code is:

const MarketplaceContract = {
    address: props.marketplace,
    abi: Marketplace.abi,
  };
  const marketplaceWrite = useContractWrite({
    ...MarketplaceContract,
    functionName: "buyItem",
    enabled: false,
    gas: 6000,
  });

  const handleBuyButton = async (wet, listId) => {
    const result = await marketplaceWrite.writeAsync({
      args: [props.collection, listId],
      value: wet,      
    });
    console.log(result);
  };

In this case, the error is both for metamask that magic.link connectors. Is the gas configuration that generates the error or is Viem? I found this issue on viem github project: bug: readContract fails with data?.slice is not a function #484

[jxom]

This has been fixed upstream in viem.

[EmanueleBordoni]

Ok, Viem bug is solved but "insufficient funds for gas * price + value" for my MagicAuthConnector persists.

This is my updated code:

const MarketplaceContract = {
    address: props.marketplace,
    abi: Marketplace.abi,
  };
  const marketplaceWrite = useContractWrite({
    ...MarketplaceContract,
    functionName: "buyItem",
    enabled: false,
  });

  const handleBuyButton = async (wet, listId) => {
    // console.log(prepared)
    console.log(marketplaceWrite);
    const result = await marketplaceWrite.writeAsync({
      args: [props.collection, listId],
      value: wet,
      gas: 600000,
      gasPrice: 1100000000,
    });
    console.log(result);
  };

Gas and gasPrice work correctly for Metamask connector, but on MagicAuthConnector the error is:

TransactionExecutionError: An internal error was received.

Request Arguments:
  from:      0xd4B5Bb35EB604...
  to:        0x595C33f0A02CC2...
  value:     0.01 ETH
  data:      0x9f37092a000000...
  gas:       600000
  gasPrice:  1.1 gwei

Details: Magic RPC Error: [-32603] Error forwarded from node: insufficient funds for gas * price + value
Version: viem@0.3.24
    at getTransactionError (getTransactionError.js:7:1)
    at sendTransaction (sendTransaction.js:76:34)
    at async writeContract (writeContract.js:9:1)
    at async writeContract (chunk-VEUO7GWU.js:2350:1)

Could you confirm that MagicAuthConnector could be used to write operations and sand token + gas?

[EmanueleBordoni]

The problem is the chain that after the connection magic returns.
I configure my localhost chain on Connector configuration but on 'connect' the useAccount hook returns to me that the chain is Chain 1: Ethereum.

This is my code (I tried to use all the configurations):

const customNodeOptions = {
  rpcUrl: chain.rpcUrl,
  chainId: chain.id,
};
const magicAuth = new MagicAuthConnector({
  chain: chain,
  chains: chain,
  network: { customNodeOptions },
  options: {
    apiKey: "pk_live_", //required
    oauthOptions: {
      providers: [
        "facebook",
        "google",
        "twitter",
        "apple",
        "github",
        "linkedin",
        "discord",
      ],
    },
    networks: {
      rpcUrl: chain.rpcUrl,
      chainId: chain.id,
    },
  },
});

Connector Chains value:

[
    {
        "id": 1337,
        "name": "Google8545",
        "network": "google",
        "nativeCurrency": {
            "decimals": 18,
            "name": "Polygon",
            "symbol": "PLT"
        },
        "rpcUrls": {
            "public": {
                "http": [
                    "http://localhost:8545"
                ]
            },
            "default": {
                "http": [
                    "http://localhost:8545"
                ]
            }
        }
    }
]

const { connect, connectors, error, isLoading, pendingConnector } =
    useConnect();
...
connect({ chainId: 1337, connector: connector });

Result of const { chain } = useNetwork():

{
    "id": 1,
    "name": "Chain 1",
    "network": "1",
    "nativeCurrency": {
        "name": "Ether",
        "decimals": 18,
        "symbol": "ETH"
    },
    "rpcUrls": {
        "default": {
            "http": [
                ""
            ]
        },
        "public": {
            "http": [
                ""
            ]
        }
    },
    "unsupported": false
}

Result of const { chains } = useNetwork(); :

[
    {
        "id": 1337,
        "name": "Google8545",
        "network": "google",
        "nativeCurrency": {
            "decimals": 18,
            "name": "Polygon",
            "symbol": "PLT"
        },
        "rpcUrls": {
            "public": {
                "http": [
                    "http://localhost:8545"
                ]
            },
            "default": {
                "http": [
                    "http://localhost:8545"
                ]
            }
        }
    }
]

Is there a missunderstanding by me or is it an error? How can I configure a custom network?

[cristianopolicarpo]

Hello @EmanueleBordoni,

You can simply get gasPrice from the network:

import { fetchFeeData, writeContract } from '@wagmi/core'

const feeData = await fetchFeeData()
const { hash } = await writeContract({
  address: '0xecb504d39723b0be0e3a9aa33d646642d1051ee1',
  abi: wagmigotchiABI,
  functionName: 'feed',
  gasPrice: feeData.gasPrice,
})