BatchQueueProvider

Component

Context provider for managing batched transaction queues with localStorage persistence.

import { BatchQueueProvider } from '@1auth/sdk'

Overview

BatchQueueProvider is a React context provider that manages a queue of batched transaction calls. It enables users to:

Queue multiple transactions before signing
Sign all queued transactions in a single operation
Persist the queue in localStorage for session continuity

Props

Prop	Type	Required	Default	Description
`client`	`PasskeyProviderClient`	Yes	-	The SDK client instance for signing
`username`	`string`	No	-	Optional username for localStorage key
`children`	`ReactNode`	Yes	-	Child components

Basic Usage

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

const client = new PasskeyProviderClient({
  providerUrl: 'https://auth.example.com',
  clientId: 'my-dapp',
});

function App() {
  return (
    <BatchQueueProvider client={client} username="user@example.com">
      <YourApp />
      <BatchQueueWidget onSignAll={handleSignAll} />
    </BatchQueueProvider>
  );
}

Context Value

The provider exposes these values via the useBatchQueue hook:

Property	Type	Description
`queue`	`BatchedCall[]`	Current queue of batched calls
`batchChainId`	`number \| null`	Chain ID of current batch
`addToBatch`	`(call, chainId) => Result`	Add a call to the queue
`removeFromBatch`	`(id) => void`	Remove a call by ID
`clearBatch`	`() => void`	Clear all queued calls
`signAll`	`(username) => Promise<Result>`	Sign and execute all calls
`isExpanded`	`boolean`	Widget expanded state
`setExpanded`	`(boolean) => void`	Set widget expanded state
`isSigning`	`boolean`	Whether signing is in progress
`animationTrigger`	`number`	Counter for bounce animation

Chain Validation

All calls in a batch must target the same chain. If you try to add a call with a different chain ID, addToBatch returns an error:

const { addToBatch, batchChainId } = useBatchQueue();

// First call sets the chain
addToBatch({ to: '0x...', label: 'Action 1' }, 8453); // Base

// This will fail - different chain
const result = addToBatch({ to: '0x...', label: 'Action 2' }, 1); // Ethereum
if (!result.success) {
  console.log(result.error); // "Batch is set to Base. Sign current batch first or clear it."
}

localStorage Persistence

The queue persists across page reloads using localStorage:

Key format: 1auth_batch_queue_{username} or 1auth_batch_queue_anonymous
Auto-save: Queue is saved whenever it changes
Auto-load: Queue is restored on mount

Notes

Always wrap your app (or relevant section) with BatchQueueProvider
The widget (BatchQueueWidget) only renders when the queue has items
Calls are executed in the order they were added