# 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`](/hooks/useBalance) and the `<Balance />` component.

## Import

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

## Usage

```tsx
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. |

:::info
Pricing is read from a Uniswap V2 pair on **Ethereum mainnet** regardless of the `chain` argument. For chains whose native currency is ETH (Optimism, Arbitrum, Base, etc.) it works out of the box. For chains with a non-ETH native currency (e.g. Polygon's MATIC), the token must be registered in `NETWORKS_EXTRA_DATA[chain.id].nativeCurrencyTokenAddress`. If no entry is found, the hook falls back to the WETH/DAI pair.
:::

## 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.

<DocsProvider>
  <UseFetchNativeCurrencyPriceBasicExample />
</DocsProvider>

```tsx
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.

<DocsProvider>
  <UseFetchNativeCurrencyPriceConvertExample />
</DocsProvider>

```tsx
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.

<DocsProvider>
  <UseFetchNativeCurrencyPricePolygonExample />
</DocsProvider>

```tsx
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>;
}
```