설치
설치
RainbowKit로 실행 및 준비를 완료하십시오
다음 명령을 사용하여 새로운 RainbowKit + wagmi + Next.js 앱을 패키지 매니저로 스캐폴드할 수 있습니다.
npm init @rainbow-me/rainbowkit@latest
pnpm create @rainbow-me/rainbowkit@latest
yarn create @rainbow-me/rainbowkit
프로젝트 이름을 입력하라는 메시지가 나타나고 템플릿 프로젝트가 포함된 새 디렉터리가 생성되며 필요한 모든 종속성이 설치됩니다.
대안으로 기존 프로젝트에 RainbowKit을 수동으로 통합할 수 있습니다.
RainbowKit 및 그 연관 종속성인 wagmi, viem, @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";
원하는 체인을 구성하고 필요한 커넥터를 생성하십시오. 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,
});
애플리케이션을 RainbowKitProvider, WagmiProvider 및 QueryClientProvider로 감쌉니다.
const queryClient = new QueryClient();
const App = () => {
return (
<WagmiProvider config={config}>
<QueryClientProvider client={queryClient}>
<RainbowKitProvider>
{}
</RainbowKitProvider>
</QueryClientProvider>
</WagmiProvider>
);
};
그런 다음, 앱에서 ConnectButton 컴포넌트를 가져와 렌더링합니다.
import { ConnectButton } from '@rainbow-me/rainbowkit';
export const YourApp = () => {
return <ConnectButton />;
};
RainbowKit은 이제 사용자의 지갑 선택을 처리하고, 지갑/거래 정보를 표시하며, 네트워크/지갑 전환을 처리합니다.
일부 빌드 도구에는 추가 설정이 필요할 수 있습니다.
Remix를 사용하는 경우 buffer, events 및 http 모듈을 폴리필 해야 합니다. 아래 Remix 구성을 참조하거나 샘플 Remix 프로젝트를 확인하십시오.
export default {
ignoredRouteFiles: ["**/.*"],
browserNodeBuiltinsPolyfill: {
modules: { buffer: true, events: true, http: true },
},
};
기본적으로 dApp은 각 체인의 잔액을 가져오거나 ENS 이름을 해결하는 등의 작업을 위한 공개 RPC 제공자를 사용합니다. 이는 종종 사용자의 신뢰성 문제를 초래할 수 있습니다. 대신 Alchemy 또는 QuickNode와 같은 서비스로 RPC 제공자에 대한 액세스를 구매하고 Wagmi에서 자체 트랜스포트를 정의해야 합니다. 이는 getDefaultConfig에 transports 매개변수를 추가하거나 Wagmi의 createConfig를 통해 직접 수행할 수 있습니다.
트랜스포트는 JSON-RPC 요청을 이더리움 노드 제공자(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를 사용하여 앱의 나머지 부분을 구축할 수 있습니다.
트랜잭션 전송, 계약과 상호 작용, ENS 세부 정보 해결 등 wagmi의 포괄적인 React 훅을 사용하여 다양한 작업을 수행할 수 있습니다.
자세한 내용은 wagmi 문서를 참조하십시오.
RainbowKit의 실행 중 예제를 보거나 이를 사용하여 새 프로젝트를 자동으로 스캐폴드하려면 공식 예제를 확인하십시오.
브라우저에서 직접 RainbowKit를 시도하려면 아래 CodeSandbox 링크를 확인하십시오.
