DataPushButton

Push structured data to the Bitcoin blockchain using predefined protocol templates

A powerful component for pushing structured data to the Bitcoin blockchain using predefined protocol templates. Unlike traditional OP_RETURN data storage, this component uses the droplit protocol for zero-cost data transactions while maintaining blockchain permanence.

View Component Preview →

Installation

npx bigblocks add data-push-button

Import

import { DataPushButton } from 'bigblocks';

Props

Prop	Type	Required	Default	Description
onSuccess	`(result: { txid: string; data: string[]; template: string }) => void`	No	-	Callback when data is successfully pushed
onError	`(error: Error) => void`	No	-	Error callback
data	`string[]`	No	-	Custom data array to push (disables form UI)
template	`DataTemplate`	No	First template	Pre-selected protocol template
buttonText	`string`	No	`'Push Data'`	Custom button text
variant	`'solid' \| 'soft' \| 'outline' \| 'ghost'`	No	`'solid'`	Button variant style
size	`'1' \| '2' \| '3' \| '4'`	No	`'2'`	Button size
showTemplateSelector	`boolean`	No	`true`	Show protocol template selector
showPreview	`boolean`	No	`true`	Show data preview before pushing
className	`string`	No	-	Additional CSS classes
color	`'blue' \| 'green' \| 'orange' \| 'red' \| 'purple' \| 'gray'`	No	`'orange'`	Button color theme
requireAuth	`boolean`	No	`false`	Require authentication
disabled	`boolean`	No	`false`	Disable the button

Basic Usage

import { DataPushButton } from 'bigblocks';

function MyComponent() {
  return (
    <DataPushButton
      onSuccess={(result) => {
        console.log('Data pushed:', result.txid);
        console.log('Template used:', result.template);
        console.log('Data array:', result.data);
      }}
      onError={(error) => {
        console.error('Push failed:', error);
      }}
    />
  );
}

Advanced Usage

With Custom Template Selection

<DataPushButton
  template={{
    id: 'social-post',
    name: 'Social Post',
    description: 'Create a social media post on Bitcoin',
    protocol: 'B_SOCIAL',
    category: 'social',
    example: ['B_SOCIAL', 'POST', 'Hello Bitcoin!', Date.now().toString()]
  }}
  showTemplateSelector={true}
  showPreview={true}
  buttonText="Post to Bitcoin"
  color="blue"
  onSuccess={(result) => {
    alert(`Posted! TX ID: ${result.txid}`);
  }}
/>

Button-Only Mode with Custom Data

<DataPushButton
  data={['B_MARKET', 'LIST', 'ordinal-12345', '500000', 'BSV', 'Rare digital collectible']}
  showTemplateSelector={false}
  showPreview={false}
  buttonText="List on Market"
  color="green"
  variant="soft"
  size="3"
  onSuccess={(result) => {
    console.log('Market listing created:', result.txid);
  }}
/>

Common Patterns

function SocialPostForm() {
  const [content, setContent] = useState('');
  
  return (
    <div>
      <textarea 
        value={content} 
        onChange={(e) => setContent(e.target.value)}
        placeholder="What's on your mind?"
      />
      <DataPushButton
        data={['B_SOCIAL', 'POST', content, new Date().toISOString()]}
        showTemplateSelector={false}
        buttonText="Post"
        disabled={!content}
        onSuccess={(result) => {
          setContent(''); // Clear form
          console.log('Posted with ID:', result.txid);
        }}
      />
    </div>
  );
}

Marketplace Listing

function CreateListing({ ordinalId, price }) {
  return (
    <DataPushButton
      data={[
        'B_MARKET', 
        'LIST', 
        ordinalId, 
        price.toString(), 
        'BSV', 
        'Digital Art NFT'
      ]}
      buttonText={`List for ${price} satoshis`}
      color="green"
      size="4"
      requireAuth={true}
      onSuccess={(result) => {
        router.push(`/market/listing/${result.txid}`);
      }}
      onError={(error) => {
        if (error.message.includes('Authentication')) {
          router.push('/signin');
        }
      }}
    />
  );
}

Identity Attestation

function IdentityClaim({ claimType, claimValue }) {
  const { address, signMessage } = useBitcoinAuth();
  
  const handleAttest = async () => {
    const signature = await signMessage(`${claimType}:${claimValue}`);
    
    return (
      <DataPushButton
        data={['B_ID', 'ATTEST', claimType, claimValue, signature]}
        buttonText="Attest Identity"
        color="purple"
        variant="outline"
        requireAuth={true}
        onSuccess={(result) => {
          console.log('Identity attested:', result.txid);
        }}
      />
    );
  };
}

Protocol Templates

The component includes several built-in protocol templates:

{
  protocol: 'B_SOCIAL',
  example: ['B_SOCIAL', 'POST', 'content', 'timestamp']
}

{
  protocol: 'B_SOCIAL',
  example: ['B_SOCIAL', 'LIKE', 'post-txid', 'emoji-reaction']
}

Market Listing

{
  protocol: 'B_MARKET',
  example: ['B_MARKET', 'LIST', 'item-id', 'price', 'currency', 'description']
}

Identity Claim

{
  protocol: 'B_ID',
  example: ['B_ID', 'ATTEST', 'claim-type', 'claim-value', 'signature']
}

Custom Template Definition

const customTemplate: DataTemplate = {
  id: 'my-app-action',
  name: 'My App Action',
  description: 'Custom action for my application',
  protocol: 'MY_APP',
  category: 'protocol',
  example: ['MY_APP', 'ACTION', 'data1', 'data2', 'data3']
};

<DataPushButton
  template={customTemplate}
  onSuccess={(result) => {
    console.log('Custom action recorded:', result);
  }}
/>

Authentication Requirements

When requireAuth is true, the component requires:

import { BitcoinAuthProvider, BitcoinQueryProvider } from 'bigblocks';

function App() {
  return (
    <BitcoinQueryProvider>
      <BitcoinAuthProvider config={{ apiUrl: '/api' }}>
        <DataPushButton requireAuth={true} />
      </BitcoinAuthProvider>
    </BitcoinQueryProvider>
  );
}

API Integration

Data Push Response

interface DataPushResult {
  txid: string;        // Transaction ID (simulated for droplit)
  data: string[];      // Data array that was pushed
  template: string;    // Template ID used
}

Error Handling

interface DataPushError {
  message: string;
  code?: 'AUTH_REQUIRED' | 'INVALID_DATA' | 'NETWORK_ERROR';
}

Styling

The component uses Radix Themes and can be customized:

<DataPushButton
  className="my-custom-class"
  color="blue"
  variant="soft"
  size="3"
/>

CSS Variables

.my-custom-class {
  --button-height: 48px;
  --button-padding: 24px;
  --button-radius: 8px;
}

Troubleshooting

Authentication Required Error

Solution: Wrap the component in BitcoinAuthProvider and ensure the user is signed in.

Template Not Found

Solution: Use one of the built-in templates or provide a complete custom template object.

Data Format Error

Solution: Ensure the data array matches the expected protocol format (array of strings).

Network Issues

Solution: The droplit protocol simulates blockchain operations without actual network calls, so network errors are rare.

Best Practices

Use Templates: Leverage built-in templates for standard protocols
Validate Data: Ensure data arrays match protocol specifications
Handle Errors: Always provide error handlers for user feedback
Show Preview: Enable preview for user confirmation
Authentication: Require auth for sensitive operations

TapButton - Simple data push without templates
PostButton - Specialized social posting
CreateListingButton - Marketplace listings
LikeButton - Social interactions

API Reference

DataTemplate Interface

interface DataTemplate {
  id: string;
  name: string;
  description: string;
  protocol: string;
  category: 'social' | 'market' | 'identity' | 'protocol';
  example: string[];
}

Component Methods

The component handles all data pushing internally. For programmatic access:

// Use the data prop for direct control
const pushData = (dataArray: string[]) => {
  return <DataPushButton data={dataArray} />;
};

DataPushButton

On this page