Optional: Official RainbowKit Docs

공식 Wagmi + RainbowKit 설치 문서를 확인하세요 here.

​
의존성 설치

npm install --save @story-protocol/core-sdk @rainbow-me/rainbowkit wagmi viem @tanstack/react-query

​
설정

예제를 살펴보기 전에 두 가지를 설정해야 합니다:

  1. 반드시 NEXT_PUBLIC_RPC_PROVIDER_URL 파일에 .env을 설정하세요.
    • 공개 기본값(https://aeneid.storyrpc.io)을 사용하거나 다른 RPC here를 사용할 수 있습니다.
  2. 반드시 NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID 파일에 .env을 설정하세요. Reown (prev. WalletConnect)에 로그인하고 프로젝트를 생성하여 이를 수행하세요.
"use client";
import "@rainbow-me/rainbowkit/styles.css";
import { getDefaultConfig, RainbowKitProvider } from "@rainbow-me/rainbowkit";
import { WagmiProvider } from "wagmi";
import { QueryClientProvider, QueryClient } from "@tanstack/react-query";
import { PropsWithChildren } from "react";
import { aeneid } from "@story-protocol/core-sdk";

const config = getDefaultConfig({
  appName: "Test Story App",
  projectId: process.env.NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID as string,
  chains: [aeneid],
  ssr: true, // If your dApp uses server side rendering (SSR)
});

const queryClient = new QueryClient();

export default function Web3Providers({ children }: PropsWithChildren) {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <RainbowKitProvider>
          {children}
        </RainbowKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
}