메인 콘텐츠로 건너뛰기
선택 사항: 공식 TomoEVMKit 문서공식 Wagmi + TomoEVMKit 설치 문서는 여기에서 확인할 수 있습니다.

의존성 설치

npm install --save @story-protocol/core-sdk @tomo-inc/tomo-evm-kit wagmi viem @tanstack/react-query

설정

예제로 들어가기 전에 두 가지를 먼저 설정해 두세요:
  1. .env 파일에 NEXT_PUBLIC_RPC_PROVIDER_URL이 설정되어 있는지 확인하세요.
    • 공개 기본 RPC(https://aeneid.datarpc.io)를 사용하거나, 여기에서 다른 RPC를 사용할 수 있습니다.
  2. .env 파일에 NEXT_PUBLIC_TOMO_CLIENT_ID가 설정되어 있는지 확인하세요. Tomo Dashboard에 로그인하여 프로젝트를 생성하면 됩니다.
  3. .env 파일에 NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID가 설정되어 있는지 확인하세요. Reown (이전 WalletConnect)에 로그인하여 프로젝트를 생성하면 됩니다.
"use client";
import '@tomo-inc/tomo-evm-kit/styles.css';
import { getDefaultConfig, TomoEVMKitProvider } from "@tomo-inc/tomo-evm-kit";
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 DATA Foundation App",
  clientId: process.env.NEXT_PUBLIC_TOMO_CLIENT_ID as string,
  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}>
        <TomoEVMKitProvider>
          {children}
        </TomoEVMKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
}