useBatchQueue

Hook

Hook to access batch queue context for adding, removing, and signing batched calls.

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

Overview

useBatchQueue is a React hook that provides access to the batch queue context. It returns methods and state for managing queued transaction calls.

Usage

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

function AddToCartButton({ item }) {
  const { addToBatch, queue } = useBatchQueue();

  const handleClick = () => {
    const result = addToBatch(
      {
        to: item.contractAddress,
        data: item.calldata,
        label: `Buy ${item.name}`,
        sublabel: `${item.price} ETH`,
      },
      8453 // Base chain
    );

    if (!result.success) {
      alert(result.error);
    }
  };

  return (
    <button onClick={handleClick}>
      Add to Cart ({queue.length} items)
    </button>
  );
}

Return Value

Property	Type	Description
`queue`	`BatchedCall[]`	Array of queued calls
`batchChainId`	`number \| null`	Chain ID of the batch (from first call)
`addToBatch`	`(call: IntentCall, chainId: number) => { success: boolean; error?: string }`	Add a call to the queue
`removeFromBatch`	`(id: string) => void`	Remove a specific call
`clearBatch`	`() => void`	Clear all calls
`signAll`	`(username: string) => Promise<SendIntentResult>`	Sign and submit all calls
`isExpanded`	`boolean`	Widget expanded state
`setExpanded`	`(expanded: boolean) => void`	Control widget expansion
`isSigning`	`boolean`	Whether signing is in progress
`animationTrigger`	`number`	Increment counter for animations

BatchedCall Type

interface BatchedCall {
  id: string;           // Unique identifier for removal
  call: IntentCall;     // The actual call data
  targetChain: number;  // Chain ID for execution
  addedAt: number;      // Timestamp when added
}

Methods

addToBatch

Add a transaction call to the queue:

const { addToBatch } = useBatchQueue();

const result = addToBatch(
  {
    to: '0x...',
    data: '0x...',
    value: parseEther('0.1'),
    label: 'Swap tokens',
    sublabel: '100 USDC → ETH',
  },
  8453
);

if (!result.success) {
  // Chain mismatch - batch already has calls for a different chain
  console.error(result.error);
}

removeFromBatch

Remove a specific call by its ID:

const { queue, removeFromBatch } = useBatchQueue();

// Remove the first call
removeFromBatch(queue[0].id);

signAll

Sign and submit all queued calls:

const { signAll, isSigning } = useBatchQueue();

const handleSign = async () => {
  const result = await signAll('user@example.com');

  if (result.success) {
    // Batch is automatically cleared on success
    console.log('Transaction:', result.transactionHash);
  } else {
    console.error(result.error?.message);
  }
};

Error Handling

The hook throws if used outside a BatchQueueProvider:

// This will throw: "useBatchQueue must be used within a BatchQueueProvider"
function WrongUsage() {
  const { queue } = useBatchQueue(); // Error!
  return <div>{queue.length}</div>;
}

Notes

Must be used within a BatchQueueProvider
All calls in a batch must target the same chain
Queue persists in localStorage automatically
signAll clears the queue on success