{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "inscribe-file", "title": "Inscribe File", "author": "Satchmo", "description": "Full inscription flow with tabbed interface for file upload, BSV20 tokens, and BSV21 tokens. Includes content type override, BAP signing, metadata editor, and on-chain inscription via @1sat/actions", "dependencies": [ "lucide-react" ], "registryDependencies": [ "badge", "button", "card", "checkbox", "input", "label", "select", "separator", "tabs" ], "files": [ { "path": "registry/new-york/blocks/inscribe-file/index.tsx", "content": "\"use client\"\n\nimport { useCallback, useMemo, useState } from \"react\"\nimport { AlertCircle, CheckCircle2, ExternalLink, Loader2 } from \"lucide-react\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/components/ui/card\"\nimport { Separator } from \"@/components/ui/separator\"\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \"@/components/ui/tabs\"\nimport { cn } from \"@/lib/utils\"\nimport { Bsv20Form, createDefaultBsv20Data, type Bsv20FormData } from \"./bsv20-form\"\nimport { Bsv21Form, createDefaultBsv21Data, type Bsv21FormData } from \"./bsv21-form\"\nimport { InscribeDropzone } from \"./inscribe-dropzone\"\nimport { InscribeForm, type MetadataEntry } from \"./inscribe-form\"\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\nexport type InscribeTab = \"file\" | \"bsv20\" | \"bsv21\"\n\nexport interface InscribeFileProps {\n /** Callback with the inscribe action parameters when user clicks \"Inscribe\" */\n onInscribe: (params: InscribeParams) => Promise\n /** Callback on successful inscription */\n onSuccess?: (result: InscribeResult) => void\n /** Callback on error */\n onError?: (error: Error) => void\n /** Maximum file size in bytes (default: 10MB) */\n maxFileSize?: number\n /** Default tab to show */\n defaultTab?: InscribeTab\n /** Optional CSS class name */\n className?: string\n /** Callback to handle external links (e.g. open in system browser from a WebView) */\n onExternalLink?: (url: string) => void\n}\n\nexport interface InscribeParams {\n /** The inscription type */\n type: InscribeTab\n /** Base64-encoded file content (file tab) */\n base64Content?: string\n /** MIME type of the file */\n contentType: string\n /** MAP metadata key/value pairs */\n map: Record\n /** Whether to sign with BAP identity (Sigma) */\n signWithBAP?: boolean\n /** BSV20-specific data */\n bsv20?: Bsv20FormData\n /** BSV21-specific data */\n bsv21?: {\n symbol: string\n maxSupply: string\n decimals: string\n /** Base64-encoded icon content */\n iconBase64?: string\n /** Icon MIME type */\n iconContentType?: string\n }\n}\n\nexport interface InscribeResult {\n /** Transaction ID of the inscription */\n txid?: string\n /** Raw transaction hex */\n rawtx?: string\n /** Error message if inscription failed */\n error?: string\n}\n\n// ---------------------------------------------------------------------------\n// Re-exports for consumers\n// ---------------------------------------------------------------------------\n\nexport type { MetadataEntry } from \"./inscribe-form\"\nexport type { Bsv20FormData, Bsv20Mode } from \"./bsv20-form\"\nexport type { Bsv21FormData } from \"./bsv21-form\"\n\n// ---------------------------------------------------------------------------\n// Helpers\n// ---------------------------------------------------------------------------\n\nfunction fileToBase64(file: File): Promise {\n return new Promise((resolve, reject) => {\n const reader = new FileReader()\n reader.onload = () => {\n const result = reader.result\n if (typeof result !== \"string\") {\n reject(new Error(\"Failed to read file\"))\n return\n }\n // Strip the data URL prefix to get raw base64\n const base64 = result.split(\",\")[1]\n if (!base64) {\n reject(new Error(\"Failed to encode file as base64\"))\n return\n }\n resolve(base64)\n }\n reader.onerror = () => reject(new Error(\"Failed to read file\"))\n reader.readAsDataURL(file)\n })\n}\n\n/** Estimate inscription fee (1 sat per byte of content + base tx fee) */\nfunction estimateFee(fileSize: number): number {\n const baseFee = 50\n const perByteFee = Math.ceil(fileSize * 0.5)\n return baseFee + perByteFee\n}\n\n// ---------------------------------------------------------------------------\n// Component\n// ---------------------------------------------------------------------------\n\n/**\n * A complete inscription flow for uploading files, BSV20 tokens, and BSV21\n * tokens to the BSV blockchain.\n *\n * Includes a tabbed interface with:\n * - **File** tab: drag-and-drop file dropzone, content type override, BAP\n * signing, MAP metadata editor, and fee estimate\n * - **BSV20** tab: mint existing tickers or deploy new ones\n * - **BSV21** tab: deploy new tokens with icon upload\n *\n * @example\n * ```tsx\n * {\n * if (params.type === \"file\") {\n * return await inscribe.execute(ctx, {\n * base64Content: params.base64Content,\n * contentType: params.contentType,\n * map: params.map,\n * signWithBAP: params.signWithBAP,\n * })\n * }\n * // Handle bsv20/bsv21 params...\n * }}\n * onSuccess={(result) => console.log(\"txid:\", result.txid)}\n * />\n * ```\n */\nexport function InscribeFile({\n onInscribe,\n onSuccess,\n onError,\n maxFileSize = 10 * 1024 * 1024,\n defaultTab = \"file\",\n className,\n onExternalLink,\n}: InscribeFileProps) {\n const [activeTab, setActiveTab] = useState(defaultTab)\n\n // File tab state\n const [file, setFile] = useState(null)\n const [contentType, setContentType] = useState(\"application/octet-stream\")\n const [signWithBAP, setSignWithBAP] = useState(false)\n const [metadata, setMetadata] = useState([])\n\n // BSV20 tab state\n const [bsv20Data, setBsv20Data] = useState(\n createDefaultBsv20Data\n )\n\n // BSV21 tab state\n const [bsv21Data, setBsv21Data] = useState(\n createDefaultBsv21Data\n )\n\n // Shared state\n const [isInscribing, setIsInscribing] = useState(false)\n const [result, setResult] = useState(null)\n const [error, setError] = useState(null)\n\n const feeEstimate = useMemo(() => {\n if (activeTab === \"file\" && file) return estimateFee(file.size)\n if (activeTab === \"bsv20\") return estimateFee(200)\n if (activeTab === \"bsv21\") {\n const iconSize = bsv21Data.icon?.size ?? 0\n return estimateFee(200 + iconSize)\n }\n return 0\n }, [activeTab, file, bsv21Data.icon])\n\n const canInscribe = useMemo(() => {\n if (activeTab === \"file\") return file !== null\n if (activeTab === \"bsv20\") return bsv20Data.ticker.length > 0\n if (activeTab === \"bsv21\") {\n return (\n bsv21Data.symbol.length > 0 &&\n bsv21Data.icon !== null &&\n bsv21Data.maxSupply.length > 0\n )\n }\n return false\n }, [activeTab, file, bsv20Data.ticker, bsv21Data])\n\n const inscribeButtonLabel = useMemo(() => {\n if (activeTab === \"bsv20\") {\n return bsv20Data.mode === \"mint\" ? \"Mint Tokens\" : \"Deploy Ticker\"\n }\n if (activeTab === \"bsv21\") return \"Deploy Token\"\n return \"Inscribe on Chain\"\n }, [activeTab, bsv20Data.mode])\n\n const handleFileSelect = useCallback((selectedFile: File) => {\n setFile(selectedFile)\n setContentType(selectedFile.type || \"application/octet-stream\")\n setResult(null)\n setError(null)\n }, [])\n\n const handleFileRemove = useCallback(() => {\n setFile(null)\n setContentType(\"application/octet-stream\")\n setMetadata([])\n setResult(null)\n setError(null)\n }, [])\n\n const handleInscribe = useCallback(async () => {\n setIsInscribing(true)\n setError(null)\n setResult(null)\n\n try {\n let params: InscribeParams\n\n if (activeTab === \"file\") {\n if (!file) return\n\n const base64Content = await fileToBase64(file)\n const map: Record = {}\n for (const entry of metadata) {\n if (entry.key.trim() && entry.value.trim()) {\n map[entry.key.trim()] = entry.value.trim()\n }\n }\n\n params = {\n type: \"file\",\n base64Content,\n contentType,\n map,\n signWithBAP: signWithBAP || undefined,\n }\n } else if (activeTab === \"bsv20\") {\n params = {\n type: \"bsv20\",\n contentType: \"application/bsv-20\",\n map: {},\n bsv20: bsv20Data,\n }\n } else {\n // bsv21\n let iconBase64: string | undefined\n let iconContentType: string | undefined\n if (bsv21Data.icon) {\n iconBase64 = await fileToBase64(bsv21Data.icon)\n iconContentType = bsv21Data.icon.type || \"image/png\"\n }\n\n params = {\n type: \"bsv21\",\n contentType: \"application/bsv-20\",\n map: {},\n bsv21: {\n symbol: bsv21Data.symbol,\n maxSupply: bsv21Data.maxSupply,\n decimals: bsv21Data.decimals,\n iconBase64,\n iconContentType,\n },\n }\n }\n\n const inscribeResult = await onInscribe(params)\n\n if (inscribeResult.error) {\n setError(inscribeResult.error)\n const err = new Error(inscribeResult.error)\n onError?.(err)\n } else {\n setResult(inscribeResult)\n onSuccess?.(inscribeResult)\n }\n } catch (err) {\n const errorMessage =\n err instanceof Error ? err.message : \"Inscription failed\"\n setError(errorMessage)\n onError?.(err instanceof Error ? err : new Error(errorMessage))\n } finally {\n setIsInscribing(false)\n }\n }, [\n activeTab,\n file,\n metadata,\n contentType,\n signWithBAP,\n bsv20Data,\n bsv21Data,\n onInscribe,\n onSuccess,\n onError,\n ])\n\n return (\n \n \n Inscribe\n \n Create on-chain inscriptions on the BSV blockchain.\n \n \n\n \n {\n if (value === \"file\" || value === \"bsv20\" || value === \"bsv21\") {\n setActiveTab(value)\n setResult(null)\n setError(null)\n }\n }}\n >\n \n File\n BSV20\n BSV21\n \n\n {/* ---- File Tab ---- */}\n \n \n\n {file && (\n \n )}\n \n\n {/* ---- BSV20 Tab ---- */}\n \n \n \n\n {/* ---- BSV21 Tab ---- */}\n \n \n \n \n\n {/* Fee estimate */}\n {feeEstimate > 0 && (\n <>\n \n
\n \n Estimated fee\n \n \n ~{feeEstimate.toLocaleString()} sats\n \n
\n \n )}\n\n {/* Success message */}\n {result?.txid && (\n
\n \n
\n

Inscription created

\n {onExternalLink ? (\n onExternalLink(`https://whatsonchain.com/tx/${result.txid}`)}\n className=\"inline-flex items-center gap-1 transition-colors hover:text-foreground\"\n >\n \n {result.txid}\n \n \n \n ) : (\n \n \n {result.txid}\n \n \n \n )}\n
\n
\n )}\n\n {/* Error message */}\n {error && (\n
\n \n
\n

Inscription failed

\n

{error}

\n
\n
\n )}\n \n\n \n \n {isInscribing ? (\n <>\n \n Inscribing...\n \n ) : (\n inscribeButtonLabel\n )}\n \n \n \n )\n}\n", "type": "registry:block", "target": "~/components/blocks/inscribe-file/index.tsx" }, { "path": "registry/new-york/blocks/inscribe-file/inscribe-dropzone.tsx", "content": "\"use client\"\n\nimport { useCallback, useEffect, useRef, useState, type DragEvent, type ChangeEvent } from \"react\"\nimport {\n Code,\n File as FileIcon,\n Image as ImageIcon,\n Music,\n Trash2,\n Upload,\n Video,\n} from \"lucide-react\"\nimport { Button } from \"@/components/ui/button\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport { Label } from \"@/components/ui/label\"\nimport { cn } from \"@/lib/utils\"\n\n/** Supported file categories for preview rendering */\ntype FileCategory = \"image\" | \"video\" | \"audio\" | \"code\" | \"other\"\n\nexport interface InscribeDropzoneProps {\n /** Currently selected file */\n file: File | null\n /** Callback when a file is selected */\n onFileSelect: (file: File) => void\n /** Callback when the file is removed */\n onFileRemove: () => void\n /** Maximum file size in bytes (default: 10MB) */\n maxFileSize?: number\n /** Optional CSS class name */\n className?: string\n}\n\nfunction categorizeFile(mimeType: string): FileCategory {\n if (mimeType.startsWith(\"image/\")) return \"image\"\n if (mimeType.startsWith(\"video/\")) return \"video\"\n if (mimeType.startsWith(\"audio/\")) return \"audio\"\n if (\n mimeType.startsWith(\"text/\") ||\n mimeType === \"application/json\" ||\n mimeType === \"application/javascript\"\n )\n return \"code\"\n return \"other\"\n}\n\nfunction FileCategoryIcon({\n category,\n className,\n}: {\n category: FileCategory\n className?: string\n}) {\n switch (category) {\n case \"image\":\n return \n case \"video\":\n return