# Contract Component

The `Contract` is a UI component for debugging deployed contracts.

## Import

```tsx
import { Contract } from "@scaffold-ui/debug-contracts";
```

## Props

| Prop                       | Type                             | Default     | Description                                      |
| -------------------------- | -------------------------------- | ----------- | ------------------------------------------------ |
| `contractName`             | `string`                         | -           | The name of the contract to display              |
| `contract`                 | `{ address: Address, abi: Abi }` | -           | The abi and address of the contract to display   |
| `chainId`                  | `number`                         | -           | The chain ID where the contract is deployed      |
| `blockExplorerBaseUrl`     | `string`                         | `undefined` | Base URL of the block explorer. The component appends `/address/{addr}` per rendered address. Defaults to `/blockexplorer` for local chain (31337) and to the chain's configured explorer otherwise. |

## Live Example:

#### Code

```tsx twoslash
// @noErrors
// deployedContracts comes from your own project (generated by your deploy
// scripts), so it won't resolve in this isolated docs snippet.
import React from "react";
import { Contract } from "@scaffold-ui/debug-contracts";
import { deployedContracts } from "./components/ContractExample/deployedContracts";
import { sepolia } from "viem/chains";

<Contract
  contractName="YourCollectible"
  contract={deployedContracts[sepolia.id]["YourCollectible"]}
  chainId={sepolia.id}
/>;
```

#### Example

<DocsProvider>
  <ContractExample />
</DocsProvider>