Reown

개요

Reown AppKit (구 WalletConnect)은 온체인 애플리케이션에 지갑 연결을 추가하는 라이브러리입니다. 여러 지갑, 이메일 인증, 소셜 로그인을 지원하는 세련된 모달 인터페이스를 제공합니다. Reown과 Base Account를 통합하면 다른 로그인 방법에 대한 접근을 유지하면서 Base의 네이티브 스마트 지갑을 통해 사용자에게 원활한 온보딩을 제공할 수 있습니다.

달성할 내용

이 가이드를 마치면 다음을 할 수 있습니다:

Base Account를 추천 지갑 옵션으로 Reown AppKit 설정
지갑 목록에서 Base Account를 우선시하도록 모달 설정
레거시 SDK 접근을 위한 커스텀 Coinbase Wallet 커넥터 선택적 추가

아래 Base Account Reown 템플릿으로 바로 시작할 수 있습니다:

설치

새 Next.js 프로젝트 생성 후 필요한 의존성을 설치합니다:

npm install @reown/appkit @reown/appkit-adapter-wagmi wagmi viem @tanstack/react-query

yarn add @reown/appkit @reown/appkit-adapter-wagmi wagmi viem @tanstack/react-query

pnpm add @reown/appkit @reown/appkit-adapter-wagmi wagmi viem @tanstack/react-query

bun add @reown/appkit @reown/appkit-adapter-wagmi wagmi viem @tanstack/react-query

Reown 프로젝트 ID 획득

Reown AppKit을 사용하려면 Reown Cloud에서 프로젝트 ID를 획득해야 합니다.

Reown Cloud 대시보드 방문
무료 계정에 가입하거나 이미 계정이 있으면 로그인
새 프로젝트를 생성하고 프로젝트 ID를 복사합니다

설정

1. 환경 변수 설정

프로젝트 루트에 .env.local 파일을 생성합니다:

.env.local

NEXT_PUBLIC_PROJECT_ID=your_project_id_here

2. Wagmi 어댑터 설정

네트워크와 함께 Wagmi 어댑터를 설정하는 설정 파일을 생성합니다:

src/config/index.ts

import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'
import { arbitrum, base } from '@reown/appkit/networks'
import type { AppKitNetwork } from '@reown/appkit/networks'

export const projectId = process.env.NEXT_PUBLIC_PROJECT_ID!

if (!projectId) {
  throw new Error('Project ID is not defined')
}

export const networks = [base, arbitrum] as [AppKitNetwork, ...AppKitNetwork[]]

export const wagmiAdapter = new WagmiAdapter({
  ssr: true,
  projectId,
  networks
})

export const config = wagmiAdapter.wagmiConfig

3. AppKit 프로바이더 생성

AppKit을 초기화하고 애플리케이션을 래핑하는 컨텍스트 프로바이더를 생성합니다:

src/context/index.tsx

'use client'

import { wagmiAdapter, projectId, networks } from '@/config'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { createAppKit } from '@reown/appkit/react'
import React, { type ReactNode } from 'react'
import { cookieToInitialState, WagmiProvider, type Config } from 'wagmi'

const queryClient = new QueryClient()

const metadata = {
  name: 'My Base App',
  description: 'My Base Account App',
  url: 'https://myapp.com',
  icons: ['https://myapp.com/icon.png']
}

// Base Account 지갑 ID
const BASE_ACCOUNT_WALLET_ID = 'fd20dc426fb37566d803205b19bbc1d4096b248ac04548e3cfb6b3a38bd033aa'

export const modal = createAppKit({
  adapters: [wagmiAdapter],
  projectId,
  networks,
  metadata,
  themeMode: 'light',
  features: {
    analytics: true,
    connectMethodsOrder: ['wallet', 'email', 'social'], // 지갑이 먼저 표시
  },
  themeVariables: {
    '--w3m-accent': '#0052FF', // Base 블루
  },
  // Base Account 지갑 우선 표시
  featuredWalletIds: [BASE_ACCOUNT_WALLET_ID],
  includeWalletIds: [BASE_ACCOUNT_WALLET_ID],
  allWallets: 'SHOW',
  enableWallets: true,
})

function ContextProvider({ children, cookies }: { children: ReactNode; cookies: string | null }) {
  const initialState = cookieToInitialState(wagmiAdapter.wagmiConfig as Config, cookies)

  return (
    <WagmiProvider config={wagmiAdapter.wagmiConfig as Config} initialState={initialState}>
      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
    </WagmiProvider>
  )
}

export default ContextProvider

4. 레이아웃에 프로바이더 추가

컨텍스트 프로바이더를 사용하도록 루트 레이아웃을 업데이트합니다:

src/app/layout.tsx

import type { Metadata } from 'next'
import { headers } from 'next/headers'
import './globals.css'
import ContextProvider from '@/context'

export const metadata: Metadata = {
  title: 'Base Account Reown App',
  description: 'Base Account with Reown AppKit',
}

export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  const headersData = await headers()
  const cookies = headersData.get('cookie')

  return (
    <html lang="en">
      <body>
        <ContextProvider cookies={cookies}>{children}</ContextProvider>
      </body>
    </html>
  )
}

Reown AppKit의 설정 옵션에 대해 자세히 알아보려면 Reown AppKit 문서를 참조하세요.

사용법

AppKit 버튼 사용

Reown은 연결 버튼을 위한 웹 컴포넌트를 제공합니다. 사용할 컴포넌트를 생성합니다:

src/components/ConnectButton.tsx

'use client'

export default function ConnectButton() {
  return <appkit-button />
}

그런 다음 페이지에서 사용합니다:

src/app/page.tsx

import ConnectButton from '@/components/ConnectButton'

export default function Home() {
  return (
    <main className="min-h-screen flex items-center justify-center">
      <ConnectButton />
    </main>
  )
}

로컬에서 프로젝트 실행

npm run dev

yarn dev

pnpm dev

bun dev

연결 버튼이 있는 페이지가 표시됩니다. 클릭하면 Base Account를 추천 지갑 옵션으로 표시하는 Reown 모달이 열립니다.

Coinbase Wallet SDK 커넥터 추가

레거시 Coinbase Wallet SDK(EOA 지갑 지원)에 접근이 필요한 경우 Base Account와 함께 커스텀 커넥터를 추가할 수 있습니다.

Base Account는 최신 Base Account SDK를 사용합니다. 애플리케이션에 레거시 Coinbase Wallet SDK 기능이 특별히 필요한 경우 아래와 같이 커스텀 커넥터를 추가할 수 있습니다.

Wagmi 어댑터 업데이트

Coinbase Wallet 커넥터를 포함하도록 설정을 수정합니다:

src/config/index.ts

import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'
import { arbitrum, base } from '@reown/appkit/networks'
import type { AppKitNetwork } from '@reown/appkit/networks'
import { coinbaseWallet } from 'wagmi/connectors'

export const projectId = process.env.NEXT_PUBLIC_PROJECT_ID!

if (!projectId) {
  throw new Error('Project ID is not defined')
}

export const networks = [base, arbitrum] as [AppKitNetwork, ...AppKitNetwork[]]

// 레거시 SDK 접근을 위한 커스텀 Coinbase Wallet 커넥터 추가
const connectors = [
  coinbaseWallet({
    appName: 'My Base App',
    appLogoUrl: 'https://myapp.com/logo.png',
    preference: 'all', // 'all' | 'smartWalletOnly' | 'eoaOnly'
  }),
]

export const wagmiAdapter = new WagmiAdapter({
  ssr: true,
  projectId,
  networks,
  connectors, // 커스텀 커넥터 추가
})

export const config = wagmiAdapter.wagmiConfig

Coinbase Wallet 선호도 옵션

preference 옵션은 표시되는 지갑 유형을 제어합니다:

옵션	설명
`all`	스마트 지갑과 EOA 옵션 모두 표시 (기본값)
`smartWalletOnly`	Coinbase 스마트 지갑 팝업만 표시
`eoaOnly`	EOA 브라우저 확장 또는 모바일 Coinbase 지갑만 표시

소개

퀵스타트

가이드

프레임워크 통합

UX 개선

레퍼런스

기타

베이스네임

기여하기

개요

달성할 내용

설치

Reown 프로젝트 ID 획득

설정

1. 환경 변수 설정

2. Wagmi 어댑터 설정

3. AppKit 프로바이더 생성

4. 레이아웃에 프로바이더 추가

사용법

AppKit 버튼 사용

로컬에서 프로젝트 실행

Coinbase Wallet SDK 커넥터 추가

Wagmi 어댑터 업데이트

Coinbase Wallet 선호도 옵션

​개요

​달성할 내용

​설치

​Reown 프로젝트 ID 획득

​설정

​1. 환경 변수 설정

​2. Wagmi 어댑터 설정

​3. AppKit 프로바이더 생성

​4. 레이아웃에 프로바이더 추가

​사용법

​AppKit 버튼 사용

​로컬에서 프로젝트 실행

​Coinbase Wallet SDK 커넥터 추가

​Wagmi 어댑터 업데이트

​Coinbase Wallet 선호도 옵션

개요

달성할 내용

설치

Reown 프로젝트 ID 획득

설정

1. 환경 변수 설정

2. Wagmi 어댑터 설정

3. AppKit 프로바이더 생성

4. 레이아웃에 프로바이더 추가

사용법

AppKit 버튼 사용

로컬에서 프로젝트 실행

Coinbase Wallet SDK 커넥터 추가

Wagmi 어댑터 업데이트

Coinbase Wallet 선호도 옵션