React SDK Setup

Prerequisite

For running the tutorial for developers, we require node version 16 or later version and npm version 8 to be installed in your environment. To install node and npm, we recommend you go to the Node.js official website and download the latest LTS (Long Term Support) version.

If you want to upgrade node to 16 or higher version, we recommend you to use nvm (Node Version Manager). If you want to upgrade npm to the latest version, you can run the command npm install -g nvm.

Create a React Project

Create a new React project using create-react-app:

npx create-react-app my-story-protocol-example

Go into the folder and run npm init to initialize the project:

cd my-story-protocol-example/
npm init

You can keep all values as default by hitting enter key when npm init command prompting you to input package name, version,description etc. After the command is executed, you will see a file named package.json is created.

Install the Dependencies

In the current folder my-story-protocol-example, install the Story Protocol React SDK package, as well as viem (https://www.npmjs.com/package/viem) to access the DeFi wallet accounts, wagmi & connectkit:

npm install --save @story-protocol/react [email protected] wagmi connectkit
pnpm install @story-protocol/[email protected] [email protected]
yarn add @story-protocol/[email protected] [email protected]

Set up a Web3Provider

First, make sure to add the following to your .env file:

Next, create a file called Web3Provider.tsx that looks like this:

'use client';

import { WagmiProvider, createConfig, http } from 'wagmi';
import { sepolia } from 'wagmi/chains';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ConnectKitProvider, getDefaultConfig } from 'connectkit';
import { ReactNode } from 'react';

const config = createConfig(
  getDefaultConfig({
    chains: [sepolia],
    transports: {
      [sepolia.id]: http(
        process.env.NEXT_PUBLIC_RPC_PROVIDER_URL ?? 'https://rpc.ankr.com/eth_sepolia'
      ),
    },
    ssr: true,
    walletConnectProjectId: process.env.NEXT_PUBLIC_WC_PROJECT_ID!, // Required API Keys
    appName: 'Your App Name',
  })
);

const queryClient = new QueryClient();

export const Web3Provider = ({ children }: { children: ReactNode }) => {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <ConnectKitProvider>{children}</ConnectKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
};

We can use this Web3Provider to wrap our app in the layout.tsx like so:

import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import './globals.css';
import { Web3Provider } from '../utils/Web3Provider';

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

export const metadata: Metadata = {
  title: 'Story Protocol React SDK Test',
  description: 'Story Protocol React SDK Test',
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <Web3Provider>
        <body className={inter.className}>{children}</body>
      </Web3Provider>
    </html>
  );
}