> **Can't find what you're looking for?** Use `search_docs` on the docs MCP server at `https://www.openfort.io/api/mcp` to find what you need.
>
> **Have feedback?** Use `submit_feedback` on the same MCP server.

# Batch transactions

Function to send a batch of transactions in a single call using the connected Cross-app wallet.

Viem’s `sendCalls` method following EIP-5792 can be used to sign and submit multiple transactions in a single call using the connected Cross-app wallet.

## Installation

Install the Cross-app wallet:

```bash
npm install @rapidfire/id
```

## Setup

Import and create the Ecosystem SDK instance:

```ts
import EcosystemWallet from '@rapidfire/id'

// Initialize the SDK with required parameters
export const config = new EcosystemWallet({
  appMetadata: {
    appChainIds: [84532],
    appLogoUrl: 'https://a.rgbimg.com/users/b/ba/barunpatro/600/mf6B5Gq.jpg',
    appName: 'Example App',
  },
});
```

## Contract interactions

For example, mint two NFTs in a single batch:

Import required hooks: `useAccount` and `useSendCalls` from Wagmi, define your smart contract ABI, initialize the `useSendCalls` hook for batch transactions, and create a transaction handling function that can process multiple contract calls.

:::tip
Make sure your contract ABIs are correctly typed for better development experience.
:::

:::code-group
```typescript [app.tsx]

import * as React from 'react'
import { useAccount, useSendCalls } from 'wagmi'
import { abi } from './abi'

function BatchTransactionComponent() {
  const account = useAccount()
  const { sendCalls } = useSendCalls()

  const handleBatchTransaction = () => {
    sendCalls({
      calls: [
        {
          to: "0x119Ea671030FBf79AB93b436D2E20af6ea469a19",
          abi,
          functionName: "safeMint",
          args: [account.address],
        },
        // Add more contract interactions as needed
        {
          to: "0x119Ea671030FBf79AB93b436D2E20af6ea469a19",
          abi,
          functionName: "safeMint",
          args: [account.address],
        }
      ],
    })
  }

  return (
    <button 
      onClick={handleBatchTransaction}
      className="px-4 py-2 bg-blue-600 text-white rounded"
    >
      Execute Batch Transaction
    </button>
  )
}
```

```ts [abi.ts]
export const abi = [
  {
    stateMutability: 'nonpayable',
    type: 'function',
    inputs: [{ name: 'to', type: 'address' }],
    name: 'safeMint',
    outputs: [],
  }
] as const
```
:::

## Advanced features

### Checking wallet capabilities

First, verify if your app supports atomic batching (This step is crucial if your app supports multiple wallet types). Use the `useCapabilities` hook from Wagmi and implement fallback functionality for unsupported wallets.

Note: The `useSendCalls` and `useCapabilities` hooks rely on new wallet RPC and may not be supported in all wallets.

```typescript app.tsx
import { useCapabilities } from 'wagmi'

function App() {
  const { data: capabilities } = useCapabilities() 
  // Returns capability object per chain:
  // {
  //   84532: {
  //     atomic: {
  //       supported: true,
  //     },
  //   }  
  // }
  
  // Check if atomic batching is supported in the chain we want to interact with.
  // The Cross-app wallet reports `atomic: { supported: true }` rather than viem's
  // typed `atomic: { status }`, so cast before reading it.
  const atomic = capabilities?.[84532]?.atomic as { supported?: boolean } | undefined
  const isAtomicBatchSupported = atomic?.supported === true
  
  return (
    <div>
      {isAtomicBatchSupported ? (
        <BatchTransactionComponent />
      ) : (
        <FallbackComponent />
      )}
    </div>
  )
}
```

### Show transaction status

The Cross-app wallet does not answer `wallet_getCallsStatus` from your app, so `useCallsStatus` and `useWaitForCallsStatus` don't work with it. Use the `useShowCallsStatus` hook instead: it sends `wallet_showCallsStatus` with the batch `id` returned by `sendCalls`, and the wallet opens a window that shows the status of the batch.

```typescript app.tsx
import { useSendCalls, useShowCallsStatus } from 'wagmi'

function BatchTransactionComponent() {
  const { data, sendCalls } = useSendCalls()
  const { showCallsStatus } = useShowCallsStatus()

  return (
    <div className="space-y-4">
      <button 
        onClick={handleBatchTransaction}
        className="px-4 py-2 bg-blue-600 text-white rounded"
      >
        Execute Batch Transaction
      </button>

      {data?.id && (
        <button
          onClick={() => showCallsStatus({ id: data.id })}
          className="px-4 py-2 border rounded"
        >
          View status
        </button>
      )}
    </div>
  )
}
```