Tomo 설정 - DATA Foundation Docs

선택 사항: 공식 TomoEVMKit 문서공식 Wagmi + TomoEVMKit 설치 문서는 여기에서 확인할 수 있습니다.

의존성 설치

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

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

yarn add @story-protocol/core-sdk viem @tomo-inc/tomo-evm-kit wagmi  @tanstack/react-query

설정

예제로 들어가기 전에 두 가지를 먼저 설정해 두세요:

.env 파일에 NEXT_PUBLIC_RPC_PROVIDER_URL이 설정되어 있는지 확인하세요.
- 공개 기본 RPC(https://aeneid.datarpc.io)를 사용하거나, 여기에서 다른 RPC를 사용할 수 있습니다.
.env 파일에 NEXT_PUBLIC_TOMO_CLIENT_ID가 설정되어 있는지 확인하세요. Tomo Dashboard에 로그인하여 프로젝트를 생성하면 됩니다.
.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>
  );
}

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import { PropsWithChildren } from "react";
import Web3Providers from "./Web3Providers";
import { useConnectModal } from "@tomo-inc/tomo-evm-kit";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Example",
  description: "This is an Example DApp",
};

export default function RootLayout({ children }: PropsWithChildren) {
  const { openConnectModal } = useConnectModal();

  return (
    <html lang="en">
      <body>
        <Web3Providers>
          <button onClick={openConnectModal}>Connect Wallet</button>
          {children}
        </Web3Providers>
      </body>
    </html>
  );
}

import { custom, toHex } from 'viem';
import { useWalletClient } from "wagmi";
import { StoryClient, StoryConfig } from "@story-protocol/core-sdk";

// example of how you would now use the fully setup sdk

export default function TestComponent() {
  const { data: wallet } = useWalletClient();

  async function setupStoryClient(): Promise<StoryClient> {
    const config: StoryConfig = {
      wallet: wallet,
      transport: custom(wallet!.transport),
      chainId: "aeneid",
    };
    const client = StoryClient.newClient(config);
    return client;
  }

  async function registerIp() {
    const client = await setupStoryClient();
    const response = await client.ipAsset.registerIpAsset({
      nft: {
        type: 'minted',
        nftContract: '0x01...',
        tokenId: '1',
      }
      ipMetadata: {
        ipMetadataURI: "test-metadata-uri",
        ipMetadataHash: toHex("test-metadata-hash", { size: 32 }),
        nftMetadataURI: "test-nft-metadata-uri",
        nftMetadataHash: toHex("test-nft-metadata-hash", { size: 32 }),
      }
    });
    console.log(
      `Root IPA created at tx hash ${response.txHash}, IPA ID: ${response.ipId}`
    );
  }

  return (
    {/* */}
  )
}

⌘I