Wagmi + WalletConnect Setup

Optional: Check out the official Wagmi + WalletConnect installation docs here.

Install the Dependencies

npm install --save @story-protocol/react-sdk @web3modal/wagmi wagmi viem @tanstack/react-query

pnpm install @story-protocol/core-sdk viem

yarn add @story-protocol/core-sdk viem

Setup

Before diving into the example, make sure you have two things setup:

Make sure to have NEXT_PUBLIC_RPC_PROVIDER_URL for your desired chain set up in your .env file. You can use a public default one (NEXT_PUBLIC_RPC_PROVIDER_URL=https://ethereum-sepolia-rpc.publicnode.com) or, for a potentially faster experience, sign up for a free Alchemy account and create an Ethereum Sepolia test application to get your own private RPC URL. Once your application is created, you can click the "API Key" button and then copy the link in the HTTP box.
Make sure to have NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID set up in your .env file. Do this by logging into WalletConnect and creating a project.

You can then configure your DApp with help from the following example:

"use client";
import { defaultWagmiConfig } from "@web3modal/wagmi/react/config";
import { cookieStorage, createStorage, http, useWalletClient } from "wagmi";
import { mainnet, sepolia } from "wagmi/chains";
import React, { PropsWithChildren, ReactNode } from "react";
import { createWeb3Modal } from "@web3modal/wagmi/react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { State, WagmiProvider } from "wagmi";
import { StoryProvider } from "@story-protocol/react-sdk";

// Get projectId from https://cloud.walletconnect.com
const projectId = process.env.NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID;

if (!projectId) throw new Error("Project ID is not defined");

const metadata = {
  name: "Artcast",
  description: "Create and remix each others AI-generated images.",
  url: "https://artcast.ai", // origin must match your domain & subdomain
  icons: ["https://artcast.ai/logo.png"],
};

// Create wagmiConfig
const chains = [mainnet, sepolia] as const;
const config = defaultWagmiConfig({
  chains,
  projectId,
  metadata,
  ssr: true,
  storage: createStorage({
    storage: cookieStorage,
  }),
});

// Setup queryClient
const queryClient = new QueryClient();

// Create modal
createWeb3Modal({
  metadata,
  //@ts-ignore
  wagmiConfig: config,
  projectId,
  enableAnalytics: true, // Optional - defaults to your Cloud configuration
});

export default function Web3Providers({
  children,
  initialState,
}: {
  children: ReactNode;
  initialState?: State;
}) {
  return (
    <WagmiProvider config={config} initialState={initialState}>
      <QueryClientProvider client={queryClient}>
        <StoryProviderWrapper>{children}</StoryProviderWrapper>
      </QueryClientProvider>
    </WagmiProvider>
  );
}

// we use this component to pass in our
// wallet from wagmi
function StoryProviderWrapper({ children }: PropsWithChildren) {
  const { data: wallet } = useWalletClient();

  // react sdk will throw an error if wallet is
  // undefined, meaning user has not logged in yet
  // using the WalletConnect login
  if (!wallet) {
    return <>{children}</>;
  }

  return (
    <StoryProvider
      config={{
        chainId: "sepolia",
        transport: http(process.env.NEXT_PUBLIC_RPC_PROVIDER_URL),
        wallet: wallet,
      }}
    >
      {children}
    </StoryProvider>
  );
}

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import { PropsWithChildren } from "react";
import Web3Providers from "./Web3Providers";

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

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

export default function RootLayout({
  children
}: PropsWithChildren) {
  return (
    <html lang="en">
      <body>
        <Web3Providers>{children}</Web3Providers>
      </body>
    </html>
  );
}

import { custom, toHex } from 'viem';
import { useIpAsset } from "@story-protocol/react-sdk";

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

export default function TestComponent() {
  const { register } = useIpAsset();
  
  const response = await register({
    nftContract: '0x01...',
    tokenId: '1',
    metadata: {
      metadataURI: "test-metadata-uri",
      metadataHash: toHex("test-metadata-hash", { size: 32 }),
      nftMetadataHash: toHex("test-nft-metadata-hash", { size: 32 }),
    },
    txOptions: { waitForTransaction: true },
  });
  console.log(
    `Root IPA created at tx hash ${response.txHash}, IPA ID: ${response.ipId}`
  );
  
  return (
    {/* */} 
  )
}