{
  "name": "wallet-components-tokenbalance",
  "type": "registry:component",
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/wallet/components/TokenBalance.tsx",
      "type": "registry:component",
      "content": "import {\n\tExternalLinkIcon,\n\tEyeNoneIcon,\n\tEyeOpenIcon,\n} from \"@radix-ui/react-icons\";\nimport { CONTAINER_WIDTHS } from \"../../../lib/layout-constants.js\";\nimport { cn } from \"../../../lib/utils.js\";\nimport { Avatar, AvatarFallback } from \"../../ui/avatar.js\";\nimport { Badge } from \"../../ui/badge.js\";\nimport { Button } from \"../../ui/button.js\";\nimport { Card, CardContent } from \"../../ui/card.js\";\nimport { Skeleton } from \"../../ui/skeleton.js\";\nimport {\n\tTooltip,\n\tTooltipContent,\n\tTooltipProvider,\n\tTooltipTrigger,\n} from \"../../ui/tooltip.js\";\nimport type { TokenBalance as TokenBalanceType } from \"../types/wallet.js\";\nimport { formatCurrency, formatTokenAmount } from \"../utils/currency.js\";\n\nexport interface TokenBalanceProps {\n\ttokens: TokenBalanceType[];\n\tshowValues?: boolean;\n\tonToggleValues?: () => void;\n\tonViewDetails?: (token: TokenBalanceType) => void;\n\tonSendToken?: (token: TokenBalanceType) => void;\n\tcurrency?: \"BSV\" | \"USD\";\n\tloading?: boolean;\n\tclassName?: string;\n}\n\nexport function TokenBalance({\n\ttokens,\n\tshowValues = true,\n\tonToggleValues,\n\tonViewDetails,\n\tonSendToken,\n\tcurrency = \"USD\",\n\tloading = false,\n\tclassName,\n}: TokenBalanceProps) {\n\tif (loading) {\n\t\treturn (\n\t\t\t<Card\n\t\t\t\tclassName={cn(\n\t\t\t\t\tclassName,\n\t\t\t\t\t`min-w-[${CONTAINER_WIDTHS.CARD_SMALL}px] max-w-[${CONTAINER_WIDTHS.CARD_LARGE}px]`,\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t<CardContent className=\"p-6\">\n\t\t\t\t\t<div className=\"flex flex-col gap-3\">\n\t\t\t\t\t\t<div className=\"flex justify-between items-center\">\n\t\t\t\t\t\t\t<h3 className=\"text-xl font-bold\">Token Balances</h3>\n\t\t\t\t\t\t\t<Button variant=\"ghost\" size=\"sm\" onClick={onToggleValues}>\n\t\t\t\t\t\t\t\t{showValues ? (\n\t\t\t\t\t\t\t\t\t<EyeOpenIcon className=\"w-4 h-4\" />\n\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t<EyeNoneIcon className=\"w-4 h-4\" />\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t{/* Loading skeleton */}\n\t\t\t\t\t\t{Array.from({ length: 3 }).map((_, i) => (\n\t\t\t\t\t\t\t<Card\n\t\t\t\t\t\t\t\tkey={`token-balance-skeleton-${i + 1}`}\n\t\t\t\t\t\t\t\tclassName=\"bg-muted/20\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<CardContent className=\"p-4\">\n\t\t\t\t\t\t\t\t\t<div className=\"flex justify-between items-center\">\n\t\t\t\t\t\t\t\t\t\t<div className=\"flex items-center gap-3\">\n\t\t\t\t\t\t\t\t\t\t\t<Skeleton className=\"w-8 h-8 rounded-full\" />\n\t\t\t\t\t\t\t\t\t\t\t<div className=\"flex flex-col gap-1\">\n\t\t\t\t\t\t\t\t\t\t\t\t<Skeleton className=\"w-16 h-4\" />\n\t\t\t\t\t\t\t\t\t\t\t\t<Skeleton className=\"w-24 h-3\" />\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t<Skeleton className=\"w-20 h-6\" />\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</CardContent>\n\t\t\t\t\t\t\t</Card>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</div>\n\t\t\t\t</CardContent>\n\t\t\t</Card>\n\t\t);\n\t}\n\n\tif (tokens.length === 0) {\n\t\treturn (\n\t\t\t<Card\n\t\t\t\tclassName={cn(\n\t\t\t\t\tclassName,\n\t\t\t\t\t`min-w-[${CONTAINER_WIDTHS.CARD_SMALL}px] max-w-[${CONTAINER_WIDTHS.CARD_LARGE}px]`,\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t<CardContent className=\"p-6\">\n\t\t\t\t\t<div className=\"flex flex-col gap-3 items-center py-6\">\n\t\t\t\t\t\t<h3 className=\"text-xl font-bold\">Token Balances</h3>\n\t\t\t\t\t\t<p className=\"text-sm text-muted-foreground\">No tokens found</p>\n\t\t\t\t\t\t<p className=\"text-xs text-muted-foreground\">\n\t\t\t\t\t\t\tYour BSV20 and BSV21 tokens will appear here\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t</CardContent>\n\t\t\t</Card>\n\t\t);\n\t}\n\n\tconst totalValue = tokens.reduce((sum, token) => sum + (token.value || 0), 0);\n\n\treturn (\n\t\t<Card\n\t\t\tclassName={cn(\n\t\t\t\tclassName,\n\t\t\t\t`min-w-[${CONTAINER_WIDTHS.CARD_SMALL}px] max-w-[${CONTAINER_WIDTHS.CARD_LARGE}px]`,\n\t\t\t)}\n\t\t>\n\t\t\t<CardContent className=\"p-6\">\n\t\t\t\t<div className=\"flex flex-col gap-3\">\n\t\t\t\t\t<div className=\"flex justify-between items-center\">\n\t\t\t\t\t\t<div className=\"flex flex-col gap-1\">\n\t\t\t\t\t\t\t<h3 className=\"text-xl font-bold\">Token Balances</h3>\n\t\t\t\t\t\t\t{showValues && (\n\t\t\t\t\t\t\t\t<p className=\"text-sm text-muted-foreground\">\n\t\t\t\t\t\t\t\t\tTotal: {formatCurrency(totalValue, currency)}\n\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t<div className=\"flex gap-2\">\n\t\t\t\t\t\t\t<TooltipProvider>\n\t\t\t\t\t\t\t\t<Tooltip>\n\t\t\t\t\t\t\t\t\t<TooltipTrigger asChild>\n\t\t\t\t\t\t\t\t\t\t<Button variant=\"ghost\" size=\"sm\" onClick={onToggleValues}>\n\t\t\t\t\t\t\t\t\t\t\t{showValues ? (\n\t\t\t\t\t\t\t\t\t\t\t\t<EyeOpenIcon className=\"w-4 h-4\" />\n\t\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t\t<EyeNoneIcon className=\"w-4 h-4\" />\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t</TooltipTrigger>\n\t\t\t\t\t\t\t\t\t<TooltipContent>\n\t\t\t\t\t\t\t\t\t\t{showValues ? \"Hide values\" : \"Show values\"}\n\t\t\t\t\t\t\t\t\t</TooltipContent>\n\t\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t\t</TooltipProvider>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div className=\"flex flex-col gap-2\">\n\t\t\t\t\t\t{tokens.map((token) => (\n\t\t\t\t\t\t\t<Card key={token.id} className=\"bg-muted/20\">\n\t\t\t\t\t\t\t\t<CardContent className=\"p-3\">\n\t\t\t\t\t\t\t\t\t<div className=\"flex justify-between items-center\">\n\t\t\t\t\t\t\t\t\t\t<div className=\"flex items-center gap-3\">\n\t\t\t\t\t\t\t\t\t\t\t<Avatar className=\"h-8 w-8\">\n\t\t\t\t\t\t\t\t\t\t\t\t<AvatarFallback>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{token.symbol.slice(0, 2).toUpperCase()}\n\t\t\t\t\t\t\t\t\t\t\t\t</AvatarFallback>\n\t\t\t\t\t\t\t\t\t\t\t</Avatar>\n\n\t\t\t\t\t\t\t\t\t\t\t<div className=\"flex flex-col gap-1\">\n\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"flex items-center gap-2\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<p className=\"text-base font-medium\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{token.symbol}\n\t\t\t\t\t\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Badge\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"text-xs\",\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttoken.type === \"bsv20\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? \"bg-blue-100 text-blue-700\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: \"bg-green-100 text-green-700\",\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{token.type.toUpperCase()}\n\t\t\t\t\t\t\t\t\t\t\t\t\t</Badge>\n\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t\t\t\t\t\t<p className=\"text-sm text-muted-foreground\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t{formatTokenAmount(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\ttoken.balance.total,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\ttoken.decimals,\n\t\t\t\t\t\t\t\t\t\t\t\t\t)}{\" \"}\n\t\t\t\t\t\t\t\t\t\t\t\t\t{token.symbol}\n\t\t\t\t\t\t\t\t\t\t\t\t</p>\n\n\t\t\t\t\t\t\t\t\t\t\t\t{token.listed.total !== \"0\" && (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<p className=\"text-xs text-orange-600\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{formatTokenAmount(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttoken.listed.total,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttoken.decimals,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t)}{\" \"}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tlisted\n\t\t\t\t\t\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t\t\t\t<div className=\"flex flex-col items-end gap-1\">\n\t\t\t\t\t\t\t\t\t\t\t{showValues && token.price && (\n\t\t\t\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<p className=\"text-base font-medium\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{formatCurrency(token.value || 0, currency)}\n\t\t\t\t\t\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<p className=\"text-xs text-muted-foreground\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t@ {formatCurrency(token.price, currency)}\n\t\t\t\t\t\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t\t\t\t\t\t<div className=\"flex gap-1\">\n\t\t\t\t\t\t\t\t\t\t\t\t<TooltipProvider>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Tooltip>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<TooltipTrigger asChild>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={() => onViewDetails?.(token)}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"h-7 w-7 p-0\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<ExternalLinkIcon className=\"w-3 h-3\" />\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</TooltipTrigger>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<TooltipContent>View details</TooltipContent>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t\t\t\t\t\t\t</TooltipProvider>\n\n\t\t\t\t\t\t\t\t\t\t\t\t<TooltipProvider>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Tooltip>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<TooltipTrigger asChild>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={() => onSendToken?.(token)}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tdisabled={token.balance.total === \"0\"}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tSend\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</TooltipTrigger>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<TooltipContent>Send tokens</TooltipContent>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t\t\t\t\t\t\t</TooltipProvider>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</CardContent>\n\t\t\t\t\t\t\t</Card>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</CardContent>\n\t\t</Card>\n\t);\n}\n\n// Simplified version with just balance display\nexport function SimpleTokenBalance({\n\ttokens,\n\tshowValues = true,\n\tcurrency = \"USD\",\n\tclassName,\n}: Pick<\n\tTokenBalanceProps,\n\t\"tokens\" | \"showValues\" | \"currency\" | \"className\"\n>) {\n\tif (tokens.length === 0) {\n\t\treturn (\n\t\t\t<p className={cn(\"text-sm text-muted-foreground\", className)}>\n\t\t\t\tNo tokens\n\t\t\t</p>\n\t\t);\n\t}\n\n\tconst totalValue = tokens.reduce((sum, token) => sum + (token.value || 0), 0);\n\n\treturn (\n\t\t<div className={cn(\"flex flex-col gap-1\", className)}>\n\t\t\t<p className=\"text-sm font-medium\">\n\t\t\t\t{tokens.length} token{tokens.length === 1 ? \"\" : \"s\"}\n\t\t\t</p>\n\t\t\t{showValues && (\n\t\t\t\t<p className=\"text-xs text-muted-foreground\">\n\t\t\t\t\t{formatCurrency(totalValue, currency)}\n\t\t\t\t</p>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n",
      "target": "<%- config.aliases.components %>/tokenbalance.tsx"
    }
  ]
}