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:Tba7,"use client"; import { ChevronDownIcon, LoaderCircleIcon } from "lucide-react"; import { cn } from "@/lib/utils"; import { AddressIdentity } from "./address-identity"; import { NetworkLogo } from "./network-logo"; import type { Address } from "viem"; import type { ComponentProps } from "react"; export interface WalletButtonProps // `name` is the resolved account name, not the button's form name. extends Omit, "name"> { /** Connected wallet address */ address: Address; /** Connected chain id. Renders a network mark when set */ chainId?: number | null; /** Resolved name override, e.g. vitalik.eth. Skips resolution when set */ name?: string | null; /** Avatar URL override */ avatarUrl?: string | null; /** Show a spinner in place of the chevron */ isPending?: boolean; /** Show the network mark. Default: true */ showNetwork?: boolean; /** Show the trailing chevron. Default: true */ showChevron?: boolean; /** Visual size. Default: "default" */ size?: "sm" | "default"; } const buttonSizes = { sm: "h-7 gap-1.5 py-0.5 pr-1.5 pl-1", default: "h-8 gap-2 py-1 pr-2 pl-1.5", } as const; const avatarSizes = { sm: "size-5", default: "size-6", } as const; /** * The connected-wallet pill: identity, network, and a disclosure chevron. * * It renders a plain button and forwards every prop, so it drops straight into * a menu trigger (`} />`) or * takes an `onClick` of its own. */ export function WalletButton({ address, chainId, name, avatarUrl, isPending = false, showNetwork = true, showChevron = true, size = "default", className, ...props }: WalletButtonProps) { return ( ); } 55:T131b,"use client"; import { useEffect, useMemo, useRef, useState } from "react"; import { cn } from "@/lib/utils"; import { truncateAddress } from "@/lib/onchain/format"; import { resolveOnchainIdentity, resolveNameAvatar, type OnchainIdentity, type OnchainResolverOptions, } from "@/lib/onchain/resolvers"; import { AddressDisplay, type AddressDisplayProps, } from "./address-display"; import type { Address } from "viem"; export interface AddressIdentityProps extends Omit { /** EVM wallet address */ address: Address; /** Resolved name override, e.g. vitalik.eth or alice.base.eth */ name?: string | null; /** Avatar URL override */ avatarUrl?: string | null; /** Resolve ENS/Base name and avatar. Default: true */ resolveIdentity?: boolean; /** Resolver client and lookup overrides */ resolverOptions?: OnchainResolverOptions; /** Show avatar when available. Default: true */ showAvatar?: boolean; /** Applied to the root wrapper */ className?: string; /** Applied to the avatar */ avatarClassName?: string; /** Applied to the identity text group */ contentClassName?: string; } export function AddressIdentity({ address, name, avatarUrl, resolveIdentity = true, resolverOptions, showAvatar = true, className, avatarClassName, contentClassName, truncate = true, truncateChars = 4, ...addressDisplayProps }: AddressIdentityProps) { const identityKey = `${address}:${name ?? ""}:${avatarUrl ?? ""}:${resolveIdentity}`; const [resolvedIdentity, setResolvedIdentity] = useState<{ key: string; identity: OnchainIdentity; } | null>(null); const [avatarFailure, setAvatarFailure] = useState<{ src: string; attempts: number; } | null>(null); // Read resolver options through a ref so inline object literals don't // retrigger resolution on every render. const resolverOptionsRef = useRef(resolverOptions); useEffect(() => { resolverOptionsRef.current = resolverOptions; }); useEffect(() => { if (!resolveIdentity || (name && avatarUrl)) return; let isMounted = true; const options = resolverOptionsRef.current; const identityPromise = name ? resolveNameAvatar(name, options).then((avatar) => ({ address, name, avatar, source: name.endsWith(".base.eth") ? "basename" : "ens", }) satisfies OnchainIdentity) : resolveOnchainIdentity(address, options); identityPromise .then((result) => { if (isMounted) { setResolvedIdentity({ key: identityKey, identity: result }); } }); return () => { isMounted = false; }; }, [address, avatarUrl, identityKey, name, resolveIdentity]); const activeIdentity = resolvedIdentity?.key === identityKey ? resolvedIdentity.identity : null; const displayName = name ?? activeIdentity?.name ?? null; const resolvedAvatar = avatarUrl ?? activeIdentity?.avatar ?? null; const displayAvatar = resolvedAvatar !== null && !(avatarFailure?.src === resolvedAvatar && avatarFailure.attempts >= 2) ? resolvedAvatar : null; const isLoading = resolveIdentity && !(name && avatarUrl) && activeIdentity === null; const fallbackLabel = truncate ? truncateAddress(address, truncateChars) : address; const label = displayName ?? fallbackLabel; const avatarFallback = useMemo(() => { if (displayName) return displayName.slice(0, 2).toUpperCase(); return address.slice(2, 4).toUpperCase(); }, [address, displayName]); return (

{showAvatar && ( )}

); } 56: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} )}

); } 57:T11b6,"use client"; import { useMemo, useState, type ReactNode } from "react"; import { cn } from "@/lib/utils"; import { getNetworkIcon } from "@/lib/onchain/crypto-icons"; import { getNetworkMeta } from "@/lib/onchain/config"; import { Tooltip, TooltipContent, TooltipTrigger, } from "@/components/ui/tooltip"; const sizeClasses = { xs: "size-5 text-[8px]", sm: "size-6 text-[9px]", md: "size-8 text-[10px]", lg: "size-10 text-xs", xl: "size-12 text-sm", } as const; export interface NetworkLogoProps { /** EVM chain id */ chainId?: number | null; /** Network image URL override */ src?: string | null; /** Network name, used for alt text and fallback */ name?: string | null; /** Short network symbol, used for fallback */ symbol?: string | null; /** Visual size. Default: md */ size?: keyof typeof sizeClasses; /** Custom fallback content for unsupported chains */ fallback?: ReactNode; /** Show an animated tooltip. Default: false */ showTooltip?: boolean; /** Tooltip content. Defaults to network name, symbol, then chain id */ tooltipContent?: ReactNode; /** Applied to the root wrapper */ className?: string; /** Applied to the image */ imageClassName?: string; /** Applied to the fallback */ fallbackClassName?: string; } // How many characters fit inside the circle at each size, measured rather than // derived: the font and the circle do not grow in step, so the limit is not a // constant ratio. Values leave ~20% slack so glyphs never touch the border. const fallbackMaxChars = { xs: 3, sm: 3, md: 4, lg: 4, xl: 4, } as const; function getFallbackText({ chainId, name, symbol, maxChars, }: Pick & { maxChars: number; }) { if (symbol) return symbol.slice(0, Math.min(4, maxChars)).toUpperCase(); if (name) return name.slice(0, 2).toUpperCase(); // A chain id is only shown when it fits whole. Truncating one produces a // different, real-looking chain id, which is worse than admitting we do not // recognise the network — the full id stays in `alt` and the tooltip. if (chainId != null) { const id = String(chainId); if (id.length <= maxChars) return id; } return "?"; } export function NetworkLogo({ chainId, src, name, symbol, size = "md", fallback, showTooltip = false, tooltipContent, className, imageClassName, fallbackClassName, }: NetworkLogoProps) { const [failedSrc, setFailedSrc] = useState(null); const knownNetwork = getNetworkMeta(chainId); // Explicit src wins; otherwise ask the crypto-icons adapter. const adapterIcon = src ? null : getNetworkIcon(chainId); const resolvedSrc = src ?? (typeof adapterIcon === "string" ? adapterIcon : null); const knownIcon = adapterIcon != null && typeof adapterIcon !== "string" ? adapterIcon : null; const displayName = name ?? knownNetwork.name; const displaySymbol = symbol ?? knownNetwork.symbol; const shouldShowImage = Boolean(resolvedSrc) && failedSrc !== resolvedSrc; const alt = useMemo(() => { if (displayName && displaySymbol) return `${displayName} (${displaySymbol})`; return displayName ?? displaySymbol ?? String(chainId ?? "Network"); }, [chainId, displayName, displaySymbol]); const tooltip = tooltipContent ?? displayName ?? displaySymbol ?? chainId; const logo = ( {shouldShowImage ? ( {alt}

setFailedSrc(resolvedSrc)} /> ) : knownIcon && !fallback ? ( knownIcon ) : ( {fallback ?? getFallbackText({ chainId, name: displayName, symbol: displaySymbol, maxChars: fallbackMaxChars[size], })} )} ); if (!showTooltip || tooltip == null) return logo; return ( {tooltip} ); } 58:T30af,import { createPublicClient, encodePacked, fallback, http, isAddress, keccak256, namehash, zeroAddress, type Address, type AssetGatewayUrls, type Hex, type PublicClient, } from "viem"; import { normalize, parseAvatarRecord } from "viem/ens"; import { base, mainnet } from "viem/chains"; import { getConfiguredAvatarGatewayUrls, getConfiguredClient, type OnchainReadClient, } from "./config"; export const BASENAME_L2_RESOLVER_ADDRESS = "0xC6d566A56A1aFf6508b41f6c90ff131615583BCD"; const baseNamesAbi = [ { inputs: [{ internalType: "bytes32", name: "node", type: "bytes32" }], name: "name", outputs: [{ internalType: "string", name: "", type: "string" }], stateMutability: "view", type: "function", }, { inputs: [ { internalType: "bytes32", name: "node", type: "bytes32" }, { internalType: "string", name: "key", type: "string" }, ], name: "text", outputs: [{ internalType: "string", name: "", type: "string" }], stateMutability: "view", type: "function", }, { inputs: [{ internalType: "bytes32", name: "node", type: "bytes32" }], name: "addr", outputs: [{ internalType: "address", name: "", type: "address" }], stateMutability: "view", type: "function", }, ] as const; export interface OnchainResolverOptions { mainnetClient?: OnchainReadClient; baseClient?: OnchainReadClient; basenameResolverAddress?: Address; avatarGatewayUrls?: AssetGatewayUrls; reverseLookupOrder?: Array<"ens" | "basename">; } export interface OnchainIdentity { address: Address; name: string | null; avatar: string | null; source: "ens" | "basename" | null; } // The default clients use each chain's public RPC endpoint, with a fallback: // viem's default mainnet endpoint (eth.merkle.io) aggressively rate limits // some IPs, which would otherwise silently break name resolution. Public // endpoints are fine for demos; pass your own clients through // `OnchainResolverOptions` in production. function createDefaultMainnetClient() { return createPublicClient({ chain: mainnet, transport: fallback([ http(), http("https://ethereum-rpc.publicnode.com"), ]), }); } function createDefaultBaseClient() { return createPublicClient({ chain: base, transport: fallback([http(), http("https://base-rpc.publicnode.com")]), }); } let defaultMainnetClient: | ReturnType | undefined; let defaultBaseClient: ReturnType | undefined; // Precedence is per-instance, then app-wide, then the public fallback above. // The middle step is what stops an app that already configured RPC endpoints // (in wagmi, say) from having to configure them a second time here. function getMainnetClient(options?: OnchainResolverOptions) { if (options?.mainnetClient) return options.mainnetClient; const configured = getConfiguredClient(mainnet.id); if (configured) return configured; if (!defaultMainnetClient) defaultMainnetClient = createDefaultMainnetClient(); return defaultMainnetClient; } function getBaseClient(options?: OnchainResolverOptions) { if (options?.baseClient) return options.baseClient; const configured = getConfiguredClient(base.id); if (configured) return configured; if (!defaultBaseClient) defaultBaseClient = createDefaultBaseClient(); return defaultBaseClient; } function getBasenameResolverAddress(options?: OnchainResolverOptions) { return options?.basenameResolverAddress ?? BASENAME_L2_RESOLVER_ADDRESS; } function getAvatarGatewayUrls(options?: OnchainResolverOptions) { return ( options?.avatarGatewayUrls ?? getConfiguredAvatarGatewayUrls() ?? { ipfs: "https://gateway.pinata.cloud", arweave: "https://arweave.net", } ); } export function convertChainIdToCoinType(chainId: number): string { if (chainId === mainnet.id) return "addr"; const coinType = (0x80000000 | chainId) >>> 0; return coinType.toString(16).toUpperCase(); } export function convertReverseNodeToBytes(address: Address, chainId: number) { const addressFormatted = address.toLowerCase() as Address; const addressNode = keccak256(addressFormatted.substring(2) as Hex); const chainCoinType = convertChainIdToCoinType(chainId); const baseReverseNode = namehash(`${chainCoinType}.reverse`); return keccak256( encodePacked(["bytes32", "bytes32"], [baseReverseNode, addressNode]) ); } // Internal lookups report failures instead of collapsing them into null, so // callers can tell "no record exists" (cacheable) from "the RPC call failed" // (must not be cached). The exported resolve* functions keep returning null // for both. type LookupResult = { value: T; failed: boolean }; async function lookupEnsName( address: Address, options?: OnchainResolverOptions ): Promise> { try { const name = await getMainnetClient(options).getEnsName({ address }); return { value: name, failed: false }; } catch { return { value: null, failed: true }; } } async function lookupBasename( address: Address, options?: OnchainResolverOptions ): Promise> { try { const reverseNode = convertReverseNodeToBytes(address, base.id); const name = await getBaseClient(options).readContract({ abi: baseNamesAbi, address: getBasenameResolverAddress(options), functionName: "name", args: [reverseNode], }); return { value: name || null, failed: false }; } catch { return { value: null, failed: true }; } } export async function resolveEnsName( address: Address, options?: OnchainResolverOptions ) { return (await lookupEnsName(address, options)).value; } export async function resolveBasename( address: Address, options?: OnchainResolverOptions ) { return (await lookupBasename(address, options)).value; } // Session-level caches so repeated lookups (portfolio rows, remounts) don't // refetch. Keyed lookups share in-flight promises, deduping concurrent calls. // Failed lookups are evicted once settled so transient RPC errors are retried // instead of pinning "no result" for the whole session. // // Caches are scoped per resolver config: results from different clients or a // different Basename resolver must not mix. Scopes are keyed on the client // instances via WeakMap so a custom client keeps request deduplication, and // short-lived clients get garbage collected along with their cache. type ResolverCaches = { avatar: Map>>; identity: Map>>; }; const defaultMainnetScope = {}; const defaultBaseScope = {}; const cacheScopes = new WeakMap< object, WeakMap> >(); function getResolverCaches(options?: OnchainResolverOptions): ResolverCaches { const mainnetScope = options?.mainnetClient ?? defaultMainnetScope; const baseScope = options?.baseClient ?? defaultBaseScope; const resolverAddress = getBasenameResolverAddress(options).toLowerCase(); const gatewayUrls = getAvatarGatewayUrls(options); const resolverConfigKey = [ resolverAddress, gatewayUrls.ipfs ?? "", gatewayUrls.arweave ?? "", ].join(":"); let baseScopes = cacheScopes.get(mainnetScope); if (!baseScopes) { baseScopes = new WeakMap(); cacheScopes.set(mainnetScope, baseScopes); } let resolverScopes = baseScopes.get(baseScope); if (!resolverScopes) { resolverScopes = new Map(); baseScopes.set(baseScope, resolverScopes); } let caches = resolverScopes.get(resolverConfigKey); if (!caches) { caches = { avatar: new Map(), identity: new Map() }; resolverScopes.set(resolverConfigKey, caches); } return caches; } export async function resolveNameAvatar( name: string, options?: OnchainResolverOptions ) { return (await lookupNameAvatarWithRetry(name, options)).value; } /** Retry one transient RPC failure before exposing the avatar as unavailable. */ async function lookupNameAvatarWithRetry( name: string, options?: OnchainResolverOptions ): Promise> { const first = await lookupNameAvatarCached(name, options); if (!first.failed) return first; // Failed cached lookups evict themselves, so this is a fresh RPC attempt. return lookupNameAvatarCached(name, options); } async function lookupNameAvatarCached( name: string, options?: OnchainResolverOptions ): Promise> { const cache = getResolverCaches(options).avatar; const cached = cache.get(name); if (cached) return cached; const promise = lookupNameAvatar(name, options); cache.set(name, promise); const result = await promise; if (result.failed) cache.delete(name); return result; } async function lookupNameAvatar( name: string, options?: OnchainResolverOptions ): Promise> { try { if (name.endsWith(".base.eth")) { // The Basename L2 resolver is a plain resolver, not an ENS universal // resolver, so viem's getEnsAvatar reverts against it. Read the avatar // text record directly instead. const client = getBaseClient(options); const record = await client.readContract({ abi: baseNamesAbi, address: getBasenameResolverAddress(options), functionName: "text", args: [namehash(normalize(name)), "avatar"], }); if (!record) return { value: null, failed: false }; return { // parseAvatarRecord only consumes read actions, but viem types it as a // full client. The configured seam deliberately accepts less. value: await parseAvatarRecord(client as PublicClient, { record, gatewayUrls: getAvatarGatewayUrls(options), }), failed: false, }; } const avatar = await getMainnetClient(options).getEnsAvatar({ name, assetGatewayUrls: getAvatarGatewayUrls(options), }); return { value: avatar, failed: false }; } catch { return { value: null, failed: true }; } } export async function resolveAddress( input: string, options?: OnchainResolverOptions ): Promise

{ if (isAddress(input)) return input; try { if (input.endsWith(".base.eth")) { // Direct resolver read; see fetchNameAvatar for why getEnsAddress with // a universalResolverAddress override does not work for Basenames. const address = await getBaseClient(options).readContract({ abi: baseNamesAbi, address: getBasenameResolverAddress(options), functionName: "addr", args: [namehash(normalize(input))], }); return address && address !== zeroAddress ? address : null; } if (input.endsWith(".eth")) { return await getMainnetClient(options).getEnsAddress({ name: input }); } } catch { return null; } return null; } export async function resolveOnchainIdentity( address: Address, options?: OnchainResolverOptions ): Promise { const reverseLookupOrder = options?.reverseLookupOrder ?? [ "basename", "ens", ]; const cache = getResolverCaches(options).identity; const cacheKey = `${address.toLowerCase()}:${reverseLookupOrder.join(",")}`; const cached = cache.get(cacheKey); if (cached) return (await cached).value; const promise = lookupOnchainIdentity(address, reverseLookupOrder, options); cache.set(cacheKey, promise); const result = await promise; if (result.failed) cache.delete(cacheKey); return result.value; } async function lookupOnchainIdentity( address: Address, reverseLookupOrder: Array<"ens" | "basename">, options?: OnchainResolverOptions ): Promise> { let failed = false; for (const source of reverseLookupOrder) { const name = source === "basename" ? await lookupBasename(address, options) : await lookupEnsName(address, options); if (name.failed) failed = true; if (name.value) { const avatar = await lookupNameAvatarWithRetry(name.value, options); return { value: { address, name: name.value, avatar: avatar.value, source, }, failed: failed || avatar.failed, }; } } return { value: { address, name: null, avatar: null, source: null, }, failed, }; } 59:T2624,import { getAddress } from "viem"; import type { ReactNode } from "react"; /** * Crypto icon adapter. * * This file is the single seam onchain-ui components use to resolve token and * network icons — the crypto equivalent of shadcn's icon library setting. * Swap the implementations to point at your icon package, token list, CDN, or * indexer; the component contract stays the same. * * Both functions may return: * - a string, treated as an image URL * - a ReactNode, rendered directly in place of the image * - null, meaning "unknown" — components fall back to readable initials * * Explicit props (`src`, `fallback`) always win over this adapter. */ export type CryptoIcon = string | ReactNode | null; export interface TokenIconQuery { /** EVM chain id the token lives on */ chainId?: number | null; /** Token contract address */ address?: string | null; /** Token symbol. Unused by the default adapter: symbols are not canonical */ symbol?: string | null; /** Whether this is the chain's native currency rather than an ERC-20 */ isNative?: boolean; } // Chain folder names in the Trust Wallet assets repo. const trustWalletChainFolders: Record = { 1: "ethereum", 10: "optimism", 137: "polygon", 8453: "base", 42161: "arbitrum", }; /** * Resolves a token icon from the community-maintained Trust Wallet assets * repo by chain id and contract address. Coverage is good for established * tokens; misses degrade to the component's initials fallback. * * This default is fine for demos and prototypes. In production, prefer your * own token metadata (`src`) or point this function at your token list or * CDN. */ export function getTokenIcon(query: TokenIconQuery): CryptoIcon { const { chainId, address, isNative, symbol } = query; if (isNative && symbol?.toUpperCase() === "ETH") { return ; } if (chainId == null || !address) return null; const chainFolder = trustWalletChainFolders[chainId]; if (!chainFolder) return null; try { // The repo stores assets under EIP-55 checksummed addresses. const checksummed = getAddress(address); return `https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/${chainFolder}/assets/${checksummed}/logo.png`; } catch { return null; } } function EthereumMark({ className }: { className?: string }) { return ( ); } function BaseMark({ className }: { className?: string }) { return ( ); } function OptimismMark({ className }: { className?: string }) { return ( ); } function ArbitrumMark({ className }: { className?: string }) { return ( ); } function PolygonMark({ className }: { className?: string }) { return ( ); } /** * Resolves a network icon by chain id. The default adapter ships crisp inline * marks for common chains so `` works offline * with zero configuration. */ export function getNetworkIcon(chainId?: number | null): CryptoIcon { if (chainId === 1) return ; if (chainId === 10) return ; if (chainId === 137) return ; if (chainId === 8453) return ; if (chainId === 42161) return ; return null; } 5a: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","tooltip"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"registry/onchain-ui/wallet-button.tsx","content":"$54","type":"registry:ui","target":"components/ui/wallet-button.tsx"},{"path":"registry/onchain-ui/address-identity.tsx","content":"$55","type":"registry:ui","target":"components/ui/address-identity.tsx"},{"path":"registry/onchain-ui/address-display.tsx","content":"$56","type":"registry:ui","target":"components/ui/address-display.tsx"},{"path":"registry/onchain-ui/network-logo.tsx","content":"$57","type":"registry:ui","target":"components/ui/network-logo.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/resolvers.ts","content":"$58","type":"registry:lib","target":"lib/onchain/resolvers.ts"},{"path":"lib/onchain/crypto-icons.tsx","content":"$59","type":"registry:lib","target":"lib/onchain/crypto-icons.tsx"},{"path":"lib/onchain/config.ts","content":"$5a","type":"registry:lib","target":"lib/onchain/config.ts"}],"className":"h-[70svh] min-h-80"}]]}]