Optional: Official WalletConnect Docs

Check out the official Wagmi + Reown installation docs here.

​
Install the Dependencies

npm install --save @story-protocol/core-sdk @reown/appkit @reown/appkit-adapter-wagmi wagmi viem @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.
  2. Make sure to have NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID set up in your .env file. Do this by logging into Reown (prev. WalletConnect) and creating a project.
import { cookieStorage, createStorage, http } from "@wagmi/core";
import { WagmiAdapter } from "@reown/appkit-adapter-wagmi";
import { mainnet, arbitrum } from "@reown/appkit/networks";
import { aeneid } from "@story-protocol/core-sdk";

// Get projectId from https://cloud.reown.com
export const projectId = process.env.NEXT_PUBLIC_PROJECT_ID;

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

export const networks = [aeneid];

//Set up the Wagmi Adapter (Config)
export const wagmiAdapter = new WagmiAdapter({
  storage: createStorage({
    storage: cookieStorage,
  }),
  ssr: true,
  projectId,
  networks,
});

export const config = wagmiAdapter.wagmiConfig;