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.
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
: aBigNumber
containing the gas price in Wei (an integer with 18 decimals of precision)
•maxFeePerGas
: aBigNumber
which is the maximum gas price a transaction can pay
•maxPriorityFeePerGas
: same asmaxFeePerGas
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 thegasPrice
, themaxFeePerGas
and themaxPriorityFeePerGas
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 andfalse
before and after loading the dataisSuccess
:true
if the data was fetched successfully andfalse
if there was an errorisError
:true
if fetching the gas price failed andfalse
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 benull
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 thedata
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