Staaarter

Contract Address List

A list of smart contract addresses, each with a chain badge, a verified indicator, a truncated monospace address, a real copy-to-clipboard button, and a link out to the chain's block explorer.

By Staaarter Team
Finance
Docs
Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its badge, button dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/contract-address-list.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/finance/finance35.tsx instead.

Usage

The file also exports finance35Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Finance35, finance35Demo } from "@/components/blocks/finance/finance35";

export default function Page() {
  return <Finance35 {...finance35Demo} />;
}

Props

PropTypeDefaultDescription
headingstring"Contract addresses"Section heading.
descriptionstring"Always verify an address against the official explorer link before interacting with it."Supporting line under the heading.
contractsContractAddress[]noneThe list of contract addresses to render.
classNamestringnoneExtra classes for the outer section element.

Types

export interface ContractAddress {
  id: string;
  chainName: string;
  label: string;
  address: string;
  verified: boolean;
  explorerUrl: string;
}

Behavior notes

  • The copy button genuinely calls navigator.clipboard.writeText with the full (untruncated) address, and shows a real per-row "copied" confirmation for 1.5 seconds via useState.
  • The explorer link button is a real anchor tag opening explorerUrl in a new tab, not a placeholder.
  • Addresses are truncated for display only, the full address is always what gets copied and linked.