### Start Monorepo Dev Mode (Bash)

Source: https://github.com/scaffold-eth/scaffold-ui/blob/main/README.md

This command initiates the development mode for both the hooks and components packages within the monorepo, concurrently running the example application. Ensure pnpm is installed.

```bash
pnpm dev

```

--------------------------------

### Install @scaffold-ui/components and @scaffold-ui/hooks

Source: https://github.com/scaffold-eth/scaffold-ui/blob/main/packages/components/README.md

Instructions for installing the @scaffold-ui/components and its peer dependency @scaffold-ui/hooks using npm, yarn, or pnpm.

```bash
npm install @scaffold-ui/components @scaffold-ui/hooks
yarn add @scaffold-ui/components @scaffold-ui/hooks
pnpm add @scaffold-ui/components @scaffold-ui/hooks
```

--------------------------------

### Install Dependencies and Run Scaffold-ETH 2 (Bash)

Source: https://github.com/scaffold-eth/scaffold-ui/blob/main/README.md

These bash commands are used to install all project dependencies for Scaffold-ETH 2 after adding local packages, and then to run the local blockchain and the main application. Ensure you have yarn installed.

```bash
yarn install

yarn chain    # In one terminal
yarn start    # In another terminal

```

--------------------------------

### Install @scaffold-ui/hooks

Source: https://github.com/scaffold-eth/scaffold-ui/blob/main/packages/hooks/README.md

Instructions for installing the @scaffold-ui/hooks library using either npm or yarn. This is the first step before utilizing any of the provided hooks.

```bash
npm install @scaffold-ui/hooks
# or
yarn add @scaffold-ui/hooks
```

--------------------------------

### Install @scaffold-ui/debug-contracts

Source: https://github.com/scaffold-eth/scaffold-ui/blob/main/packages/debug-contracts/README.md

Demonstrates how to install the debug-contracts package along with its required peer dependencies using npm, yarn, or pnpm. Ensure you have `@scaffold-ui/components` and `@scaffold-ui/hooks` installed.

```bash
npm install @scaffold-ui/components @scaffold-ui/hooks @scaffold-ui/debug-contracts
yarn add @scaffold-ui/components @scaffold-ui/hooks @scaffold-ui/debug-contracts
pnpm add @scaffold-ui/components @scaffold-ui/hooks @scaffold-ui/debug-contracts
```

--------------------------------

### Start Scaffold UI Package Dev Modes (Bash)

Source: https://github.com/scaffold-eth/scaffold-ui/blob/main/README.md

These commands start the development servers for the `@scaffold-ui/hooks` and `@scaffold-ui/components` packages independently. This is a prerequisite for local testing within Scaffold-ETH 2. Ensure you are in the correct directories.

```bash
# For hooks
cd packages/hooks && pnpm run dev &

# For components
cd packages/components && pnpm run dev &

```

--------------------------------

### Install React and related libraries

Source: https://github.com/scaffold-eth/scaffold-ui/blob/main/packages/components/README.md

Installs the necessary peer dependencies for the @scaffold-ui/components library, including react, @types/react, viem, wagmi, and @tanstack/react-query.

```bash
npm install react @types/react viem wagmi @tanstack/react-query
```

--------------------------------

### Address Component Usage Example

Source: https://github.com/scaffold-eth/scaffold-ui/blob/main/packages/components/README.md

A React example demonstrating how to use the Address component from @scaffold-ui/components. It shows how to import the component and pass various props like address, size, format, and chain.

```tsx
import { Address } from "@scaffold-ui/components";
import { optimism } from "viem/chains";

function MyComponent() {
  return (
    <Address
      address="0x1234567890123456789012345678901234567890"
      size="base"
      format="short"
      disableAddressLink={false}
      onlyEnsOrAddress={false}
      chain={optimism} // Optional: specify chain for block explorer links
    />
  );
}
```

--------------------------------

### Scaffold-ui Development Commands

Source: https://github.com/scaffold-eth/scaffold-ui/blob/main/packages/components/README.md

Common development commands for the scaffold-ui project, including installing dependencies, building the package, watching for changes, linting, and formatting the code.

```bash
pnpm install
pnpm build
pnpm dev
pnpm lint
pnpm format
```

--------------------------------

### Usage Example for Debug Contracts Component

Source: https://github.com/scaffold-eth/scaffold-ui/blob/main/packages/debug-contracts/README.md

Illustrates how to use the `Contract` component from `@scaffold-ui/debug-contracts` in a React application. This example shows how to import the component, its styles, and how to pass the `contracts` and `chainId` props.

```tsx
import { Contract } from "@scaffold-ui/debug-contracts";
import "@scaffold-ui/debug-contracts/styles.css";
import { sepolia } from "viem/chains";

// Define your deployed contracts
const deployedContracts = {
  address: "0xBf6D6faFE5B0C009E5447A27A94E093F490Dd0FC",
  abi: [
    // ... your contract ABI
  ],
} as const;

function App() {
  return (
    <Contract
      contracts={deployedContracts}
      chainId={sepolia.id}
    />
  );
}
```

--------------------------------

### Address Component with Custom Chain Configuration

Source: https://github.com/scaffold-eth/scaffold-ui/blob/main/docs/pages/components/Address.mdx

Shows how to specify a custom blockchain network for ENS resolution using the `chain` prop. This example uses the `polygon` chain from `viem/chains`.

```tsx
import React from "react";
import { polygon } from "viem/chains";
import { Address } from "@scaffold-ui/components";

<Address
  address="0x1234567890123456789012345678901234567890"
  chain={polygon}
/>;
```

--------------------------------

### Use Address Hook Example with ENS Loading State (TypeScript)

Source: https://github.com/scaffold-eth/scaffold-ui/blob/main/docs/pages/hooks/useAddress.mdx

Demonstrates the useAddress hook to fetch and display an Ethereum address or its ENS name. It includes a loading indicator while the ENS name is being resolved. This example utilizes the 'useAddress' hook from '@scaffold-ui/hooks'.

```tsx
import React from "react";
import { useAddress } from "@scaffold-ui/hooks";

function AddressWithLoading() {
  const address = "0xd8da6bf26964af9d7eed9e03e53415d37aa96045";
  const { ens, shortAddress, isEnsNameLoading } = useAddress({ address });

  return <div>{isEnsNameLoading ? <span>Loading ENS name...</span> : <span>{ens ?? shortAddress}</span>}</div>;
}

```

--------------------------------

### Display Address with Block Explorer Link (React)

Source: https://github.com/scaffold-eth/scaffold-ui/blob/main/docs/pages/hooks/useAddress.mdx

A React component example showing how to use the useAddress hook to display a shortened address and a link to the full checksummed address on a block explorer.

```typescript
import React from "react";
import { useAddress } from "@scaffold-ui/hooks";

function AddressDisplay() {
  const address = "0xd8da6bf26964af9d7eed9e03e53415d37aa96045";
  const { checkSumAddress, shortAddress, blockExplorerAddressLink } = useAddress({ address });

  return (
    <div>
      <p>Short: {shortAddress}</p>
      <p>
        Full with blockexplorer link:{" "}
        <a
          href={blockExplorerAddressLink}
          target="_blank"
          rel="noopener noreferrer"
        >
          {checkSumAddress}
        </a>
      </p>
    </div>
  );
}
```

--------------------------------

### EtherInput with onValueChange Callback (TypeScript)

Source: https://github.com/scaffold-eth/scaffold-ui/blob/main/docs/pages/components/EtherInput.mdx

Shows how to use the `onValueChange` prop to get real-time updates on the input's value in both ETH and USD, as well as the current display mode. This is crucial for integrating the input with application logic.

```tsx
import React from "react";
import { EtherInput } from "@scaffold-ui/components";

<EtherInput
  placeholder="With onValueChange"
  onValueChange={({ valueInEth, valueInUsd, displayUsdMode }) => {
    console.log({ valueInEth, valueInUsd, displayUsdMode });
  }}
/>;
```

--------------------------------

### AddressInput Component Basic Usage (React)

Source: https://github.com/scaffold-eth/scaffold-ui/blob/main/docs/pages/components/AddressInput.mdx

A basic example of using the AddressInput component in a React functional component. It shows how to manage the input's state using `useState` and pass it to the `AddressInput` via the `value` and `onChange` props.

```tsx
import React, { useState } from "react";
import { AddressInput } from "@scaffold-ui/components";

function ParentComponent() {
  const [value, setValue] = useState<string>("");

  return (
    <AddressInput
      value={value}
      onChange={setValue}
      placeholder="0x or ENS"
    />
  );
}
```

--------------------------------

### Example: ENS Name to Address Resolution - TypeScript

Source: https://github.com/scaffold-eth/scaffold-ui/blob/main/docs/pages/hooks/useAddressInput.mdx

A practical example of using the useAddressInput hook to resolve an ENS name to an Ethereum address. It includes an input field for the ENS name and displays the resolved address or a loading indicator. This demonstrates the core ENS name resolution functionality.

```tsx
import React, { useState } from "react";
import { useAddressInput } from "@scaffold-ui/hooks";

function BasicAddressInput() {
  const [value, setValue] = useState("");
  const { ensAddress, isEnsAddressLoading } = useAddressInput({ value });

  return (
    <div>
      <input
        value={value}
        onChange={(e) => setValue(e.target.value)}
        placeholder="Enter ENS name (e.g., vitalik.eth)"
      />

      {isEnsAddressLoading && <p>Resolving...</p>}

      {ensAddress && (
        <p>
          <strong>Address:</strong> {ensAddress}
        </p>
      )}
    </div>
  );
}
```

--------------------------------

### Display Balance for a Specific Chain (Polygon)

Source: https://github.com/scaffold-eth/scaffold-ui/blob/main/docs/pages/components/Balance.mdx

Illustrates how to specify a custom blockchain network for the Balance component using the 'chain' prop. This example uses the 'polygon' chain from 'viem/chains'.

```tsx
import { polygon } from "viem/chains";

<Balance
  address="0xd8da6bf26964af9d7eed9e03e53415d37aa96045"
  chain={polygon}
/>;
```

--------------------------------

### Display ENS Name and Avatar with Fallback (React)

Source: https://github.com/scaffold-eth/scaffold-ui/blob/main/docs/pages/hooks/useAddress.mdx

A React component example utilizing the useAddress hook to display an ENS name and avatar. If ENS data is unavailable, it falls back to a shortened address and a blockie image.

```typescript
import React from "react";
import { useAddress } from "@scaffold-ui/hooks";

function AddressWithENS() {
  const address = "0xd8da6bf26964af9d7eed9e03e53415d37aa96045";
  const { ens, ensAvatar, blockieUrl, shortAddress } = useAddress({ address });

  return (
    <div style={{ display: "flex", alignItems: "center", gap: "0.75rem" }}>
      <img
        src={ensAvatar ?? blockieUrl}
        alt="Avatar"
        style={{ width: "40px", height: "40px", borderRadius: "50%" }}
      />
      <span>{ens ?? shortAddress}</span>
    </div>
  );
}
```

--------------------------------

### Basic EtherInput Usage (TypeScript)

Source: https://github.com/scaffold-eth/scaffold-ui/blob/main/docs/pages/components/EtherInput.mdx

Demonstrates the fundamental usage of the EtherInput component with a placeholder. This component allows users to input amounts and automatically handles ETH/USD conversions.

```tsx
import React from "react";
import { EtherInput } from "@scaffold-ui/components";

<EtherInput placeholder="Amount" />;
```

--------------------------------

### Basic Usage of Address Component

Source: https://github.com/scaffold-eth/scaffold-ui/blob/main/docs/pages/components/Address.mdx

Demonstrates the fundamental use of the Address component, rendering a given Ethereum address. It automatically resolves ENS names and can optionally display avatars and link to block explorers.

```tsx
import React from "react";
import { Address } from "@scaffold-ui/components";

<Address address="0xd8da6bf26964af9d7eed9e03e53415d37aa96045" />;
```

--------------------------------

### Import AddressInput Component

Source: https://github.com/scaffold-eth/scaffold-ui/blob/main/docs/pages/components/AddressInput.mdx

Demonstrates how to import the AddressInput component from the @scaffold-ui/components library. This is the first step to using the component in your React application.

```tsx
import { AddressInput } from "@scaffold-ui/components";
```

--------------------------------

### Basic useAddress Hook Usage

Source: https://github.com/scaffold-eth/scaffold-ui/blob/main/docs/pages/hooks/useAddress.mdx

Demonstrates the basic usage of the useAddress hook. It takes an Ethereum address as input and returns various formatted address details and utility links.

```typescript
const {
  checkSumAddress,
  ens,
  ensAvatar,
  isEnsNameLoading,
  blockExplorerAddressLink,
  isValidAddress,
  shortAddress,
  blockieUrl,
} = useAddress({
  address: "0xd8da6bf26964af9d7eed9e03e53415d37aa96045",
});
```

--------------------------------

### Display Native Token Balance (Basic Usage)

Source: https://github.com/scaffold-eth/scaffold-ui/blob/main/docs/pages/components/Balance.mdx

Demonstrates the basic usage of the Balance component to display the native token balance for a given Ethereum address. Requires the 'address' prop.

```tsx
<Balance address="0xd8da6bf26964af9d7eed9e03e53415d37aa96045" />
```

--------------------------------

### Add Local Scaffold UI Packages to Scaffold-ETH 2 (JSON)

Source: https://github.com/scaffold-eth/scaffold-ui/blob/main/README.md

This JSON snippet shows how to add local versions of `@scaffold-ui/hooks` and `@scaffold-ui/components` as file dependencies in the `package.json` of a Scaffold-ETH 2 project. The relative paths are crucial and depend on the workspace structure.

```json
"@scaffold-ui/hooks": "file:../../../scaffold-ui/packages/hooks",
"@scaffold-ui/components": "file:../../../scaffold-ui/packages/components"

```

--------------------------------

### Import Scaffold UI Components CSS (TypeScript)

Source: https://github.com/scaffold-eth/scaffold-ui/blob/main/README.md

This TypeScript code demonstrates how to import the necessary CSS file for the `@scaffold-ui/components` package into the main layout file (`layout.tsx`) of a Next.js application. This ensures the styles are applied correctly.

```typescript
import "@scaffold-ui/components/styles.css";

```

--------------------------------

### Use Balance Hook for Wallet Balance Display and USD Conversion (React/TypeScript)

Source: https://context7.com/scaffold-eth/scaffold-ui/llms.txt

The `useBalance` hook fetches and watches a wallet's balance on a specified chain, with options for USD conversion and toggling display modes. It returns the formatted balance, USD equivalent, and controls for managing the display.

```tsx
import { useBalance } from "@scaffold-ui/hooks";
import { mainnet } from "viem/chains";

function BalanceDisplay() {
  const {
    formattedBalance,
    balanceInUsd,
    displayUsdMode,
    toggleDisplayUsdMode,
    isLoading,
    isError,
  } = useBalance({
    address: "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045",
    chain: mainnet,
    defaultUsdMode: false,
  });

  if (isLoading) return <div>Loading balance...</div>;
  if (isError) return <div>Error loading balance</div>;

  return (
    <button onClick={toggleDisplayUsdMode}>
      {displayUsdMode
        ? `$${balanceInUsd.toFixed(2)}`
        : `${formattedBalance.toFixed(4)} ETH`}
    </button>
  );
}
```

--------------------------------

### Fetch Native Currency Price with useFetchNativeCurrencyPrice Hook

Source: https://context7.com/scaffold-eth/scaffold-ui/llms.txt

The useFetchNativeCurrencyPrice hook retrieves the current USD price of a native cryptocurrency (like ETH or OP) by querying Uniswap V2 liquidity pools on the Ethereum mainnet. It manages loading and error states for each chain it queries. This is essential for displaying real-time asset valuations.

```tsx
import { useFetchNativeCurrencyPrice } from "@scaffold-ui/hooks";
import { mainnet, optimism } from "viem/chains";

function PriceDisplay() {
  const {
    price: ethPrice,
    isLoading: ethLoading,
    isError: ethError,
  } = useFetchNativeCurrencyPrice(mainnet);

  const {
    price: opPrice,
    isLoading: opLoading,
    isError: opError,
  } = useFetchNativeCurrencyPrice(optimism);

  return (
    <div>
      {ethLoading ? (
        <div>Loading ETH price...</div>
      ) : ethError ? (
        <div>ETH price unavailable</div>
      ) : (
        <div>ETH: ${ethPrice.toFixed(2)}</div>
      )}
      {opLoading ? (
        <div>Loading OP price...</div>
      ) : opError ? (
        <div>OP price unavailable</div>
      ) : (
        <div>OP: ${opPrice.toFixed(2)}</div>
      )}
    </div>
  );
}

```

--------------------------------

### Import useAddressInput Hook - TypeScript

Source: https://github.com/scaffold-eth/scaffold-ui/blob/main/docs/pages/hooks/useAddressInput.mdx

This snippet shows how to import the useAddressInput hook from the @scaffold-ui/hooks package. This is the first step to using the hook in your React application.

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

--------------------------------

### Import useAddress Hook

Source: https://github.com/scaffold-eth/scaffold-ui/blob/main/docs/pages/hooks/useAddress.mdx

Imports the useAddress hook from the @scaffold-ui/hooks library. This is the first step to utilizing its functionalities.

```typescript
import { useAddress } from "@scaffold-ui/hooks";
```

--------------------------------

### Configure Webpack for Local Packages (JavaScript/TypeScript)

Source: https://github.com/scaffold-eth/scaffold-ui/blob/main/README.md

This JavaScript/TypeScript code configures the Webpack settings in `next.config.js` or `next.config.ts` to properly handle local packages and symlinks during development. It falls back file system modules and optimizes watch options for development.

```javascript
webpack: (config, { dev }) => {
  config.resolve.fallback = { fs: false, net: false, tls: false };
  config.externals.push("pino-pretty", "lokijs", "encoding");
  if (dev) {
    config.watchOptions = {
      followSymlinks: true,
    };

    config.snapshot.managedPaths = [];
  }
  return config;
},

```

--------------------------------

### Basic Usage of useAddressInput Hook - TypeScript

Source: https://github.com/scaffold-eth/scaffold-ui/blob/main/docs/pages/hooks/useAddressInput.mdx

Demonstrates the basic usage of the useAddressInput hook in a React component. It initializes the hook with an input value and debounce delay, then destructures the returned properties like ensAddress and isEnsAddressLoading.

```tsx
const {
  ensAddress,
  ensName,
  ensAvatar,
  isEnsAddressLoading,
  isEnsNameLoading,
  isEnsAvatarLoading,
  settledValue,
  debouncedValue,
} = useAddressInput({
  value: inputValue,
  debounceDelay: 500,
});
```

--------------------------------

### EtherInput with Default USD Mode (TypeScript)

Source: https://github.com/scaffold-eth/scaffold-ui/blob/main/docs/pages/components/EtherInput.mdx

Shows how to initialize the EtherInput component in USD mode by default using the `defaultUsdMode` prop. This is useful when the primary input expected is in USD.

```tsx
import React from "react";
import { EtherInput } from "@scaffold-ui/components";

<EtherInput
  defaultUsdMode
  placeholder="Enter amount in USD"
/>;
```

--------------------------------

### Import Balance Component from Scaffold UI

Source: https://github.com/scaffold-eth/scaffold-ui/blob/main/docs/pages/components/Balance.mdx

This code snippet shows how to import the Balance component from the @scaffold-ui/components library for use in your React application.

```tsx
import { Balance } from "@scaffold-ui/components";
```

--------------------------------

### UseAddress Hook for Ethereum Address Management with ENS

Source: https://github.com/scaffold-eth/scaffold-ui/blob/main/packages/hooks/README.md

Demonstrates the usage of the useAddress hook from @scaffold-ui/hooks. This hook integrates with wagmi's useAccount to manage Ethereum addresses, providing features like ENS name and avatar resolution, checksumming, and generating links to block explorers. It requires an Ethereum address and optionally accepts a chain parameter.

```tsx
import { useAddress } from "@scaffold-ui/hooks";
import { useAccount } from "wagmi";

function AddressInfo() {
  const { address } = useAccount();

  const {
    checkSumAddress,
    ens,
    ensAvatar,
    isEnsNameLoading,
    blockExplorerAddressLink,
    isValidAddress,
    shortAddress,
    blockieUrl,
  } = useAddress({
    address,
    chain: mainnet, // Optional chain parameter
  });

  return (
    <div>
      {isEnsNameLoading ? (
        <div>Loading ENS name...</div>
      ) : (
        <div>
          <img
            src={ensAvatar ?? blockieUrl}
            alt="Avatar"
          />
          <div>ENS Name: {ens ?? "No ENS name"}</div>
          <div>Address: {checkSumAddress}</div>
          <div>Short Address: {shortAddress}</div>
          <a
            href={blockExplorerAddressLink}
            target="_blank"
            rel="noopener noreferrer"
          >
            View on Block Explorer
          </a>
          {isValidAddress && <div>✓ Valid Address</div>}
        </div>
      )}
    </div>
  );
}
```

--------------------------------

### Use Watch Balance Hook for Real-time Balance Updates (React/TypeScript)

Source: https://context7.com/scaffold-eth/scaffold-ui/llms.txt

The `useWatchBalance` hook provides real-time balance tracking by automatically updating the balance on every new block. It takes an address and chain as input and returns the latest balance data, including loading and error states.

```tsx
import { useWatchBalance } from "@scaffold-ui/hooks";
import { mainnet } from "viem/chains";

function LiveBalanceDisplay() {
  const { data: balance, isLoading, isError } = useWatchBalance({
    address: "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045",
    chain: mainnet,
  });

  if (isLoading) return <div>Loading...</div>;
  if (isError) return <div>Error</div>;

  return (
    <div>
      Balance: {balance?.formatted} {balance?.symbol}
    </div>
  );
}
```

--------------------------------

### Address Component in Long Format

Source: https://github.com/scaffold-eth/scaffold-ui/blob/main/docs/pages/components/Address.mdx

Shows how to display the full Ethereum address using the `format="long"` prop. This is useful when the abbreviated format is not sufficient.

```tsx
import React from "react";
import { Address } from "@scaffold-ui/components";

<Address
  address="0x1234567890123456789012345678901234567890"
  format="long"
/>;
```

--------------------------------

### Display Native Token Balance in USD Mode

Source: https://github.com/scaffold-eth/scaffold-ui/blob/main/docs/pages/components/Balance.mdx

Shows how to initialize the Balance component in USD display mode by setting the 'defaultUsdMode' prop to true. This is useful for displaying the balance in its equivalent USD value by default.

```tsx
<Balance
  address="0xd8da6bf26964af9d7eed9e03e53415d37aa96045"
  defaultUsdMode={true}
/>
```

--------------------------------

### Address Component with Different Sizes

Source: https://github.com/scaffold-eth/scaffold-ui/blob/main/docs/pages/components/Address.mdx

Illustrates how to adjust the visual size of the Address component using the `size` prop. Available options range from 'xs' to '3xl'.

```tsx
import React from "react";
import { Address } from "@scaffold-ui/components";

<Address
  address="0xd8da6bf26964af9d7eed9e03e53415d37aa96045"
  size="sm"
/>;

<Address
  address="0xd8da6bf26964af9d7eed9e03e53415d37aa96045"
  size="xl"
/>;
```

--------------------------------

### Import EtherInput Component (TypeScript)

Source: https://github.com/scaffold-eth/scaffold-ui/blob/main/docs/pages/components/EtherInput.mdx

This snippet shows how to import the EtherInput component from the '@scaffold-ui/components' library. It's a prerequisite for using the component in your React application.

```tsx
import { EtherInput } from "@scaffold-ui/components";
```

--------------------------------

### Convert ETH/USD with useEtherInput Hook

Source: https://context7.com/scaffold-eth/scaffold-ui/llms.txt

The useEtherInput hook facilitates the conversion between native currency (ETH) and USD values. It leverages real-time market prices from Uniswap V2, handling loading and error states for price fetching. This hook is useful for building interfaces that display or process monetary values in a decentralized context.

```tsx
import { useEtherInput, MAX_DECIMALS_USD } from "@scaffold-ui/hooks";
import { useState } from "react";

function CurrencyConverter() {
  const [amount, setAmount] = useState("1.5");
  const [usdMode, setUsdMode] = useState(false);

  const {
    valueInEth,
    valueInUsd,
    nativeCurrencyPrice,
    isNativeCurrencyPriceLoading,
    isNativeCurrencyPriceError,
  } = useEtherInput({ value: amount, usdMode });

  if (isNativeCurrencyPriceLoading) return <div>Loading price...</div>;
  if (isNativeCurrencyPriceError) return <div>Price unavailable</div>;

  return (
    <div>
      <input
        type="text"
        value={amount}
        onChange={(e) => setAmount(e.target.value)}
        placeholder={usdMode ? "USD" : "ETH"}
      />
      <button onClick={() => setUsdMode(!usdMode)}>
        {usdMode ? "Switch to ETH" : "Switch to USD"}
      </button>
      <div>ETH: {valueInEth}</div>
      <div>USD: ${valueInUsd}</div>
      <div>Current Price: ${nativeCurrencyPrice.toFixed(2)}</div>
    </div>
  );
}

```

--------------------------------

### EtherInput with Default Value (TypeScript)

Source: https://github.com/scaffold-eth/scaffold-ui/blob/main/docs/pages/components/EtherInput.mdx

Illustrates setting an initial value for the EtherInput component using the `defaultValue` prop. This pre-fills the input with a specified amount, which can be in ETH or USD depending on the mode.

```tsx
import React from "react";
import { EtherInput } from "@scaffold-ui/components";

<EtherInput defaultValue="0.5" />;
```

--------------------------------

### Contract Debugging Interface Component (React/TypeScript)

Source: https://context7.com/scaffold-eth/scaffold-ui/llms.txt

The Contract component provides a complete interface for debugging smart contracts, including read/write methods, variable display, and transaction receipts. It requires React, Scaffold-UI's debug-contracts package, and viem. The component takes contract details such as name, address, ABI, and chain ID as props. It also accepts a block explorer link for easy navigation.

```tsx
import { Contract } from "@scaffold-ui/debug-contracts";
import "@scaffold-ui/debug-contracts/styles.css";
import { sepolia } from "viem/chains";

// Example contract ABI
const contractAbi = [
  {
    inputs: [],
    name: "greeting",
    outputs: [{ internalType: "string", name: "", type: "string" }],
    stateMutability: "view",
    type: "function",
  },
  {
    inputs: [{ internalType: "string", name: "_newGreeting", type: "string" }],
    name: "setGreeting",
    outputs: [],
    stateMutability: "nonpayable",
    type: "function",
  },
] as const;

function DebugPage() {
  return (
    <Contract
      contractName="Greeter"
      contract={{
        address: "0xBf6D6faFE5B0C009E5447A27A94E093F490Dd0FC",
        abi: contractAbi,
      }}
      chainId={sepolia.id}
      blockExplorerAddressLink={`https://sepolia.etherscan.io/address/0xBf6D6faFE5B0C009E5447A27A94E093F490Dd0FC`}
    />
  );
}

```

--------------------------------

### Use Address Hook for ENS Resolution and Display (React/TypeScript)

Source: https://context7.com/scaffold-eth/scaffold-ui/llms.txt

The `useAddress` hook manages Ethereum address display, including automatic ENS name resolution, avatar fetching, and generating block explorer links. It takes an address and chain as input and provides formatted address, ENS details, and related URLs.

```tsx
import { useAddress } from "@scaffold-ui/hooks";
import { mainnet } from "viem/chains";

function MyComponent() {
  const {
    checkSumAddress,
    ens,
    ensAvatar,
    isEnsNameLoading,
    blockExplorerAddressLink,
    isValidAddress,
    shortAddress,
    blockieUrl,
  } = useAddress({
    address: "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045",
    chain: mainnet,
  });

  if (isEnsNameLoading) {
    return <div>Loading ENS...</div>;
  }

  return (
    <div>
      <img src={ensAvatar ?? blockieUrl} alt="Avatar" width={40} height={40} />
      <div>
        <div>ENS: {ens ?? "No ENS"}</div>
        <div>Address: {checkSumAddress}</div>
        <div>Short: {shortAddress}</div>
        <a href={blockExplorerAddressLink} target="_blank" rel="noopener noreferrer">
          View on Explorer
        </a>
      </div>
    </div>
  );
}
```

--------------------------------

### Display Account Balance with Balance Component

Source: https://context7.com/scaffold-eth/scaffold-ui/llms.txt

The Balance component displays an account's native currency or USD balance. It allows users to toggle between these views with a click and can be configured for specific chains. The component is designed to present financial data clearly and interactively within a dapp.

```tsx
import { Balance } from "@scaffold-ui/components";
import { mainnet, polygon } from "viem/chains";

function BalanceExample() {
  return (
    <div>
      {/* Basic usage with connected wallet chain */}
      <Balance address="0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045" />

      {/* Specific chain with default USD mode */}
      <Balance
        address="0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045"
        chain={mainnet}
        defaultUsdMode={true}
      />

      {/* Polygon chain */}
      <Balance
        address="0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045"
        chain={polygon}
        style={{ fontSize: "0.875rem" }}
      />
    </div>
  );
}

```

--------------------------------

### Import Address Component from Scaffold-UI

Source: https://github.com/scaffold-eth/scaffold-ui/blob/main/docs/pages/components/Address.mdx

This snippet shows how to import the Address component from the @scaffold-ui/components library. It is a prerequisite for using the component in your React application.

```tsx
import { Address } from "@scaffold-ui/components";
```

--------------------------------

### EtherInput Component for ETH/USD Amount Input (React/TypeScript)

Source: https://context7.com/scaffold-eth/scaffold-ui/llms.txt

The EtherInput component handles input for both ETH and USD amounts, featuring a toggle button for switching between units and automatic conversion. It requires React and Scaffold-UI's components. Input is handled via the onValueChange prop, which returns an object containing the value in ETH, USD, and the current display mode.

```tsx
import { EtherInput } from "@scaffold-ui/components";
import { useState } from "react";

function SendForm() {
  const [amount, setAmount] = useState({ valueInEth: "", valueInUsd: "", displayUsdMode: false });

  const handleValueChange = ({ valueInEth, valueInUsd, displayUsdMode }) => {
    setAmount({ valueInEth, valueInUsd, displayUsdMode });
    console.log(`Amount: ${valueInEth} ETH = $${valueInUsd}`);
  };

  return (
    <form>
      <EtherInput
        name="amount"
        placeholder="0.00"
        defaultValue="0.1"
        defaultUsdMode={false}
        onValueChange={handleValueChange}
      />
      <div>
        <div>ETH: {amount.valueInEth}</div>
        <div>USD: ${amount.valueInUsd}</div>
      </div>
      <button type="submit">Send {amount.valueInEth} ETH</button>
    </form>
  );
}

```

--------------------------------

### Use Address Input Hook for ENS Resolution in Forms (React/TypeScript)

Source: https://context7.com/scaffold-eth/scaffold-ui/llms.txt

The `useAddressInput` hook handles user input for Ethereum addresses and ENS names, providing bidirectional ENS resolution. It supports fetching avatars and debounces input to optimize RPC calls, returning resolved ENS details and validation status.

```tsx
import { useAddressInput } from "@scaffold-ui/hooks";
import { useState } from "react";

function AddressInputExample() {
  const [inputValue, setInputValue] = useState("vitalik.eth");

  const {
    ensAddress,
    ensName,
    ensAvatar,
    isEnsAddressLoading,
    isEnsAddressError,
    settledValue,
  } = useAddressInput({
    value: inputValue,
    debounceDelay: 300,
  });

  return (
    <div>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        placeholder="Enter address or ENS name"
      />
      {isEnsAddressLoading && <span>Resolving...</span>}
      {isEnsAddressError && <span>Invalid ENS name</span>}
      {ensAddress && (
        <div>
          <div>Resolved Address: {ensAddress}</div>
          {ensAvatar && <img src={ensAvatar} alt="Avatar" width={40} height={40} />}
        </div>
      )}
      {ensName && <div>ENS Name: {ensName}</div>}
    </div>
  );
}
```

--------------------------------

### Display Ethereum Addresses with Address Component

Source: https://context7.com/scaffold-eth/scaffold-ui/llms.txt

The Address component renders Ethereum addresses, optionally displaying their ENS name and avatar. It provides functionality to copy the address and includes links to block explorers. The component supports various sizing, formatting, and chain-specific options, making it versatile for different UI needs.

```tsx
import { Address } from "@scaffold-ui/components";
import { optimism } from "viem/chains";

function App() {
  return (
    <div>
      {/* Basic usage */}
      <Address
        address="0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045"
        size="base"
      />

      {/* With chain and formatting options */}
      <Address
        address="0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045"
        size="lg"
        format="long"
        chain={optimism}
        disableAddressLink={false}
      />

      {/* Only ENS or address, no extra info */}
      <Address
        address="0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045"
        size="sm"
        onlyEnsOrAddress={true}
      />
    </div>
  );
}

```

--------------------------------

### AddressInput Component with Ethereum Address (React)

Source: https://github.com/scaffold-eth/scaffold-ui/blob/main/docs/pages/components/AddressInput.mdx

Shows how to use the AddressInput component with a pre-filled Ethereum address. The component will display this address and can resolve it to an ENS name if associated.

```tsx
import React, { useState } from "react";
import { AddressInput } from "@scaffold-ui/components";

function ParentComponent() {
  const [value, setValue] = useState<string>("0xd8da6bf26964af9d7eed9e03e53415d37aa96045");

  return (
    <AddressInput
      value={value}
      onChange={setValue}
    />
  );
}
```

--------------------------------

### ENS Address Resolution with Error Handling (React)

Source: https://github.com/scaffold-eth/scaffold-ui/blob/main/docs/pages/hooks/useAddressInput.mdx

This component demonstrates error handling for ENS name resolution using the `useAddressInput` hook. It displays loading states, success messages with resolved addresses, and specific error messages when an ENS name cannot be resolved. It requires React and Scaffold-UI hooks.

```tsx
import React, { useState } from "react";
import { useAddressInput } from "@scaffold-ui/hooks";

function AddressInputWithErrors() {
  const [value, setValue] = useState("");
  const { ensAddress, isEnsAddressLoading, isEnsAddressError, isEnsAddressSuccess } = useAddressInput({ value });

  const showError = 
    !isEnsAddressLoading && value && (isEnsAddressError || (isEnsAddressSuccess && ensAddress === null));

  return (
    <div>
      <input
        value={value}
        onChange={(e) => setValue(e.target.value)}
        placeholder="Enter ENS name (try: invalidensname.eth)"
      />

      {isEnsAddressLoading && <p>Resolving...</p>}

      {showError && <p style={{ color: "red" }}>✗ Could not resolve ENS name</p>}

      {ensAddress && <p style={{ color: "green" }}>✓ Resolved: {ensAddress}</p>}
    </div>
  );
}

```

--------------------------------

### Enhanced Address Input with AddressInput Component

Source: https://context7.com/scaffold-eth/scaffold-ui/llms.txt

The AddressInput component is an advanced input field for Ethereum addresses. It includes built-in ENS resolution, avatar display upon successful resolution, and validation to ensure correct input formats. This component streamlines the process of collecting and verifying blockchain addresses in forms.

```tsx
import { AddressInput } from "@scaffold-ui/components";
import { useState } from "react";
import type { Address } from "viem";

function AddressForm() {
  const [recipient, setRecipient] = useState<Address | string>("");

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    console.log("Sending to:", recipient);
  };

  return (
    <form onSubmit={handleSubmit}>
      <AddressInput
        value={recipient}
        onChange={setRecipient}
        name="recipient"
        placeholder="Enter address or ENS name (e.g., vitalik.eth)"
      />
      <button type="submit" disabled={!recipient}>
        Send
      </button>
    </form>
  );
}

```

--------------------------------

### AddressInput Component with ENS Name (React)

Source: https://github.com/scaffold-eth/scaffold-ui/blob/main/docs/pages/components/AddressInput.mdx

Illustrates using the AddressInput component with a default ENS name. The component will automatically resolve this ENS name to an Ethereum address.

```tsx
import React, { useState } from "react";
import { AddressInput } from "@scaffold-ui/components";

function ParentComponent() {
  const [value, setValue] = useState<string>("vitalik.eth");

  return (
    <AddressInput
      value={value}
      onChange={setValue}
      placeholder="Enter address or ENS"
    />
  );
}
```

--------------------------------

### Bidirectional ENS Resolution with Avatar Display (React)

Source: https://github.com/scaffold-eth/scaffold-ui/blob/main/docs/pages/hooks/useAddressInput.mdx

This component utilizes the `useAddressInput` hook to perform bidirectional resolution between ENS names and addresses. It displays the resolved ENS name, its avatar if available, and handles loading states. Dependencies include React and Scaffold-UI hooks.

```tsx
import React, { useState } from "react";
import { useAddressInput } from "@scaffold-ui/hooks";

function BidirectionalResolution() {
  const [value, setValue] = useState("");
  const { ensAddress, ensName, ensAvatar, isEnsAddressLoading, isEnsNameLoading } = useAddressInput({ value });

  return (
    <div>
      <input
        value={value}
        onChange={(e) => setValue(e.target.value)}
        placeholder="Try: vitalik.eth or 0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045"
        disabled={isEnsAddressLoading || isEnsNameLoading}
      />

      {(isEnsAddressLoading || isEnsNameLoading) && <p>Resolving...</p>}

      {ensAddress && (
        <p>
          <strong>Resolved Address:</strong> {ensAddress}
        </p>
      )}

      {ensName && (
        <div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
          {ensAvatar && (
            <img
              src={ensAvatar}
              alt={ensName}
              style={{ width: "24px", height: "24px", borderRadius: "50%" }}
            />
          )}
          <span>
            <strong>Resolved ENS:</strong> {ensName}
          </span>
        </div>
      )}
    </div>
  );
}

```

--------------------------------

### Address Component Showing Only ENS or Address

Source: https://github.com/scaffold-eth/scaffold-ui/blob/main/docs/pages/components/Address.mdx

Configures the Address component to display either the ENS name or the address exclusively, using the `onlyEnsOrAddress={true}` prop. This simplifies the display when both are available.

```tsx
import React from "react";
import { Address } from "@scaffold-ui/components";

<Address
  address="0xd8da6bf26964af9d7eed9e03e53415d37aa96045"
  onlyEnsOrAddress={true}
/>;
```

--------------------------------

### Disabled EtherInput Component (TypeScript)

Source: https://github.com/scaffold-eth/scaffold-ui/blob/main/docs/pages/components/EtherInput.mdx

Demonstrates how to disable the EtherInput component using the `disabled` prop. A disabled input prevents user interaction and is visually indicated as inactive.

```tsx
import React from "react";
import { EtherInput } from "@scaffold-ui/components";

<EtherInput
  disabled
  placeholder="Disabled"
/>;
```

--------------------------------

### Address Component with Disabled Block Explorer Link

Source: https://github.com/scaffold-eth/scaffold-ui/blob/main/docs/pages/components/Address.mdx

Demonstrates disabling the automatic link to a block explorer for the displayed address by setting `disableAddressLink={true}`. This can be used for privacy or specific UI requirements.

```tsx
import React from "react";
import { Address } from "@scaffold-ui/components";

<Address
  address="0x1234567890123456789012345678901234567890"
  disableAddressLink={true}
/>;
```

--------------------------------

### AddressInput Component Disabled State (React)

Source: https://github.com/scaffold-eth/scaffold-ui/blob/main/docs/pages/components/AddressInput.mdx

Demonstrates how to disable the AddressInput component using the `disabled` prop. When disabled, the input field cannot be modified by the user. It also automatically disables during ENS resolution.

```tsx
import React, { useState } from "react";
import { AddressInput } from "@scaffold-ui/components";

function ParentComponent() {
  const [value, setValue] = useState<string>("0x1234567890123456789012345678901234567890");

  return (
    <AddressInput
      value={value}
      onChange={setValue}
      disabled={true}
    />
  );
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.