BigBlocks

Post Button

A button that opens a compose dialog for creating on-chain BSocial posts

"use client"

import { PostButton } from "@/registry/bigblocks/blocks/post-button"

async function mockPost(_content: string) {
  await new Promise((resolve) => setTimeout(resolve, 1500))
  return {
    txid: `${Math.random().toString(36).slice(2, 10)}...${Math.random().toString(36).slice(2, 6)}`,
  }
}

export function PostButtonDemo() {
  return (
    <div className="flex items-center justify-center">
      <PostButton variant="default" onPost={mockPost} />
    </div>
  )
}

Installation

bunx shadcn@latest add https://registry.bigblocks.dev/r/post-button.json

Usage

Supply an onPost callback that builds and broadcasts the BSocial transaction. The component renders the dialog and tracks submission state; the transaction logic lives entirely in your callback.

import { PostButton } from "@/components/blocks/post-button"
 
export default function Example() {
  return (
    <PostButton
      onPost={async (content) => {
        // Build and broadcast your BSocial transaction here.
        // Return the txid on success.
        const txid = await broadcastPost(content)
        return { txid }
      }}
      onPosted={(result) => console.log("Posted:", result.txid)}
    />
  )
}

Variants

The variant prop controls how the trigger button is presented.

Variant	Description
`default`	Full-width labeled button with a compose icon
`compact`	Smaller button with label and pencil icon
`fab`	Fixed floating action button in the bottom-right corner
`inline`	Borderless ghost-style button for embedding in toolbars

Compact

"use client"

import { PostButton } from "@/registry/bigblocks/blocks/post-button"

async function mockPost(_content: string) {
  await new Promise((resolve) => setTimeout(resolve, 1500))
  return {
    txid: `${Math.random().toString(36).slice(2, 10)}...${Math.random().toString(36).slice(2, 6)}`,
  }
}

export function PostButtonCompactDemo() {
  return (
    <div className="flex items-center justify-center">
      <PostButton variant="compact" onPost={mockPost} />
    </div>
  )
}

FAB

"use client"

import { PostButton } from "@/registry/bigblocks/blocks/post-button"

async function mockPost(_content: string) {
  await new Promise((resolve) => setTimeout(resolve, 1500))
  return {
    txid: `${Math.random().toString(36).slice(2, 10)}...${Math.random().toString(36).slice(2, 6)}`,
  }
}

export function PostButtonFabDemo() {
  return (
    <div className="flex items-center justify-center">
      <div className="relative h-14 w-14">
        <PostButton
          variant="fab"
          onPost={mockPost}
          className="absolute bottom-0 right-0 position-static"
        />
      </div>
    </div>
  )
}

Inline

"use client"

import { PostButton } from "@/registry/bigblocks/blocks/post-button"

async function mockPost(_content: string) {
  await new Promise((resolve) => setTimeout(resolve, 1500))
  return {
    txid: `${Math.random().toString(36).slice(2, 10)}...${Math.random().toString(36).slice(2, 6)}`,
  }
}

export function PostButtonInlineDemo() {
  return (
    <div className="flex items-center justify-center">
      <PostButton variant="inline" label="Write" onPost={mockPost} />
    </div>
  )
}

Hook: `usePost`

Use usePost directly when you need full control over the compose dialog state, or when you want to integrate the dialog into an existing component.

import { usePost, PostButtonUI } from "@/components/blocks/post-button"
 
export function CustomPostComposer() {
  const post = usePost({
    maxLength: 280,
    onPost: async (content) => {
      const txid = await broadcastPost(content)
      return { txid }
    },
    onPosted: (result) => console.log("Posted:", result.txid),
    onError: (error) => console.error(error),
  })
 
  return (
    <>
      <button onClick={post.handleOpen}>Compose</button>
      <PostButtonUI
        dialogOpen={post.dialogOpen}
        content={post.content}
        onContentChange={post.setContent}
        isPosting={post.isPosting}
        error={post.error}
        charCount={post.charCount}
        overLimit={post.overLimit}
        canSubmit={post.canSubmit}
        onOpen={post.handleOpen}
        onClose={post.handleClose}
        onSubmit={post.handleSubmit}
      />
    </>
  )
}

API Reference

PostButton

Prop	Type	Default	Description
`onPost`	`(content: string) => Promise<PostResult>`	—	Required. Called with the post content to broadcast the transaction
`onPosted`	`(result: PostResult) => void`	—	Called after a successful post
`onError`	`(error: Error) => void`	—	Called when posting fails
`label`	`string`	`"Post"`	Button label text
`placeholder`	`string`	`"What's on your mind?"`	Textarea placeholder
`maxLength`	`number`	`0`	Maximum character count; `0` means unlimited
`variant`	`"default" \| "compact" \| "fab" \| "inline"`	`"default"`	Visual variant
`disabled`	`boolean`	`false`	Disable the trigger button
`className`	`string`	—	Additional CSS classes

PostResult

interface PostResult {
  /** Transaction ID of the on-chain post */
  txid?: string
  /** Raw transaction hex */
  rawtx?: string
  /** Error message if posting failed */
  error?: string
}

usePost Options

Option	Type	Default	Description
`onPost`	`(content: string) => Promise<PostResult>`	—	Required. Broadcast callback
`onPosted`	`(result: PostResult) => void`	—	Success callback
`onError`	`(error: Error) => void`	—	Error callback
`maxLength`	`number`	`0`	Maximum character count

usePost Return

Property	Type	Description
`dialogOpen`	`boolean`	Whether the compose dialog is open
`content`	`string`	Current textarea content
`setContent`	`(content: string) => void`	Update textarea content
`isPosting`	`boolean`	Whether a post is being submitted
`error`	`string \| null`	Error message if present
`charCount`	`number`	Current character count
`overLimit`	`boolean`	Whether content exceeds `maxLength`
`canSubmit`	`boolean`	Whether the post can be submitted
`handleOpen`	`() => void`	Open the compose dialog
`handleClose`	`() => void`	Close and reset the dialog
`handleSubmit`	`() => Promise<void>`	Submit the post

Ordinals Grid Profile Card