설치

RainbowKit으로 시작하고 실행하기

빠른 시작

선택한 패키지 관리자를 사용하여 다음 명령 중 하나로 새로운 RainbowKit + wagmi + Next.js 앱을 스캐폴드 할 수 있습니다:

npm init @rainbow-me/rainbowkit@latest
# or
pnpm create @rainbow-me/rainbowkit@latest
# or
yarn create @rainbow-me/rainbowkit

이것은 프로젝트 이름을 요청하고, 보일러플레이트 프로젝트가 포함된 새 디렉토리를 생성하고, 필요한 모든 종속성을 설치합니다.

또는, 기존 프로젝트에 RainbowKit를 수동으로 통합할 수 있습니다.

수동 설정

RainbowKit 및 동료 의존성인 wagmi, viem, 그리고 @tanstack/react-query를 설치하세요.

npm install @rainbow-me/rainbowkit wagmi [email protected] @tanstack/react-query

참고: RainbowKit는 React 라이브러리입니다.

가져오기

RainbowKit, Wagmi 및 TanStack Query를 가져오세요.

import '@rainbow-me/rainbowkit/styles.css';

import {
  getDefaultConfig,
  RainbowKitProvider,
} from '@rainbow-me/rainbowkit';
import { WagmiProvider } from 'wagmi';
import {
  mainnet,
  polygon,
  optimism,
  arbitrum,
  base,
} from 'wagmi/chains';
import {
  QueryClientProvider,
  QueryClient,
} from "@tanstack/react-query";

설정

원하는 체인을 설정하고 필요한 커넥터를 생성합니다. wagmi 설정도 마련해야 합니다. 귀하의 dApp이 서버 사이드 렌더링 (SSR)을 사용하는 경우 ssr을 true로 설정해야 합니다.

참고: WalletConnect를 사용하는 모든 dApp은 이제 WalletConnect Cloud에서 projectId를 얻어야 합니다. 이것은 완전히 무료이며 몇 분 밖에 걸리지 않습니다.

...
import { getDefaultConfig } from '@rainbow-me/rainbowkit';

const config = getDefaultConfig({
  appName: 'My RainbowKit App',
  projectId: 'YOUR_PROJECT_ID',
  chains: [mainnet, polygon, optimism, arbitrum, base],
  ssr: true, // If your dApp uses server side rendering (SSR)
});

공급자 감싸기

애플리케이션을 RainbowKitProvider, WagmiProvider, 그리고 QueryClientProvider로 감싸세요.

const queryClient = new QueryClient();

const App = () => {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <RainbowKitProvider>
          {/* Your App */}
        </RainbowKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
};

연결 버튼 추가

그런 다음, 앱에서 ConnectButton 컴포넌트를 가져와서 렌더링합니다.

import { ConnectButton } from '@rainbow-me/rainbowkit';

export const YourApp = () => {
  return <ConnectButton />;
};

RainbowKit은 이제 사용자의 지갑 선택을 처리하며, 지갑/거래 정보를 표시하고 네트워크/지갑 전환을 처리합니다.

추가적인 빌드 도구 설정

일부 빌드 도구는 추가 설정이 필요할 수 있습니다.

Remix

Remix를 사용할 때, buffer, events 및 http 모듈을 폴리필해야 합니다. 아래 Remix 구성을 참조하거나, 샘플 Remix 프로젝트를 참조하십시오.

/** @type {import('@remix-run/dev').AppConfig} */
export default {
  ignoredRouteFiles: ["**/.*"],
  browserNodeBuiltinsPolyfill: {
    modules: { buffer: true, events: true, http: true },
  },
};

기본적으로, 귀하의 dApp은 각 체인에 대해 공용 RPC 공급자를 사용하여 잔액을 가져오고, ENS 이름을 해결하는 등 다양한 작업을 수행합니다. 이는 공용 노드가 속도 제한을 받기 때문에 사용자에게 신뢰성 문제를 자주 일으킬 수 있습니다. 대신, Alchemy나 QuickNode와 같은 서비스로부터 RPC 공급자에 대한 접근을 구매하고 Wagmi에서 자체 Transports를 정의해야 합니다. 이는 getDefaultConfig에서 transports 매개변수나 Wagmi의 createConfig를 통해 직접 구현할 수 있습니다.

Transport는 JSON-RPC 요청을 Ethereum Node Provider (예: Alchemy, Infura 등)로 전송하는 네트워킹 중간 계층입니다.

http 트랜스포트 예제

import { getDefaultConfig } from '@rainbow-me/rainbowkit';
import { http } from 'wagmi';
import { mainnet, sepolia } from 'wagmi/chains';

const config = getDefaultConfig({
  appName: 'My RainbowKit App',
  projectId: 'YOUR_PROJECT_ID',
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http('https://eth-mainnet.g.alchemy.com/v2/...'),
    [sepolia.id]: http('https://eth-sepolia.g.alchemy.com/v2/...'),
  },
});

자세한 내용은 wagmi 트랜스포트 문서를 참조하십시오.

자신만의 기능을 추가하십시오

이제 사용자들이 지갑을 연결할 수 있으므로, wagmi.를 사용하여 앱의 나머지 부분을 구축할 수 있습니다.

wagmi의 포괄적인 React Hooks 세트를 이용하여 트랜잭션을 전송하고, 계약에 상호 작용하고, ENS 세부 정보를 해결하고 더 많은 작업을 수행할 수 있습니다.

자세한 내용은 wagmi 문서를 참조하십시오.

추가 예제

RainbowKit의 실행 예제를 보거나, 심지어 새 프로젝트를 자동으로 스캐폴드하는 데 사용하려면, 공식 예제를 확인하십시오.

브라우저에서 RainbowKit를 직접 시도하기 위해 아래의 CodeSandbox 링크를 확인하십시오:

리액트 앱 생성을 사용하여
Next.js을 사용하여
Next.js 앱 라우터을 사용하여
Remix을 사용하여
Vite을 사용하여

개요

시작하기

고급

설치