BigBlocks

Unlock Wallet

Passphrase and biometric unlock screen with Touch ID support on macOS, passphrase fallback, and failed attempt tracking

BigBlocks Wallet

Use Touch ID to unlock your wallet

"use client"

import { useState } from "react"
import {
  UnlockWallet,
  type UnlockWalletResult,
} from "@/registry/bigblocks/blocks/unlock-wallet"

export function UnlockWalletDemo() {
  const [unlockCount, setUnlockCount] = useState(0)

  async function handleUnlock(
    passphrase?: string,
  ): Promise<UnlockWalletResult> {
    await new Promise((resolve) => setTimeout(resolve, 1500))

    // Fail every other attempt for demo purposes
    if (unlockCount % 2 === 0) {
      setUnlockCount((prev) => prev + 1)
      return { success: false, error: "Invalid passphrase. Try again." }
    }

    setUnlockCount((prev) => prev + 1)
    return { success: true }
  }

  return (
    <div className="flex flex-col items-center gap-2">
      <UnlockWallet
        platform="macos"
        appName="BigBlocks Wallet"
        onUnlock={handleUnlock}
        onSuccess={() => console.log("Wallet unlocked via Touch ID")}
        onError={(error) => console.error("Unlock error:", error)}
      />
    </div>
  )
}

Passphrase

BigBlocks Wallet

Enter your passphrase to unlock your wallet

Passphrase

"use client"

import { useState } from "react"
import {
  UnlockWallet,
  type UnlockWalletResult,
} from "@/registry/bigblocks/blocks/unlock-wallet"

export function UnlockWalletPassphraseDemo() {
  const [unlockCount, setUnlockCount] = useState(0)

  async function handleUnlock(
    passphrase?: string,
  ): Promise<UnlockWalletResult> {
    await new Promise((resolve) => setTimeout(resolve, 1500))

    if (unlockCount % 2 === 0) {
      setUnlockCount((prev) => prev + 1)
      return { success: false, error: "Invalid passphrase. Try again." }
    }

    setUnlockCount((prev) => prev + 1)
    return { success: true }
  }

  return (
    <div className="flex flex-col items-center gap-2">
      <UnlockWallet
        platform="other"
        appName="BigBlocks Wallet"
        onUnlock={handleUnlock}
        onSuccess={() => console.log("Wallet unlocked via passphrase")}
        onError={(error) => console.error("Unlock error:", error)}
      />
    </div>
  )
}

Installation

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

Usage

UnlockWallet presents a biometric or passphrase unlock screen depending on the platform. The onUnlock callback receives an optional passphrase (undefined for biometric) and should return { success, error? }.

import { UnlockWallet } from "@/components/blocks/unlock-wallet"
 
export function LockScreen() {
  return (
    <UnlockWallet
      platform="macos"
      appName="My Wallet"
      onUnlock={async (passphrase) => {
        if (passphrase) {
          return verifyPassphrase(passphrase)
        }
        return attemptBiometric()
      }}
      onSuccess={() => console.log("Unlocked")}
      onError={(err) => console.error(err)}
    />
  )
}

Props

UnlockWallet

Prop	Type	Default	Description
`platform`	`"macos" \| "other"`	`"other"`	Platform determines which unlock methods are available
`appName`	`string`	`"Wallet"`	Application name displayed in the unlock UI
`onUnlock`	`(passphrase?: string) => Promise<UnlockWalletResult>`	--	Callback to execute the unlock attempt
`onSuccess`	`() => void`	--	Called on successful unlock
`onError`	`(error: Error) => void`	--	Called on error
`className`	`string`	--	Additional CSS classes

UnlockWalletResult

interface UnlockWalletResult {
  success: boolean
  error?: string
}

Transaction History Wallet Overview