설정

React 애플리케이션에서 Base Account 커넥터로 Wagmi 설정하기

친숙한 React 훅으로 Base Account SDK 기능을 사용하기 위해 Wagmi와 Base Account를 설정하는 방법을 알아보세요.

개요

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

Base Account Wagmi 템플릿으로 바로 시작할 수 있습니다.

설치

옵션 1: 새 Wagmi 프로젝트

1. 새 Wagmi 프로젝트 생성

   명령줄로 새 wagmi 프로젝트를 생성합니다:

   npm

   npm create wagmi@latest
   
2. Base Account SDK 버전 오버라이드

   Wagmi 내에서 최신 버전의 Base Account SDK에 접근하려면 다음 명령어로 오버라이드합니다:

   npm

   npm pkg set overrides.@base-org/account="latest"
   # 또는 package.json에 수동으로 추가:
   # "overrides": { "@base-org/account": "latest" }
   

   특정 버전을 사용하려면 오버라이드에 버전을 추가하세요:

   npm

   npm pkg set overrides.@base-org/account="2.2.0"
   # 또는 package.json에 수동으로 추가:
   # "overrides": { "@base-org/account": "2.2.0" }
   
3. 의존성 설치

   원하는 패키지 매니저로 의존성을 설치합니다:

   npm

   npm install
   

처음 설치가 아닌 경우

오버라이드가 적용되도록 node_modules와 package-lock.json을 삭제하고 새로 설치해야 합니다.

옵션 2: 기존 프로젝트

1. Base Account SDK 버전 오버라이드

   Wagmi 내에서 최신 버전의 Base Account SDK에 접근하려면 다음 명령어로 오버라이드합니다:

   npm

   npm pkg set overrides.@base-org/account="latest"
   # 또는 package.json에 수동으로 추가:
   # "overrides": { "@base-org/account": "latest" }
   

   특정 버전을 사용하려면 오버라이드에 버전을 추가하세요:

   npm

   npm pkg set overrides.@base-org/account="2.2.0"
   # 또는 package.json에 수동으로 추가:
   # "overrides": { "@base-org/account": "2.2.0" }
   
2. 의존성 설치

   원하는 패키지 매니저로 의존성을 설치합니다:

   npm

   npm install viem wagmi @tanstack/react-query
   

처음 설치가 아닌 경우

오버라이드가 적용되도록 node_modules와 package-lock.json을 삭제하고 새로 설치해야 합니다.

설정

1. Base Account로 Wagmi 설정

Base Account 커넥터가 설정된 Wagmi 설정을 생성합니다:

app/wagmi.ts

import { cookieStorage, createConfig, createStorage, http } from "wagmi";
import { base, baseSepolia } from "wagmi/chains";
import { baseAccount } from "wagmi/connectors";

export function getConfig() {
  return createConfig({
    chains: [base, baseSepolia],
    multiInjectedProviderDiscovery: false,
    connectors: [
      baseAccount({
        appName: "My Wagmi App",
      }),
    ],
    storage: createStorage({
      storage: cookieStorage,
    }),
    ssr: true,
    transports: {
      [base.id]: http(),
      [baseSepolia.id]: http(),
    },
  });
}

declare module "wagmi" {
  interface Register {
    config: ReturnType<typeof getConfig>;
  }
}

2. 앱 래핑

Wagmi 프로바이더와 QueryClient 프로바이더로 애플리케이션을 래핑합니다:

app/providers.tsx

'use client'

import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { type ReactNode, useState } from 'react'
import { type State, WagmiProvider } from 'wagmi'

import { getConfig } from '@/wagmi'

export function Providers(props: {
  children: ReactNode
  initialState?: State
}) {
  const [config] = useState(() => getConfig())
  const [queryClient] = useState(() => new QueryClient())

  return (
    <WagmiProvider config={config} initialState={props.initialState}>
      <QueryClientProvider client={queryClient}>
        {props.children}
      </QueryClientProvider>
    </WagmiProvider>
  )
}

간단한 페이지 생성 (Base로 로그인)

Base로 로그인을 사용하여 사용자를 인증하는 간단한 랜딩 페이지를 생성합니다

app/components/SignInWithBase.tsx

"use client";

import { Connector } from "wagmi";
import { SignInWithBaseButton } from "@base-org/account-ui/react";
import { useState } from "react";

interface SignInWithBaseProps {
  connector: Connector;
}

export function SignInWithBase({ connector }: SignInWithBaseProps) {
  const [verificationResult, setVerificationResult] = useState<string>("");

  async function handleBaseAccountConnect() {
    const provider = await connector.getProvider();
    if (provider) {
      try {
        // 새로운 nonce 생성 (백엔드 nonce로 덮어씌워질 예정)
        const clientNonce =
          Math.random().toString(36).substring(2, 15) +
          Math.random().toString(36).substring(2, 15);
        console.log("clientNonce", clientNonce);
        // 서명, 메시지, 주소를 가져오기 위해 SIWE로 연결
        const accounts = await (provider as any).request({
          method: "wallet_connect",
          params: [
            {
              version: "1",
              capabilities: {
                signInWithEthereum: {
                  nonce: clientNonce,
                  chainId: "0x2105", // Base 메인넷 - 8453
                },
              },
            },
          ],
        });

        // 백엔드에서 서명 검증
        /*
        const walletAddress = accounts.accounts[0].address;
        const signature =
          accounts.accounts[0].capabilities.signInWithEthereum.signature;
        const message =
          accounts.accounts[0].capabilities.signInWithEthereum.message;
        const verifyResponse = await fetch("/api/auth/verify", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({
            address: walletAddress,
            message,
            signature,
          }),
        });

        const result = await verifyResponse.json();
        */
        const result={success:true, address:accounts[0].address} // 목업 응답

        if (result.success) {
          setVerificationResult(`검증 완료! 주소: ${result.address}`);
        } else {
          setVerificationResult(`검증 실패: ${result.error}`);
        }
      } catch (err) {
        console.error("Error:", err);
        setVerificationResult(
          `오류: ${err instanceof Error ? err.message : "알 수 없는 오류"}`
        );
      }
    } else {
      console.error("No provider");
    }
  }

  return (
    <div>
      <div style={{ width: "300px" }}>
        <SignInWithBaseButton
          onClick={handleBaseAccountConnect}
          variant="solid"
          colorScheme="system"
          align="center"
        />
      </div>
      {verificationResult && (
        <div style={{ marginTop: "10px" }}>{verificationResult}</div>
      )}
    </div>
  );
}

이것은 시작을 위한 간단한 예제입니다. 서명을 검증하고 사용자를 인증하기 위한 백엔드 로직을 추가해야 합니다.

완전한 예제는 Base Account Wagmi 템플릿에서 확인할 수 있습니다.

Wagmi 앱 실행

원하는 패키지 매니저로 애플리케이션을 실행합니다:

npm

npm run dev

페이지를 탐색할 때 표시되는 화면

다음 단계

Base Account로 Wagmi를 설정했다면 이제 다음을 할 수 있습니다:

• Base로 로그인으로 사용자 연결
• Base Account 프로바이더 접근