{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "send-bsv21", "title": "Send BSV21", "author": "Satchmo ", "description": "Token send form with selector dropdown, decimal-aware amount input, recipient address, and confirmation flow for transferring BSV21 fungible tokens via @1sat/actions sendBsv21", "dependencies": [ "lucide-react" ], "registryDependencies": [ "badge", "button", "card", "input", "label", "separator" ], "files": [ { "path": "registry/new-york/blocks/send-bsv21/index.tsx", "content": "\"use client\"\n\nimport { useSendBsv21 } from \"./use-send-bsv21\"\nimport { SendBsv21Ui } from \"./send-bsv21-ui\"\nimport type { SendBsv21Params, SendBsv21Result, TokenBalance } from \"./use-send-bsv21\"\n\n// ---------------------------------------------------------------------------\n// Re-exports\n// ---------------------------------------------------------------------------\n\nexport { useSendBsv21 } from \"./use-send-bsv21\"\nexport { SendBsv21Ui } from \"./send-bsv21-ui\"\nexport type {\n TokenBalance,\n SendBsv21Params,\n SendBsv21Result,\n UseSendBsv21Options,\n UseSendBsv21Return,\n} from \"./use-send-bsv21\"\nexport type { SendBsv21UiProps } from \"./send-bsv21-ui\"\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\n/** Props for the composed SendBsv21 block */\nexport interface SendBsv21Props {\n /** Available token balances for the selector */\n balances?: TokenBalance[]\n /** Callback to execute the token transfer */\n onSend?: (params: SendBsv21Params) => Promise\n /** Called on successful send */\n onSuccess?: (result: SendBsv21Result) => void\n /** Called on error */\n onError?: (error: Error) => void\n /** Optional CSS class */\n className?: string\n}\n\n// ---------------------------------------------------------------------------\n// Component\n// ---------------------------------------------------------------------------\n\n/**\n * Full Send BSV21 Tokens block: a card form with token selector,\n * amount input with decimal formatting, recipient address, and send button.\n *\n * The `onSend` callback receives `{ tokenId, amount, address }` where\n * `amount` is a raw integer string (accounting for decimals) and should\n * call `@1sat/actions` `sendBsv21.execute(ctx, { tokenId, amount, address })`.\n *\n * @example\n * ```tsx\n * import { SendBsv21 } from \"@/components/blocks/send-bsv21\"\n *\n * {\n * const result = await sendBsv21.execute(ctx, { tokenId, amount, address })\n * return result\n * }}\n * />\n * ```\n */\nexport function SendBsv21({\n balances = [],\n onSend,\n onSuccess,\n onError,\n className,\n}: SendBsv21Props) {\n const { isLoading, error, result, execute, reset } = useSendBsv21({\n onSend,\n onSuccess,\n onError,\n })\n\n return (\n \n )\n}\n", "type": "registry:block", "target": "~/components/blocks/send-bsv21/index.tsx" }, { "path": "registry/new-york/blocks/send-bsv21/send-bsv21-ui.tsx", "content": "\"use client\"\n\nimport { useCallback, useEffect, useMemo, useState } from \"react\"\nimport {\n AlertCircle,\n CheckCircle2,\n ChevronDown,\n Coins,\n Loader2,\n Send,\n} 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 { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\nimport { Separator } from \"@/components/ui/separator\"\nimport { cn } from \"@/lib/utils\"\nimport type { SendBsv21Params, SendBsv21Result, TokenBalance } from \"./use-send-bsv21\"\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\nexport interface SendBsv21UiProps {\n /** Available token balances for the selector */\n balances: TokenBalance[]\n /** Whether a send is in progress */\n isLoading: boolean\n /** Current error state */\n error: Error | null\n /** Result of the last send */\n result: SendBsv21Result | null\n /** Called when the user submits the send form */\n onSubmit: (params: SendBsv21Params) => Promise\n /** Reset hook state */\n onReset: () => void\n /** Optional CSS class */\n className?: string\n}\n\n// ---------------------------------------------------------------------------\n// Constants\n// ---------------------------------------------------------------------------\n\nconst BSV_ADDRESS_RE = /^[13][1-9A-HJ-NP-Za-km-z]{24,33}$/\n\n// ---------------------------------------------------------------------------\n// Helpers\n// ---------------------------------------------------------------------------\n\nfunction isValidBsvAddress(address: string): boolean {\n return BSV_ADDRESS_RE.test(address.trim())\n}\n\n/**\n * Format a raw token amount string using the token's decimal places.\n * e.g. \"1500\" with decimals=2 becomes \"15\".\n */\nfunction formatTokenAmount(raw: string, decimals: number): string {\n if (decimals === 0) return raw\n const padded = raw.padStart(decimals + 1, \"0\")\n const intPart = padded.slice(0, padded.length - decimals)\n const decPart = padded.slice(padded.length - decimals)\n const trimmedDec = decPart.replace(/0+$/, \"\")\n return trimmedDec ? `${intPart}.${trimmedDec}` : intPart\n}\n\n/**\n * Parse a human-readable amount string (e.g. \"10.5\") into a raw integer string\n * given the token's decimal places.\n */\nfunction parseAmountToRaw(input: string, decimals: number): string | null {\n if (!input || input === \".\") return null\n\n const parts = input.split(\".\")\n if (parts.length > 2) return null\n\n const intPart = parts[0] || \"0\"\n const decPart = (parts[1] || \"\").padEnd(decimals, \"0\").slice(0, decimals)\n const raw = intPart + decPart\n\n // Strip leading zeros but keep at least \"0\"\n const stripped = raw.replace(/^0+/, \"\") || \"0\"\n return stripped\n}\n\n/**\n * Compare two numeric strings as BigInt values.\n * Returns negative if a < b, zero if equal, positive if a > b.\n */\nfunction compareBigIntStrings(a: string, b: string): number {\n const bigA = BigInt(a)\n const bigB = BigInt(b)\n if (bigA < bigB) return -1\n if (bigA > bigB) return 1\n return 0\n}\n\n// ---------------------------------------------------------------------------\n// Component\n// ---------------------------------------------------------------------------\n\nexport function SendBsv21Ui({\n balances,\n isLoading,\n error,\n result,\n onSubmit,\n onReset,\n className,\n}: SendBsv21UiProps) {\n const [selectedTokenId, setSelectedTokenId] = useState(\"\")\n const [amountInput, setAmountInput] = useState(\"\")\n const [address, setAddress] = useState(\"\")\n const [dropdownOpen, setDropdownOpen] = useState(false)\n\n // Auto-select first token if none selected\n useEffect(() => {\n if (!selectedTokenId && balances.length > 0) {\n setSelectedTokenId(balances[0].tokenId)\n }\n }, [balances, selectedTokenId])\n\n const selectedToken = useMemo(\n () => balances.find((b) => b.tokenId === selectedTokenId),\n [balances, selectedTokenId],\n )\n\n const formattedBalance = useMemo(() => {\n if (!selectedToken) return \"0\"\n return formatTokenAmount(selectedToken.balance, selectedToken.decimals)\n }, [selectedToken])\n\n // Validation\n const validationError = useMemo(() => {\n if (!amountInput && !address) return null\n\n if (address && address.trim().length > 0 && !isValidBsvAddress(address)) {\n return \"Invalid BSV address\"\n }\n\n if (amountInput && selectedToken) {\n const raw = parseAmountToRaw(amountInput, selectedToken.decimals)\n if (raw === null || raw === \"0\") {\n return \"Amount must be greater than zero\"\n }\n if (compareBigIntStrings(raw, selectedToken.balance) > 0) {\n return `Insufficient balance (${formattedBalance} ${selectedToken.symbol} available)`\n }\n }\n\n return null\n }, [amountInput, address, selectedToken, formattedBalance])\n\n const canSend = useMemo(() => {\n if (!selectedToken || !amountInput || !address) return false\n if (!isValidBsvAddress(address)) return false\n const raw = parseAmountToRaw(amountInput, selectedToken.decimals)\n if (raw === null || raw === \"0\") return false\n if (compareBigIntStrings(raw, selectedToken.balance) > 0) return false\n return true\n }, [selectedToken, amountInput, address])\n\n const handleAmountChange = useCallback(\n (value: string) => {\n const decimals = selectedToken?.decimals ?? 0\n if (decimals === 0) {\n // Integer only\n setAmountInput(value.replace(/[^0-9]/g, \"\"))\n } else {\n // Allow digits and single decimal point, limit decimal places\n const cleaned = value\n .replace(/[^0-9.]/g, \"\")\n .replace(/(\\..*)\\./g, \"$1\")\n\n const parts = cleaned.split(\".\")\n if (parts.length === 2 && parts[1].length > decimals) {\n setAmountInput(`${parts[0]}.${parts[1].slice(0, decimals)}`)\n } else {\n setAmountInput(cleaned)\n }\n }\n },\n [selectedToken],\n )\n\n const handleMaxClick = useCallback(() => {\n if (selectedToken) {\n setAmountInput(formattedBalance)\n }\n }, [selectedToken, formattedBalance])\n\n const handleSelectToken = useCallback((tokenId: string) => {\n setSelectedTokenId(tokenId)\n setAmountInput(\"\")\n setDropdownOpen(false)\n }, [])\n\n const handleSend = useCallback(async () => {\n if (!canSend || !selectedToken) return\n\n const raw = parseAmountToRaw(amountInput, selectedToken.decimals)\n if (!raw) return\n\n await onSubmit({\n tokenId: selectedToken.tokenId,\n amount: raw,\n address: address.trim(),\n })\n }, [canSend, selectedToken, amountInput, address, onSubmit])\n\n const handleNewTransfer = useCallback(() => {\n setAmountInput(\"\")\n setAddress(\"\")\n onReset()\n }, [onReset])\n\n return (\n \n \n \n \n Send Tokens\n \n \n Transfer BSV21 tokens to any address\n \n \n\n \n {/* Token selector */}\n
\n \n
\n setDropdownOpen((prev) => !prev)}\n disabled={isLoading || !!result?.txid || balances.length === 0}\n aria-expanded={dropdownOpen}\n aria-haspopup=\"listbox\"\n >\n {selectedToken ? (\n \n {selectedToken.iconUrl ? (\n \n ) : (\n \n {selectedToken.symbol.charAt(0).toUpperCase()}\n \n )}\n {selectedToken.symbol}\n \n {formattedBalance}\n \n \n ) : (\n Select a token\n )}\n \n \n\n {dropdownOpen && balances.length > 0 && (\n \n {balances.map((token) => (\n handleSelectToken(token.tokenId)}\n >\n {token.iconUrl ? (\n \n ) : (\n \n {token.symbol.charAt(0).toUpperCase()}\n \n )}\n {token.symbol}\n \n {formatTokenAmount(token.balance, token.decimals)}\n \n \n ))}\n
\n )}\n
\n \n\n {/* Amount input */}\n
\n \n
\n
\n handleAmountChange(e.target.value)}\n disabled={isLoading || !!result?.txid || !selectedToken}\n className=\"pr-16\"\n aria-describedby=\"send-bsv21-amount-hint\"\n autoComplete=\"off\"\n spellCheck={false}\n />\n {selectedToken && (\n \n {selectedToken.symbol}\n \n )}\n
\n \n Max\n \n
\n {selectedToken && amountInput && (\n \n Balance: {formattedBalance} {selectedToken.symbol}\n

\n )}\n
\n\n {/* Recipient address */}\n
\n \n setAddress(e.target.value)}\n disabled={isLoading || !!result?.txid}\n className=\"font-mono text-sm\"\n autoComplete=\"off\"\n spellCheck={false}\n />\n
\n\n {/* Validation error */}\n {validationError && (\n

\n {validationError}\n

\n )}\n\n {/* Summary */}\n {canSend && !result?.txid && (\n <>\n \n
\n
\n

Sending

\n

\n {amountInput} {selectedToken?.symbol}\n

\n
\n \n {address.slice(0, 6)}...{address.slice(-4)}\n \n
\n \n )}\n\n {/* Success */}\n {result?.txid && (\n
\n \n
\n

Tokens sent successfully

\n \n {result.txid}\n \n
\n
\n )}\n\n {/* Error */}\n {error && (\n
\n \n
\n

Send failed

\n

{error.message}

\n
\n
\n )}\n \n\n \n {result?.txid ? (\n \n ) : (\n \n {isLoading ? (\n <>\n \n Sending...\n \n ) : (\n <>\n \n Send Tokens\n \n )}\n \n )}\n \n \n )\n}\n", "type": "registry:component", "target": "~/components/blocks/send-bsv21/send-bsv21-ui.tsx" }, { "path": "registry/new-york/blocks/send-bsv21/use-send-bsv21.ts", "content": "import { useCallback, useState } from \"react\"\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\n/** A token balance entry for display in the selector */\nexport interface TokenBalance {\n /** Token ID (txid_vout format) */\n tokenId: string\n /** Token ticker symbol */\n symbol: string\n /** Available balance as a decimal string */\n balance: string\n /** Number of decimal places for this token */\n decimals: number\n /** Optional URL for the token icon */\n iconUrl?: string\n}\n\n/** Parameters passed to the onSend callback */\nexport interface SendBsv21Params {\n /** Token ID being sent */\n tokenId: string\n /** Amount as a decimal string (human-readable, e.g. \"10.5\") */\n amount: string\n /** Recipient BSV address */\n address: string\n}\n\n/** Result returned from the onSend callback */\nexport interface SendBsv21Result {\n /** Transaction ID on success */\n txid?: string\n /** Error message on failure */\n error?: string\n}\n\n/** Options for the useSendBsv21 hook */\nexport interface UseSendBsv21Options {\n /** Callback to execute the actual token transfer */\n onSend?: (params: SendBsv21Params) => Promise\n /** Called on successful send */\n onSuccess?: (result: SendBsv21Result) => void\n /** Called on error */\n onError?: (error: Error) => void\n}\n\n/** Return type of useSendBsv21 hook */\nexport interface UseSendBsv21Return {\n /** Whether a send operation is in progress */\n isLoading: boolean\n /** Current error, if any */\n error: Error | null\n /** Result of the last successful send */\n result: SendBsv21Result | null\n /** Execute a token send */\n execute: (params: SendBsv21Params) => Promise\n /** Reset error and result state */\n reset: () => void\n}\n\n// ---------------------------------------------------------------------------\n// Hook\n// ---------------------------------------------------------------------------\n\nexport function useSendBsv21({\n onSend,\n onSuccess,\n onError,\n}: UseSendBsv21Options = {}): UseSendBsv21Return {\n const [isLoading, setIsLoading] = useState(false)\n const [error, setError] = useState(null)\n const [result, setResult] = useState(null)\n\n const execute = useCallback(\n async (params: SendBsv21Params): Promise => {\n if (!onSend) {\n const err = new Error(\"onSend callback is required\")\n setError(err)\n onError?.(err)\n return { error: err.message }\n }\n\n setIsLoading(true)\n setError(null)\n setResult(null)\n\n try {\n const sendResult = await onSend(params)\n\n if (sendResult.error) {\n const err = new Error(sendResult.error)\n setError(err)\n onError?.(err)\n return sendResult\n }\n\n setResult(sendResult)\n onSuccess?.(sendResult)\n return sendResult\n } catch (err) {\n const e = err instanceof Error ? err : new Error(String(err))\n setError(e)\n onError?.(e)\n return { error: e.message }\n } finally {\n setIsLoading(false)\n }\n },\n [onSend, onSuccess, onError],\n )\n\n const reset = useCallback(() => {\n setError(null)\n setResult(null)\n }, [])\n\n return { isLoading, error, result, execute, reset }\n}\n", "type": "registry:component", "target": "~/components/blocks/send-bsv21/use-send-bsv21.ts" } ], "type": "registry:block" }