{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "receive-address", "title": "Receive Address", "author": "Satchmo ", "description": "QR code and deposit address display with clipboard copy and optional address rotation. Supports default, compact, and inline variants.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "button", "card", "badge", "skeleton", "tooltip" ], "files": [ { "path": "registry/new-york/blocks/receive-address/index.tsx", "content": "\"use client\"\n\nimport { ReceiveAddressUI } from \"./receive-address-ui\"\nimport { useReceiveAddress } from \"./use-receive-address\"\nimport type { ReactNode } from \"react\"\nimport type { ReceiveAddressVariant } from \"./receive-address-ui\"\n\n// ---------------------------------------------------------------------------\n// Re-exports\n// ---------------------------------------------------------------------------\n\nexport {\n ReceiveAddressUI,\n type ReceiveAddressUIProps,\n type ReceiveAddressVariant,\n} from \"./receive-address-ui\"\nexport {\n useReceiveAddress,\n type UseReceiveAddressOptions,\n type UseReceiveAddressReturn,\n} from \"./use-receive-address\"\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\nexport interface ReceiveAddressProps {\n /** The deposit address to display */\n address: string | null\n /** Callback to rotate to a new address */\n onRotate?: () => Promise\n /** Callback fired after address is copied */\n onCopy?: (address: string) => void\n /** Visual layout variant */\n variant?: ReceiveAddressVariant\n /** QR code pixel dimensions (default 200) */\n qrSize?: number\n /** Custom QR code renderer — receives the address and returns a ReactNode */\n renderQr?: (address: string) => ReactNode\n /** Additional CSS classes */\n className?: string\n}\n\n// ---------------------------------------------------------------------------\n// Composed component\n// ---------------------------------------------------------------------------\n\n/**\n * Receive address block displaying a QR code and deposit address with copy\n * and optional address rotation.\n *\n * Composes the `useReceiveAddress` hook with the `ReceiveAddressUI`\n * presentation component.\n *\n * @example\n * ```tsx\n * import { ReceiveAddress } from \"@/components/blocks/receive-address\"\n *\n * function App() {\n * return (\n * {\n * const newAddr = await generateNewAddress()\n * return newAddr\n * }}\n * onCopy={(addr) => console.log(\"Copied:\", addr)}\n * />\n * )\n * }\n * ```\n */\nexport function ReceiveAddress({\n address,\n onRotate,\n onCopy,\n variant,\n qrSize,\n renderQr,\n className,\n}: ReceiveAddressProps) {\n const {\n copied,\n isRotating,\n rotateError,\n copyAddress,\n rotateAddress,\n } = useReceiveAddress({ address, onRotate, onCopy })\n\n return (\n \n )\n}\n", "type": "registry:block", "target": "~/components/blocks/receive-address/index.tsx" }, { "path": "registry/new-york/blocks/receive-address/receive-address-ui.tsx", "content": "\"use client\"\n\nimport { type ReactNode, useMemo } from \"react\"\nimport { cn } from \"@/lib/utils\"\nimport {\n Card,\n CardContent,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/components/ui/card\"\nimport { Button } from \"@/components/ui/button\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Skeleton } from \"@/components/ui/skeleton\"\nimport {\n Tooltip,\n TooltipContent,\n TooltipProvider,\n TooltipTrigger,\n} from \"@/components/ui/tooltip\"\nimport {\n Copy,\n Check,\n RefreshCw,\n AlertCircle,\n QrCode,\n} from \"lucide-react\"\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\n/** Visual variant for the receive address block */\nexport type ReceiveAddressVariant = \"default\" | \"compact\" | \"inline\"\n\nexport interface ReceiveAddressUIProps {\n /** The deposit address to display */\n address: string | null\n /** Visual layout variant */\n variant?: ReceiveAddressVariant\n /** QR code pixel dimensions (default 200) */\n qrSize?: number\n /** Whether the address was just copied */\n copied: boolean\n /** Whether address rotation is in progress */\n isRotating: boolean\n /** Error from address rotation */\n rotateError: Error | null\n /** Whether a rotate callback is available */\n canRotate: boolean\n /** Custom QR code renderer — receives the address and returns a ReactNode */\n renderQr?: (address: string) => ReactNode\n /** Copy the current address */\n onCopy: () => void\n /** Rotate to a new address */\n onRotate: () => void\n /** Additional CSS classes */\n className?: string\n}\n\n// ---------------------------------------------------------------------------\n// Helpers\n// ---------------------------------------------------------------------------\n\n/** Truncate a string for display: \"abc123...xyz9\" */\nfunction truncate(value: string, startLen = 8, endLen = 6): string {\n if (value.length <= startLen + endLen + 3) return value\n return `${value.slice(0, startLen)}...${value.slice(-endLen)}`\n}\n\n/**\n * Generate a deterministic SVG pattern from an address hash.\n * This is a placeholder visualization — consumers should provide a real QR\n * renderer via the `renderQr` prop for production use.\n */\nfunction AddressPattern({\n address,\n size,\n}: {\n address: string\n size: number\n}) {\n const gridSize = 11\n const cellSize = size / (gridSize + 2) // +2 for quiet zone\n\n const cells = useMemo(() => {\n // Simple deterministic hash to generate a grid pattern\n const result: boolean[] = []\n for (let i = 0; i < gridSize * gridSize; i++) {\n const charCode = address.charCodeAt(i % address.length)\n const nextCharCode = address.charCodeAt((i + 1) % address.length)\n result.push((charCode * nextCharCode + i) % 3 !== 0)\n }\n\n // Mirror horizontally for QR-like symmetry\n for (let row = 0; row < gridSize; row++) {\n for (let col = 0; col < Math.floor(gridSize / 2); col++) {\n const mirrorCol = gridSize - 1 - col\n result[row * gridSize + mirrorCol] = result[row * gridSize + col]\n }\n }\n\n // Add finder patterns (top-left, top-right, bottom-left corners)\n const setFinder = (startRow: number, startCol: number) => {\n for (let r = 0; r < 3; r++) {\n for (let c = 0; c < 3; c++) {\n const idx = (startRow + r) * gridSize + (startCol + c)\n result[idx] = r === 0 || r === 2 || c === 0 || c === 2\n }\n }\n // Center cell\n result[(startRow + 1) * gridSize + (startCol + 1)] = true\n }\n setFinder(0, 0)\n setFinder(0, gridSize - 3)\n setFinder(gridSize - 3, 0)\n\n return result\n }, [address])\n\n return (\n \n \n {cells.map((filled, i) => {\n if (!filled) return null\n const row = Math.floor(i / gridSize)\n const col = i % gridSize\n return (\n \n )\n })}\n \n )\n}\n\n// ---------------------------------------------------------------------------\n// Skeleton loaders\n// ---------------------------------------------------------------------------\n\nfunction QrSkeleton({ size }: { size: number }) {\n return \n}\n\nfunction AddressSkeleton() {\n return (\n
\n \n \n
\n )\n}\n\n// ---------------------------------------------------------------------------\n// Variant: Default\n// ---------------------------------------------------------------------------\n\nfunction DefaultVariant({\n address,\n qrSize,\n copied,\n isRotating,\n rotateError,\n canRotate,\n renderQr,\n onCopy,\n onRotate,\n className,\n}: ReceiveAddressUIProps) {\n if (!address) {\n return (\n \n \n
\n \n
\n
\n

\n No address available\n

\n

\n Connect a wallet to generate a receive address\n

\n
\n \n \n )\n }\n\n const effectiveSize = qrSize ?? 200\n\n return (\n \n \n \n Receive\n \n \n\n \n {/* QR code area */}\n
\n {renderQr ? (\n renderQr(address)\n ) : (\n \n )}\n
\n\n {/* Address with copy */}\n
\n \n {truncate(address, 12, 8)}\n \n \n \n \n \n {copied ? (\n \n ) : (\n \n )}\n \n \n \n

{copied ? \"Copied!\" : \"Copy address\"}

\n \n \n \n
\n\n {/* Rotation error */}\n {rotateError && (\n
\n \n

{rotateError.message}

\n
\n )}\n \n\n {canRotate && (\n \n \n \n {isRotating ? \"Generating...\" : \"New Address\"}\n \n \n )}\n \n )\n}\n\n// ---------------------------------------------------------------------------\n// Variant: Compact\n// ---------------------------------------------------------------------------\n\nfunction CompactVariant({\n address,\n qrSize,\n copied,\n renderQr,\n onCopy,\n className,\n}: ReceiveAddressUIProps) {\n const effectiveSize = qrSize ?? 120\n\n if (!address) {\n return \n }\n\n return (\n
\n \n \n \n \n {renderQr ? (\n renderQr(address)\n ) : (\n \n )}\n \n \n \n

{copied ? \"Copied!\" : \"Tap to copy address\"}

\n \n \n \n {copied && (\n \n \n Copied\n \n )}\n
\n )\n}\n\n// ---------------------------------------------------------------------------\n// Variant: Inline\n// ---------------------------------------------------------------------------\n\nfunction InlineVariant({\n address,\n copied,\n onCopy,\n className,\n}: ReceiveAddressUIProps) {\n if (!address) {\n return \n }\n\n return (\n
\n \n {truncate(address, 12, 8)}\n \n \n \n \n \n {copied ? (\n \n ) : (\n \n )}\n \n \n \n

{copied ? \"Copied!\" : \"Copy address\"}

\n \n \n \n
\n )\n}\n\n// ---------------------------------------------------------------------------\n// Main UI\n// ---------------------------------------------------------------------------\n\n/**\n * Pure presentation component for the receive-address block.\n *\n * Displays a QR code (or deterministic placeholder) and the deposit address\n * with copy and optional rotation controls. Supports three variants:\n * - **default**: Card with QR + address + rotate button\n * - **compact**: Tappable QR only (smaller)\n * - **inline**: Address text with copy icon (no QR)\n *\n * All data and callbacks are provided via props. For a real QR code,\n * pass a `renderQr` function.\n */\nexport function ReceiveAddressUI(props: ReceiveAddressUIProps) {\n const variant = props.variant ?? \"default\"\n\n switch (variant) {\n case \"compact\":\n return \n case \"inline\":\n return \n default:\n return \n }\n}\n", "type": "registry:component", "target": "~/components/blocks/receive-address/receive-address-ui.tsx" }, { "path": "registry/new-york/blocks/receive-address/use-receive-address.ts", "content": "import { useCallback, useEffect, useRef, useState } from \"react\"\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\nexport interface UseReceiveAddressOptions {\n /** The current deposit address to display */\n address: string | null\n /** Callback to rotate to a new address */\n onRotate?: () => Promise\n /** Callback fired after address is copied */\n onCopy?: (address: string) => void\n}\n\nexport interface UseReceiveAddressReturn {\n /** Whether the address was just copied (2s feedback window) */\n copied: boolean\n /** Whether address rotation is in progress */\n isRotating: boolean\n /** Error from the last rotation attempt */\n rotateError: Error | null\n /** Copy the current address to clipboard */\n copyAddress: () => void\n /** Rotate to a new address via the onRotate callback */\n rotateAddress: () => void\n /** Clear the rotation error */\n resetError: () => void\n}\n\n// ---------------------------------------------------------------------------\n// Constants\n// ---------------------------------------------------------------------------\n\nconst COPY_FEEDBACK_MS = 2000\n\n// ---------------------------------------------------------------------------\n// Hook\n// ---------------------------------------------------------------------------\n\n/**\n * Manages copy-to-clipboard feedback and address rotation for the\n * receive-address block. Pure logic — no UI or SDK imports.\n *\n * @example\n * ```ts\n * const { copied, isRotating, copyAddress, rotateAddress } =\n * useReceiveAddress({ address, onRotate, onCopy })\n * ```\n */\nexport function useReceiveAddress({\n address,\n onRotate,\n onCopy,\n}: UseReceiveAddressOptions): UseReceiveAddressReturn {\n const [copied, setCopied] = useState(false)\n const [isRotating, setIsRotating] = useState(false)\n const [rotateError, setRotateError] = useState(null)\n const timerRef = useRef | null>(null)\n\n // Clean up copy feedback timer on unmount\n useEffect(() => {\n return () => {\n if (timerRef.current) clearTimeout(timerRef.current)\n }\n }, [])\n\n const copyAddress = useCallback(() => {\n if (!address || typeof window === \"undefined\") return\n void navigator.clipboard.writeText(address).then(() => {\n setCopied(true)\n onCopy?.(address)\n if (timerRef.current) clearTimeout(timerRef.current)\n timerRef.current = setTimeout(() => setCopied(false), COPY_FEEDBACK_MS)\n })\n }, [address, onCopy])\n\n const rotateAddress = useCallback(() => {\n if (!onRotate) return\n setIsRotating(true)\n setRotateError(null)\n void onRotate()\n .catch((err: unknown) => {\n const e = err instanceof Error ? err : new Error(String(err))\n setRotateError(e)\n })\n .finally(() => {\n setIsRotating(false)\n })\n }, [onRotate])\n\n const resetError = useCallback(() => setRotateError(null), [])\n\n return {\n copied,\n isRotating,\n rotateError,\n copyAddress,\n rotateAddress,\n resetError,\n }\n}\n", "type": "registry:component", "target": "~/components/blocks/receive-address/use-receive-address.ts" } ], "categories": [ "wallet" ], "type": "registry:block" }