Skip to content

Latest commit

 

History

History

react-sdk

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
generator
generator
 
 
src
src
 
 
test
test
 
 
.env.example
.env.example
 
 
.eslintrc.cjs
.eslintrc.cjs
 
 
README.MD
README.MD
 
 
jest.config.js
jest.config.js
 
 
package.json
package.json
 
 
tsconfig.json
tsconfig.json
 
 

README.MD

Story Protocol React SDK

The react-sdk is a library that provides a set of hooks to interact with the SDK. It is designed to be used in a React application.

How to use Story Protocol SDK in Your Project

Generate React SDK

  1. Install the dependencies
pnpm install
  1. Update the @story-protocol/core-sdk package version in the packages/react-sdk/package.json file to the latest version.

Important: Once publish core-sdk, you need to update the core-sdk version in the react-sdk package.json file.

  1. Generate the SDK
pnpm run generate

This SDK is generated using the command pnpm run generate. The source code resides in the packages/sdk directory and the generated SDK can be found in the packages/react-sdk folder.

How to use Story Protocol React SDK in Your Project

  • Install Story Protocol React SDK
pnpm install @story-protocol/react-sdk
  • Import the provider in your React application
import { StoryProvider } from "@story-protocol/react-sdk";
const client = StoryClient.newClient(config);
 <StoryProvider
  config={{
    chainId: "sepolia",
    transport: http("RPC_URL"),
    wallet: walletClient,
  }}
  </StoryProvider>
  • Use the hooks in your component
import { useIpAsset } from "@story-protocol/react-sdk";
const { data, error, loading, register } = useIpAsset();
register({ nftContract: "0x1234", tokenId: "1" });

How To Build and Test Story Protocol React SDK for local testing

  • Install yalc
npm install -g yalc
  • For manual testing of the react-sdk, set up a separate web project. The guide below uses yalc to link the react-sdk locally, enabling its installation and import for testing.

Under the typescript-sdk/packages/react-sdk directory:

  • Execute npm run build to build your latest code.

  • Run yalc publish. You should see a message like @story-protocol/react-sdk@<version> published in store. (Note: The version number may vary).

  • To set up your testing environment (e.g., a new Next.js project), use yalc add @story-protocol/react-sdk@<version> (ensure the version number is updated accordingly).

  • Run pnpm install. This installs @story-protocol/react-sdk@<version> with your local changes.

Steps to Refresh the Changes

Under the typescript-sdk/packages/react-sdk directory:

  • Execute npm run build to build your latest code.
  • Run yalc push.

In your testing environment:

  • Run yalc update to pull the latest changes.