> ## Documentation Index
> Fetch the complete documentation index at: https://daehan-base.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 배치 트랜잭션

> Wagmi와 Base Account로 단일 트랜잭션에서 여러 온체인 콜 전송하기

export const GithubRepoCard = ({title, githubUrl}) => {
  return <a href={githubUrl} target="_blank" rel="noopener noreferrer" className="mb-4 flex items-center rounded-lg bg-zinc-900 p-4 text-white transition-all hover:bg-zinc-800">
      <div className="flex w-full items-center gap-3">
        <svg height="24" width="24" className="flex-shrink-0 dark:fill-white" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
          <path fill="currentColor" fillRule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" />
        </svg>

        <div className="flex min-w-0 flex-grow flex-col">
          <span className="truncate text-base font-medium">{title}</span>
          <span className="truncate text-xs text-zinc-400">{githubUrl}</span>
        </div>

        <svg className="h-5 w-5 flex-shrink-0 text-zinc-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
        </svg>
      </div>
    </a>;
};

Wagmi와 Base Account로 단일 트랜잭션에서 여러 온체인 콜을 전송하는 방법을 알아보세요.

## 개요

[Wagmi](https://wagmi.sh/)는 EVM(Ethereum Virtual Machine) 호환 네트워크를 위한 React 훅 모음으로, 지갑, 컨트랙트, 트랜잭션, 서명 작업을 쉽게 처리할 수 있게 해줍니다. Base Account는 Wagmi와 완벽하게 통합되어 친숙한 훅을 모두 사용할 수 있습니다.

[Base Account Wagmi 템플릿](https://github.com/base/demos/tree/master/base-account/base-account-wagmi-template)으로 바로 시작할 수 있습니다.

<GithubRepoCard title="Base Account Wagmi 템플릿" githubUrl="https://github.com/base/demos/tree/master/base-account/base-account-wagmi-template" />

## 설정

이 가이드를 따르기 전에 [Wagmi와 Base Account를 설정](/base-account/framework-integrations/wagmi/setup)했는지 확인하세요.

## 기본 배치 트랜잭션

`sendCalls` 메서드를 사용하는 컴포넌트를 만들고 트랜잭션을 트리거하는 버튼을 추가하여 단일 트랜잭션에서 여러 ETH 전송을 보냅니다.

<CodeGroup>
  ```tsx components/BatchTransactions.tsx expandable theme={null}
  "use client";

  import { useState } from "react";
  import { useSendCalls } from "wagmi";
  import { encodeFunctionData, parseUnits } from "viem";
  import { baseSepolia } from "wagmi/chains";

  // Base Sepolia의 USDC 컨트랙트 주소
  const USDC_ADDRESS = "0x036CbD53842c5426634e7929541eC2318f3dCF7e";

  // transfer 함수를 위한 ERC20 ABI
  const erc20Abi = [
    {
      inputs: [
        { name: "to", type: "address" },
        { name: "amount", type: "uint256" },
      ],
      name: "transfer",
      outputs: [{ name: "", type: "bool" }],
      stateMutability: "nonpayable",
      type: "function",
    },
  ] as const;

  export function BatchTransactions() {
    const { sendCalls, data, isPending, isSuccess, error } = useSendCalls();
    const [amount1, setAmount1] = useState("1");
    const [amount2, setAmount2] = useState("1");
    const [usePaymaster, setUsePaymaster] = useState(false);

    async function handleBatchTransfer() {
      try {
        // 첫 번째 전송 콜 인코딩
        const call1Data = encodeFunctionData({
          abi: erc20Abi,
          functionName: "transfer",
          args: [
            "0x2211d1D0020DAEA8039E46Cf1367962070d77DA9",
            parseUnits(amount1, 6), // USDC는 소수점 6자리
          ],
        });

        // 두 번째 전송 콜 인코딩
        const call2Data = encodeFunctionData({
          abi: erc20Abi,
          functionName: "transfer",
          args: [
            "0xd8da6bf26964af9d7eed9e03e53415d37aa96045",
            parseUnits(amount2, 6), // USDC는 소수점 6자리
          ],
        });

        // 페이마스터 활성화 시 capabilities 객체 준비
        const capabilities = usePaymaster
          ? {
              paymasterService: {
                url: process.env.NEXT_PUBLIC_PAYMASTER_URL || "https://api.developer.coinbase.com/rpc/v1/base-sepolia",
              },
            }
          : undefined;

        // 배치 콜 전송
        sendCalls({
          calls: [
            {
              to: USDC_ADDRESS,
              data: call1Data,
            },
            {
              to: USDC_ADDRESS,
              data: call2Data,
            },
          ],
          chainId: baseSepolia.id,
          capabilities,
        });
      } catch (err) {
        console.error("Error batching transactions:", err);
      }
    }

    return (
      <div>
        <h2>USDC 배치 전송</h2>

        <div>
          <div>
            <label>금액 1 (USDC):</label>
            <input
              type="number"
              value={amount1}
              onChange={(e) => setAmount1(e.target.value)}
              placeholder="1"
              step="0.000001"
              min="0"
            />
          </div>

          <div>
            <label>금액 2 (USDC):</label>
            <input
              type="number"
              value={amount2}
              onChange={(e) => setAmount2(e.target.value)}
              placeholder="1"
              step="0.000001"
              min="0"
            />
          </div>

          <div>
            <label>
              <input
                type="checkbox"
                checked={usePaymaster}
                onChange={(e) => setUsePaymaster(e.target.checked)}
              />
              페이마스터 사용 (가스 후원)
            </label>
          </div>

          <button onClick={handleBatchTransfer} disabled={isPending}>
            {isPending ? "전송 중..." : "배치 전송"}
          </button>
        </div>

        {isPending && <div>트랜잭션 처리 중...</div>}

        {isSuccess && data && (
          <div>
            <p>배치 전송 성공!</p>
            <p>배치 ID: {data.id}</p>
          </div>
        )}

        {error && <div>오류: {error.message}</div>}
      </div>
    );
  }
  ```

  ```tsx app/page.tsx expandable theme={null}
  "use client";

  import { useAccount, useConnect, useDisconnect } from "wagmi";
  import { SignInWithBase } from "../components/SignInWithBase";
  import { BatchTransactions } from "../components/BatchTransactions";

  function App() {
    const account = useAccount();
    const { connectors, connect, status, error } = useConnect();
    const { disconnect } = useDisconnect();

    return (
      <>
        <div>
          <h2>계정</h2>

          <div>
            상태: {account.status}
            <br />
            주소: {JSON.stringify(account.addresses)}
            <br />
            체인 ID: {account.chainId}
          </div>

          {account.status === "connected" && (
            <button type="button" onClick={() => disconnect()}>
              연결 해제
            </button>
          )}
        </div>

        <div>
          <h2>연결</h2>
          {connectors.map((connector) => {
            if (connector.name === "Base Account") {
              return (
                <SignInWithBase key={connector.uid} connector={connector} />
              );
            } else {
              return (
                <button
                  key={connector.uid}
                  onClick={() => connect({ connector })}
                  type="button"
                >
                  {connector.name}
                </button>
              );
            }
          })}
          <div>{status}</div>
          <div>{error?.message}</div>
        </div>

        {account.status === "connected" && <BatchTransactions />}
      </>
    );
  }

  export default App;
  ```
</CodeGroup>

<Tip>
  **먼저 "지갑 연결"을 할 필요가 없습니다**

  Base Account를 사용하면 먼저 "지갑 연결"(즉, `eth_requestAccounts` 사용)을 하지 않아도 `sendCalls` 메서드를 사용하여 트랜잭션 전송을 위한 사용자 프롬프트를 표시할 수 있습니다.
</Tip>