Optional: Official Dynamic Docs

공식 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. 반드시NEXT_PUBLIC_RPC_PROVIDER_URL을 파일에 설정하세요..env 파일.
    • 공개 기본값을 사용할 수 있습니다 (https://aeneid.storyrpc.io) 또는 다른 RPC여기.
  2. 반드시NEXT_PUBLIC_DYNAMIC_ENV_ID을 파일에 설정하세요..env 파일. 이를 위해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>
  );
}