> ## Documentation Index
> Fetch the complete documentation index at: https://docs.story.foundation/llms.txt
> Use this file to discover all available pages before exploring further.
# Tomo Setup
> Learn how to setup TomoEVMKit in your Story DApp.
**Optional: Official TomoEVMKit Docs**
Check out the official Wagmi + TomoEVMKit installation docs [here](https://docs.tomo.inc/tomo-sdk/tomoevmkit/quick-start).
## Install the Dependencies
```bash npm theme={null}
npm install --save @story-protocol/core-sdk @tomo-inc/tomo-evm-kit wagmi viem @tanstack/react-query
```
```bash pnpm theme={null}
pnpm install @story-protocol/core-sdk viem @tomo-inc/tomo-evm-kit wagmi @tanstack/react-query
```
```bash yarn theme={null}
yarn add @story-protocol/core-sdk viem @tomo-inc/tomo-evm-kit wagmi @tanstack/react-query
```
## Setup
Before diving into the example, make sure you have two things setup:
1. Make sure to have `NEXT_PUBLIC_RPC_PROVIDER_URL` set up in your `.env` file.
* You can use the public default one (`https://aeneid.storyrpc.io`) or any other RPC [here](/network/network-info/aeneid#rpcs).
2. Make sure to have `NEXT_PUBLIC_TOMO_CLIENT_ID` set up in your `.env` file. Do this by logging into the [Tomo Dashboard](https://dashboard.tomo.inc/) and creating a project.
3. Make sure to have `NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID` set up in your `.env` file. Do this by logging into [Reown (prev. WalletConnect)](https://reown.com/) and creating a project.
```jsx Web3Providers.tsx theme={null}
"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 Story 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 (
{children}
);
}
```
```jsx layout.tsx theme={null}
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 (
{children}
);
}
```
```jsx TestComponent.tsx theme={null}
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 {
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 (
{/* */}
)
}
```