BigBlocks

Connect Wallet

A themed wallet connection button that handles detecting, connecting, and disconnecting BSV wallets via @1sat/react

"use client"

import { useState, useCallback } from "react"
import { ConnectWalletUI } from "@/registry/bigblocks/blocks/connect-wallet/ui"

/**
 * Demo that cycles through wallet connection states using mock data.
 * Does NOT require WalletProvider — drives ConnectWalletUI directly.
 */
export function ConnectWalletDemo() {
  const [status, setStatus] = useState("disconnected")
  const [dialogOpen, setDialogOpen] = useState(false)
  const [copied, setCopied] = useState(false)

  const mockIdentityKey =
    "02a1633cafcc01ebfb6d78e39f687a1f0995c62fc95f51ead10a02ee0be551b5dc"
  const truncatedKey = `${mockIdentityKey.slice(0, 8)}...${mockIdentityKey.slice(-6)}`
  const gradient =
    "linear-gradient(135deg, hsl(200, 70%, 50%), hsl(280, 70%, 50%))"

  const handleTriggerClick = useCallback(() => {
    setStatus("connecting")
    setTimeout(() => {
      setStatus("connected")
    }, 1500)
  }, [])

  const handleDisconnect = useCallback(() => {
    setStatus("disconnected")
  }, [])

  const handleCopy = useCallback(() => {
    setCopied(true)
    setTimeout(() => setCopied(false), 2000)
  }, [])

  return (
    <div className="flex items-center justify-center">
      <ConnectWalletUI
        variant="default"
        connectLabel="Connect Wallet"
        status={status}
        identityKey={status === "connected" ? mockIdentityKey : undefined}
        dialogOpen={dialogOpen}
        setDialogOpen={setDialogOpen}
        gradient={gradient}
        truncatedKey={truncatedKey}
        onTriggerClick={handleTriggerClick}
        onDisconnect={handleDisconnect}
        onCopy={handleCopy}
        copied={copied}
        error={null}
      />
    </div>
  )
}

Compact

"use client"

import { Button } from "@/components/ui/button"
import { Wallet } from "lucide-react"

export function ConnectWalletCompact() {
  return (
    <Button size="icon">
      <Wallet />
    </Button>
  )
}

Installation

bunx shadcn@latest add https://registry.bigblocks.dev/r/connect-wallet.json

Usage

The block must be rendered inside both WalletProvider and ConnectDialogProvider from @1sat/react. Place the providers once in your root layout.

import { WalletProvider, ConnectDialogProvider } from "@1sat/react"
import { ConnectWallet } from "@/components/blocks/connect-wallet"
 
function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <WalletProvider>
      <ConnectDialogProvider>
        {children}
      </ConnectDialogProvider>
    </WalletProvider>
  )
}
 
// Then anywhere in your app:
export function Header() {
  return (
    <header className="flex items-center justify-between p-4">
      <span>My App</span>
      <ConnectWallet
        onConnect={() => console.log("connected")}
        onDisconnect={() => console.log("disconnected")}
      />
    </header>
  )
}

Variants

Default

A full-width button showing the wallet icon and label when disconnected, and a gradient avatar with the truncated identity key when connected.

<ConnectWallet variant="default" connectLabel="Connect Wallet" />

Compact

An icon-only square button. Useful for tight navigation bars.

<ConnectWallet variant="compact" />

Outline

A smaller outlined button with reduced padding. Suitable for secondary placements.

<ConnectWallet variant="outline" />

Connection States

The button renders differently based on the wallet status from @1sat/react:

Status	Rendered UI
`disconnected`	Connect button
`detecting`	Disabled spinner button
`connecting`	Disabled spinner button
`selecting`	Connect button + wallet provider dialog
`connected`	Dropdown with identity key, copy action, and disconnect

Props

ConnectWallet

Prop	Type	Default	Description
`variant`	`"default" \| "compact" \| "outline"`	`"default"`	Visual style of the button
`className`	`string`	—	Additional CSS classes applied to the trigger element
`connectLabel`	`string`	`"Connect Wallet"`	Label shown on the connect button and used as `aria-label` for the compact variant
`onConnect`	`() => void`	—	Called after a wallet connection succeeds
`onDisconnect`	`() => void`	—	Called after the wallet is disconnected
`onError`	`(error: Error) => void`	—	Called when a connection error occurs

Hook

useConnectWallet can be used independently if you want to build a custom connection UI.

import { useConnectWallet } from "@/components/blocks/connect-wallet"
 
function CustomTrigger() {
  const {
    status,
    identityKey,
    truncatedKey,
    gradient,
    handleTriggerClick,
    handleDisconnect,
    handleCopy,
    copied,
    error,
  } = useConnectWallet({
    onConnect: () => console.log("connected"),
    onDisconnect: () => console.log("disconnected"),
  })
 
  if (status === "connected" && identityKey) {
    return (
      <button onClick={handleDisconnect} style={{ background: gradient }}>
        {truncatedKey}
      </button>
    )
  }
 
  return <button onClick={handleTriggerClick}>Connect</button>
}

useConnectWallet Options

Option	Type	Default	Description
`variant`	`"default" \| "compact" \| "outline" \| null`	`"default"`	Used to compute `isCompact` in the return value
`onConnect`	`() => void`	—	Called after successful connection
`onDisconnect`	`() => void`	—	Called after disconnection
`onError`	`(error: Error) => void`	—	Called when a connection error occurs

useConnectWallet Return

Property	Type	Description
`status`	`string`	Current wallet status from `@1sat/react`
`identityKey`	`string \| undefined`	Identity key when connected
`dialogOpen`	`boolean`	Whether the provider selection dialog is open
`setDialogOpen`	`(open: boolean) => void`	Control the dialog open state
`isCompact`	`boolean`	`true` when `variant === "compact"`
`gradient`	`string`	Deterministic CSS gradient derived from the identity key
`truncatedKey`	`string`	Identity key truncated for display (e.g. `abc123...xyz9`)
`handleConnect`	`() => Promise<void>`	Initiate wallet connection
`handleDisconnect`	`() => void`	Disconnect the wallet
`handleTriggerClick`	`() => void`	Click handler for the connect trigger button
`handleCopy`	`() => void`	Copy the identity key to the clipboard
`copied`	`boolean`	`true` for 2 seconds after a successful copy
`error`	`Error \| null`	Last error from the wallet provider

Cloud Backup Prompt Create Listing