diff --git a/README.md b/README.md index 264e41e..e30877e 100644 --- a/README.md +++ b/README.md @@ -1,14 +1,10 @@ -import { Meta } from "@storybook/blocks" - - - # Storykit Plug-and-play React components for Story Protocol. ## Installation -_Storykit is currently a private github package so you need repo access and a personal access token to use_ +_Storykit is currently a private github package so you will need repo access and a personal access token to use_ 1 . Create a personal access token: [github.com/settings/tokens](https://github.com/settings/tokens) @@ -29,7 +25,7 @@ The first line authenticates you with the github package registry, the second li npm install @storyprotocol/storykit @tanstack/react-query ``` -5 . Currently Story Protocol api credetials must be defined in the environment variables, add them to your `.env.local`: +5 . Story Protocol api credentials must be defined in your environment variables, add them to the `.env.local`: ```bash NEXT_PUBLIC_API_BASE_URL="https://edge.stg.storyprotocol.net" @@ -39,27 +35,18 @@ NEXT_PUBLIC_SIMPLE_HASH_API_KEY="SIMPLEHASH_API_KEY_HERE" ## Deploying on vercel -To deploy on vercel, you can either include an `.npmrc` file with the following contents (note the curly braces) in the root, and add your access token to the `NPM_TOKEN` vercel environment variable: - -```bash -//npm.pkg.github.com/:_authToken=${NPM_TOKEN} -@storyprotocol/storykit:registry=https://npm.pkg.github.com -``` - -#### OR... - -You can add all the content of the `.npmrc` file, including your personal access token, to a `NPM_RC` vercel environment variable. +Add all the content of the `.npmrc` file, including your personal access token, to a `NPM_RC` vercel environment variable. See the [vercel docs](https://vercel.com/guides/using-private-dependencies-with-vercel) for more information. ## Dependencies -Storkykit requires [@tanstack/react-query](https://tanstack.com/query/latest), some components have additional dependencies including: +Storykit requires [@tanstack/react-query](https://tanstack.com/query/latest), some components have additional dependencies including: - [react-apexcharts](https://www.npmjs.com/package/react-apexcharts) - [react-force-graph-2d](https://www.npmjs.com/package/react-force-graph-2d) -See the individual component docs ro see if they require an additional dependency or install them all at once with: +See the component docs to see if they require an additional dependency or install them all at once with: ```bash npm install @storyprotocol/storykit @tanstack/react-query react-apexcharts react-force-graph-2d @@ -180,6 +167,8 @@ const ExampleComponent = () => { Some components require the IpProvider to supply asset data ```typescript +"use client" + import { IpProvider, IpGraph } from "@storyprotocol/storykit" const ExamplePage = () => { @@ -196,6 +185,8 @@ const ExamplePage = () => { The IpProvider is already included in the IpWidget ```typescript +"use client" + import { IpWidget } from "@storyprotocol/storykit" const ExamplePage = () => { diff --git a/packages/storykit/src/stories/Introduction.mdx b/packages/storykit/src/stories/Introduction.mdx index aafbacc..c6e7b3b 100644 --- a/packages/storykit/src/stories/Introduction.mdx +++ b/packages/storykit/src/stories/Introduction.mdx @@ -8,7 +8,7 @@ Plug-and-play React components for Story Protocol. ## Installation -_Storykit is currently a private github package so you need repo access and a personal access token to use_ +_Storykit is currently a private github package so you will need repo access and a personal access token to use_ 1 . Create a personal access token: [github.com/settings/tokens](https://github.com/settings/tokens) @@ -29,7 +29,7 @@ The first line authenticates you with the github package registry, the second li npm install @storyprotocol/storykit @tanstack/react-query ``` -5 . Currently Story Protocol api credetials must be defined in the environment variables, add them to your `.env.local`: +5 . Story Protocol api credentials must be defined in your environment variables, add them to the `.env.local`: ```bash NEXT_PUBLIC_API_BASE_URL="https://edge.stg.storyprotocol.net" @@ -39,27 +39,18 @@ NEXT_PUBLIC_SIMPLE_HASH_API_KEY="SIMPLEHASH_API_KEY_HERE" ## Deploying on vercel -To deploy on vercel, you can either include an `.npmrc` file with the following contents (note the curly braces) in the root, and add your access token to the `NPM_TOKEN` vercel environment variable: - -```bash -//npm.pkg.github.com/:_authToken=${NPM_TOKEN} -@storyprotocol/storykit:registry=https://npm.pkg.github.com -``` - -OR... - -You can add all the content of the `.npmrc` file, including your personal access token, to a `NPM_RC` vercel environment variable. +Add all the content of the `.npmrc` file, including your personal access token, to a `NPM_RC` vercel environment variable. See the [vercel docs](https://vercel.com/guides/using-private-dependencies-with-vercel) for more information. ## Dependencies -Storkykit requires [@tanstack/react-query](https://tanstack.com/query/latest), some components have additional dependencies including: +Storykit requires [@tanstack/react-query](https://tanstack.com/query/latest), some components have additional dependencies including: - [react-apexcharts](https://www.npmjs.com/package/react-apexcharts) - [react-force-graph-2d](https://www.npmjs.com/package/react-force-graph-2d) -See the individual component docs ro see if they require an additional dependency or install them all at once with: +See the component docs ro see if they require an additional dependency or install them all at once with: ```bash npm install @storyprotocol/storykit @tanstack/react-query react-apexcharts react-force-graph-2d @@ -180,6 +171,8 @@ const ExampleComponent = () => { Some components require the IpProvider to supply asset data ```typescript +"use client" + import { IpProvider, IpGraph } from "@storyprotocol/storykit" const ExamplePage = () => { @@ -196,6 +189,8 @@ const ExamplePage = () => { The IpProvider is already included in the IpWidget ```typescript +"use client" + import { IpWidget } from "@storyprotocol/storykit" const ExamplePage = () => {