52:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 53:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 54:Te33,"use client"; import { toast } from "sonner"; import { CopyIcon, ExternalLinkIcon } from "lucide-react"; import { cn } from "@/lib/utils"; import { truncateAddress } from "@/lib/onchain/format"; import { getExplorerUrl } from "@/lib/onchain/config"; import type { Address } from "viem"; import type { ReactNode } from "react"; export interface AddressDisplayProps { /** EVM wallet address */ address: Address; /** Display label. The copied value is always the underlying address. */ label?: ReactNode; /** Applied to the root wrapper */ className?: string; /** Applied to the address text or copy trigger */ addressClassName?: string; /** Truncate the address. Default: true */ truncate?: boolean; /** Number of characters to show at each end when truncated. Default: 4 */ truncateChars?: number; /** Show copy-to-clipboard button. Default: true */ showCopy?: boolean; /** Show block explorer link. Default: true */ showExplorer?: boolean; /** EVM chain id used to pick a known block explorer. Default: 1 (Etherscan) */ chainId?: number | null; /** Full explorer URL override e.g. "https://basescan.org/address/0x..." */ explorerUrl?: string; /** Icon rendered before the address when copy is enabled */ copyIcon?: ReactNode; /** Icon rendered for the explorer link */ explorerIcon?: ReactNode; } export function AddressDisplay({ address, label, className, addressClassName, truncate = true, truncateChars = 4, showCopy = true, showExplorer = true, chainId, explorerUrl, copyIcon = , explorerIcon = , }: AddressDisplayProps) { const handleCopy = async () => { try { await navigator.clipboard.writeText(address); toast.success("Address copied"); } catch { toast.error("Could not copy address"); } }; // No chain id means "assume mainnet", the documented default. A chain id we // do not recognise is different: linking it to Etherscan would point at a // page about a different chain's address space. Drop the link instead and // let `explorerUrl` cover the long tail. const explorerBase = getExplorerUrl(chainId ?? 1); const href = explorerUrl ?? (explorerBase ? `${explorerBase}/address/${address}` : null); const displayLabel = label ?? (truncate ? truncateAddress(address, truncateChars) : address); const labelClassName = truncate ? "whitespace-nowrap" : "break-all"; return (

{showCopy ? ( ) : ( {displayLabel} )} {showExplorer && href && ( {explorerIcon} )}

); } 55:T1119,import { arbitrum, base, mainnet, optimism, polygon } from "viem/chains"; import type { AssetGatewayUrls, Chain, PublicClient } from "viem"; /** The small client surface identity resolution actually consumes. */ export type OnchainReadClient = Pick< PublicClient, "getEnsAddress" | "getEnsAvatar" | "getEnsName" | "readContract" >; /** * The single place onchain-ui components look for app-wide settings. * * This file is yours: edit it once and every component follows. There is no * provider and no context — components import these functions directly, so * they work the same in a server component, a test, or a non-React consumer. * * Per-instance overrides always win. `` and * `` beat anything configured here. */ export interface OnchainUIConfig { /** * Chains your app supports. Supplies block explorer URLs and display names * for networks that have no built-in entry below. * * Using wagmi? Point this at the config you already wrote: * * ```ts * import { wagmiConfig } from "@/lib/onchain/wagmi"; * chains: wagmiConfig.chains, * ``` */ chains: readonly Chain[]; /** * Returns a viem client for reads that are not tied to a rendered component * — currently ENS and Basename resolution. Leave undefined to use the public * endpoints below. * * Using wagmi? Share its transports instead of configuring RPC twice: * * ```ts * import { getPublicClient } from "@wagmi/core"; * import { wagmiConfig } from "@/lib/onchain/wagmi"; * getClient: (chainId) => getPublicClient(wagmiConfig, { chainId }), * ``` */ getClient?: (chainId: number) => OnchainReadClient | undefined; /** * Public gateways used to turn IPFS and Arweave avatar records into URLs. * Replace these with your own gateway in production when reliability or * rate limits matter. */ avatarGatewayUrls?: AssetGatewayUrls; } export const onchainConfig: OnchainUIConfig = { chains: [mainnet, base, arbitrum, optimism, polygon], avatarGatewayUrls: { ipfs: "https://gateway.pinata.cloud", arweave: "https://arweave.net", }, }; /** * Curated network names and symbols. * * These are deliberately not derived from the viem chain: `chain.name` gives * "OP Mainnet" where a badge wants "Optimism", and `nativeCurrency.symbol` * gives "ETH" for Base, Optimism, and Arbitrum alike, which is useless as a * network mark. Chains absent here fall back to the configured chain's name. */ const knownNetworks: Partial< Record > = { 1: { name: "Ethereum", symbol: "ETH" }, 10: { name: "Optimism", symbol: "OP" }, 137: { name: "Polygon", symbol: "POL" }, 8453: { name: "Base", symbol: "BASE" }, 42161: { name: "Arbitrum", symbol: "ARB" }, }; function findChain(chainId?: number | null) { if (chainId == null) return null; return onchainConfig.chains.find((chain) => chain.id === chainId) ?? null; } export interface NetworkMeta { name: string | null; symbol: string | null; } /** Display name and symbol for a chain, or nulls when it is unrecognised. */ export function getNetworkMeta(chainId?: number | null): NetworkMeta { if (chainId == null) return { name: null, symbol: null }; const known = knownNetworks[chainId]; if (known) return known; return { name: findChain(chainId)?.name ?? null, symbol: null }; } /** * Block explorer base URL for a chain, or null when we have none. * * Derived from the configured chains rather than a second hardcoded map — * viem's chain objects already carry `blockExplorers`. Null is a real answer: * an address on an unrecognised chain does not exist in mainnet's address * space, so callers render no link rather than a misleading one. */ export function getExplorerUrl(chainId?: number | null): string | null { const chain = findChain(chainId); return chain?.blockExplorers?.default.url ?? null; } /** A read client for `chainId`, if the app configured one. */ export function getConfiguredClient( chainId: number ): OnchainReadClient | undefined { return onchainConfig.getClient?.(chainId); } /** App-wide gateways for ENS and Basename avatar assets, if configured. */ export function getConfiguredAvatarGatewayUrls(): AssetGatewayUrls | undefined { return onchainConfig.avatarGatewayUrls; } 51:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","viem@2.55.19",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/viem","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"viem@2.55.19"}]]}]}],["$","li","sonner",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/sonner","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"sonner"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L52",null,{"namespace":"@onchain-ui","registryDependencies":["@onchain-ui/sonner"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"registry/onchain-ui/address-display.tsx","content":"$54","type":"registry:ui","target":"components/ui/address-display.tsx"},{"path":"lib/onchain/format.ts","content":"export function truncateAddress(address: string, chars = 4): string {\n if (!address) return \"\";\n\n return `${address.slice(0, chars + 2)}...${address.slice(-chars)}`;\n}\n\nexport type NumericValue = number | string | null | undefined;\n\n/** Parses numbers and numeric strings; anything else becomes null. */\nexport function parseNumericValue(value: NumericValue): number | null {\n if (typeof value === \"number\") return Number.isFinite(value) ? value : null;\n if (typeof value === \"string\" && value.trim() !== \"\") {\n const parsed = Number(value);\n return Number.isFinite(parsed) ? parsed : null;\n }\n return null;\n}\n\n","type":"registry:lib","target":"lib/onchain/format.ts"},{"path":"lib/onchain/config.ts","content":"$55","type":"registry:lib","target":"lib/onchain/config.ts"}],"className":"h-[70svh] min-h-80"}]]}]