한국어
Story DApp에서 Dynamic Wallet을 설정하는 방법을 알아보세요.
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
예제를 시작하기 전에 두 가지를 설정해야 합니다:
NEXT_PUBLIC_RPC_PROVIDER_URL
.env
https://aeneid.storyrpc.io
NEXT_PUBLIC_DYNAMIC_ENV_ID
"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> ); }