useFetchNativeCurrencyPrice Hook

The useFetchNativeCurrencyPrice hook fetches the current USD price of a chain's native currency using a Uniswap V2 pair on Ethereum mainnet. It powers the USD conversion in useBalance and the <Balance /> component.

Import

import { useFetchNativeCurrencyPrice } from "@scaffold-ui/hooks";

Usage

const { price, isLoading, isError, error } = useFetchNativeCurrencyPrice(mainnet);

Parameters

Parameter	Type	Default	Description
`chain`	`Chain`	`mainnet`	The viem chain whose native currency price you want to fetch. Defaults to mainnet ETH.

Return Values

Property	Type	Description
`price`	`number`	The USD price of the native currency. Returns `0` while loading/on error.
`isLoading`	`boolean`	Loading state for the price fetch.
`isError`	`boolean`	Error state for the price fetch.
`error`	`unknown`	Error object returned by react-query if the fetch fails.

Live Examples

Basic Usage

Show the current ETH price on mainnet.

Fetching ETH price…

import React from "react";
import { useFetchNativeCurrencyPrice } from "@scaffold-ui/hooks";
import { mainnet } from "viem/chains";
 
function NativeCurrencyPrice() {
  const { price, isLoading, isError } = useFetchNativeCurrencyPrice(mainnet);
 
  if (isLoading) return <p>Fetching ETH price…</p>;
  if (isError) return <p>Could not fetch ETH price</p>;
 
  return <p>1 ETH ≈ ${price.toLocaleString()}</p>;
}

Convert a Native Amount to USD

Multiply a native amount by the fetched price to display its USD value.

Loading…

import React from "react";
import { useFetchNativeCurrencyPrice } from "@scaffold-ui/hooks";
import { mainnet } from "viem/chains";
 
function EthToUsd({ amount }: { amount: number }) {
  const { price, isLoading } = useFetchNativeCurrencyPrice(mainnet);
 
  if (isLoading) return <p>Loading…</p>;
 
  return (
    <p>
      {amount} ETH ≈ ${(amount * price).toLocaleString()}
    </p>
  );
}

Non-ETH Chain (Polygon)

For chains whose native currency isn't ETH, the hook resolves the price from NETWORKS_EXTRA_DATA[chain.id].nativeCurrencyTokenAddress (e.g. the POL/DAI Uniswap V2 pair on mainnet for Polygon, where the token is the POL ERC-20 at 0x7D1AfA7B718fb893dB30A3aBc0Cfc608AaCfeBB0) — no extra config required for chains already registered.

Fetching POL price…

import React from "react";
import { useFetchNativeCurrencyPrice } from "@scaffold-ui/hooks";
import { polygon } from "viem/chains";
 
function PolygonNativePrice() {
  const { price, isLoading, isError } = useFetchNativeCurrencyPrice(polygon);
 
  if (isLoading) return <p>Fetching POL price…</p>;
  if (isError) return <p>Could not fetch POL price</p>;
 
  return <p>1 POL ≈ ${price.toLocaleString()}</p>;
}