BigBlocks

OpNS Manager

OpNS name management block for listing owned names and registering or deregistering identity key bindings

OpNS Names

Manage your on-chain name bindings

alice

Registered

58b7558ea3...9ccb25_0

mystore

Available

a1b2c3d4e5...f0a1b2_0

satoshi

Registered

b2c3d4e5f6...a1b2c3_0

payments

Available

c3d4e5f6a7...b2c3d4_0

"use client"

import { useState } from "react"
import {
  OpnsManagerUI,
  type OpnsNameDisplay,
  type OpnsOperationResult,
} from "@/registry/bigblocks/blocks/opns-manager"

const MOCK_NAMES: OpnsNameDisplay[] = [
  {
    outpoint:
      "58b7558ea379f24266c7e2f5fe321992ad9a724fd7a87423ba412677179ccb25_0",
    name: "alice",
    registered: true,
    identityKey: "02abc123def456789",
  },
  {
    outpoint:
      "a1b2c3d4e5f6a7b8c9d0e1f2a3b4c5d6e7f8a9b0c1d2e3f4a5b6c7d8e9f0a1b2_0",
    name: "mystore",
    registered: false,
  },
  {
    outpoint:
      "b2c3d4e5f6a7b8c9d0e1f2a3b4c5d6e7f8a9b0c1d2e3f4a5b6c7d8e9f0a1b2c3_0",
    name: "satoshi",
    registered: true,
    identityKey: "03def789abc012345",
  },
  {
    outpoint:
      "c3d4e5f6a7b8c9d0e1f2a3b4c5d6e7f8a9b0c1d2e3f4a5b6c7d8e9f0a1b2c3d4_0",
    name: "payments",
    registered: false,
  },
]

function mockOperation(name: OpnsNameDisplay): Promise<OpnsOperationResult> {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        txid: `mock_${name.name}_${Date.now().toString(16)}`,
      })
    }, 1500)
  })
}

export function OpnsManagerDemo() {
  const [names, setNames] = useState(MOCK_NAMES)

  const handleRegister = async (
    name: OpnsNameDisplay
  ): Promise<OpnsOperationResult> => {
    const result = await mockOperation(name)
    if (result.txid) {
      setNames((prev) =>
        prev.map((n) =>
          n.outpoint === name.outpoint ? { ...n, registered: true } : n
        )
      )
    }
    return result
  }

  const handleDeregister = async (
    name: OpnsNameDisplay
  ): Promise<OpnsOperationResult> => {
    const result = await mockOperation(name)
    if (result.txid) {
      setNames((prev) =>
        prev.map((n) =>
          n.outpoint === name.outpoint
            ? { ...n, registered: false, identityKey: undefined }
            : n
        )
      )
    }
    return result
  }

  return (
    <div className="mx-auto w-full max-w-lg">
      <OpnsManagerUI
        names={names}
        isLoading={false}
        isOperating={false}
        error={null}
        onRegister={handleRegister}
        onDeregister={handleDeregister}
        onRefresh={() => setNames(MOCK_NAMES)}
      />
    </div>
  )
}

Loading

OpNS Names

Manage your on-chain name bindings

"use client"

import {
  OpnsManagerUI,
} from "@/registry/bigblocks/blocks/opns-manager"

export function OpnsManagerLoadingDemo() {
  return (
    <div className="mx-auto w-full max-w-lg">
      <OpnsManagerUI
        names={[]}
        isLoading={true}
        isOperating={false}
        error={null}
      />
    </div>
  )
}

Empty

OpNS Names

Manage your on-chain name bindings

No OpNS names found

"use client"

import {
  OpnsManagerUI,
} from "@/registry/bigblocks/blocks/opns-manager"

export function OpnsManagerEmptyDemo() {
  return (
    <div className="mx-auto w-full max-w-lg">
      <OpnsManagerUI
        names={[]}
        isLoading={false}
        isOperating={false}
        error={null}
      />
    </div>
  )
}

Installation

bunx shadcn@latest add https://registry.bigblocks.dev/r/opns-manager.json

Usage

OpnsManager must be rendered inside a WalletProvider from @1sat/react. It lists owned OpNS names from the connected wallet and provides register/deregister identity binding actions.

import { WalletProvider } from "@1sat/react"
import { OpnsManager } from "@/components/blocks/opns-manager"
 
export function IdentityPage() {
  return (
    <WalletProvider>
      <OpnsManager
        onSuccess={(r) => console.log("txid:", r.txid)}
        onError={(e) => console.error(e)}
      />
    </WalletProvider>
  )
}

Props

OpnsManager

Prop	Type	Default	Description
`autoFetch`	`boolean`	`true`	Whether to auto-fetch names on mount
`onSuccess`	`(result: { txid?: string; error?: string }) => void`	--	Called on successful register or deregister
`onError`	`(error: Error) => void`	--	Called on error
`skeletonCount`	`number`	`3`	Number of skeleton rows shown while loading
`className`	`string`	--	Additional CSS classes

OpnsNameDisplay

interface OpnsNameDisplay {
  outpoint: string
  name: string
  registered: boolean
  identityKey?: string
}

OpnsOperationResult

interface OpnsOperationResult {
  txid?: string
  error?: string
}

OAuth Callback Ordinals Grid