BatchQueueWidget

Overview

BatchQueueWidget is a floating UI component that displays the current batch queue. It appears at the bottom-right corner of the screen when there are queued transactions.

Live Demo

Props

Basic Usage

import { BatchQueueProvider, BatchQueueWidget, useBatchQueue } from '@1auth/sdk';

function App() {
  return (
    <BatchQueueProvider client={client}>
      <YourApp />
      <SignAllHandler />
    </BatchQueueProvider>
  );
}

function SignAllHandler() {
  const { signAll } = useBatchQueue();

  const handleSignAll = async () => {
    const username = 'user@example.com'; // Get from your auth state
    const result = await signAll(username);

    if (result.success) {
      console.log('All signed!', result.transactionHash);
    }
  };

  return <BatchQueueWidget onSignAll={handleSignAll} />;
}

Features

• Collapsible header: Click to expand/collapse the call list
• Call counter badge: Shows number of queued calls
• Chain indicator: Shows the target chain for the batch
• Remove individual calls: Hover over a call to reveal the remove button
• Clear all: Button to clear the entire batch
• Sign All button: Triggers the onSignAll callback
• Bounce animation: Animates when new calls are added
• Auto-hide: Widget doesn't render when queue is empty

Styling

The widget uses inline styles with a dark theme:

• Background: #18181b (zinc-900)
• Text: #ffffff
• Fixed position: bottom-right corner
• Z-index: 50

Widget States

Notes

• Must be used inside a BatchQueueProvider
• The onSignAll callback is responsible for calling signAll() with the username
• Widget position is fixed, so it stays visible during scroll