메인 콘텐츠로 건너뛰기
선택 사항: 공식 Dynamic 문서공식 Wagmi + Dynamic 설치 문서는 여기에서 확인하세요.

종속성 설치

npm install --save @story-protocol/core-sdk viem wagmi @dynamic-labs/sdk-react-core @dynamic-labs/wagmi-connector @dynamic-labs/ethereum @tanstack/react-query

설정

예제로 들어가기 전에 두 가지가 설정되어 있는지 확인하세요:
  1. .env 파일에 NEXT_PUBLIC_RPC_PROVIDER_URL이 설정되어 있는지 확인하세요.
    • 공용 기본값(https://aeneid.datarpc.io) 또는 여기의 다른 RPC를 사용할 수 있습니다.
  2. .env 파일에 NEXT_PUBLIC_DYNAMIC_ENV_ID가 설정되어 있는지 확인하세요. Dynamic에 로그인하고 프로젝트를 생성하여 이를 수행하세요.
"use client";
import { createConfig, WagmiProvider } from "wagmi";
import { http } from 'viem';
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { DynamicContextProvider } from "@dynamic-labs/sdk-react-core";
import { DynamicWagmiConnector } from "@dynamic-labs/wagmi-connector";
import { EthereumWalletConnectors } from "@dynamic-labs/ethereum";
import { PropsWithChildren } from "react";
import { aeneid } from "@story-protocol/core-sdk";

// setup wagmi
const config = createConfig({
  chains: [aeneid],
  multiInjectedProviderDiscovery: false,
  transports: {
    [aeneid.id]: http(),
  },
});
const queryClient = new QueryClient();

export default function Web3Providers({ children }: PropsWithChildren) {
  return (
    // setup dynamic
    <DynamicContextProvider
      settings={{
        // Find your environment id at https://app.dynamic.xyz/dashboard/developer
        environmentId: process.env.NEXT_PUBLIC_DYNAMIC_ENV_ID as string,
        walletConnectors: [EthereumWalletConnectors],
      }}
    >
      <WagmiProvider config={config}>
        <QueryClientProvider client={queryClient}>
          <DynamicWagmiConnector>
            {children}
          </DynamicWagmiConnector>
        </QueryClientProvider>
      </WagmiProvider>
    </DynamicContextProvider>
  );
}