Batch Transactions

Queue multiple transactions and sign them all with a single passkey confirmation. Perfect for shopping carts, multi-step workflows, or gas-efficient operations.

Using BatchQueue

The BatchQueue components let users add items to a queue and sign everything at once.

Install the SDK

npm install @rhinestone/1auth

Configure BatchQueueProvider

Create a client and wrap your app with BatchQueueProvider:

App.tsx

import { OneAuthClient } from '@rhinestone/1auth'
import { BatchQueueProvider } from '@rhinestone/1auth/react'
 
const client = new OneAuthClient({ 
  providerUrl: 'https://passkey.1auth.box', 
}) 
 
export function App({ username }: { username?: string }) {
  return (
    <BatchQueueProvider client={client} username={username}> // [!code ++]
      <YourApp />
    </BatchQueueProvider> 
  )
}

Add items to the queue

Use the useBatchQueue hook to add transactions:

Display the queue widget

Add the BatchQueueWidget to show queued items:

Done

You have successfully set up batch transactions!

Chain validation

All calls in a batch must target the same chain:

const { addToBatch } = useBatchQueue()
 
// First call sets the batch 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..."
}

BatchQueueProvider props

Prop	Type	Required	Description
`client`	`OneAuthClient`	Yes	SDK client instance
`username`	`string`	No	Username for localStorage persistence (enables queue to survive page refresh)
`children`	`ReactNode`	Yes	Child components

useBatchQueue reference

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

Widget features

The BatchQueueWidget includes:

Collapsible header with call counter badge
Chain indicator for current batch
Remove individual calls on hover
Clear all button
Bounce animation on new additions
Auto-hide when queue is empty

See the full React Components reference for more details.

Next steps

Crosschain - Execute transactions on any chain
Deposit - Fund user accounts