bigblocks/dist-registry/components/droplit-components-tapbutton.json

Complete Bitcoin UI component library - authentication, social, wallet, market, inscriptions, and blockchain interactions for React

{
  "name": "droplit-components-tapbutton",
  "type": "registry:component",
  "dependencies": [
    "@radix-ui/react-icons"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/droplit/components/TapButton.tsx",
      "type": "registry:component",
      "content": "\"use client\";\n\nimport { CheckIcon } from \"@radix-ui/react-icons\";\nimport { useState } from \"react\";\nimport { cn } from \"../../../lib/utils.js\";\nimport { Badge } from \"../../ui/badge.js\";\nimport { Button } from \"../../ui/button.js\";\n\nexport interface TapButtonProps {\n\tonSuccess?: (result: {\n\t\tmessage: string;\n\t\ttimestamp: string;\n\t\ttapCount: number;\n\t}) => void;\n\tonError?: (error: Error) => void;\n\tbuttonText?: string;\n\tvariant?: \"default\" | \"secondary\" | \"outline\" | \"ghost\";\n\tsize?: \"sm\" | \"default\" | \"lg\";\n\tdisabled?: boolean;\n\tclassName?: string;\n\tshowTapCount?: boolean;\n\tcolor?: \"blue\" | \"green\" | \"orange\" | \"red\" | \"purple\" | \"gray\";\n}\n\n/**\n * TapButton - Tap a droplit instance to receive BSV for testing and development\n *\n * This component simulates tapping a droplit (faucet) to receive test BSV.\n * In a real implementation, this would connect to a droplit API backend.\n *\n * @example\n * ```tsx\n * <TapButton\n *   onSuccess={(result) => console.log('Tapped:', result)}\n *   onError={(error) => console.error('Error:', error)}\n *   buttonText=\"Tap Droplit\"\n *   showTapCount={true}\n * />\n * ```\n */\nexport function TapButton({\n\tonSuccess,\n\tonError,\n\tbuttonText = \"Tap Droplit\",\n\tvariant = \"default\",\n\tsize = \"default\",\n\tdisabled = false,\n\tclassName = \"\",\n\tshowTapCount = true,\n\tcolor = \"blue\",\n}: TapButtonProps) {\n\tconst [isLoading, setIsLoading] = useState(false);\n\tconst [tapCount, setTapCount] = useState(0);\n\n\tconst handleTap = async () => {\n\t\tsetIsLoading(true);\n\n\t\ttry {\n\t\t\t// Simulate droplit authentication and access\n\t\t\t// In production, this would call the actual droplit API\n\t\t\tawait new Promise((resolve) => setTimeout(resolve, 1000));\n\n\t\t\tconst newCount = tapCount + 1;\n\t\t\tsetTapCount(newCount);\n\n\t\t\tconst result = {\n\t\t\t\tmessage: `Droplit access granted! Tap #${newCount}`,\n\t\t\t\ttimestamp: new Date().toISOString(),\n\t\t\t\ttapCount: newCount,\n\t\t\t};\n\n\t\t\tonSuccess?.(result);\n\t\t} catch (error) {\n\t\t\tonError?.(error as Error);\n\t\t} finally {\n\t\t\tsetIsLoading(false);\n\t\t}\n\t};\n\n\treturn (\n\t\t<div className={cn(\"flex flex-col gap-2\", className)}>\n\t\t\t<Button\n\t\t\t\tonClick={handleTap}\n\t\t\t\tdisabled={isLoading || disabled}\n\t\t\t\tvariant={variant}\n\t\t\t\tsize={size}\n\t\t\t\tclassName={cn(\n\t\t\t\t\tcolor === \"blue\" && \"bg-blue-600 hover:bg-blue-700\",\n\t\t\t\t\tcolor === \"green\" && \"bg-green-600 hover:bg-green-700\",\n\t\t\t\t\tcolor === \"orange\" && \"bg-orange-600 hover:bg-orange-700\",\n\t\t\t\t\tcolor === \"red\" && \"bg-red-600 hover:bg-red-700\",\n\t\t\t\t\tcolor === \"purple\" && \"bg-purple-600 hover:bg-purple-700\",\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t{isLoading ? \"Processing...\" : buttonText}\n\t\t\t</Button>\n\n\t\t\t{showTapCount && tapCount > 0 && (\n\t\t\t\t<div className=\"flex items-center gap-2\">\n\t\t\t\t\t<CheckIcon className=\"text-green-600\" />\n\t\t\t\t\t<Badge\n\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\tclassName=\"text-xs bg-green-100 text-green-700\"\n\t\t\t\t\t>\n\t\t\t\t\t\tDroplit access granted {tapCount} time{tapCount !== 1 ? \"s\" : \"\"}\n\t\t\t\t\t</Badge>\n\t\t\t\t</div>\n\t\t\t)}\n\n\t\t\t{tapCount > 0 && (\n\t\t\t\t<p className=\"text-xs text-muted-foreground\">\n\t\t\t\t\t💧 Demo: Droplit provides data transactions without BSV costs\n\t\t\t\t</p>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n",
      "target": "<%- config.aliases.components %>/tapbutton.tsx"
    }
  ]
}