How to get the current gas price using Wagmi

In this tutorial, we are going to learn how to estimate the current gas price in your React application using the Wagmi useFeeData hook.

Here is how to do it:

import { useFeeData } from 'wagmi'

export const GasPrice = () => {
    const { data, isLoading, isError } = useFeeData()
    
    if (isLoading) return <p>Fetching the gas price...</p>
    if (isError) return <p>Failed to fetch the gas price</p>
    
    return <p>The current gas price is {data.formatted.gasPrice} ETH</p>
}

As you can see, to get the gas price, we can call the useFeeData hook return and read the data property it returns.

Here is the data that the useFeeData hook returns:

• data: The gas price data:
  
    •   gasPrice: a BigNumber containing the gas price in Wei (an integer with 18 decimals of precision)
  
    •   maxFeePerGas: a BigNumber which is the maximum gas price a transaction can pay
  
    •   maxPriorityFeePerGas: same as maxFeePerGas but for priority transactions (the transactions that you want to speed up and that cost more gas)
  
    •   formatted: the formatted version of this object. It contains the gasPrice, the maxFeePerGas and the maxPriorityFeePerGas as strings and the value is in Ether instead of Wei so it's ready to be displayed to users.
  
• isLoading: true when data is loading and false before and after loading the data
  
• isSuccess: true if the data was fetched successfully and false if there was an error
  
• isError: true if fetching the gas price failed and false if it succeeded.
  
• error: if fetching the gas price failed, this property contains the error that was thrown when trying to fetch the gas price. It will be null if there was no error.
  
• refetch: a function you can call to get the gas price again and refresh the data. It returns an object like the data property.
  

These are the most commonly used properties, but there are more! Check out the documentation to see the full list of values that the useFeeData hook returns.

This hook takes in parameter an object to configure how you want get the gas price. If you don't pass anything, it will just get the gas price for the current blockchain your Wagmi client is on. If you support multiple networks, it will use the network the connected wallet is on or the first network you passed.

Here are properties you can pass in the configuration object that the useFeeData hook takes in parameters (all these parameters are optional):

• chainId: the ID of the blockchain you want to fetch the gas price of. You can find the full list of chain IDs here: https://chainlist.org/. The Wagmi client must be set up to support the chain you passed here. If nothing is passed, it will just use the network your React app or the connected wallet is on.
  
• formatUnits: the unit in which the gas price data is returned. By default, it's "wei" but you can pass any value from this list.
  
• watch: a boolean indicating whether or not it should refresh the data after every new block. false by default.
  

Again, there are other properties than the ones listed here but these are the most commonly used. Check out the documentation to see the full list of properties you can pass to this configuration object.

And that's it 🎉

Thank you for reading this article