Protocol badges

1import type { ComponentProps } from "react";
2 
3import { getNetworkLabel, type BitcoinNetwork } from "@/lib/bitcoin";
4import { componentClasses } from "@/lib/utils";
5 
6import { badgeStyles, type BitcoinVisualProps } from "./shared";
7 
8const networkStyles: Record<BitcoinNetwork, string> = {
9  mainnet:
10    "border-[var(--color-bitcoin)]/30 bg-[var(--color-bitcoin-soft)] text-[var(--color-bitcoin-ink)]",
11  testnet:
12    "border-[var(--color-info)]/30 bg-[var(--color-info-soft)] text-[var(--color-info)]",
13  signet:
14    "border-[var(--color-warning)]/30 bg-[var(--color-warning-soft)] text-[var(--color-warning)]",
15  regtest:
16    "border-[var(--color-rule)] bg-[var(--color-surface)] text-[var(--color-muted-strong)]",
17};
18 
19export type NetworkBadgeProps = Omit<ComponentProps<"span">, "children"> &
20  BitcoinVisualProps & {
21    network: BitcoinNetwork;
22    /** Shows the small network indicator dot. @default true */
23    showIndicator?: boolean;
24  };
25 
26export function NetworkBadge({
27  network,
28  showIndicator = true,
29  unstyled,
30  className,
31  ...props
32}: NetworkBadgeProps) {
33  return (
34    <span
35      data-slot="network-badge"
36      data-network={network}
37      data-unstyled={unstyled || undefined}
38      className={componentClasses(
39        unstyled,
40        [badgeStyles, networkStyles[network]],
41        className,
42      )}
43      {...props}
44    >
45      {showIndicator ? (
46        <span
47          data-slot="network-badge-indicator"
48          aria-hidden="true"
49          className={componentClasses(
50            unstyled,
51            "size-1.5 rounded-full bg-current",
52          )}
53        />
54      ) : null}
55      {getNetworkLabel(network)}
56    </span>
57  );
58}