# Batch transactions

Function to send a batch of transactions in a single call using the connected Global Wallet.

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

## Installation

Install the Global 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({
  appChainIds: [84532],
  appLogoUrl: 'https://a.rgbimg.com/users/b/ba/barunpatro/600/mf6B5Gq.jpg',
  appName: 'Example App',
});
```

## Contract interactions

A common pattern is to approve and then mint:

Import required hooks: `useAccount` and `useWriteContracts` from Wagmi, define your smart contract ABI, initialize the `useWriteContracts` 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({
      contracts: [
        {
          address: "0x119Ea671030FBf79AB93b436D2E20af6ea469a19",
          abi,
          functionName: "approve",
          args: [account.address],
        },
        // Add more contract interactions as needed
        {
          address: "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 experimental features and implement fallback functionality for unsupported wallets.

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

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

function App() {
  const { data: capabilities } = useCapabilities() 
  // Returns capability object per chain:
  // {
  //   84532: {
  //     atomicBatch: {
  //       supported: true,
  //     },
  //   }  
  // }
  
  // Check if atomic batching is supported in the chain we want to interact with
  const isAtomicBatchSupported = capabilities?.[84532]?.atomicBatch?.supported
  
  return (
    <div>
      {isAtomicBatchSupported ? (
        <BatchTransactionComponent />
      ) : (
        <FallbackComponent />
      )}
    </div>
  )
}
```

### Implement transaction status monitoring

Add the `useCallsStatus` hook to track transaction status, configure polling interval for status updates, display transaction status to users, and handle transaction completion and errors.

Pro tip: The polling interval can be adjusted based on your needs, but 1 second is a good default.

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

function BatchTransactionComponent() {
  const { data: id, sendCalls } = useSendCalls()
  const { data: callsStatus } = useCallsStatus({
    id: id as string,
    query: {
      enabled: !!id,
      // Poll every second until confirmed
      refetchInterval: (data) =>
        data.state.data?.status === "CONFIRMED" ? false : 1000,
    },
  })

  // Example response structure:
  // {
  //   status: 'CONFIRMED',
  //   receipts: [
  //     {
  //       logs: [{
  //         address: '0x...',
  //         topics: ['0x...'],
  //         data: '0x...'
  //       }],
  //       status: 'success',
  //       blockHash: '0x...',
  //       blockNumber: 122414523n,
  //       gasUsed: 390000n,
  //       transactionHash: '0x...'
  //     }
  //   ]
  // }

  return (
    <div className="space-y-4">
      <button 
        onClick={handleBatchTransaction}
        className="px-4 py-2 bg-blue-600 text-white rounded"
      >
        Execute Batch Transaction
      </button>
      
      {callsStatus && (
        <div className="p-4 border rounded">
          <p className="font-semibold">
            Status: {callsStatus.status}
          </p>
          {callsStatus.status === 'CONFIRMED' && (
            <p className="text-green-600">
              Transaction confirmed! Hash: {callsStatus.receipts[0].transactionHash}
            </p>
          )}
        </div>
      )}
    </div>
  )
}
```