> ## 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 또는 Viem을 사용하여 빌더 코드를 앱에 통합하고 온체인 활동을 귀속시키세요.

## Base에서의 자동 귀속

앱이 [base.dev](http://base.dev/)에 등록되면, Base App은 해당 앱(예: 앱을 통해, 또는 Base App의 브라우저)에서 사용자가 하는 트랜잭션에 빌더 코드를 자동으로 추가합니다. 이를 통해 [base.dev](http://base.dev/)에서 온체인 분석이 가능하고, 향후 잠재적인 리워드 자격을 얻을 수 있습니다.

## Base App 외부에서의 통합

사용자가 웹이나 다른 클라이언트를 통해 앱에 접근하는 경우, 해당 활동을 포착하기 위해 `dataSuffix` 파라미터를 통합해야 합니다.

[base.dev](https://base.dev/)에 등록하면 귀속 서픽스를 생성하는 데 사용할 **빌더 코드**(예: `bc_b7k3p9da`라는 랜덤 문자열)를 받게 됩니다. 권장 방식은 클라이언트 레벨에서 `dataSuffix`를 설정하여 모든 트랜잭션에 빌더 코드를 추가하는 것입니다.

<Tip>
  **설정** → **빌더 코드**에서 언제든지 코드를 확인할 수 있습니다.
</Tip>

## Wagmi를 사용한 빠른 설정

<Steps>
  <Step title="의존성 설치">
    필요한 패키지를 설치합니다. viem 버전 `2.45.0` 이상이 필요합니다.

    ```bash theme={null}
    npm i ox wagmi viem
    ```
  </Step>

  <Step title="Wagmi 클라이언트 설정">
    Wagmi 설정에 `dataSuffix` 옵션을 추가합니다. 이렇게 하면 모든 트랜잭션에 빌더 코드가 자동으로 추가됩니다.

    ```ts config.ts theme={null}
    import { createConfig, http } from "wagmi";
    import { base } from "wagmi/chains";
    import { Attribution } from "ox/erc8021";

    // Get your Builder Code from base.dev > Settings > Builder Codes
    const DATA_SUFFIX = Attribution.toDataSuffix({
      codes: ["YOUR-BUILDER-CODE"],
    });

    export const config = createConfig({
      chains: [base],
      transports: {
        [base.id]: http(),
      },
      dataSuffix: DATA_SUFFIX,
    });
    ```
  </Step>

  <Step title="평소처럼 Wagmi 훅 사용">
    설정이 완료되면 모든 트랜잭션에 자동으로 빌더 코드가 포함됩니다 — 훅이나 컴포넌트를 변경할 필요가 없습니다. `useSendTransaction`과 `useSendCalls` 모두에서 작동합니다.

    ```tsx App.tsx theme={null}
    import { useSendTransaction } from "wagmi";
    import { parseEther } from "viem";

    function SendButton() {
      const { sendTransaction } = useSendTransaction();

      return (
        <button
          onClick={() =>
            sendTransaction({
              to: "0x70997970c51812dc3a010c7d01b50e0d17dc79c8",
              value: parseEther("0.01"),
            })
          }
        >
          Send ETH
        </button>
      );
    }
    ```
  </Step>
</Steps>

## Viem을 사용한 빠른 설정

<Steps>
  <Step title="의존성 설치">
    필요한 패키지를 설치합니다. viem 버전 `2.45.0` 이상이 필요합니다.

    ```bash theme={null}
    npm i ox viem
    ```
  </Step>

  <Step title="지갑 클라이언트 설정">
    지갑 클라이언트를 생성할 때 `dataSuffix` 옵션을 추가합니다. 더 많은 설정 옵션은 [viem 지갑 클라이언트 문서](https://viem.sh/docs/clients/wallet)를 참고하세요.

    ```ts client.ts theme={null}
    import { createWalletClient, http } from "viem";
    import { base } from "viem/chains";
    import { Attribution } from "ox/erc8021";

    // Get your Builder Code from base.dev > Settings > Builder Codes
    const DATA_SUFFIX = Attribution.toDataSuffix({
      codes: ["YOUR-BUILDER-CODE"],
    });

    export const walletClient = createWalletClient({
      chain: base,
      transport: http(),
      dataSuffix: DATA_SUFFIX,
    });
    ```
  </Step>

  <Step title="평소처럼 트랜잭션 전송">
    이 클라이언트를 통해 전송되는 모든 트랜잭션에 자동으로 빌더 코드가 포함됩니다.

    ```ts theme={null}
    import { parseEther } from "viem";
    import { walletClient } from "./client";

    const hash = await walletClient.sendTransaction({
      to: "0x70997970c51812dc3a010c7d01b50e0d17dc79c8",
      value: parseEther("0.01"),
    });
    ```
  </Step>
</Steps>

## Privy 사용

Privy는 모든 트랜잭션(EOA 트랜잭션과 ERC-4337 스마트 지갑 사용자 작업 모두 포함)에 빌더 코드를 자동으로 추가하는 `dataSuffix` 플러그인을 제공합니다.

설정 방법은 [Privy 빌더 코드 통합 가이드](https://docs.privy.io/recipes/evm/base-builder-codes)를 참고하세요.

## 레거시: 트랜잭션별 방식

<Accordion title="트랜잭션별 dataSuffix 추가">
  클라이언트 레벨이 아닌 트랜잭션별로 서픽스를 추가해야 하는 경우, `dataSuffix`를 트랜잭션에 직접 전달할 수 있습니다.

  <Tabs>
    <Tab title="useSendTransaction">
      ```tsx App.tsx theme={null}
      import { useSendTransaction } from "wagmi";
      import { parseEther } from "viem";
      import { Attribution } from "ox/erc8021";

      const DATA_SUFFIX = Attribution.toDataSuffix({
        codes: ["YOUR-BUILDER-CODE"],
      });

      function App() {
        const { sendTransaction } = useSendTransaction();

        return (
          <button
            onClick={() =>
              sendTransaction({
                to: "0x70997970c51812dc3a010c7d01b50e0d17dc79c8",
                value: parseEther("0.01"),
                dataSuffix: DATA_SUFFIX,
              })
            }
          >
            Send ETH
          </button>
        );
      }
      ```
    </Tab>

    <Tab title="useSendCalls">
      `useSendCalls`를 사용할 때는 `capabilities` 객체를 통해 서픽스를 전달합니다. 이렇게 하려면 연결된 지갑이 `dataSuffix` 기능을 지원해야 합니다.

      ```tsx App.tsx theme={null}
      import { useSendCalls } from "wagmi";
      import { parseEther } from "viem";
      import { Attribution } from "ox/erc8021";

      const DATA_SUFFIX = Attribution.toDataSuffix({
        codes: ["YOUR-BUILDER-CODE"],
      });

      function App() {
        const { sendCalls } = useSendCalls();

        return (
          <button
            onClick={() =>
              sendCalls({
                calls: [
                  {
                    to: "0x70997970c51812dc3a010c7d01b50e0d17dc79c8",
                    value: parseEther("1"),
                  },
                ],
                capabilities: {
                  dataSuffix: {
                    value: DATA_SUFFIX,
                    optional: true,
                  },
                },
              })
            }
          >
            Send calls
          </button>
        );
      }
      ```
    </Tab>
  </Tabs>
</Accordion>

## 귀속 확인

빌더 코드가 올바르게 추가되고 있는지 확인하려면:

**1. base.dev 확인**

* [base.dev](https://base.dev) 방문
* 트랜잭션 유형 드롭다운에서 **Onchain** 선택
* 총 트랜잭션 섹션에서 코드가 포함된 트랜잭션이 처리되면 귀속 카운트가 증가합니다

**2. 블록 탐색기 사용 (Basescan, Etherscan 등)**

* 트랜잭션 해시 찾기
* 입력 데이터 필드 확인
* 마지막 16바이트가 `8021` 반복인지 확인
* 서픽스를 디코딩하여 빌더 코드가 있는지 확인

**3. 오픈 소스 도구**

* [빌더 코드 검증](https://builder-code-checker.vercel.app/) 도구 사용
* 트랜잭션 유형 선택
* 트랜잭션 또는 UserOperation 해시 입력
* **Check Attribution** 버튼 클릭