open-index/open-npm huggingface dataset:
npm package: @scaffold-ui/components
Description: React components for scaffold-ui
Latest version: 0.1.9

# @scaffold-ui/components

React components for scaffold-ui applications.

## Installation

**Note**: This package requires `@scaffold-ui/hooks` as a peer dependency.

```bash
# Install both packages
npm install @scaffold-ui/components @scaffold-ui/hooks

# Or with yarn
yarn add @scaffold-ui/components @scaffold-ui/hooks

# Or with pnpm
pnpm add @scaffold-ui/components @scaffold-ui/hooks
```

### Peer Dependencies

You'll also need these peer dependencies if you don't already have them:

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

## Components

### Address

A React component for displaying Ethereum addresses with ENS support, avatars, and block explorer links.

#### Props

- `address?` - The Ethereum address to display (optional)
- `disableAddressLink?` - Whether to disable the link to block explorer (optional)
- `format?` - Display format for the address - "short" | "long" (optional)
- `size` - Size of the component - "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl" (required)
- `onlyEnsOrAddress?` - Whether to show only ENS name or address without additional info (optional)
- `chain?` - The blockchain chain to use for block explorer links and ENS resolution (optional, defaults to mainnet)

#### Example

```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
    />
  );
}
```

## Development

```bash
# Install dependencies
pnpm install

# Build the package
pnpm build

# Watch for changes during development
pnpm dev

# Lint the code
pnpm lint

# Format the code
pnpm format
```
npm package: @scaffold-ui/debug-contracts
Description: Debug contracts component for scaffold-ui
Latest version: 0.1.8

# @scaffold-ui/debug-contracts

Debug contracts component.

## Installation

**Note**: This package requires `@scaffold-ui/components` and `@scaffold-ui/hooks` as peer dependencies.

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

#### Props

- `contracts` (required): An object containing deployed contracts organized by chain ID, where each contract includes address and ABI
- `chainId` (required): The chain ID to use for debugging contracts (number)
- `blockExplorerAddressLink` (optional): The block explorer link for the contract address

## Usage

```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}
    />
  );
}
```
npm package: @scaffold-ui/hooks
Description: React hooks for scaffold-ui
Latest version: 0.1.7

# @scaffold-ui/hooks

A collection of React hooks for managing UI state.

## Installation

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

## Hooks

### useAddress

A hook for managing Ethereum addresses with ENS support.

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

## License

MIT