Skip to main content

Documentation Index

Fetch the complete documentation index at: https://daehan-base.mintlify.app/llms.txt

Use this file to discover all available pages before exploring further.

​
Base에서의 자동 귀속

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

​
Base App 외부에서의 통합

사용자가 웹이나 다른 클라이언트를 통해 앱에 접근하는 경우, 해당 활동을 포착하기 위해 dataSuffix 파라미터를 통합해야 합니다. base.dev에 등록하면 귀속 서픽스를 생성하는 데 사용할 빌더 코드(예: bc_b7k3p9da라는 랜덤 문자열)를 받게 됩니다. 권장 방식은 클라이언트 레벨에서 dataSuffix를 설정하여 모든 트랜잭션에 빌더 코드를 추가하는 것입니다.
설정 → 빌더 코드에서 언제든지 코드를 확인할 수 있습니다.

​
Wagmi를 사용한 빠른 설정

1

의존성 설치

필요한 패키지를 설치합니다. viem 버전 2.45.0 이상이 필요합니다.
npm i ox wagmi viem
2

Wagmi 클라이언트 설정

Wagmi 설정에 dataSuffix 옵션을 추가합니다. 이렇게 하면 모든 트랜잭션에 빌더 코드가 자동으로 추가됩니다.
config.ts
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,
});
3

평소처럼 Wagmi 훅 사용

설정이 완료되면 모든 트랜잭션에 자동으로 빌더 코드가 포함됩니다 — 훅이나 컴포넌트를 변경할 필요가 없습니다. useSendTransaction과 useSendCalls 모두에서 작동합니다.
App.tsx
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>
  );
}

​
Viem을 사용한 빠른 설정

1

의존성 설치

필요한 패키지를 설치합니다. viem 버전 2.45.0 이상이 필요합니다.
npm i ox viem
2

지갑 클라이언트 설정

지갑 클라이언트를 생성할 때 dataSuffix 옵션을 추가합니다. 더 많은 설정 옵션은 viem 지갑 클라이언트 문서를 참고하세요.
client.ts
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,
});
3

평소처럼 트랜잭션 전송

이 클라이언트를 통해 전송되는 모든 트랜잭션에 자동으로 빌더 코드가 포함됩니다.
import { parseEther } from "viem";
import { walletClient } from "./client";

const hash = await walletClient.sendTransaction({
  to: "0x70997970c51812dc3a010c7d01b50e0d17dc79c8",
  value: parseEther("0.01"),
});

​
Privy 사용

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

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

클라이언트 레벨이 아닌 트랜잭션별로 서픽스를 추가해야 하는 경우, dataSuffix를 트랜잭션에 직접 전달할 수 있습니다.
App.tsx
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>
  );
}

​
귀속 확인

빌더 코드가 올바르게 추가되고 있는지 확인하려면: 1. base.dev 확인
  • base.dev 방문
  • 트랜잭션 유형 드롭다운에서 Onchain 선택
  • 총 트랜잭션 섹션에서 코드가 포함된 트랜잭션이 처리되면 귀속 카운트가 증가합니다
2. 블록 탐색기 사용 (Basescan, Etherscan 등)
  • 트랜잭션 해시 찾기
  • 입력 데이터 필드 확인
  • 마지막 16바이트가 8021 반복인지 확인
  • 서픽스를 디코딩하여 빌더 코드가 있는지 확인
3. 오픈 소스 도구
  • 빌더 코드 검증 도구 사용
  • 트랜잭션 유형 선택
  • 트랜잭션 또는 UserOperation 해시 입력
  • Check Attribution 버튼 클릭