├── .eslintrc.js ├── .github ├── CODEOWNERS ├── ISSUE_TEMPLATE │ ├── bug_report.yml │ └── feature_request.yml └── workflows │ └── publish-package.yml ├── .gitignore ├── .husky └── pre-commit ├── .nvmrc ├── .prettierignore ├── .vscode └── settings.json ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE.md ├── README.md ├── examples ├── custom-theme │ ├── .eslintrc.js │ ├── .gitignore │ ├── README.md │ ├── app │ │ ├── IpHeader.tsx │ │ ├── Providers.tsx │ │ ├── base.css │ │ ├── fonts.css │ │ ├── layout.tsx │ │ └── page.tsx │ ├── next.config.mjs │ ├── package.json │ ├── postcss.config.js │ ├── tailwind.config.js │ └── tsconfig.json ├── license-selector │ ├── .eslintrc.js │ ├── .gitignore │ ├── README.md │ ├── app │ │ ├── Providers.tsx │ │ ├── base.css │ │ ├── layout.tsx │ │ └── page.tsx │ ├── components │ │ ├── PilFlavorForm.tsx │ │ └── ui │ │ │ ├── form.tsx │ │ │ └── label.tsx │ ├── lib │ │ └── utils.ts │ ├── next.config.mjs │ ├── package.json │ ├── postcss.config.js │ ├── tailwind.config.js │ └── tsconfig.json └── simple-setup │ ├── .eslintrc.js │ ├── .gitignore │ ├── README.md │ ├── app │ ├── IpHeader.tsx │ ├── Providers.tsx │ ├── base.css │ ├── layout.tsx │ └── page.tsx │ ├── next.config.mjs │ ├── package.json │ ├── postcss.config.js │ ├── tailwind.config.js │ └── tsconfig.json ├── package.json ├── packages ├── api-schema │ ├── openapi │ │ └── schema.json │ ├── package.json │ ├── scripts │ │ └── generate-types.ts │ ├── tsconfig.json │ └── types │ │ └── index.ts ├── config-eslint │ ├── README.md │ ├── library.js │ ├── next.js │ ├── package.json │ └── react-internal.js ├── config-prettier │ ├── index.json │ └── package.json ├── config-typescript │ ├── base.json │ ├── nextjs.json │ ├── package.json │ └── react-library.json └── storykit │ ├── .eslintrc.cjs │ ├── .gitignore │ ├── .storybook │ ├── assets │ │ └── story-logo.png │ ├── directors │ │ └── StoryProvider.tsx │ ├── global.css │ ├── main.ts │ ├── manager-head.html │ ├── manager.ts │ ├── preview.tsx │ └── theme.ts │ ├── package.json │ ├── postcss.config.cjs │ ├── rollup.config.js │ ├── scripts │ ├── generate-types.ts │ └── schema.json │ ├── src │ ├── components │ │ ├── Accordion │ │ │ ├── Accordion.tsx │ │ │ ├── __docs__ │ │ │ │ └── Accordion.stories.tsx │ │ │ └── index.ts │ │ ├── Button │ │ │ ├── Button.tsx │ │ │ ├── __docs__ │ │ │ │ └── Button.stories.tsx │ │ │ └── index.ts │ │ ├── Calendar │ │ │ ├── Calendar.tsx │ │ │ └── index.ts │ │ ├── Checkbox │ │ │ ├── Checkbox.tsx │ │ │ ├── __docs__ │ │ │ │ └── Checkbox.stories.tsx │ │ │ └── index.ts │ │ ├── CollectionGraph │ │ │ ├── CollectionGraph.tsx │ │ │ ├── __docs__ │ │ │ │ ├── CollectionGraph.mdx │ │ │ │ ├── CollectionGraph.stories.tsx │ │ │ │ └── Example.tsx │ │ │ ├── index.ts │ │ │ └── styles.css │ │ ├── DateInputPicker │ │ │ ├── DateInputPicker.tsx │ │ │ ├── __docs__ │ │ │ │ └── DateInputPicker.stories.tsx │ │ │ ├── dateUtils.ts │ │ │ └── index.ts │ │ ├── Input │ │ │ ├── Input.tsx │ │ │ ├── __docs__ │ │ │ │ └── Input.stories.tsx │ │ │ └── index.ts │ │ ├── IpGraph │ │ │ ├── IpGraph.tsx │ │ │ ├── __docs__ │ │ │ │ ├── Example.tsx │ │ │ │ ├── IpGraph.mdx │ │ │ │ └── IpGraph.stories.tsx │ │ │ ├── index.ts │ │ │ └── styles.css │ │ ├── IpLicenseAccordion │ │ │ ├── IpLicenseAccordion.tsx │ │ │ ├── __docs__ │ │ │ │ ├── Example.tsx │ │ │ │ ├── IpLicenseAccordion.mdx │ │ │ │ └── IpLicenseAccordion.stories.tsx │ │ │ └── index.tsx │ │ ├── IpWidget │ │ │ ├── IpWidget.tsx │ │ │ ├── __docs__ │ │ │ │ ├── Example.tsx │ │ │ │ ├── IpWidget.mdx │ │ │ │ └── IpWidget.stories.tsx │ │ │ ├── __tests__ │ │ │ │ └── IPAssetWidget.test.tsx │ │ │ ├── index.ts │ │ │ └── styles.css │ │ ├── LicenseFlavorSelector │ │ │ ├── LicenseFlavorSelector.tsx │ │ │ ├── __docs__ │ │ │ │ ├── Example.tsx │ │ │ │ ├── LicenseFlavorSelector.mdx │ │ │ │ └── LicenseFlavorSelector.stories.tsx │ │ │ └── index.ts │ │ ├── LicenseTermsList │ │ │ ├── LicenseTermsList.tsx │ │ │ ├── __docs__ │ │ │ │ ├── Example.tsx │ │ │ │ ├── LicenseTermsList.mdx │ │ │ │ └── LicenseTermsList.stories.tsx │ │ │ └── index.tsx │ │ ├── Popover │ │ │ ├── Popover.tsx │ │ │ ├── __docs__ │ │ │ │ └── Popover.stories.tsx │ │ │ └── index.ts │ │ ├── RadioGroup │ │ │ ├── RadioGroup.tsx │ │ │ ├── __docs__ │ │ │ │ └── RadioGroup.stories.tsx │ │ │ └── index.ts │ │ ├── RoyaltyGraph │ │ │ ├── RoyaltyGraph.tsx │ │ │ ├── __docs__ │ │ │ │ ├── Example.tsx │ │ │ │ ├── RoyaltyGraph.mdx │ │ │ │ └── RoyaltyGraph.stories.tsx │ │ │ ├── index.ts │ │ │ └── styles.css │ │ ├── index.ts │ │ └── utility │ │ │ ├── If.tsx │ │ │ └── context.tsx │ ├── constants │ │ ├── api.ts │ │ ├── chains.ts │ │ ├── index.ts │ │ └── pil-flavors.ts │ ├── declarations.d.ts │ ├── global.css │ ├── hooks │ │ ├── index.ts │ │ ├── stories │ │ │ ├── (components) │ │ │ │ ├── CopyText.tsx │ │ │ │ └── DataTable.tsx │ │ │ ├── useCollection.stories.tsx │ │ │ ├── useCollectionByAddress.stories.tsx │ │ │ ├── useCollections.stories.tsx │ │ │ ├── useDetailedIpLicenseTerms.stories.tsx │ │ │ ├── useDispute.stories.tsx │ │ │ ├── useDisputes.stories.tsx │ │ │ ├── useIpAsset.stories.tsx │ │ │ ├── useIpAssetEdges.stories.tsx │ │ │ ├── useIpAssetMetadata.stories.tsx │ │ │ ├── useIpAssetTerms.stories.tsx │ │ │ ├── useIpAssets.stories.tsx │ │ │ ├── useIpAssetsTerms.stories.tsx │ │ │ ├── useIpGroupEdges.stories.tsx │ │ │ ├── useIpGroups.stories.tsx │ │ │ ├── useLatestTransactions.stories.tsx │ │ │ ├── useLicenseMintingFee.stories.tsx │ │ │ ├── useLicenseMintingFees.stories.tsx │ │ │ ├── useLicenseTemplate.stories.tsx │ │ │ ├── useLicenseTemplates.stories.tsx │ │ │ ├── useLicenseTerms.stories.tsx │ │ │ ├── useLicenseToken.stories.tsx │ │ │ ├── useLicenseTokens.stories.tsx │ │ │ ├── useLicensesTerms.stories.tsx │ │ │ ├── useModule.stories.tsx │ │ │ ├── useModules.stories.tsx │ │ │ ├── useNFTByTokenId.stories.tsx │ │ │ ├── useNFTByTokenIds.stories.tsx │ │ │ ├── useNFTByWallet.stories.tsx │ │ │ ├── useOwnersByTokenId.stories.tsx │ │ │ ├── usePermission.stories.tsx │ │ │ ├── usePermissions.stories.tsx │ │ │ ├── useRoyaltyPayment.stories.tsx │ │ │ ├── useRoyaltyPayments.stories.tsx │ │ │ ├── useTransaction.stories.tsx │ │ │ └── useTransactions.stories.tsx │ │ ├── useCollection.ts │ │ ├── useCollectionByAddress.ts │ │ ├── useCollections.ts │ │ ├── useDetailedIpLicenseTerms.ts │ │ ├── useDispute.ts │ │ ├── useDisputes.ts │ │ ├── useIpAsset.ts │ │ ├── useIpAssetEdges.ts │ │ ├── useIpAssetMetadata.ts │ │ ├── useIpAssetTerms.ts │ │ ├── useIpAssets.ts │ │ ├── useIpAssetsTerms.ts │ │ ├── useIpGroupEdges.ts │ │ ├── useIpGroups.ts │ │ ├── useLatestTransactions.ts │ │ ├── useLicenseMintingFee.ts │ │ ├── useLicenseMintingFees.ts │ │ ├── useLicenseTemplate.ts │ │ ├── useLicenseTemplates.ts │ │ ├── useLicenseTerms.ts │ │ ├── useLicenseToken.ts │ │ ├── useLicenseTokens.ts │ │ ├── useLicensesTerms.ts │ │ ├── useModule.ts │ │ ├── useModules.ts │ │ ├── useNFTByTokenId.ts │ │ ├── useNFTByTokenIds.ts │ │ ├── useNFTByWallet.ts │ │ ├── useOwnersByTokenId.ts │ │ ├── usePermission.ts │ │ ├── usePermissions.ts │ │ ├── useRoyaltyPayment.ts │ │ ├── useRoyaltyPayments.ts │ │ ├── useTransaction.ts │ │ └── useTransactions.ts │ ├── index.ts │ ├── lib │ │ ├── alchemy.ts │ │ ├── api │ │ │ ├── apiClient.ts │ │ │ ├── getCollection.ts │ │ │ ├── getCollections.ts │ │ │ ├── getDetailedIpLicenseTerms.ts │ │ │ ├── getDispute.ts │ │ │ ├── getDisputes.ts │ │ │ ├── getIpAsset.ts │ │ │ ├── getIpAssetEdges.ts │ │ │ ├── getIpAssetMetadata.ts │ │ │ ├── getIpAssetTerms.ts │ │ │ ├── getIpAssets.ts │ │ │ ├── getIpAssetsTerms.ts │ │ │ ├── getIpGroupEdges.ts │ │ │ ├── getIpGroups.ts │ │ │ ├── getLatestTransactions.ts │ │ │ ├── getLicenseMintingFee.ts │ │ │ ├── getLicenseMintingFees.ts │ │ │ ├── getLicenseTemplate.ts │ │ │ ├── getLicenseTemplates.ts │ │ │ ├── getLicenseTerms.ts │ │ │ ├── getLicenseToken.ts │ │ │ ├── getLicenseTokens.ts │ │ │ ├── getLicensesTerms.ts │ │ │ ├── getModule.ts │ │ │ ├── getModules.ts │ │ │ ├── getPermission.ts │ │ │ ├── getPermissions.ts │ │ │ ├── getQuery.ts │ │ │ ├── getRoyaltyPayment.ts │ │ │ ├── getRoyaltyPayments.ts │ │ │ ├── getTransaction.ts │ │ │ ├── getTransactions.ts │ │ │ ├── index.ts │ │ │ └── listQuery.ts │ │ ├── functions │ │ │ └── convertLicenseTermObject.ts │ │ ├── graph.ts │ │ ├── index.ts │ │ ├── royalty-graph.ts │ │ └── utils.ts │ ├── providers │ │ ├── IpProvider │ │ │ ├── IpProvider.tsx │ │ │ ├── __docs__ │ │ │ │ ├── Example.tsx │ │ │ │ ├── IpProvider.mdx │ │ │ │ └── IpProvider.stories.tsx │ │ │ └── index.tsx │ │ ├── IpRegistrationProvider │ │ │ ├── IpRegistrationProvider.tsx │ │ │ ├── __docs__ │ │ │ │ ├── Example.tsx │ │ │ │ ├── IpRegistrationProvider.mdx │ │ │ │ └── IpRegistrationProvider.stories.tsx │ │ │ └── index.tsx │ │ ├── RoyaltyGraphProvider │ │ │ ├── RoyaltyGraphProvider.tsx │ │ │ └── index.tsx │ │ ├── StoryKitProvider │ │ │ ├── StoryKitProvider.tsx │ │ │ ├── __docs__ │ │ │ │ ├── Example.tsx │ │ │ │ ├── StoryKitProvider.mdx │ │ │ │ └── StoryKitProvider.stories.tsx │ │ │ └── index.tsx │ │ └── index.ts │ ├── stories │ │ ├── Introduction.mdx │ │ └── data │ │ │ └── index.ts │ ├── styles │ │ ├── fonts.css │ │ └── themes.css │ ├── tests │ │ └── data │ │ │ ├── 0x195A5B433bbFb6481490cA12d1C95e5594Fb54C4-ipapolicy.json │ │ │ ├── 0x195A5B433bbFb6481490cA12d1C95e5594Fb54C4-policy.json │ │ │ ├── 0x5FCeDadBbDF710Ac3C528F6Aac9D1bD9ac18D9a8-license.json │ │ │ ├── 0x6510c5487312cfEd3e1b9939C6Cad33b5F47358F-royalty.json │ │ │ ├── 0x7907Cec258B28638FCA15d533800B2A13bd1f140-asset.json │ │ │ └── 0x7907Cec258B28638FCA15d533800B2A13bd1f140-nft.json │ └── types │ │ ├── alchemy.ts │ │ ├── assets.ts │ │ ├── chains.ts │ │ ├── index.ts │ │ ├── openapi.ts │ │ ├── royalty-graph.ts │ │ └── schema.ts │ ├── tailwind.config.js │ └── tsconfig.json ├── pnpm-lock.yaml ├── pnpm-workspace.yaml └── turbo.json /.eslintrc.js: -------------------------------------------------------------------------------- 1 | // This configuration only applies to the package manager root. 2 | /** @type {import("eslint").Linter.Config} */ 3 | module.exports = { 4 | root: true, 5 | extends: ["@storykit/eslint-config/library.js"], 6 | ignorePattern: ["apps/**", "packages/**"], 7 | }; 8 | -------------------------------------------------------------------------------- /.github/CODEOWNERS: -------------------------------------------------------------------------------- 1 | * @LeoHChen @samfairbairn @allenchuang @tea-x-random @SoYoung210 @DonFungible 2 | -------------------------------------------------------------------------------- /.github/workflows/publish-package.yml: -------------------------------------------------------------------------------- 1 | name: publish on github 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | - beta 8 | 9 | jobs: 10 | publish-gpr: 11 | runs-on: ubuntu-latest 12 | steps: 13 | - uses: actions/checkout@v2 14 | 15 | - uses: pnpm/action-setup@v2.0.1 16 | with: 17 | version: 9.15.4 18 | 19 | - uses: actions/setup-node@v1 20 | with: 21 | node-version: 20.0.0 22 | cache: pnpm 23 | registry-url: https://npm.pkg.github.com/ 24 | scope: "@storyprotocol" 25 | 26 | - name: Install dependencies 27 | run: pnpm install 28 | 29 | - name: Build 30 | run: pnpm build 31 | 32 | - name: Publish to npm 33 | run: | 34 | cd packages/storykit 35 | if [[ "${{ github.ref }}" == "refs/heads/beta" ]]; then 36 | npm publish --tag beta 37 | elif [[ "${{ github.ref }}" == "refs/heads/main" ]]; then 38 | npm publish --tag latest 39 | fi 40 | env: 41 | NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}} 42 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # Dependencies 4 | node_modules 5 | .pnp 6 | .pnp.js 7 | 8 | # Local env files 9 | .env 10 | .env.local 11 | .env.development.local 12 | .env.test.local 13 | .env.production.local 14 | 15 | # Testing 16 | coverage 17 | 18 | # Turbo 19 | .turbo 20 | 21 | # Vercel 22 | .vercel 23 | 24 | # Build Outputs 25 | .next/ 26 | out/ 27 | build 28 | dist 29 | 30 | 31 | # Debug 32 | npm-debug.log* 33 | yarn-debug.log* 34 | yarn-error.log* 35 | 36 | # Misc 37 | .DS_Store 38 | *.pem 39 | 40 | .yalc 41 | yalc.lock 42 | 43 | __archive 44 | 45 | # anima 46 | .anima 47 | 48 | .npmrc 49 | .env*.local 50 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | pnpm exec lint-staged -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | 20 -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | dist 2 | node_modules 3 | coverage 4 | examples 5 | .next 6 | *.hbs -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.formatOnSave": true, 3 | "editor.defaultFormatter": "esbenp.prettier-vscode", 4 | "editor.codeActionsOnSave": { 5 | "source.fixAll": "explicit" 6 | }, 7 | "[javascript]": { 8 | "editor.defaultFormatter": "esbenp.prettier-vscode" 9 | }, 10 | "[typescript]": { 11 | "editor.defaultFormatter": "esbenp.prettier-vscode" 12 | }, 13 | "[json]": { 14 | "editor.defaultFormatter": "esbenp.prettier-vscode" 15 | }, 16 | "[jsonc]": { 17 | "editor.defaultFormatter": "esbenp.prettier-vscode" 18 | } 19 | } -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 Story Protocol Inc. 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /examples/custom-theme/.eslintrc.js: -------------------------------------------------------------------------------- 1 | /** @type {import("eslint").Linter.Config} */ 2 | module.exports = { 3 | root: true, 4 | extends: ["@storykit/eslint-config/next.js"], 5 | parser: "@typescript-eslint/parser", 6 | // parserOptions: { 7 | // project: true, 8 | // }, 9 | } 10 | -------------------------------------------------------------------------------- /examples/custom-theme/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | .yarn/install-state.gz 8 | 9 | # testing 10 | /coverage 11 | 12 | # next.js 13 | /.next/ 14 | /out/ 15 | 16 | # production 17 | /build 18 | 19 | # misc 20 | .DS_Store 21 | *.pem 22 | 23 | # debug 24 | npm-debug.log* 25 | yarn-debug.log* 26 | yarn-error.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | next-env.d.ts 37 | -------------------------------------------------------------------------------- /examples/custom-theme/README.md: -------------------------------------------------------------------------------- 1 | # Custom Theme Example 2 | 3 | The same simple setup as the [simple-setup example](../simple-setup/README.md), but with a custom theme called `my-theme` defined in [`app/base.css`](./app/base.css), and passed to the `StoryKitProvider` in [`app/Providers.tsx`](./app/Providers.tsx). 4 | 5 | ## Getting Started 6 | 7 | First, run the development server: 8 | 9 | ```bash 10 | npm run dev 11 | # or 12 | yarn dev 13 | # or 14 | pnpm dev 15 | # or 16 | bun dev 17 | ``` 18 | 19 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 20 | -------------------------------------------------------------------------------- /examples/custom-theme/app/IpHeader.tsx: -------------------------------------------------------------------------------- 1 | import { useIpContext } from "@storyprotocol/storykit" 2 | 3 | export default function IpHeader() { 4 | const { nftData, ownersData } = useIpContext() 5 | return ( 6 |
7 |

{nftData?.name}

8 |

By {ownersData?.owners[0]}

9 | {nftData?.image.thumbnailUrl || nftData?.image.cachedUrl ? 10 | // eslint-disable-next-line @next/next/no-img-element 11 | {nftData?.name 16 | : null} 17 |
18 | ) 19 | } 20 | -------------------------------------------------------------------------------- /examples/custom-theme/app/Providers.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import { QueryClientProvider, QueryClient } from "@tanstack/react-query" 4 | import { StoryKitProvider, STORYKIT_SUPPORTED_CHAIN } from "@storyprotocol/storykit" 5 | 6 | const API_KEY = process.env.NEXT_PUBLIC_STORY_PROTOCOL_X_API_KEY as string 7 | const ALCHEMY_API_KEY = process.env.NEXT_PUBLIC_ALCHEMY_API_KEY as string 8 | 9 | export default function Providers({ children }: { children: React.ReactNode }) { 10 | const queryClient = new QueryClient() 11 | return ( 12 | 13 | 14 | {children} 15 | 16 | 17 | ) 18 | } 19 | -------------------------------------------------------------------------------- /examples/custom-theme/app/base.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | 3 | @layer base { 4 | :root, .my-theme { 5 | --sk-font-family: "Itim", sans-serif; 6 | --sk-background: 0 0% 98%; 7 | --sk-foreground: 298.63 100% 60.18%; 8 | --sk-success: 220.21 100% 65.5%; 9 | --sk-destructive: 275.84 100% 61.77%; 10 | } 11 | } 12 | 13 | @tailwind components; 14 | @tailwind utilities; -------------------------------------------------------------------------------- /examples/custom-theme/app/fonts.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Itim&display=swap'); -------------------------------------------------------------------------------- /examples/custom-theme/app/layout.tsx: -------------------------------------------------------------------------------- 1 | 2 | import Providers from "./Providers" 3 | import "./base.css" 4 | import "./fonts.css" 5 | 6 | export default function RootLayout({ 7 | children, 8 | }: Readonly<{ 9 | children: React.ReactNode 10 | }>) { 11 | return ( 12 | 13 | 14 | 15 | {children} 16 | 17 | 18 | 19 | ) 20 | } 21 | -------------------------------------------------------------------------------- /examples/custom-theme/app/page.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import { IpProvider, IpLicenseAccordion } from "@storyprotocol/storykit" 4 | import IpHeader from "./IpHeader" 5 | 6 | export default function Home() { 7 | return ( 8 |
9 |
10 | 11 |
12 | 13 | 14 |
15 |
16 |
17 |
18 | 19 | ) 20 | } 21 | -------------------------------------------------------------------------------- /examples/custom-theme/next.config.mjs: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | // transpilePackages: ["@storyprotocol/storykit"], 4 | } 5 | 6 | export default nextConfig 7 | -------------------------------------------------------------------------------- /examples/custom-theme/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@example/custom-theme", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "prettier": "@storykit/prettier-config", 12 | "dependencies": { 13 | "@storyprotocol/storykit": "workspace:*", 14 | "@tanstack/react-query": "^5.28.9", 15 | "next": "14.1.4", 16 | "react": "^18", 17 | "react-apexcharts": "^1.4.1", 18 | "react-dom": "^18", 19 | "react-force-graph-2d": "^1.25.4" 20 | }, 21 | "devDependencies": { 22 | "@next/eslint-plugin-next": "^14.1.1", 23 | "@storykit/eslint-config": "workspace:*", 24 | "@storykit/prettier-config": "workspace:*", 25 | "@storykit/typescript-config": "workspace:*", 26 | "@types/node": "^20", 27 | "@types/react": "^18", 28 | "@types/react-dom": "^18", 29 | "autoprefixer": "^10.4.20", 30 | "eslint": "^8.57.0", 31 | "eslint-config-next": "14.2.1", 32 | "postcss": "^8.4.38", 33 | "prettier": "^3.2.5", 34 | "tailwindcss": "^3.4.3", 35 | "typescript": "^5" 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /examples/custom-theme/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | } 6 | } -------------------------------------------------------------------------------- /examples/custom-theme/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: ["./app/**/*.{html,js,ts,jsx,tsx}", "./components/**/*.{html,js,ts,jsx,tsx}"], 4 | theme: { 5 | extend: { 6 | fontFamily: { 7 | sans: ["var(--sk-font-family)"], 8 | }, 9 | colors: { 10 | background: "hsl(var(--sk-background))", 11 | foreground: "hsl(var(--sk-foreground))", 12 | destructive: { 13 | DEFAULT: "hsl(var(--sk-destructive))", 14 | }, 15 | success: { 16 | DEFAULT: "hsl(var(--sk-success))", 17 | }, 18 | }, 19 | }, 20 | }, 21 | plugins: [], 22 | } 23 | 24 | -------------------------------------------------------------------------------- /examples/custom-theme/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@storykit/typescript-config/nextjs.json", 3 | "compilerOptions": { 4 | "plugins": [ 5 | { 6 | "name": "next" 7 | } 8 | ], 9 | "paths": { 10 | "@/*": [ 11 | "./*" 12 | ] 13 | }, 14 | "allowJs": true, 15 | "noEmit": true, 16 | "incremental": true, 17 | "resolveJsonModule": true, 18 | "jsx": "preserve" 19 | }, 20 | "include": [ 21 | "next-env.d.ts", 22 | "**/*.ts", 23 | "**/*.tsx", 24 | ".next/types/**/*.ts", 25 | "next.config.js" 26 | ], 27 | "exclude": [ 28 | "node_modules" 29 | ] 30 | } 31 | -------------------------------------------------------------------------------- /examples/license-selector/.eslintrc.js: -------------------------------------------------------------------------------- 1 | /** @type {import("eslint").Linter.Config} */ 2 | module.exports = { 3 | root: true, 4 | extends: ["@storykit/eslint-config/next.js"], 5 | parser: "@typescript-eslint/parser", 6 | // parserOptions: { 7 | // project: true, 8 | // }, 9 | } 10 | -------------------------------------------------------------------------------- /examples/license-selector/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | .yarn/install-state.gz 8 | 9 | # testing 10 | /coverage 11 | 12 | # next.js 13 | /.next/ 14 | /out/ 15 | 16 | # production 17 | /build 18 | 19 | # misc 20 | .DS_Store 21 | *.pem 22 | 23 | # debug 24 | npm-debug.log* 25 | yarn-debug.log* 26 | yarn-error.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | next-env.d.ts 37 | -------------------------------------------------------------------------------- /examples/license-selector/README.md: -------------------------------------------------------------------------------- 1 | # License Selector Example 2 | 3 | The [PilFlavorForm](./components/PilFlavorForm.tsx) component demonstrates how to use StoryKit's `LicenseSelector` within a `react-hook-form` form, to choose from one of the preset PIL flavors. 4 | 5 | ## Getting Started 6 | 7 | First, run the development server: 8 | 9 | ```bash 10 | npm run dev 11 | # or 12 | yarn dev 13 | # or 14 | pnpm dev 15 | # or 16 | bun dev 17 | ``` 18 | 19 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 20 | -------------------------------------------------------------------------------- /examples/license-selector/app/Providers.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import { QueryClientProvider, QueryClient } from "@tanstack/react-query" 4 | import { StoryKitProvider, STORYKIT_SUPPORTED_CHAIN } from "@storyprotocol/storykit" 5 | 6 | const API_KEY = process.env.NEXT_PUBLIC_STORY_PROTOCOL_X_API_KEY as string 7 | 8 | export default function Providers({ children }: { children: React.ReactNode }) { 9 | const queryClient = new QueryClient() 10 | return ( 11 | 12 | 13 | {children} 14 | 15 | 16 | ) 17 | } 18 | -------------------------------------------------------------------------------- /examples/license-selector/app/base.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /examples/license-selector/app/layout.tsx: -------------------------------------------------------------------------------- 1 | 2 | import Providers from "./Providers" 3 | import "./base.css" 4 | 5 | export default function RootLayout({ 6 | children, 7 | }: Readonly<{ 8 | children: React.ReactNode 9 | }>) { 10 | return ( 11 | 12 | 13 | 14 | {children} 15 | 16 | 17 | 18 | ) 19 | } 20 | -------------------------------------------------------------------------------- /examples/license-selector/app/page.tsx: -------------------------------------------------------------------------------- 1 | import PILFlavorForm from "@/components/PilFlavorForm"; 2 | 3 | export default function Home() { 4 | return ( 5 | 6 | 7 | ) 8 | } 9 | -------------------------------------------------------------------------------- /examples/license-selector/components/ui/label.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as LabelPrimitive from '@radix-ui/react-label'; 3 | import { cva, type VariantProps } from 'class-variance-authority'; 4 | 5 | import { cn } from '@/lib/utils'; 6 | 7 | const labelVariants = cva( 8 | 'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70' 9 | ); 10 | 11 | const Label = React.forwardRef< 12 | React.ElementRef, 13 | React.ComponentPropsWithoutRef & 14 | VariantProps 15 | >(({ className, ...props }, ref) => ( 16 | 21 | )); 22 | Label.displayName = LabelPrimitive.Root.displayName; 23 | 24 | export { Label }; 25 | -------------------------------------------------------------------------------- /examples/license-selector/lib/utils.ts: -------------------------------------------------------------------------------- 1 | import { clsx, type ClassValue } from 'clsx'; 2 | import { twMerge } from 'tailwind-merge'; 3 | 4 | export function cn(...inputs: ClassValue[]) { 5 | return twMerge(clsx(inputs)); 6 | } 7 | -------------------------------------------------------------------------------- /examples/license-selector/next.config.mjs: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | // transpilePackages: ["@storyprotocol/storykit"], 4 | } 5 | 6 | export default nextConfig 7 | -------------------------------------------------------------------------------- /examples/license-selector/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@example/license-selector", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "prettier": "@storykit/prettier-config", 12 | "dependencies": { 13 | "@radix-ui/react-label": "^2.1.0", 14 | "@radix-ui/react-slot": "^1.1.0", 15 | "@storyprotocol/storykit": "workspace:*", 16 | "@tanstack/react-query": "^5.28.9", 17 | "class-variance-authority": "^0.7.0", 18 | "clsx": "^2.1.0", 19 | "next": "14.1.4", 20 | "react": "^18", 21 | "react-apexcharts": "^1.4.1", 22 | "react-dom": "^18", 23 | "react-force-graph-2d": "^1.25.4", 24 | "react-hook-form": "^7.53.2", 25 | "tailwind-merge": "^2.2.2" 26 | }, 27 | "devDependencies": { 28 | "@next/eslint-plugin-next": "^14.1.1", 29 | "@storykit/eslint-config": "workspace:*", 30 | "@storykit/prettier-config": "workspace:*", 31 | "@storykit/typescript-config": "workspace:*", 32 | "@types/node": "^20", 33 | "@types/react": "^18", 34 | "@types/react-dom": "^18", 35 | "autoprefixer": "^10.4.20", 36 | "eslint": "^8.57.0", 37 | "eslint-config-next": "14.2.1", 38 | "postcss": "^8.4.38", 39 | "prettier": "^3.2.5", 40 | "tailwindcss": "^3.4.3", 41 | "typescript": "^5" 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /examples/license-selector/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | } 6 | } -------------------------------------------------------------------------------- /examples/license-selector/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: ["./app/**/*.{html,js,ts,jsx,tsx}", "./components/**/*.{html,js,ts,jsx,tsx}"], 4 | theme: { 5 | extend: {}, 6 | }, 7 | plugins: [], 8 | } 9 | 10 | -------------------------------------------------------------------------------- /examples/license-selector/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@storykit/typescript-config/nextjs.json", 3 | "compilerOptions": { 4 | "plugins": [ 5 | { 6 | "name": "next" 7 | } 8 | ], 9 | "paths": { 10 | "@/*": [ 11 | "./*" 12 | ] 13 | }, 14 | "allowJs": true, 15 | "noEmit": true, 16 | "incremental": true, 17 | "resolveJsonModule": true, 18 | "jsx": "preserve" 19 | }, 20 | "include": [ 21 | "next-env.d.ts", 22 | "**/*.ts", 23 | "**/*.tsx", 24 | ".next/types/**/*.ts", 25 | "next.config.js" 26 | ], 27 | "exclude": [ 28 | "node_modules" 29 | ] 30 | } 31 | -------------------------------------------------------------------------------- /examples/simple-setup/.eslintrc.js: -------------------------------------------------------------------------------- 1 | /** @type {import("eslint").Linter.Config} */ 2 | module.exports = { 3 | root: true, 4 | extends: ["@storykit/eslint-config/next.js"], 5 | parser: "@typescript-eslint/parser", 6 | // parserOptions: { 7 | // project: true, 8 | // }, 9 | } 10 | -------------------------------------------------------------------------------- /examples/simple-setup/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | .yarn/install-state.gz 8 | 9 | # testing 10 | /coverage 11 | 12 | # next.js 13 | /.next/ 14 | /out/ 15 | 16 | # production 17 | /build 18 | 19 | # misc 20 | .DS_Store 21 | *.pem 22 | 23 | # debug 24 | npm-debug.log* 25 | yarn-debug.log* 26 | yarn-error.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | next-env.d.ts 37 | -------------------------------------------------------------------------------- /examples/simple-setup/README.md: -------------------------------------------------------------------------------- 1 | # Simple Setup Example 2 | 3 | This example demonstrates a simple setup of StoryKit; 4 | - wraps the app with the `StoryKitProvider` and specifies the chain in [`app/Providers.tsx`](./app/Providers.tsx) 5 | - uses the `IpProvider` to pass the IP data to child components in [`app/page.tsx`](./app/page.tsx) 6 | - the [`IpHeader`](./app/IpHeader.tsx) component uses the `IpProviders` `useIpContext` hook to access the IP data 7 | - StoryKit's `IpLicenseAccordion` component consumes data from the provider and displays the IP license information. 8 | 9 | ## Getting Started 10 | 11 | First, run the development server: 12 | 13 | ```bash 14 | npm run dev 15 | # or 16 | yarn dev 17 | # or 18 | pnpm dev 19 | # or 20 | bun dev 21 | ``` 22 | 23 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 24 | -------------------------------------------------------------------------------- /examples/simple-setup/app/IpHeader.tsx: -------------------------------------------------------------------------------- 1 | import { useIpContext } from "@storyprotocol/storykit" 2 | 3 | export default function IpHeader() { 4 | const { nftData, ownersData } = useIpContext() 5 | return ( 6 |
7 |

{nftData?.name}

8 |

By {ownersData?.owners[0]}

9 | {nftData?.image.thumbnailUrl || nftData?.image.cachedUrl ? 10 | // eslint-disable-next-line @next/next/no-img-element 11 | {nftData.name} 12 | : null} 13 |
14 | ) 15 | } 16 | -------------------------------------------------------------------------------- /examples/simple-setup/app/Providers.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import { QueryClientProvider, QueryClient } from "@tanstack/react-query" 4 | import { StoryKitProvider, STORYKIT_SUPPORTED_CHAIN, API_URL } from "@storyprotocol/storykit" 5 | 6 | const API_KEY = process.env.NEXT_PUBLIC_STORY_PROTOCOL_X_API_KEY as string 7 | const ALCHEMY_API_KEY = process.env.NEXT_PUBLIC_ALCHEMY_API_KEY as string 8 | 9 | export default function Providers({ children }: { children: React.ReactNode }) { 10 | const queryClient = new QueryClient() 11 | return ( 12 | 13 | 14 | {children} 15 | 16 | 17 | ) 18 | } 19 | -------------------------------------------------------------------------------- /examples/simple-setup/app/base.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /examples/simple-setup/app/layout.tsx: -------------------------------------------------------------------------------- 1 | 2 | import Providers from "./Providers" 3 | import "./base.css" 4 | 5 | export default function RootLayout({ 6 | children, 7 | }: Readonly<{ 8 | children: React.ReactNode 9 | }>) { 10 | return ( 11 | 12 | 13 | 14 | {children} 15 | 16 | 17 | 18 | ) 19 | } 20 | -------------------------------------------------------------------------------- /examples/simple-setup/app/page.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import { IpProvider, IpLicenseAccordion } from "@storyprotocol/storykit" 4 | import IpHeader from "./IpHeader" 5 | 6 | export default function Home() { 7 | return ( 8 |
9 |
10 | 11 |
12 | 13 | 14 |
15 |
16 |
17 |
18 | ) 19 | } 20 | -------------------------------------------------------------------------------- /examples/simple-setup/next.config.mjs: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | // transpilePackages: ["@storyprotocol/storykit"], 4 | } 5 | 6 | export default nextConfig 7 | -------------------------------------------------------------------------------- /examples/simple-setup/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@example/simple-setup", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "prettier": "@storykit/prettier-config", 12 | "dependencies": { 13 | "@storyprotocol/storykit": "workspace:*", 14 | "@tanstack/react-query": "^5.28.9", 15 | "next": "14.1.4", 16 | "react": "^18", 17 | "react-apexcharts": "^1.4.1", 18 | "react-dom": "^18", 19 | "react-force-graph-2d": "^1.25.4" 20 | }, 21 | "devDependencies": { 22 | "@next/eslint-plugin-next": "^14.1.1", 23 | "@storykit/eslint-config": "workspace:*", 24 | "@storykit/prettier-config": "workspace:*", 25 | "@storykit/typescript-config": "workspace:*", 26 | "@types/node": "^20", 27 | "@types/react": "^18", 28 | "@types/react-dom": "^18", 29 | "autoprefixer": "^10.4.20", 30 | "eslint": "^8.57.0", 31 | "eslint-config-next": "14.2.1", 32 | "postcss": "^8.4.38", 33 | "prettier": "^3.2.5", 34 | "tailwindcss": "^3.4.3", 35 | "typescript": "^5" 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /examples/simple-setup/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | } 6 | } -------------------------------------------------------------------------------- /examples/simple-setup/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: ["./app/**/*.{html,js,ts,jsx,tsx}", "./components/**/*.{html,js,ts,jsx,tsx}"], 4 | theme: { 5 | extend: {}, 6 | }, 7 | plugins: [], 8 | } 9 | 10 | -------------------------------------------------------------------------------- /examples/simple-setup/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@storykit/typescript-config/nextjs.json", 3 | "compilerOptions": { 4 | "plugins": [ 5 | { 6 | "name": "next" 7 | } 8 | ], 9 | "paths": { 10 | "@/*": [ 11 | "./*" 12 | ] 13 | }, 14 | "allowJs": true, 15 | "noEmit": true, 16 | "incremental": true, 17 | "resolveJsonModule": true, 18 | "jsx": "preserve" 19 | }, 20 | "include": [ 21 | "next-env.d.ts", 22 | "**/*.ts", 23 | "**/*.tsx", 24 | ".next/types/**/*.ts", 25 | "next.config.js" 26 | ], 27 | "exclude": [ 28 | "node_modules" 29 | ] 30 | } 31 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "scripts": { 4 | "build": "turbo run build --filter @storyprotocol/storykit", 5 | "dev": "turbo run dev --filter @storyprotocol/storykit", 6 | "example": "turbo run dev", 7 | "lint": "turbo run lint --filter @storyprotocol/storykit", 8 | "lint-all": "turbo run lint", 9 | "format": "turbo run format --filter @storyprotocol/storykit", 10 | "prepare": "husky" 11 | }, 12 | "devDependencies": { 13 | "@storykit/eslint-config": "workspace:*", 14 | "eslint": "^8.57.0", 15 | "husky": "^9.0.11", 16 | "lint-staged": "^15.2.2", 17 | "prettier": "^3.2.5", 18 | "turbo": "^1.12.2" 19 | }, 20 | "lint-staged": { 21 | "packages/*.{ts,tsx}": [ 22 | "pnpm format", 23 | "pnpm lint" 24 | ] 25 | }, 26 | "packageManager": "pnpm@9.15.4" 27 | } 28 | -------------------------------------------------------------------------------- /packages/api-schema/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@storykit/api-schema", 3 | "version": "0.0.0", 4 | "private": true, 5 | "license": "MIT", 6 | "type": "module", 7 | "main": "types/index.ts", 8 | "types": "types/index.ts", 9 | "scripts": { 10 | "generate-types": "ts-node scripts/generate-types.ts" 11 | }, 12 | "files": [ 13 | "types" 14 | ], 15 | "dependencies": { 16 | "openapi-typescript": "^7.6.1" 17 | }, 18 | "devDependencies": { 19 | "ts-node": "^10.9.2", 20 | "typescript": "^5.8.2" 21 | } 22 | } -------------------------------------------------------------------------------- /packages/api-schema/scripts/generate-types.ts: -------------------------------------------------------------------------------- 1 | import fs from 'fs/promises'; 2 | import openapiTS, { astToString } from 'openapi-typescript'; 3 | 4 | async function generateTypes() { 5 | try { 6 | // Load the OpenAPI schema 7 | const schemaPath = new URL('../openapi/schema.json', import.meta.url); 8 | const ast = await openapiTS(schemaPath); 9 | 10 | // Convert AST to TypeScript string 11 | const types = astToString(ast); 12 | 13 | // scope to add more here, versioning, etc. 14 | const output = ` 15 | // 🚨 This file is autogenerated by openapi-typescript. Do not edit manually. 16 | // generated at ${new Date().toISOString()} 17 | 18 | ${types} 19 | `; 20 | 21 | // Write the TypeScript definitions to a file 22 | await fs.writeFile('./types/index.ts', output); 23 | console.log('TypeScript definitions generated successfully.'); 24 | } catch (error) { 25 | console.error('Error generating TypeScript definitions:', error); 26 | } 27 | } 28 | 29 | generateTypes(); 30 | -------------------------------------------------------------------------------- /packages/api-schema/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "esnext", 4 | "target": "es5", 5 | "moduleResolution": "node", 6 | "esModuleInterop": true, 7 | "resolveJsonModule": true, 8 | "outDir": "dist", 9 | "strict": true 10 | }, 11 | "include": ["scripts/**/*", "types/**/*"] 12 | } 13 | -------------------------------------------------------------------------------- /packages/config-eslint/README.md: -------------------------------------------------------------------------------- 1 | # `@storykit/eslint-config` 2 | 3 | Collection of internal eslint configurations. 4 | -------------------------------------------------------------------------------- /packages/config-eslint/library.js: -------------------------------------------------------------------------------- 1 | const { resolve } = require("node:path"); 2 | 3 | const project = resolve(process.cwd(), "tsconfig.json"); 4 | 5 | /** @type {import("eslint").Linter.Config} */ 6 | module.exports = { 7 | extends: ["eslint:recommended", "prettier", "eslint-config-turbo"], 8 | plugins: ["only-warn"], 9 | globals: { 10 | React: true, 11 | JSX: true, 12 | }, 13 | env: { 14 | node: true, 15 | }, 16 | settings: { 17 | "import/resolver": { 18 | typescript: { 19 | project, 20 | }, 21 | }, 22 | }, 23 | ignorePatterns: [ 24 | // Ignore dotfiles 25 | ".*.js", 26 | "node_modules/", 27 | "dist/", 28 | ], 29 | overrides: [ 30 | { 31 | files: ["*.js?(x)", "*.cjs?(x)", "*.mjs?(x)", "*.ts?(x)"], 32 | }, 33 | ], 34 | }; 35 | -------------------------------------------------------------------------------- /packages/config-eslint/next.js: -------------------------------------------------------------------------------- 1 | const { resolve } = require("node:path"); 2 | 3 | const project = resolve(process.cwd(), "tsconfig.json"); 4 | 5 | /** @type {import("eslint").Linter.Config} */ 6 | module.exports = { 7 | // extends: [ 8 | // "eslint:recommended", 9 | // "prettier", 10 | // require.resolve("@vercel/style-guide/eslint/next"), 11 | // "eslint-config-turbo", 12 | // ], 13 | extends: ["next/core-web-vitals", "prettier"], 14 | globals: { 15 | React: true, 16 | JSX: true, 17 | }, 18 | env: { 19 | node: true, 20 | }, 21 | plugins: ["only-warn"], 22 | settings: { 23 | "import/resolver": { 24 | typescript: { 25 | project, 26 | }, 27 | }, 28 | }, 29 | ignorePatterns: [ 30 | // Ignore dotfiles 31 | ".*.js", 32 | "node_modules/", 33 | ], 34 | overrides: [{ files: ["*.js?(x)", "*.ts?(x)"] }], 35 | }; 36 | -------------------------------------------------------------------------------- /packages/config-eslint/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@storykit/eslint-config", 3 | "version": "0.0.0", 4 | "private": true, 5 | "files": [ 6 | "library.js", 7 | "next.js", 8 | "react-internal.js" 9 | ], 10 | "devDependencies": { 11 | "@vercel/style-guide": "^5.2.0", 12 | "eslint-config-turbo": "^1.12.4", 13 | "eslint-config-prettier": "^9.1.0", 14 | "eslint-plugin-only-warn": "^1.1.0", 15 | "@typescript-eslint/parser": "^7.1.0", 16 | "@typescript-eslint/eslint-plugin": "^7.1.0", 17 | "typescript": "^5.3.3" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/config-eslint/react-internal.js: -------------------------------------------------------------------------------- 1 | const { resolve } = require("node:path"); 2 | 3 | const project = resolve(process.cwd(), "tsconfig.json"); 4 | 5 | /* 6 | * This is a custom ESLint configuration for use with 7 | * internal (bundled by their consumer) libraries 8 | * that utilize React. 9 | * 10 | * This config extends the Vercel Engineering Style Guide. 11 | * For more information, see https://github.com/vercel/style-guide 12 | * 13 | */ 14 | 15 | /** @type {import("eslint").Linter.Config} */ 16 | module.exports = { 17 | extends: [ 18 | "eslint:recommended", 19 | "plugin:react/recommended", 20 | "plugin:@typescript-eslint/recommended", 21 | "plugin:@typescript-eslint/eslint-recommended", 22 | "prettier", 23 | "plugin:prettier/recommended", 24 | "plugin:react-hooks/recommended", 25 | "plugin:storybook/recommended", 26 | ], 27 | // extends: ["eslint:recommended", "prettier", "eslint-config-turbo"], 28 | plugins: ["@typescript-eslint", "only-warn"], 29 | globals: { 30 | React: true, 31 | JSX: true, 32 | }, 33 | env: { 34 | browser: true, 35 | }, 36 | settings: { 37 | "import/resolver": { 38 | typescript: { 39 | project, 40 | }, 41 | }, 42 | }, 43 | ignorePatterns: [ 44 | // Ignore dotfiles 45 | ".*.js", 46 | ".*.cjs", 47 | "node_modules/", 48 | "dist/", 49 | ], 50 | overrides: [ 51 | // Force ESLint to detect .tsx files 52 | { files: ["*.js?(x)", "*.ts?(x)"] }, 53 | ], 54 | rules: { 55 | "react/react-in-jsx-scope": "off", 56 | "react/prop-types": "off", 57 | }, 58 | }; 59 | -------------------------------------------------------------------------------- /packages/config-prettier/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "trailingComma": "es5", 3 | "tabWidth": 2, 4 | "semi": false, 5 | "printWidth": 120, 6 | "importOrderSeparation": true, 7 | "importOrderSortSpecifiers": true, 8 | "importOrder": ["^[./]"], 9 | "plugins": ["@trivago/prettier-plugin-sort-imports"] 10 | } 11 | -------------------------------------------------------------------------------- /packages/config-prettier/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@storykit/prettier-config", 3 | "version": "0.1.0", 4 | "private": true, 5 | "main": "./index.json", 6 | "devDependencies": { 7 | "@trivago/prettier-plugin-sort-imports": "^4.3.0", 8 | "prettier": "^3.2.5" 9 | }, 10 | "peerDependencies": { 11 | "prettier": "^3.2.5" 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /packages/config-typescript/base.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://json.schemastore.org/tsconfig", 3 | "display": "Default", 4 | "compilerOptions": { 5 | "composite": false, 6 | "declaration": true, 7 | "declarationMap": true, 8 | "esModuleInterop": true, 9 | "forceConsistentCasingInFileNames": true, 10 | "inlineSources": false, 11 | "isolatedModules": true, 12 | "moduleResolution": "Bundler", 13 | "noUnusedLocals": false, 14 | "noUnusedParameters": false, 15 | "preserveWatchOutput": true, 16 | "skipLibCheck": true, 17 | "strict": true 18 | }, 19 | "exclude": ["node_modules"] 20 | } 21 | -------------------------------------------------------------------------------- /packages/config-typescript/nextjs.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://json.schemastore.org/tsconfig", 3 | "display": "Next.js", 4 | "extends": "./base.json", 5 | "compilerOptions": { 6 | "plugins": [{ "name": "next" }], 7 | 8 | "declaration": false, 9 | "declarationMap": false, 10 | "incremental": true, 11 | "jsx": "preserve", 12 | "module": "esnext", 13 | "noEmit": true, 14 | "resolveJsonModule": true, 15 | "target": "es5", 16 | "lib": ["dom", "dom.iterable", "esnext"], 17 | "moduleResolution": "node" 18 | }, 19 | "include": ["src", "next-env.d.ts"], 20 | "exclude": ["node_modules"] 21 | } 22 | -------------------------------------------------------------------------------- /packages/config-typescript/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@storykit/typescript-config", 3 | "version": "0.0.0", 4 | "private": true, 5 | "license": "MIT", 6 | "publishConfig": { 7 | "access": "public" 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /packages/config-typescript/react-library.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://json.schemastore.org/tsconfig", 3 | "display": "React Library", 4 | "extends": "./base.json", 5 | "compilerOptions": { 6 | "jsx": "react-jsx", 7 | "module": "ESNext", 8 | "outDir": "dist", 9 | "declaration": true, 10 | "target": "es5", 11 | "lib": ["dom", "dom.iterable", "esnext"] 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /packages/storykit/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | /** @type {import("eslint").Linter.Config} */ 2 | module.exports = { 3 | root: true, 4 | extends: ["@storykit/eslint-config/react-internal.js"], 5 | parser: "@typescript-eslint/parser", 6 | // parserOptions: { 7 | // project: true, 8 | // }, 9 | // parserOptions: { 10 | // project: "./tsconfig.json", 11 | // tsconfigRootDir: __dirname, 12 | // }, 13 | } 14 | -------------------------------------------------------------------------------- /packages/storykit/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | build 13 | dist 14 | 15 | # misc 16 | .DS_Store 17 | .env.local 18 | .env.development.local 19 | .env.test.local 20 | .env.production.local 21 | 22 | npm-debug.log* 23 | yarn-debug.log* 24 | yarn-error.log* 25 | 26 | *storybook.log 27 | storybook-static 28 | 29 | .yalc 30 | yalc.lock 31 | .vercel 32 | .env*.local 33 | -------------------------------------------------------------------------------- /packages/storykit/.storybook/assets/story-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storyprotocol/ipkit/c6af37d67770517d73f760ad8bb0d2258ea6c887/packages/storykit/.storybook/assets/story-logo.png -------------------------------------------------------------------------------- /packages/storykit/.storybook/directors/StoryProvider.tsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | 3 | import "../../src/global.css" 4 | import { StoryKitProvider, StoryKitProviderOptions } from "../../src/providers/StoryKitProvider" 5 | 6 | interface StoryProviderProps extends StoryKitProviderOptions { 7 | children: React.ReactNode 8 | } 9 | 10 | export default function StoryProvider({ children, ...props }: StoryProviderProps) { 11 | return {children} 12 | } 13 | -------------------------------------------------------------------------------- /packages/storykit/.storybook/global.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | .sb-show-main, 6 | .sbdocs-preview { 7 | @apply sk-bg-white dark:sk-bg-gray-900; 8 | } 9 | -------------------------------------------------------------------------------- /packages/storykit/.storybook/main.ts: -------------------------------------------------------------------------------- 1 | import type { StorybookConfig } from "@storybook/react-webpack5" 2 | 3 | const path = require("path") 4 | 5 | const config: StorybookConfig = { 6 | stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"], 7 | addons: [ 8 | "@storybook/preset-create-react-app", 9 | "@storybook/addon-onboarding", 10 | "@storybook/addon-links", 11 | "@storybook/addon-essentials", 12 | "@chromatic-com/storybook", 13 | "@storybook/addon-interactions", 14 | "@storybook/addon-coverage", 15 | ], 16 | framework: { 17 | name: "@storybook/react-webpack5", 18 | options: {}, 19 | }, 20 | docs: { 21 | autodocs: "tag", 22 | }, 23 | webpackFinal: async (config) => { 24 | if (config.resolve) { 25 | config.resolve.alias = { 26 | ...config.resolve.alias, 27 | "@": path.resolve(__dirname, "../src"), 28 | } 29 | } 30 | return config 31 | }, 32 | } 33 | export default config 34 | -------------------------------------------------------------------------------- /packages/storykit/.storybook/manager-head.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/storykit/.storybook/manager.ts: -------------------------------------------------------------------------------- 1 | import { addons } from "@storybook/manager-api" 2 | 3 | import theme from "./theme" 4 | 5 | addons.setConfig({ 6 | theme, 7 | sidebar: { 8 | filters: { 9 | patterns: (item) => { 10 | return !item?.tags?.includes("isHidden") 11 | }, 12 | }, 13 | }, 14 | }) 15 | -------------------------------------------------------------------------------- /packages/storykit/.storybook/theme.ts: -------------------------------------------------------------------------------- 1 | import { create } from "@storybook/theming/create" 2 | 3 | const logo = require("./assets/story-logo.png") 4 | 5 | export default create({ 6 | base: "light", 7 | // Typography 8 | fontBase: '"Open Sans", sans-serif', 9 | fontCode: "monospace", 10 | 11 | brandTitle: "Story Protocol", 12 | brandUrl: "https://storykit.vercel.app/", 13 | brandImage: logo, 14 | brandTarget: "_self", 15 | 16 | // 17 | colorPrimary: "#3A10E5", 18 | colorSecondary: "#585C6D", 19 | 20 | // UI 21 | appBg: "#ffffff", 22 | appContentBg: "#ffffff", 23 | appPreviewBg: "#ffffff", 24 | appBorderColor: "#585C6D", 25 | appBorderRadius: 4, 26 | 27 | // Text colors 28 | textColor: "#10162F", 29 | textInverseColor: "#ffffff", 30 | 31 | // Toolbar default and active colors 32 | barTextColor: "#9E9E9E", 33 | barSelectedColor: "#585C6D", 34 | barHoverColor: "#585C6D", 35 | barBg: "#ffffff", 36 | 37 | // Form colors 38 | inputBg: "#ffffff", 39 | inputBorder: "#10162F", 40 | inputTextColor: "#10162F", 41 | inputBorderRadius: 2, 42 | }) 43 | -------------------------------------------------------------------------------- /packages/storykit/postcss.config.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | "@tailwindcss/nesting": "postcss-nesting", 4 | tailwindcss: {}, 5 | autoprefixer: {}, 6 | }, 7 | } 8 | -------------------------------------------------------------------------------- /packages/storykit/scripts/generate-types.ts: -------------------------------------------------------------------------------- 1 | import fs from "fs/promises" 2 | import openapiTS, { astToString } from "openapi-typescript" 3 | 4 | async function generateTypes() { 5 | try { 6 | // Load the OpenAPI schema 7 | const schemaPath = new URL("./schema.json", import.meta.url) 8 | const ast = await openapiTS(schemaPath) 9 | 10 | // Convert AST to TypeScript string 11 | const types = astToString(ast) 12 | 13 | // scope to add more here, versioning, etc. 14 | const output = ` 15 | // 🚨 This file is autogenerated by openapi-typescript. Do not edit manually. 16 | // generated at ${new Date().toISOString()} 17 | 18 | ${types} 19 | ` 20 | 21 | // Write the TypeScript definitions to a file 22 | await fs.writeFile("./src/types/schema.ts", output) 23 | console.log("TypeScript definitions generated successfully.") 24 | } catch (error) { 25 | console.error("Error generating TypeScript definitions:", error) 26 | } 27 | } 28 | 29 | generateTypes() 30 | -------------------------------------------------------------------------------- /packages/storykit/src/components/Accordion/index.ts: -------------------------------------------------------------------------------- 1 | export { Accordion } from "./Accordion" 2 | -------------------------------------------------------------------------------- /packages/storykit/src/components/Button/__docs__/Button.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { Meta, StoryObj } from "@storybook/react" 2 | 3 | import { Button } from "../Button" 4 | 5 | const meta = { 6 | title: "Internal/Button", 7 | component: Button, 8 | parameters: { 9 | layout: "centered", 10 | }, 11 | argTypes: { 12 | variant: { 13 | control: "select", 14 | options: ["primary", "outline", "ghost"], 15 | description: "The visual style of the button", 16 | defaultValue: "primary", 17 | }, 18 | }, 19 | args: {}, 20 | } satisfies Meta 21 | 22 | export default meta 23 | type Story = StoryObj 24 | 25 | export const Basic: Story = { 26 | args: { 27 | children: "Button", 28 | variant: "primary", 29 | size: "medium", 30 | disabled: false, 31 | }, 32 | } 33 | -------------------------------------------------------------------------------- /packages/storykit/src/components/Button/index.ts: -------------------------------------------------------------------------------- 1 | export { Button } from "./Button" 2 | -------------------------------------------------------------------------------- /packages/storykit/src/components/Calendar/index.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storyprotocol/ipkit/c6af37d67770517d73f760ad8bb0d2258ea6c887/packages/storykit/src/components/Calendar/index.ts -------------------------------------------------------------------------------- /packages/storykit/src/components/Checkbox/index.ts: -------------------------------------------------------------------------------- 1 | export { Checkbox } from "./Checkbox" 2 | -------------------------------------------------------------------------------- /packages/storykit/src/components/CollectionGraph/__docs__/CollectionGraph.mdx: -------------------------------------------------------------------------------- 1 | import { Canvas, Controls, Meta } from "@storybook/blocks" 2 | 3 | import * as CollectionGraphStory from "./CollectionGraph.stories" 4 | 5 | 6 | 7 | # CollectionGraph 8 | 9 | Show IP Asset derivatives graph. 10 | 11 | #### Example 12 | 13 | 14 | 15 | 16 | 17 | ## Dependencies 18 | 19 | The IP Graph also requires [react-force-graph-2d](https://www.npmjs.com/package/react-force-graph-2d). 20 | 21 | ```bash 22 | npm install react-force-graph-2d 23 | ``` 24 | 25 | ## Usage 26 | 27 | ```ts 28 | import { IpProvider } from "@storyprotocol/storykit" 29 | import { CollectionGraph } from "@storyprotocol/storykit" 30 | 31 | const ExamplePage = () => { 32 | return ( 33 | 34 | 35 | 36 | ); 37 | }; 38 | 39 | export default ExamplePage; 40 | ``` 41 | 42 | #### Arguments 43 | 44 | - **width**: _number_ - The width of the canvas 45 | - **height**: _number_ - The height of the canvas 46 | - **darkMode**: _boolean_ - Light or Dark mode 47 | -------------------------------------------------------------------------------- /packages/storykit/src/components/CollectionGraph/index.ts: -------------------------------------------------------------------------------- 1 | export { default as CollectionGraph } from "./CollectionGraph" 2 | -------------------------------------------------------------------------------- /packages/storykit/src/components/CollectionGraph/styles.css: -------------------------------------------------------------------------------- 1 | .skIpGraph { 2 | @apply sk-relative; 3 | 4 | .force-graph-container .graph-tooltip { 5 | .graph-content { 6 | @apply sk-flex sk-flex-col sk-gap-1 sk-whitespace-nowrap; 7 | 8 | .graph-content-title { 9 | @apply sk-font-bold sk-text-lg; 10 | } 11 | 12 | .graph-content-label { 13 | @apply sk-font-bold; 14 | } 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /packages/storykit/src/components/DateInputPicker/index.ts: -------------------------------------------------------------------------------- 1 | export { DateInputPicker } from "./DateInputPicker" 2 | -------------------------------------------------------------------------------- /packages/storykit/src/components/Input/__docs__/Input.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { Meta, StoryObj } from "@storybook/react" 2 | 3 | import { Input } from "../Input" 4 | 5 | const meta = { 6 | title: "Internal/Input", 7 | component: Input, 8 | parameters: { 9 | layout: "centered", 10 | }, 11 | // tags: ["isHidden"], 12 | argTypes: { 13 | size: { 14 | options: ["sm", "medium", "lg"], 15 | control: { type: "radio" }, 16 | }, 17 | }, 18 | args: {}, 19 | } satisfies Meta 20 | 21 | export default meta 22 | type Story = StoryObj 23 | 24 | export const Basic: Story = { 25 | args: { 26 | placeholder: "Placeholder", 27 | }, 28 | } 29 | 30 | export const LeftAddon: Story = { 31 | args: { 32 | placeholder: "Placeholder", 33 | leftAddon: "left", 34 | }, 35 | } 36 | 37 | export const RightAddon: Story = { 38 | args: { 39 | placeholder: "Placeholder", 40 | rightAddon: "right", 41 | }, 42 | } 43 | 44 | export const NumberType: Story = { 45 | args: { 46 | placeholder: "Placeholder", 47 | type: "number", 48 | rightAddon: "$IP", 49 | }, 50 | } 51 | -------------------------------------------------------------------------------- /packages/storykit/src/components/Input/index.ts: -------------------------------------------------------------------------------- 1 | export { Input } from "./Input" 2 | -------------------------------------------------------------------------------- /packages/storykit/src/components/IpGraph/__docs__/IpGraph.mdx: -------------------------------------------------------------------------------- 1 | import { Canvas, Controls, Meta } from "@storybook/blocks" 2 | 3 | import * as IpGraphStory from "./IpGraph.stories" 4 | 5 | 6 | 7 | # IpGraph 8 | 9 | Show IP Asset derivatives graph. 10 | 11 | #### Example 12 | 13 | 14 | 15 | 16 | 17 | ## Dependencies 18 | 19 | The IP Graph also requires [react-force-graph-2d](https://www.npmjs.com/package/react-force-graph-2d). 20 | 21 | ```bash 22 | npm install react-force-graph-2d 23 | ``` 24 | 25 | ## Usage 26 | 27 | ```ts 28 | import { IpProvider } from "@storyprotocol/storykit" 29 | import { IpGraph } from "@storyprotocol/storykit" 30 | 31 | const ExamplePage = () => { 32 | return ( 33 | 34 | 35 | 36 | ); 37 | }; 38 | 39 | export default ExamplePage; 40 | ``` 41 | 42 | #### Arguments 43 | 44 | - **width**: _number_ - The width of the canvas 45 | - **height**: _number_ - The height of the canvas 46 | - **darkMode**: _boolean_ - Light or Dark mode 47 | -------------------------------------------------------------------------------- /packages/storykit/src/components/IpGraph/index.ts: -------------------------------------------------------------------------------- 1 | export { default as IpGraph } from "./IpGraph" 2 | -------------------------------------------------------------------------------- /packages/storykit/src/components/IpGraph/styles.css: -------------------------------------------------------------------------------- 1 | .skIpGraph { 2 | @apply sk-relative; 3 | 4 | .force-graph-container .graph-tooltip { 5 | @apply sk-text-xs; 6 | 7 | .graph-content { 8 | @apply sk-flex sk-flex-col sk-gap-1 sk-whitespace-nowrap; 9 | 10 | .graph-content-label { 11 | @apply sk-font-bold; 12 | } 13 | } 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /packages/storykit/src/components/IpLicenseAccordion/__docs__/Example.tsx: -------------------------------------------------------------------------------- 1 | import { STORY_IP_ASSETS, STORY_IP_ASSETS_MAP } from "@/stories/data" 2 | import React, { FC } from "react" 3 | import { Address } from "viem" 4 | 5 | import { IpProvider } from "../../../providers" 6 | import IpLicenseAccordion from "../IpLicenseAccordion" 7 | 8 | type Size = "small" | "medium" | "large" 9 | 10 | const Example: FC<{ ipId: Address; size: Size }> = ({ 11 | ipId = STORY_IP_ASSETS_MAP[STORY_IP_ASSETS[0]], 12 | size = "medium", 13 | }) => { 14 | return ( 15 | 16 | 17 | 18 | ) 19 | } 20 | 21 | export default Example 22 | -------------------------------------------------------------------------------- /packages/storykit/src/components/IpLicenseAccordion/__docs__/IpLicenseAccordion.mdx: -------------------------------------------------------------------------------- 1 | import { Canvas, Controls, Meta } from "@storybook/blocks" 2 | 3 | import * as IpLicenseAccordionStory from "./IpLicenseAccordion.stories" 4 | 5 | 6 | 7 | # IpLicenseAccordion 8 | 9 | Displays the IP Asset Licenses in a readable format (cans & cannots). 10 | 11 | #### Example 12 | 13 | 14 | 15 | 16 | 17 | ## Usage 18 | 19 | ```ts 20 | import { IpProvider } from "@storyprotocol/storykit" 21 | import { IpLicenseAccordion } from "@storyprotocol/storykit" 22 | 23 | const ExamplePage = () => { 24 | return ( 25 | 26 | 27 | 28 | ); 29 | }; 30 | 31 | export default ExamplePage; 32 | ``` 33 | -------------------------------------------------------------------------------- /packages/storykit/src/components/IpLicenseAccordion/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as IpLicenseAccordion } from "./IpLicenseAccordion" 2 | -------------------------------------------------------------------------------- /packages/storykit/src/components/IpWidget/__docs__/Example.tsx: -------------------------------------------------------------------------------- 1 | import { STORY_IP_ASSETS, STORY_IP_ASSETS_MAP } from "@/stories/data" 2 | import React, { FC } from "react" 3 | import { Address } from "viem" 4 | 5 | import IpWidget from "../IpWidget" 6 | 7 | const Example: FC<{ ipId: Address; isBottomNav?: boolean }> = ({ 8 | ipId = STORY_IP_ASSETS_MAP[STORY_IP_ASSETS[1]], 9 | isBottomNav = false, 10 | }) => { 11 | return 12 | } 13 | 14 | export default Example 15 | -------------------------------------------------------------------------------- /packages/storykit/src/components/IpWidget/__docs__/IpWidget.mdx: -------------------------------------------------------------------------------- 1 | import { Canvas, Controls, Meta } from "@storybook/blocks" 2 | 3 | import * as IpWidgetStory from "./IpWidget.stories" 4 | 5 | 6 | 7 | # IP Asset Widget 8 | 9 | IP Asset card widget that displays IP data including the IpGraph, and IpLicenseAccordion. 10 | 11 | #### Example 12 | 13 | 14 | 15 | 16 | 17 | ## Usage 18 | 19 | ```ts 20 | import { IpWidget } from "@storyprotocol/storykit" 21 | 22 | const ExamplePage = () => { 23 | return ( 24 | 25 | ); 26 | }; 27 | 28 | export default ExamplePage; 29 | ``` 30 | 31 | #### Arguments 32 | 33 | - **ipId**: _string_ - The IP Asset Id, an Address starting 0x. 34 | - **isBottomNav**: _boolean_ - Position of Tabs 35 | -------------------------------------------------------------------------------- /packages/storykit/src/components/IpWidget/__tests__/IPAssetWidget.test.tsx: -------------------------------------------------------------------------------- 1 | import { render } from "@testing-library/react" 2 | import React from "react" 3 | 4 | import IpWidget from "../IpWidget" 5 | 6 | describe("IpWidget", () => { 7 | test("renders the IpWidget component", () => { 8 | render() 9 | }) 10 | }) 11 | -------------------------------------------------------------------------------- /packages/storykit/src/components/IpWidget/index.ts: -------------------------------------------------------------------------------- 1 | export { default as IpWidget } from "./IpWidget" 2 | -------------------------------------------------------------------------------- /packages/storykit/src/components/LicenseFlavorSelector/__docs__/Example.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC, useState } from "react" 2 | 3 | import LicenseFlavorSelector, { LicenseFlavorSelectorProps } from "../LicenseFlavorSelector" 4 | 5 | const Example: FC = (props) => { 6 | const [value, setValue] = useState(props.value) 7 | return 8 | } 9 | 10 | export default Example 11 | -------------------------------------------------------------------------------- /packages/storykit/src/components/LicenseFlavorSelector/__docs__/LicenseFlavorSelector.mdx: -------------------------------------------------------------------------------- 1 | import { Canvas, Controls, Meta } from "@storybook/blocks" 2 | 3 | import * as LicenseFlavorSelectorStory from "./LicenseFlavorSelector.stories" 4 | 5 | 6 | 7 | # LicenseFlavorSelector 8 | 9 | Displays the License Terms cans and cannots for specified license type. 10 | 11 | #### Example 12 | 13 | 14 | 15 | 16 | 17 | ## Usage 18 | 19 | ```ts 20 | 21 | import { LicenseFlavorSelector } from "@storyprotocol/storykit" 22 | 23 | const ExamplePage = () => { 24 | return ( 25 | 26 | ); 27 | }; 28 | 29 | export default ExamplePage; 30 | ``` 31 | -------------------------------------------------------------------------------- /packages/storykit/src/components/LicenseFlavorSelector/__docs__/LicenseFlavorSelector.stories.tsx: -------------------------------------------------------------------------------- 1 | import { PIL_FLAVOR } from "@/types/assets" 2 | import type { Meta, StoryObj } from "@storybook/react" 3 | 4 | import Example from "./Example" 5 | 6 | const meta = { 7 | title: "Components/LicenseFlavorSelector", 8 | component: Example, 9 | parameters: { 10 | layout: "centered", 11 | controls: { sort: "requiredFirst" }, 12 | }, 13 | argTypes: { 14 | size: { 15 | options: ["small", "medium", "large"], 16 | control: { type: "radio" }, 17 | }, 18 | direction: { 19 | options: ["row", "column"], 20 | control: { type: "radio" }, 21 | }, 22 | className: { 23 | control: false, 24 | table: { disable: true }, 25 | }, 26 | value: { 27 | control: false, 28 | table: { disable: true }, 29 | }, 30 | onValueChange: { 31 | control: false, 32 | table: { disable: true }, 33 | }, 34 | }, 35 | args: { 36 | size: "medium", 37 | direction: "column", 38 | className: "w-full", 39 | showCans: true, 40 | showCannots: true, 41 | showExtras: true, 42 | value: PIL_FLAVOR.NON_COMMERCIAL_SOCIAL_REMIXING, 43 | onValueChange: () => {}, 44 | }, 45 | } satisfies Meta 46 | 47 | export default meta 48 | type Story = StoryObj 49 | 50 | export const Select: Story = { 51 | argTypes: {}, 52 | args: {}, 53 | } 54 | -------------------------------------------------------------------------------- /packages/storykit/src/components/LicenseFlavorSelector/index.ts: -------------------------------------------------------------------------------- 1 | export { default as LicenseFlavorSelector } from "./LicenseFlavorSelector" 2 | -------------------------------------------------------------------------------- /packages/storykit/src/components/LicenseTermsList/__docs__/Example.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from "react" 2 | 3 | import LicenseTermsList, { LicenseTermsListProps } from "../LicenseTermsList" 4 | 5 | const Example: FC = ({ 6 | size = "medium", 7 | direction = "column", 8 | showCans = true, 9 | showCannots = true, 10 | showExtras = true, 11 | selectedLicenseTerms, 12 | selectedLicenseTermsId, 13 | }) => { 14 | return ( 15 | 24 | ) 25 | } 26 | 27 | export default Example 28 | -------------------------------------------------------------------------------- /packages/storykit/src/components/LicenseTermsList/__docs__/LicenseTermsList.mdx: -------------------------------------------------------------------------------- 1 | import { Canvas, Controls, Meta } from "@storybook/blocks" 2 | 3 | import * as LicenseTermsListStory from "./LicenseTermsList.stories" 4 | 5 | 6 | 7 | # LicenseTermsList 8 | 9 | Displays the License Terms cans and cannots for specified license type. 10 | 11 | #### Example 12 | 13 | 14 | 15 | 16 | 17 | ## Usage 18 | 19 | ```ts 20 | 21 | import { LicenseTermsList } from "@storyprotocol/storykit" 22 | 23 | const ExamplePage = () => { 24 | return ( 25 | 26 | ); 27 | }; 28 | 29 | export default ExamplePage; 30 | ``` 31 | -------------------------------------------------------------------------------- /packages/storykit/src/components/LicenseTermsList/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as LicenseTermsList } from "./LicenseTermsList" 2 | -------------------------------------------------------------------------------- /packages/storykit/src/components/Popover/Popover.tsx: -------------------------------------------------------------------------------- 1 | import { cn } from "@/lib/utils" 2 | import * as PopoverPrimitive from "@radix-ui/react-popover" 3 | import * as React from "react" 4 | 5 | const Popover = PopoverPrimitive.Root 6 | 7 | const PopoverTrigger = PopoverPrimitive.Trigger 8 | 9 | const PopoverContent = React.forwardRef< 10 | React.ElementRef, 11 | React.ComponentPropsWithoutRef 12 | >(({ className, align = "center", sideOffset = 4, ...props }, ref) => ( 13 | 14 | 26 | 27 | )) 28 | PopoverContent.displayName = PopoverPrimitive.Content.displayName 29 | 30 | export { Popover, PopoverTrigger, PopoverContent } 31 | // lch(24.833 4.707 272) 32 | -------------------------------------------------------------------------------- /packages/storykit/src/components/Popover/index.ts: -------------------------------------------------------------------------------- 1 | export { Popover, PopoverTrigger, PopoverContent } from "./Popover" 2 | -------------------------------------------------------------------------------- /packages/storykit/src/components/RadioGroup/index.ts: -------------------------------------------------------------------------------- 1 | export { RadioGroup, RadioGroupItem } from "./RadioGroup" 2 | -------------------------------------------------------------------------------- /packages/storykit/src/components/RoyaltyGraph/__docs__/RoyaltyGraph.mdx: -------------------------------------------------------------------------------- 1 | import { Canvas, Controls, Meta } from "@storybook/blocks" 2 | 3 | import * as RoyaltyGraphStory from "./RoyaltyGraph.stories" 4 | 5 | 6 | 7 | # RoyaltyGraph 8 | 9 | Show IP Asset derivatives graph. 10 | 11 | #### Example 12 | 13 | 14 | 15 | 16 | 17 | ## Dependencies 18 | 19 | The IP Graph also requires [react-force-graph-2d](https://www.npmjs.com/package/react-force-graph-2d). 20 | 21 | ```bash 22 | npm install react-force-graph-2d 23 | ``` 24 | 25 | ## Usage 26 | 27 | ```ts 28 | import { IpProvider } from "@storyprotocol/storykit" 29 | import { RoyaltyGraph } from "@storyprotocol/storykit" 30 | 31 | const RoyaltyGraphExample = () => { 32 | return ( 33 | 34 | 35 | 36 | ); 37 | }; 38 | 39 | export default RoyaltyGraphExample; 40 | ``` 41 | 42 | #### Arguments 43 | 44 | - **width**: _number_ - The width of the canvas 45 | - **height**: _number_ - The height of the canvas 46 | - **darkMode**: _boolean_ - Light or Dark mode 47 | - **isAnimated**: _boolean_ - Animate the graph 48 | -------------------------------------------------------------------------------- /packages/storykit/src/components/RoyaltyGraph/__docs__/RoyaltyGraph.stories.tsx: -------------------------------------------------------------------------------- 1 | import { STORY_IP_ASSETS, STORY_IP_ASSETS_MAP } from "@/stories/data" 2 | import type { Meta, StoryObj } from "@storybook/react" 3 | import { expect, waitFor } from "@storybook/test" 4 | import { Address } from "viem" 5 | 6 | import Example from "./Example" 7 | 8 | const meta = { 9 | title: "WIP/Royalty Graph", 10 | component: Example, 11 | parameters: { 12 | layout: "centered", 13 | }, 14 | // tags: ["autodocs"], 15 | argTypes: {}, 16 | args: {}, 17 | // tags: ["isHidden"], 18 | } satisfies Meta 19 | 20 | export default meta 21 | type Story = StoryObj 22 | 23 | export const Select: Story = { 24 | argTypes: { 25 | ipIds: { 26 | options: STORY_IP_ASSETS, 27 | mapping: STORY_IP_ASSETS_MAP, 28 | }, 29 | }, 30 | args: { 31 | ipIds: [STORY_IP_ASSETS_MAP[STORY_IP_ASSETS[0]]] as Address[], 32 | }, 33 | } 34 | 35 | export const LiquidAbsolutePercentage: Story = { 36 | args: { 37 | ipIds: [STORY_IP_ASSETS_MAP[STORY_IP_ASSETS[1]]] as Address[], 38 | }, 39 | } 40 | 41 | export const LiquidRelativePercentage: Story = { 42 | args: { 43 | ipIds: [STORY_IP_ASSETS_MAP[STORY_IP_ASSETS[2]]] as Address[], 44 | }, 45 | } 46 | 47 | export const Diamond: Story = { 48 | args: { 49 | ipIds: [STORY_IP_ASSETS_MAP[STORY_IP_ASSETS[3]]] as Address[], 50 | }, 51 | } 52 | -------------------------------------------------------------------------------- /packages/storykit/src/components/RoyaltyGraph/index.ts: -------------------------------------------------------------------------------- 1 | export { default as IpGraph } from "./RoyaltyGraph" 2 | -------------------------------------------------------------------------------- /packages/storykit/src/components/RoyaltyGraph/styles.css: -------------------------------------------------------------------------------- 1 | .skIpGraph { 2 | @apply sk-relative; 3 | 4 | .force-graph-container .graph-tooltip { 5 | @apply sk-text-xs; 6 | 7 | .graph-content { 8 | @apply sk-flex sk-flex-col sk-gap-1 sk-whitespace-nowrap; 9 | 10 | .graph-content-label { 11 | @apply sk-font-bold; 12 | } 13 | } 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /packages/storykit/src/components/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./LicenseTermsList" 2 | export * from "./IpLicenseAccordion" 3 | export * from "./LicenseFlavorSelector" 4 | // export * from "./Button" 5 | // export * from "./IpWidget" 6 | // export * from "./IpGraph" 7 | // export * from "./CollectionGraph" 8 | -------------------------------------------------------------------------------- /packages/storykit/src/components/utility/If.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | import { ReactNode } from "react" 3 | 4 | interface Props { 5 | condition: boolean 6 | children: ReactNode 7 | } 8 | export function If(prop: Props) { 9 | return prop.condition ? <>{prop.children} : null 10 | } 11 | -------------------------------------------------------------------------------- /packages/storykit/src/components/utility/context.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | import { PropsWithChildren, createContext, useContext as useContextRaw, useMemo } from "react" 3 | 4 | export class ContextError extends Error { 5 | static ErrorName = "InvalidContextUsage" 6 | static isContextError(error: Error) { 7 | return error.name === ContextError.ErrorName 8 | } 9 | 10 | constructor(message: string) { 11 | super(message) 12 | this.name = ContextError.ErrorName 13 | } 14 | } 15 | export function buildContext( 16 | rootComponentName: string, 17 | defaultContext?: ContextValueType 18 | ) { 19 | const Context = createContext(defaultContext) 20 | 21 | function Provider(props: PropsWithChildren) { 22 | const { children, ...context } = props 23 | 24 | const value = useMemo( 25 | () => context, 26 | // eslint-disable-next-line react-hooks/exhaustive-deps 27 | Object.values(context) 28 | ) as ContextValueType 29 | 30 | return {children} 31 | } 32 | 33 | function useContext(consumerName: string) { 34 | const context = useContextRaw(Context) 35 | if (context == null) { 36 | throw new ContextError(`${consumerName}은 ${rootComponentName}하위에서 사용해야 합니다.`) 37 | } 38 | 39 | return context 40 | } 41 | 42 | Provider.displayName = `${rootComponentName}Provider` 43 | return [Provider, useContext] as const 44 | } 45 | -------------------------------------------------------------------------------- /packages/storykit/src/constants/api.ts: -------------------------------------------------------------------------------- 1 | export enum API_URL { 2 | STAGING = "https://staging-api.storyprotocol.net", 3 | PRODUCTION = "https://api.storyapis.com", 4 | } 5 | -------------------------------------------------------------------------------- /packages/storykit/src/constants/chains.ts: -------------------------------------------------------------------------------- 1 | import { ChainConfig, WRAPPED_IP } from "@/types/chains" 2 | 3 | export const STORY_AENEID: ChainConfig = { 4 | id: 1315, 5 | name: "story-aeneid", 6 | alchemyId: "story-aeneid", 7 | apiVersion: "v3", 8 | displayName: "Story Aeneid Testnet", 9 | rpcUrl: "https://aeneid.storyrpc.io/", 10 | blockExplorerUrl: "https://aeneid.storyscan.io", 11 | protocolExplorerUrl: "https://aeneid.explorer.story.foundation", 12 | defaultCurrency: WRAPPED_IP, 13 | } 14 | 15 | export const STORY_MAINNET: ChainConfig = { 16 | id: 1514, 17 | name: "story", 18 | alchemyId: "story-mainnet", 19 | apiVersion: "v3", 20 | displayName: "Story Mainnet", 21 | rpcUrl: "https://mainnet.storyrpc.io", 22 | blockExplorerUrl: "https://mainnet.storyscan.io", 23 | protocolExplorerUrl: "https://explorer.story.foundation", 24 | defaultCurrency: WRAPPED_IP, 25 | } 26 | 27 | export const CHAINS = { 28 | [STORY_AENEID.name]: STORY_AENEID, 29 | [STORY_MAINNET.name]: STORY_MAINNET, 30 | } 31 | 32 | export const CHAINID_TO_CHAINNAME: { [key: number]: string } = { 33 | 1315: "story-aeneid", 34 | 1514: "story", 35 | } 36 | -------------------------------------------------------------------------------- /packages/storykit/src/constants/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./chains" 2 | export * from "./api" 3 | -------------------------------------------------------------------------------- /packages/storykit/src/declarations.d.ts: -------------------------------------------------------------------------------- 1 | declare module "*.module.css" { 2 | const classes: { [key: string]: string } 3 | export default classes 4 | } 5 | -------------------------------------------------------------------------------- /packages/storykit/src/global.css: -------------------------------------------------------------------------------- 1 | @import "./styles/themes.css"; 2 | @import "./styles/fonts.css"; 3 | 4 | @tailwind components; 5 | @tailwind utilities; 6 | -------------------------------------------------------------------------------- /packages/storykit/src/hooks/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./useCollection" 2 | export * from "./useCollections" 3 | export * from "./useDetailedIpLicenseTerms" 4 | export * from "./useDispute" 5 | export * from "./useDisputes" 6 | export * from "./useIpAsset" 7 | export * from "./useIpAssetEdges" 8 | export * from "./useIpAssetMetadata" 9 | export * from "./useIpAssets" 10 | export * from "./useIpAssetTerms" 11 | export * from "./useIpAssetsTerms" 12 | export * from "./useIpGroupEdges" 13 | export * from "./useIpGroups" 14 | export * from "./useLatestTransactions" 15 | export * from "./useLicenseMintingFee" 16 | export * from "./useLicenseMintingFees" 17 | export * from "./useLicenseTemplate" 18 | export * from "./useLicenseTemplates" 19 | export * from "./useLicenseTerms" 20 | export * from "./useLicensesTerms" 21 | export * from "./useLicenseToken" 22 | export * from "./useLicenseTokens" 23 | export * from "./useModule" 24 | export * from "./useModules" 25 | export * from "./usePermission" 26 | export * from "./usePermissions" 27 | export * from "./useRoyaltyPayment" 28 | export * from "./useRoyaltyPayments" 29 | export * from "./useTransaction" 30 | export * from "./useTransactions" 31 | -------------------------------------------------------------------------------- /packages/storykit/src/hooks/stories/(components)/CopyText.tsx: -------------------------------------------------------------------------------- 1 | import { Check, ClipboardCopy } from "lucide-react" 2 | import React, { useState } from "react" 3 | 4 | interface CopyTextProps { 5 | label: string 6 | value: string 7 | } 8 | 9 | export const CopyText = ({ label, value }: CopyTextProps) => { 10 | const [copied, setCopied] = useState(false) 11 | 12 | const handleCopy = async () => { 13 | try { 14 | await navigator.clipboard.writeText(value) 15 | setCopied(true) 16 | setTimeout(() => setCopied(false), 2000) 17 | } catch (err) { 18 | console.error("Failed to copy text: ", err) 19 | } 20 | } 21 | 22 | return ( 23 |
27 | {label} 28 | {copied ? : } 29 |
30 | ) 31 | } 32 | -------------------------------------------------------------------------------- /packages/storykit/src/hooks/stories/(components)/DataTable.tsx: -------------------------------------------------------------------------------- 1 | import { shortenAddress } from "@/lib" 2 | import React from "react" 3 | 4 | import { CopyText } from "./CopyText" 5 | 6 | interface DataTableProps { 7 | fields: string[] 8 | data: Record[] 9 | } 10 | 11 | export const DataTable = ({ fields, data }: DataTableProps) => { 12 | return ( 13 |
14 | 15 | 16 | 17 | {fields.map((field) => ( 18 | 21 | ))} 22 | 23 | 24 | 25 | {data?.map((item, index) => ( 26 | 27 | 28 | {fields.map((field) => ( 29 | 40 | ))} 41 | 42 | 43 | ))} 44 | 45 |
19 | {field} 20 |
30 | {item[field] ? ( 31 | typeof item[field] === "string" && item[field].length > 0 && item[field].startsWith("0x") ? ( 32 | 33 | ) : ( 34 | item[field] || "" 35 | ) 36 | ) : ( 37 | "-" 38 | )} 39 |
46 |
47 | ) 48 | } 49 | -------------------------------------------------------------------------------- /packages/storykit/src/hooks/stories/useCollection.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { Meta, StoryObj } from "@storybook/react" 2 | import React from "react" 3 | 4 | import { UseCollectionOptions, useCollection } from "../useCollection" 5 | import { DataTable } from "./(components)/DataTable" 6 | 7 | const Example = (args: UseCollectionOptions) => { 8 | const { isLoading, data } = useCollection(args) 9 | 10 | if (isLoading) return <>loading... 11 | if (!data?.data) return <>none found 12 | 13 | return 14 | } 15 | 16 | const meta = { 17 | title: "Hooks/useCollection", 18 | component: Example, 19 | parameters: { 20 | layout: "centered", 21 | }, 22 | args: { 23 | collectionId: "0x47191BCaa3D7c2730dDAf71ce589b6Dc992cC55f", 24 | queryOptions: { 25 | enabled: true, 26 | }, 27 | }, 28 | } satisfies Meta 29 | 30 | export default meta 31 | type Story = StoryObj 32 | 33 | export const Default: Story = { 34 | args: {}, 35 | } 36 | -------------------------------------------------------------------------------- /packages/storykit/src/hooks/stories/useCollectionByAddress.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { Meta, StoryObj } from "@storybook/react" 2 | import React from "react" 3 | 4 | import { UseCollectionByAddressOptions, useCollectionByAddress } from "../useCollectionByAddress" 5 | import { DataTable } from "./(components)/DataTable" 6 | 7 | const Example = (args: UseCollectionByAddressOptions) => { 8 | const { isLoading, data } = useCollectionByAddress(args) 9 | 10 | if (isLoading) return <>loading... 11 | if (!data) return <>none found 12 | 13 | return 14 | } 15 | 16 | const meta = { 17 | title: "Hooks/useCollectionByAddress", 18 | component: Example, 19 | parameters: { 20 | layout: "centered", 21 | }, 22 | args: { 23 | contractAddress: "0x47191BCaa3D7c2730dDAf71ce589b6Dc992cC55f", 24 | queryOptions: { 25 | enabled: true, 26 | }, 27 | }, 28 | } satisfies Meta 29 | 30 | export default meta 31 | type Story = StoryObj 32 | 33 | export const Default: Story = { 34 | args: {}, 35 | } 36 | -------------------------------------------------------------------------------- /packages/storykit/src/hooks/stories/useCollections.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { Meta, StoryObj } from "@storybook/react" 2 | import React from "react" 3 | 4 | import { UseCollectionsOptions, useCollections } from "../useCollections" 5 | import { DataTable } from "./(components)/DataTable" 6 | 7 | const Example = (args: UseCollectionsOptions) => { 8 | const { isLoading, data } = useCollections(args) 9 | 10 | if (isLoading) return <>loading... 11 | if (!data?.data) return <>none found 12 | 13 | return 14 | } 15 | 16 | const meta = { 17 | title: "Hooks/useCollections", 18 | component: Example, 19 | parameters: { 20 | layout: "centered", 21 | }, 22 | args: { 23 | options: { 24 | pagination: { limit: 5 }, 25 | orderBy: "blockNumber", 26 | orderDirection: "desc", 27 | }, 28 | queryOptions: { 29 | enabled: true, 30 | }, 31 | }, 32 | } satisfies Meta 33 | 34 | export default meta 35 | type Story = StoryObj 36 | 37 | export const Default: Story = { 38 | args: {}, 39 | } 40 | -------------------------------------------------------------------------------- /packages/storykit/src/hooks/stories/useDetailedIpLicenseTerms.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { Meta, StoryObj } from "@storybook/react" 2 | import React from "react" 3 | 4 | import { UseDetailedIpLicenseTermsOptions, useDetailedIpLicenseTerms } from "../useDetailedIpLicenseTerms" 5 | import { DataTable } from "./(components)/DataTable" 6 | 7 | const Example = (args: UseDetailedIpLicenseTermsOptions) => { 8 | const { isLoading, data } = useDetailedIpLicenseTerms(args) 9 | 10 | if (isLoading) return <>loading... 11 | if (!data?.data) return <>none found 12 | 13 | return ( 14 | ({ 17 | ...asset, 18 | derivativesAllowed: asset.terms?.derivativesAllowed ? "Yes" : "No", 19 | }))} 20 | /> 21 | ) 22 | } 23 | 24 | const meta = { 25 | title: "Hooks/useDetailedIpLicenseTerms", 26 | component: Example, 27 | parameters: { 28 | layout: "centered", 29 | }, 30 | args: { 31 | ipIds: ["0x90b73C8ED8D95997B735C44CBAd04d5A486d46d1", "0x83d9303E110b88481327B979804cFAe3E1012E2b"], 32 | queryOptions: { 33 | enabled: true, 34 | }, 35 | }, 36 | } satisfies Meta 37 | 38 | export default meta 39 | type Story = StoryObj 40 | 41 | export const Default: Story = { 42 | args: {}, 43 | } 44 | -------------------------------------------------------------------------------- /packages/storykit/src/hooks/stories/useDispute.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { Meta, StoryObj } from "@storybook/react" 2 | import React from "react" 3 | 4 | import { UseDisputeOptions, useDispute } from "../useDispute" 5 | import { DataTable } from "./(components)/DataTable" 6 | 7 | const Example = (args: UseDisputeOptions) => { 8 | const { isLoading, data } = useDispute(args) 9 | 10 | if (isLoading) return <>loading... 11 | if (!data?.data) return <>none found 12 | 13 | return 14 | } 15 | 16 | const meta = { 17 | title: "Hooks/useDispute", 18 | component: Example, 19 | parameters: { 20 | layout: "centered", 21 | }, 22 | args: { 23 | disputeId: "1", 24 | queryOptions: { 25 | enabled: true, 26 | }, 27 | }, 28 | } satisfies Meta 29 | 30 | export default meta 31 | type Story = StoryObj 32 | 33 | export const Default: Story = { 34 | args: {}, 35 | } 36 | -------------------------------------------------------------------------------- /packages/storykit/src/hooks/stories/useDisputes.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { Meta, StoryObj } from "@storybook/react" 2 | import React from "react" 3 | 4 | import { UseDisputesOptions, useDisputes } from "../useDisputes" 5 | import { DataTable } from "./(components)/DataTable" 6 | 7 | const Example = (args: UseDisputesOptions) => { 8 | const { isLoading, data } = useDisputes(args) 9 | 10 | if (isLoading) return <>loading... 11 | if (!data?.data) return <>none found 12 | 13 | return 14 | } 15 | 16 | const meta = { 17 | title: "Hooks/useDisputes", 18 | component: Example, 19 | parameters: { 20 | layout: "centered", 21 | }, 22 | args: { 23 | options: { 24 | pagination: { 25 | limit: 5, 26 | }, 27 | }, 28 | queryOptions: { 29 | enabled: true, 30 | }, 31 | }, 32 | } satisfies Meta 33 | 34 | export default meta 35 | type Story = StoryObj 36 | 37 | export const Default: Story = { 38 | args: {}, 39 | } 40 | -------------------------------------------------------------------------------- /packages/storykit/src/hooks/stories/useIpAsset.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { Meta, StoryObj } from "@storybook/react" 2 | import React from "react" 3 | 4 | import { UseIpAssetOptions, useIpAsset } from "../useIpAsset" 5 | import { DataTable } from "./(components)/DataTable" 6 | 7 | const Example = (args: UseIpAssetOptions) => { 8 | const { isLoading, data } = useIpAsset(args) 9 | 10 | if (isLoading) return <>loading... 11 | if (!data?.data) return <>none found 12 | 13 | return ( 14 | 23 | ) 24 | } 25 | 26 | const meta = { 27 | title: "Hooks/useIpAsset", 28 | component: Example, 29 | parameters: { 30 | layout: "centered", 31 | }, 32 | args: { 33 | ipId: "0xD4128fD30640C8b3822E3A33EB2c672e955B772d", 34 | queryOptions: { 35 | enabled: true, 36 | }, 37 | }, 38 | } satisfies Meta 39 | 40 | export default meta 41 | type Story = StoryObj 42 | 43 | export const Default: Story = { 44 | args: {}, 45 | } 46 | -------------------------------------------------------------------------------- /packages/storykit/src/hooks/stories/useIpAssetEdges.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { Meta, StoryObj } from "@storybook/react" 2 | import React from "react" 3 | 4 | import { UseIpAssetEdgesOptions, useIpAssetEdges } from "../useIpAssetEdges" 5 | import { DataTable } from "./(components)/DataTable" 6 | 7 | const Example = (args: UseIpAssetEdgesOptions) => { 8 | const { isLoading, data } = useIpAssetEdges(args) 9 | 10 | if (isLoading) return <>loading... 11 | if (!data?.data) return <>none found 12 | 13 | return 14 | } 15 | 16 | const meta = { 17 | title: "Hooks/useIpAssetEdges", 18 | component: Example, 19 | parameters: { 20 | layout: "centered", 21 | }, 22 | args: { 23 | options: { 24 | pagination: { limit: 5 }, 25 | orderBy: "blockNumber", 26 | orderDirection: "desc", 27 | }, 28 | queryOptions: { 29 | enabled: true, 30 | }, 31 | }, 32 | } satisfies Meta 33 | 34 | export default meta 35 | type Story = StoryObj 36 | 37 | export const Default: Story = { 38 | args: {}, 39 | } 40 | -------------------------------------------------------------------------------- /packages/storykit/src/hooks/stories/useIpAssetMetadata.stories.tsx: -------------------------------------------------------------------------------- 1 | import { shortenAddress } from "@/lib" 2 | import type { Meta, StoryObj } from "@storybook/react" 3 | import React from "react" 4 | 5 | import { UseIpAssetMetadataOptions, useIpAssetMetadata } from "../useIpAssetMetadata" 6 | import { CopyText } from "./(components)/CopyText" 7 | import { DataTable } from "./(components)/DataTable" 8 | 9 | const Example = (args: UseIpAssetMetadataOptions) => { 10 | const { isLoading, data } = useIpAssetMetadata(args) 11 | 12 | if (isLoading) return <>loading... 13 | if (!data) return <>none found 14 | 15 | return ( 16 | , 22 | }, 23 | ]} 24 | /> 25 | ) 26 | } 27 | 28 | const meta = { 29 | title: "Hooks/useIpAssetMetadata", 30 | component: Example, 31 | parameters: { 32 | layout: "centered", 33 | }, 34 | args: { 35 | ipId: "0xD4128fD30640C8b3822E3A33EB2c672e955B772d", 36 | queryOptions: { 37 | enabled: true, 38 | }, 39 | }, 40 | } satisfies Meta 41 | 42 | export default meta 43 | type Story = StoryObj 44 | 45 | export const Default: Story = { 46 | args: {}, 47 | } 48 | -------------------------------------------------------------------------------- /packages/storykit/src/hooks/stories/useIpAssetTerms.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { Meta, StoryObj } from "@storybook/react" 2 | import React from "react" 3 | 4 | import { UseIpAssetTermsOptions, useIpAssetTerms } from "../useIpAssetTerms" 5 | import { DataTable } from "./(components)/DataTable" 6 | 7 | const Example = (args: UseIpAssetTermsOptions) => { 8 | const { isLoading, data } = useIpAssetTerms(args) 9 | 10 | if (isLoading) return <>loading... 11 | if (!data?.data) return <>none found 12 | 13 | return 14 | } 15 | 16 | const meta = { 17 | title: "Hooks/useIpAssetTerms", 18 | component: Example, 19 | parameters: { 20 | layout: "centered", 21 | }, 22 | args: { 23 | ipId: "0xD4128fD30640C8b3822E3A33EB2c672e955B772d", 24 | queryOptions: { 25 | enabled: true, 26 | }, 27 | }, 28 | } satisfies Meta 29 | 30 | export default meta 31 | type Story = StoryObj 32 | 33 | export const Default: Story = { 34 | args: {}, 35 | } 36 | -------------------------------------------------------------------------------- /packages/storykit/src/hooks/stories/useIpAssets.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { Meta, StoryObj } from "@storybook/react" 2 | import React from "react" 3 | 4 | import { UseIpAssetsOptions, useIpAssets } from "../useIpAssets" 5 | import { DataTable } from "./(components)/DataTable" 6 | 7 | const Example = (args: UseIpAssetsOptions) => { 8 | const { isLoading, data } = useIpAssets(args) 9 | 10 | if (isLoading) return <>loading... 11 | if (!data?.data) return <>none found 12 | 13 | return ( 14 | ({ 17 | ...asset, 18 | name: asset.nftMetadata?.name || "", 19 | }))} 20 | /> 21 | ) 22 | } 23 | 24 | const meta = { 25 | title: "Hooks/useIpAssets", 26 | component: Example, 27 | parameters: { 28 | layout: "centered", 29 | }, 30 | args: { 31 | options: { 32 | orderBy: "blockNumber", 33 | orderDirection: "desc", 34 | pagination: { 35 | after: undefined, 36 | before: undefined, 37 | limit: 10, 38 | }, 39 | }, 40 | ipIds: [], 41 | queryOptions: { 42 | enabled: true, 43 | }, 44 | }, 45 | } satisfies Meta 46 | 47 | export default meta 48 | type Story = StoryObj 49 | 50 | export const Default: Story = { 51 | args: {}, 52 | } 53 | -------------------------------------------------------------------------------- /packages/storykit/src/hooks/stories/useIpAssetsTerms.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { Meta, StoryObj } from "@storybook/react" 2 | import React from "react" 3 | 4 | import { UseIpAssetsTermsOptions, useIpAssetsTerms } from "../useIpAssetsTerms" 5 | import { DataTable } from "./(components)/DataTable" 6 | 7 | const Example = (args: UseIpAssetsTermsOptions) => { 8 | const { isLoading, data } = useIpAssetsTerms(args) 9 | 10 | if (isLoading) return <>loading... 11 | if (!data?.data) return <>none found 12 | 13 | return 14 | } 15 | 16 | const meta = { 17 | title: "Hooks/useIpAssetsTerms", 18 | component: Example, 19 | parameters: { 20 | layout: "centered", 21 | }, 22 | argTypes: { 23 | ipIds: { 24 | control: "object", 25 | }, 26 | }, 27 | args: { 28 | options: { 29 | pagination: { limit: 5 }, 30 | orderBy: "blockNumber", 31 | orderDirection: "desc", 32 | }, 33 | queryOptions: { 34 | enabled: true, 35 | }, 36 | ipIds: undefined, 37 | }, 38 | } satisfies Meta 39 | 40 | export default meta 41 | 42 | type Story = StoryObj 43 | 44 | export const Default: Story = { 45 | args: {}, 46 | } 47 | -------------------------------------------------------------------------------- /packages/storykit/src/hooks/stories/useIpGroupEdges.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { Meta, StoryObj } from "@storybook/react" 2 | import React from "react" 3 | 4 | import { UseIpGroupEdgesOptions, useIpGroupEdges } from "../useIpGroupEdges" 5 | import { DataTable } from "./(components)/DataTable" 6 | 7 | const Example = (args: UseIpGroupEdgesOptions) => { 8 | const { isLoading, data } = useIpGroupEdges(args) 9 | 10 | if (isLoading) return <>loading... 11 | if (!data?.data) return <>none found 12 | 13 | return 14 | } 15 | 16 | const meta = { 17 | title: "Hooks/useIpGroupEdges", 18 | component: Example, 19 | parameters: { 20 | layout: "centered", 21 | }, 22 | argTypes: { 23 | groupId: { 24 | control: "text", 25 | }, 26 | }, 27 | args: { 28 | options: { 29 | pagination: { limit: 5 }, 30 | orderBy: "blockNumber", 31 | orderDirection: "desc", 32 | }, 33 | queryOptions: { 34 | enabled: true, 35 | }, 36 | groupId: undefined, 37 | }, 38 | } satisfies Meta 39 | 40 | export default meta 41 | 42 | type Story = StoryObj 43 | 44 | export const Default: Story = { 45 | args: {}, 46 | } 47 | -------------------------------------------------------------------------------- /packages/storykit/src/hooks/stories/useIpGroups.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { Meta, StoryObj } from "@storybook/react" 2 | import React from "react" 3 | 4 | import { UseIpGroupsOptions, useIpGroups } from "../useIpGroups" 5 | import { DataTable } from "./(components)/DataTable" 6 | 7 | const Example = (args: UseIpGroupsOptions) => { 8 | const { isLoading, data } = useIpGroups(args) 9 | 10 | if (isLoading) return <>loading... 11 | if (!data?.data) return <>none found 12 | 13 | return 14 | } 15 | 16 | const meta = { 17 | title: "Hooks/useIpGroups", 18 | component: Example, 19 | parameters: { 20 | layout: "centered", 21 | }, 22 | args: { 23 | options: { 24 | pagination: { limit: 5 }, 25 | orderBy: "groupId", 26 | orderDirection: "desc", 27 | }, 28 | queryOptions: { 29 | enabled: true, 30 | }, 31 | }, 32 | } satisfies Meta 33 | 34 | export default meta 35 | 36 | type Story = StoryObj 37 | 38 | export const Default: Story = { 39 | args: {}, 40 | } 41 | -------------------------------------------------------------------------------- /packages/storykit/src/hooks/stories/useLatestTransactions.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { Meta, StoryObj } from "@storybook/react" 2 | import React from "react" 3 | 4 | import { UseLatestTransactionsOptions, useLatestTransactions } from "../useLatestTransactions" 5 | import { DataTable } from "./(components)/DataTable" 6 | 7 | const Example = (args: UseLatestTransactionsOptions) => { 8 | const { isLoading, data } = useLatestTransactions(args) 9 | 10 | if (isLoading) return <>loading... 11 | if (!data?.data) return <>none found 12 | 13 | return 14 | } 15 | 16 | const meta = { 17 | title: "Hooks/useLatestTransactions", 18 | component: Example, 19 | parameters: { 20 | layout: "centered", 21 | }, 22 | args: { 23 | options: { 24 | pagination: { 25 | limit: 10, 26 | }, 27 | }, 28 | queryOptions: { 29 | enabled: true, 30 | }, 31 | }, 32 | } satisfies Meta 33 | 34 | export default meta 35 | type Story = StoryObj 36 | 37 | export const Default: Story = { 38 | args: {}, 39 | } 40 | -------------------------------------------------------------------------------- /packages/storykit/src/hooks/stories/useLicenseMintingFee.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { Meta, StoryObj } from "@storybook/react" 2 | import React from "react" 3 | import { formatEther } from "viem" 4 | 5 | import { UseLicenseMintingFeeOptions, useLicenseMintingFee } from "../useLicenseMintingFee" 6 | import { DataTable } from "./(components)/DataTable" 7 | 8 | const Example = (args: UseLicenseMintingFeeOptions) => { 9 | const { isLoading, data } = useLicenseMintingFee(args) 10 | 11 | if (isLoading) return <>loading... 12 | if (!data?.data) return <>none found 13 | 14 | return ( 15 | 24 | ) 25 | } 26 | 27 | const meta = { 28 | title: "Hooks/useLicenseMintingFee", 29 | component: Example, 30 | parameters: { 31 | layout: "centered", 32 | }, 33 | args: { 34 | licenseMintingFeePaidId: "0x030842d26e948d4a436088a16a914a4b6e2c0ca23445d68360249d508c5080bc14", 35 | queryOptions: { 36 | enabled: true, 37 | }, 38 | }, 39 | } satisfies Meta 40 | 41 | export default meta 42 | type Story = StoryObj 43 | 44 | export const Default: Story = { 45 | args: {}, 46 | } 47 | -------------------------------------------------------------------------------- /packages/storykit/src/hooks/stories/useLicenseMintingFees.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { Meta, StoryObj } from "@storybook/react" 2 | import React from "react" 3 | import { formatEther } from "viem" 4 | 5 | import { UseLicenseMintingFeesOptions, useLicenseMintingFees } from "../useLicenseMintingFees" 6 | import { DataTable } from "./(components)/DataTable" 7 | 8 | const Example = (args: UseLicenseMintingFeesOptions) => { 9 | const { isLoading, data } = useLicenseMintingFees(args) 10 | 11 | if (isLoading) return <>loading... 12 | if (!data?.data) return <>none found 13 | 14 | return ( 15 | ({ 18 | ...fee, 19 | amount: `${Number(formatEther(BigInt(fee.amount || 0))).toFixed(3)} IP`, 20 | }))} 21 | /> 22 | ) 23 | } 24 | 25 | const meta = { 26 | title: "Hooks/useLicenseMintingFees", 27 | component: Example, 28 | parameters: { 29 | layout: "centered", 30 | }, 31 | args: { 32 | options: { 33 | pagination: { 34 | limit: 5, 35 | }, 36 | }, 37 | queryOptions: { 38 | enabled: true, 39 | }, 40 | }, 41 | } satisfies Meta 42 | 43 | export default meta 44 | type Story = StoryObj 45 | 46 | export const Default: Story = { 47 | args: {}, 48 | } 49 | -------------------------------------------------------------------------------- /packages/storykit/src/hooks/stories/useLicenseTemplate.stories.tsx: -------------------------------------------------------------------------------- 1 | import { shortenAddress } from "@/lib" 2 | import type { Meta, StoryObj } from "@storybook/react" 3 | import React from "react" 4 | 5 | import { UseLicenseTemplateOptions, useLicenseTemplate } from "../useLicenseTemplate" 6 | import { CopyText } from "./(components)/CopyText" 7 | import { DataTable } from "./(components)/DataTable" 8 | 9 | const Example = (args: UseLicenseTemplateOptions) => { 10 | const { isLoading, data } = useLicenseTemplate(args) 11 | 12 | if (isLoading) return <>loading... 13 | if (!data?.data) return <>none found 14 | 15 | return ( 16 | 23 | ), 24 | }, 25 | ]} 26 | /> 27 | ) 28 | } 29 | 30 | const meta = { 31 | title: "Hooks/useLicenseTemplate", 32 | component: Example, 33 | parameters: { 34 | layout: "centered", 35 | }, 36 | args: { 37 | licenseTemplateId: "0x2E896b0b2Fdb7457499B56AAaA4AE55BCB4Cd316", 38 | queryOptions: { 39 | enabled: true, 40 | }, 41 | }, 42 | } satisfies Meta 43 | 44 | export default meta 45 | type Story = StoryObj 46 | 47 | export const Default: Story = { 48 | args: {}, 49 | } 50 | -------------------------------------------------------------------------------- /packages/storykit/src/hooks/stories/useLicenseTemplates.stories.tsx: -------------------------------------------------------------------------------- 1 | import { shortenAddress } from "@/lib" 2 | import type { Meta, StoryObj } from "@storybook/react" 3 | import React from "react" 4 | 5 | import { UseLicenseTemplatesOptions, useLicenseTemplates } from "../useLicenseTemplates" 6 | import { CopyText } from "./(components)/CopyText" 7 | import { DataTable } from "./(components)/DataTable" 8 | 9 | const Example = (args: UseLicenseTemplatesOptions) => { 10 | const { isLoading, data } = useLicenseTemplates(args) 11 | 12 | if (isLoading) return <>loading... 13 | if (!data?.data) return <>none found 14 | 15 | return ( 16 | ({ 19 | ...template, 20 | metadataUri: ( 21 | 22 | ), 23 | }))} 24 | /> 25 | ) 26 | } 27 | 28 | const meta = { 29 | title: "Hooks/useLicenseTemplates", 30 | component: Example, 31 | parameters: { 32 | layout: "centered", 33 | }, 34 | args: { 35 | options: { 36 | pagination: { 37 | limit: 5, 38 | }, 39 | }, 40 | queryOptions: { 41 | enabled: true, 42 | }, 43 | }, 44 | } satisfies Meta 45 | 46 | export default meta 47 | type Story = StoryObj 48 | 49 | export const Default: Story = { 50 | args: {}, 51 | } 52 | -------------------------------------------------------------------------------- /packages/storykit/src/hooks/stories/useLicenseTerms.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { Meta, StoryObj } from "@storybook/react" 2 | import React from "react" 3 | 4 | import { UseLicenseTermsOptions, useLicenseTerms } from "../useLicenseTerms" 5 | import { DataTable } from "./(components)/DataTable" 6 | 7 | const Example = (args: UseLicenseTermsOptions) => { 8 | const { isLoading, data } = useLicenseTerms(args) 9 | const mainFields = ["id", "licenseTemplate", "commercialAttribution", "commercialUse", "derivativesAllowed"] 10 | 11 | if (isLoading) return <>loading... 12 | if (!data?.data) return <>none found 13 | 14 | return ( 15 |
16 | 27 |
28 | ) 29 | } 30 | 31 | const meta = { 32 | title: "Hooks/useLicenseTerms", 33 | component: Example, 34 | parameters: { 35 | layout: "centered", 36 | }, 37 | args: { 38 | licenseTermId: "3914", 39 | queryOptions: { 40 | enabled: true, 41 | }, 42 | }, 43 | } satisfies Meta 44 | 45 | export default meta 46 | type Story = StoryObj 47 | 48 | export const Default: Story = { 49 | args: {}, 50 | } 51 | -------------------------------------------------------------------------------- /packages/storykit/src/hooks/stories/useLicenseToken.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { Meta, StoryObj } from "@storybook/react" 2 | import React from "react" 3 | 4 | import { UseLicenseTokenOptions, useLicenseToken } from "../useLicenseToken" 5 | import { DataTable } from "./(components)/DataTable" 6 | 7 | const Example = (args: UseLicenseTokenOptions) => { 8 | const { isLoading, data } = useLicenseToken(args) 9 | 10 | if (isLoading) return <>loading... 11 | if (!data?.data) return <>none found 12 | 13 | return ( 14 | 18 | ) 19 | } 20 | 21 | const meta = { 22 | title: "Hooks/useLicenseToken", 23 | component: Example, 24 | parameters: { 25 | layout: "centered", 26 | }, 27 | args: { 28 | licenseTokenId: "11264", 29 | queryOptions: { 30 | enabled: true, 31 | }, 32 | }, 33 | } satisfies Meta 34 | 35 | export default meta 36 | type Story = StoryObj 37 | 38 | export const Default: Story = { 39 | args: {}, 40 | } 41 | -------------------------------------------------------------------------------- /packages/storykit/src/hooks/stories/useLicenseTokens.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { Meta, StoryObj } from "@storybook/react" 2 | import React from "react" 3 | 4 | import { UseLicenseTokensOptions, useLicenseTokens } from "../useLicenseTokens" 5 | import { DataTable } from "./(components)/DataTable" 6 | 7 | const Example = (args: UseLicenseTokensOptions) => { 8 | const { isLoading, data } = useLicenseTokens(args) 9 | 10 | if (isLoading) return <>loading... 11 | if (!data?.data) return <>none found 12 | 13 | return 14 | } 15 | 16 | const meta = { 17 | title: "Hooks/useLicenseTokens", 18 | component: Example, 19 | parameters: { 20 | layout: "centered", 21 | }, 22 | args: { 23 | options: { 24 | pagination: { 25 | limit: 10, 26 | }, 27 | }, 28 | queryOptions: { 29 | enabled: true, 30 | }, 31 | }, 32 | } satisfies Meta 33 | 34 | export default meta 35 | type Story = StoryObj 36 | 37 | export const Default: Story = { 38 | args: {}, 39 | } 40 | -------------------------------------------------------------------------------- /packages/storykit/src/hooks/stories/useLicensesTerms.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { Meta, StoryObj } from "@storybook/react" 2 | import React from "react" 3 | 4 | import { UseLicensesTermsOptions, useLicensesTerms } from "../useLicensesTerms" 5 | import { DataTable } from "./(components)/DataTable" 6 | 7 | const Example = (args: UseLicensesTermsOptions) => { 8 | const { isLoading, data } = useLicensesTerms(args) 9 | const mainFields = ["id", "licenseTemplate", "commercialAttribution", "commercialUse", "derivativesAllowed"] 10 | 11 | if (isLoading) return <>loading... 12 | if (!data?.data) return <>none found 13 | 14 | return ( 15 |
16 | ({ 19 | ...term, 20 | commercialAttribution: term.terms?.commercialAttribution ? "Yes" : "No", 21 | commercialUse: term.terms?.commercialUse ? "Yes" : "No", 22 | derivativesAllowed: term.terms?.derivativesAllowed ? "Yes" : "No", 23 | }))} 24 | /> 25 |
26 | ) 27 | } 28 | 29 | const meta = { 30 | title: "Hooks/useLicensesTerms", 31 | component: Example, 32 | parameters: { 33 | layout: "centered", 34 | }, 35 | args: { 36 | options: { 37 | pagination: { 38 | limit: 10, 39 | }, 40 | }, 41 | queryOptions: { 42 | enabled: true, 43 | }, 44 | }, 45 | } satisfies Meta 46 | 47 | export default meta 48 | type Story = StoryObj 49 | 50 | export const Default: Story = { 51 | args: {}, 52 | } 53 | -------------------------------------------------------------------------------- /packages/storykit/src/hooks/stories/useModule.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { Meta, StoryObj } from "@storybook/react" 2 | import React from "react" 3 | 4 | import { UseModuleOptions, useModule } from "../useModule" 5 | import { DataTable } from "./(components)/DataTable" 6 | 7 | const Example = (args: UseModuleOptions) => { 8 | const { isLoading, data } = useModule(args) 9 | 10 | if (isLoading) return <>loading... 11 | if (!data?.data) return <>none found 12 | 13 | return 14 | } 15 | 16 | const meta = { 17 | title: "Hooks/useModule", 18 | component: Example, 19 | parameters: { 20 | layout: "centered", 21 | }, 22 | args: { 23 | moduleId: "0x69D3a7aa9edb72Bc226E745A7cCdd50D947b69Ac", 24 | queryOptions: { 25 | enabled: true, 26 | }, 27 | }, 28 | } satisfies Meta 29 | 30 | export default meta 31 | type Story = StoryObj 32 | 33 | export const Default: Story = { 34 | args: {}, 35 | } 36 | -------------------------------------------------------------------------------- /packages/storykit/src/hooks/stories/useModules.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { Meta, StoryObj } from "@storybook/react" 2 | import React from "react" 3 | 4 | import { UseModulesOptions, useModules } from "../useModules" 5 | import { DataTable } from "./(components)/DataTable" 6 | 7 | const Example = (args: UseModulesOptions) => { 8 | const { isLoading, data } = useModules(args) 9 | 10 | if (isLoading) return <>loading... 11 | if (!data?.data) return <>none found 12 | 13 | return 14 | } 15 | 16 | const meta = { 17 | title: "Hooks/useModules", 18 | component: Example, 19 | parameters: { 20 | layout: "centered", 21 | }, 22 | args: { 23 | options: { 24 | pagination: { 25 | limit: 10, 26 | }, 27 | }, 28 | queryOptions: { 29 | enabled: true, 30 | }, 31 | }, 32 | } satisfies Meta 33 | 34 | export default meta 35 | type Story = StoryObj 36 | 37 | export const Default: Story = { 38 | args: {}, 39 | } 40 | -------------------------------------------------------------------------------- /packages/storykit/src/hooks/stories/useNFTByTokenId.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { Meta, StoryObj } from "@storybook/react" 2 | import React from "react" 3 | 4 | import { UseNFTByTokenIdOptions, useNFTByTokenId } from "../useNFTByTokenId" 5 | import { DataTable } from "./(components)/DataTable" 6 | 7 | const Example = (args: UseNFTByTokenIdOptions) => { 8 | const { isLoading, data } = useNFTByTokenId(args) 9 | 10 | if (isLoading) return <>loading... 11 | if (!data) return <>none found 12 | 13 | return ( 14 | 23 | ) 24 | } 25 | 26 | const meta = { 27 | title: "Hooks/useNFTByTokenId", 28 | component: Example, 29 | parameters: { 30 | layout: "centered", 31 | }, 32 | args: { 33 | contractAddress: "0x47191BCaa3D7c2730dDAf71ce589b6Dc992cC55f", 34 | tokenId: "1", 35 | queryOptions: { 36 | enabled: true, 37 | }, 38 | }, 39 | } satisfies Meta 40 | 41 | export default meta 42 | type Story = StoryObj 43 | 44 | export const Default: Story = { 45 | args: {}, 46 | } 47 | -------------------------------------------------------------------------------- /packages/storykit/src/hooks/stories/useNFTByTokenIds.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { Meta, StoryObj } from "@storybook/react" 2 | import React from "react" 3 | 4 | import { UseNFTByTokenIdsOptions, useNFTByTokenIds } from "../useNFTByTokenIds" 5 | import { DataTable } from "./(components)/DataTable" 6 | 7 | const Example = (args: UseNFTByTokenIdsOptions) => { 8 | const { isLoading, data } = useNFTByTokenIds(args) 9 | 10 | if (isLoading) return <>loading... 11 | if (!data) return <>none found 12 | 13 | return ( 14 | <> 15 | {data.nfts.map((nft, index) => ( 16 | 26 | ))} 27 | 28 | ) 29 | } 30 | 31 | const meta = { 32 | title: "Hooks/useNFTByTokenIds", 33 | component: Example, 34 | parameters: { 35 | layout: "centered", 36 | }, 37 | args: { 38 | nfts: [ 39 | { 40 | contractAddress: "0x47191BCaa3D7c2730dDAf71ce589b6Dc992cC55f", 41 | tokenId: "1", 42 | }, 43 | { 44 | contractAddress: "0x47191BCaa3D7c2730dDAf71ce589b6Dc992cC55f", 45 | tokenId: "2", 46 | }, 47 | ], 48 | queryOptions: { 49 | enabled: true, 50 | }, 51 | }, 52 | } satisfies Meta 53 | 54 | export default meta 55 | type Story = StoryObj 56 | 57 | export const Default: Story = { 58 | args: {}, 59 | } 60 | -------------------------------------------------------------------------------- /packages/storykit/src/hooks/stories/useNFTByWallet.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { Meta, StoryObj } from "@storybook/react" 2 | import React from "react" 3 | 4 | import { UseNFTByWalletOptions, useNFTByWallet } from "../useNFTByWallet" 5 | import { DataTable } from "./(components)/DataTable" 6 | 7 | const Example = (args: UseNFTByWalletOptions) => { 8 | const { isLoading, data } = useNFTByWallet(args) 9 | 10 | if (isLoading) return <>loading... 11 | if (!data) return <>none found 12 | 13 | return ( 14 | <> 15 | {data?.ownedNfts?.map((nft, index) => ( 16 | 26 | ))} 27 | 28 | ) 29 | } 30 | 31 | const meta = { 32 | title: "Hooks/useNFTByWallet", 33 | component: Example, 34 | parameters: { 35 | layout: "centered", 36 | }, 37 | args: { 38 | options: { 39 | owner: "0x15A12c93396C059DB70E5D3fa021A2E1B94954c2", 40 | pageSize: 5, 41 | }, 42 | queryOptions: { 43 | enabled: true, 44 | }, 45 | }, 46 | } satisfies Meta 47 | 48 | export default meta 49 | type Story = StoryObj 50 | 51 | export const Default: Story = { 52 | args: {}, 53 | } 54 | -------------------------------------------------------------------------------- /packages/storykit/src/hooks/stories/useOwnersByTokenId.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { Meta, StoryObj } from "@storybook/react" 2 | import React from "react" 3 | 4 | import { UseOwnersByTokenIdOptions, useOwnersByTokenId } from "../useOwnersByTokenId" 5 | import { DataTable } from "./(components)/DataTable" 6 | 7 | const Example = (args: UseOwnersByTokenIdOptions) => { 8 | const { isLoading, data } = useOwnersByTokenId(args) 9 | 10 | if (isLoading) return <>loading... 11 | if (!data) return <>none found 12 | 13 | return ( 14 | <> 15 | {data.owners.map((owner, index) => ( 16 | 17 | ))} 18 | 19 | ) 20 | } 21 | 22 | const meta = { 23 | title: "Hooks/useOwnersByTokenId", 24 | component: Example, 25 | parameters: { 26 | layout: "centered", 27 | }, 28 | args: { 29 | contractAddress: "0x47191BCaa3D7c2730dDAf71ce589b6Dc992cC55f", 30 | tokenId: "1", 31 | queryOptions: { 32 | enabled: true, 33 | }, 34 | }, 35 | } satisfies Meta 36 | 37 | export default meta 38 | type Story = StoryObj 39 | 40 | export const Default: Story = { 41 | args: {}, 42 | } 43 | -------------------------------------------------------------------------------- /packages/storykit/src/hooks/stories/usePermission.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { Meta, StoryObj } from "@storybook/react" 2 | import React from "react" 3 | 4 | import { UsePermissionOptions, usePermission } from "../usePermission" 5 | import { DataTable } from "./(components)/DataTable" 6 | 7 | const Example = (args: UsePermissionOptions) => { 8 | const { isLoading, data } = usePermission(args) 9 | 10 | if (isLoading) return <>loading... 11 | if (!data?.data) return <>none found 12 | 13 | return 14 | } 15 | 16 | const meta = { 17 | title: "Hooks/usePermission", 18 | component: Example, 19 | parameters: { 20 | layout: "centered", 21 | }, 22 | args: { 23 | permissionId: "0xa3a6b74f2b1770x0", 24 | queryOptions: { 25 | enabled: true, 26 | }, 27 | }, 28 | } satisfies Meta 29 | 30 | export default meta 31 | type Story = StoryObj 32 | 33 | export const Default: Story = { 34 | args: {}, 35 | } 36 | -------------------------------------------------------------------------------- /packages/storykit/src/hooks/stories/usePermissions.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { Meta, StoryObj } from "@storybook/react" 2 | import React from "react" 3 | 4 | import { UsePermissionsOptions, usePermissions } from "../usePermissions" 5 | import { DataTable } from "./(components)/DataTable" 6 | 7 | const Example = (args: UsePermissionsOptions) => { 8 | const { isLoading, data } = usePermissions(args) 9 | 10 | if (isLoading) return <>loading... 11 | if (!data?.data) return <>none found 12 | 13 | return 14 | } 15 | 16 | const meta = { 17 | title: "Hooks/usePermissions", 18 | component: Example, 19 | parameters: { 20 | layout: "centered", 21 | }, 22 | args: { 23 | options: { 24 | pagination: { 25 | limit: 10, 26 | }, 27 | }, 28 | queryOptions: { 29 | enabled: true, 30 | }, 31 | }, 32 | } satisfies Meta 33 | 34 | export default meta 35 | type Story = StoryObj 36 | 37 | export const Default: Story = { 38 | args: {}, 39 | } 40 | -------------------------------------------------------------------------------- /packages/storykit/src/hooks/stories/useRoyaltyPayment.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { Meta, StoryObj } from "@storybook/react" 2 | import React from "react" 3 | import { formatEther } from "viem" 4 | 5 | import { UseRoyaltyPaymentOptions, useRoyaltyPayment } from "../useRoyaltyPayment" 6 | import { DataTable } from "./(components)/DataTable" 7 | 8 | const Example = (args: UseRoyaltyPaymentOptions) => { 9 | const { isLoading, data } = useRoyaltyPayment(args) 10 | 11 | if (isLoading) return <>loading... 12 | if (!data?.data) return <>none found 13 | 14 | return ( 15 | 24 | ) 25 | } 26 | 27 | const meta = { 28 | title: "Hooks/useRoyaltyPayment", 29 | component: Example, 30 | parameters: { 31 | layout: "centered", 32 | }, 33 | args: { 34 | royaltyPayId: "0x9e3a1f325519871f4db66b7e3b6ae4c9734e82bc641d2a6189ec9c0d963923ea7", 35 | queryOptions: { 36 | enabled: true, 37 | }, 38 | }, 39 | } satisfies Meta 40 | 41 | export default meta 42 | type Story = StoryObj 43 | 44 | export const Default: Story = { 45 | args: {}, 46 | } 47 | -------------------------------------------------------------------------------- /packages/storykit/src/hooks/stories/useRoyaltyPayments.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { Meta, StoryObj } from "@storybook/react" 2 | import React from "react" 3 | import { formatEther } from "viem" 4 | 5 | import { UseRoyaltyPaymentsOptions, useRoyaltyPayments } from "../useRoyaltyPayments" 6 | import { DataTable } from "./(components)/DataTable" 7 | 8 | const Example = (args: UseRoyaltyPaymentsOptions) => { 9 | const { isLoading, data } = useRoyaltyPayments(args) 10 | 11 | if (isLoading) return <>loading... 12 | if (!data?.data) return <>none found 13 | 14 | return ( 15 | ({ 18 | ...payment, 19 | amount: `${Number(formatEther(BigInt(payment.amount || 0))).toFixed(3)}IP`, 20 | }))} 21 | /> 22 | ) 23 | } 24 | 25 | const meta = { 26 | title: "Hooks/useRoyaltyPayments", 27 | component: Example, 28 | parameters: { 29 | layout: "centered", 30 | }, 31 | args: { 32 | options: { 33 | pagination: { 34 | limit: 10, 35 | }, 36 | }, 37 | queryOptions: { 38 | enabled: true, 39 | }, 40 | }, 41 | } satisfies Meta 42 | 43 | export default meta 44 | type Story = StoryObj 45 | 46 | export const Default: Story = { 47 | args: {}, 48 | } 49 | -------------------------------------------------------------------------------- /packages/storykit/src/hooks/stories/useTransaction.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { Meta, StoryObj } from "@storybook/react" 2 | import React from "react" 3 | 4 | import { UseTransactionOptions, useTransaction } from "../useTransaction" 5 | import { DataTable } from "./(components)/DataTable" 6 | 7 | const Example = (args: UseTransactionOptions) => { 8 | const { isLoading, data } = useTransaction(args) 9 | 10 | if (isLoading) return <>loading... 11 | if (!data?.data) return <>none found 12 | 13 | return 14 | } 15 | 16 | const meta = { 17 | title: "Hooks/useTransaction", 18 | component: Example, 19 | parameters: { 20 | layout: "centered", 21 | }, 22 | args: { 23 | trxId: "0x70045880a7f7db3b43de738c24f00c5b1cef48d5f95bc633d4df7002dfffbc95", 24 | queryOptions: { 25 | enabled: true, 26 | }, 27 | }, 28 | } satisfies Meta 29 | 30 | export default meta 31 | type Story = StoryObj 32 | 33 | export const Default: Story = { 34 | args: {}, 35 | } 36 | -------------------------------------------------------------------------------- /packages/storykit/src/hooks/stories/useTransactions.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { Meta, StoryObj } from "@storybook/react" 2 | import React from "react" 3 | 4 | import { UseTransactionsOptions, useTransactions } from "../useTransactions" 5 | import { DataTable } from "./(components)/DataTable" 6 | 7 | const Example = (args: UseTransactionsOptions) => { 8 | const { isLoading, data } = useTransactions(args) 9 | 10 | if (isLoading) return <>loading... 11 | if (!data?.data) return <>none found 12 | 13 | return 14 | } 15 | 16 | const meta = { 17 | title: "Hooks/useTransactions", 18 | component: Example, 19 | parameters: { 20 | layout: "centered", 21 | }, 22 | args: { 23 | options: { 24 | pagination: { 25 | limit: 10, 26 | }, 27 | }, 28 | queryOptions: { 29 | enabled: true, 30 | }, 31 | }, 32 | } satisfies Meta 33 | 34 | export default meta 35 | type Story = StoryObj 36 | 37 | export const Default: Story = { 38 | args: {}, 39 | } 40 | -------------------------------------------------------------------------------- /packages/storykit/src/hooks/useCollection.ts: -------------------------------------------------------------------------------- 1 | import { IpQueryOptions } from "@/types/openapi" 2 | import { UseQueryResult, useQuery } from "@tanstack/react-query" 3 | import { Address } from "viem" 4 | 5 | import { CollectionResponse, getCollection } from "../lib/api/getCollection" 6 | import { useStoryKitContext } from "../providers/StoryKitProvider" 7 | 8 | export type UseCollectionOptions = { 9 | collectionId: Address 10 | queryOptions?: IpQueryOptions 11 | } 12 | 13 | export function useCollection({ collectionId, queryOptions }: UseCollectionOptions) { 14 | const { chain, apiKey, apiClient } = useStoryKitContext() 15 | 16 | return useQuery({ 17 | queryKey: ["getCollection", collectionId, queryOptions], 18 | queryFn: async () => { 19 | const { data, error } = await getCollection({ collectionId, chainName: chain.name, apiKey, apiClient }) 20 | if (error) throw error 21 | return data 22 | }, 23 | ...queryOptions, 24 | }) as UseQueryResult 25 | } 26 | -------------------------------------------------------------------------------- /packages/storykit/src/hooks/useCollectionByAddress.ts: -------------------------------------------------------------------------------- 1 | import { getCollectionByAddress } from "@/lib/alchemy" 2 | import { useStoryKitContext } from "@/providers/StoryKitProvider" 3 | import { CollectionMetadata } from "@/types/alchemy" 4 | import { IpQueryOptions } from "@/types/openapi" 5 | import { UseQueryResult, useQuery } from "@tanstack/react-query" 6 | import { Address } from "viem" 7 | 8 | export type UseCollectionByAddressOptions = { 9 | contractAddress: Address 10 | queryOptions?: IpQueryOptions 11 | } 12 | 13 | export function useCollectionByAddress({ contractAddress, queryOptions }: UseCollectionByAddressOptions) { 14 | const { chain, alchemyApiKey } = useStoryKitContext() 15 | 16 | if (!alchemyApiKey) { 17 | throw new Error("Alchemy API key is not set. Please set it in the StoryKitProvider") 18 | } 19 | 20 | return useQuery({ 21 | queryKey: ["getCollectionByAddress", contractAddress, chain.alchemyId], 22 | queryFn: async () => { 23 | const data = await getCollectionByAddress({ 24 | contractAddress, 25 | chainName: chain.alchemyId, 26 | apiKey: alchemyApiKey, 27 | }) 28 | return data 29 | }, 30 | ...queryOptions, 31 | }) as UseQueryResult 32 | } 33 | -------------------------------------------------------------------------------- /packages/storykit/src/hooks/useCollections.ts: -------------------------------------------------------------------------------- 1 | import { IpQueryOptions } from "@/types/openapi" 2 | import { UseQueryResult, useQuery } from "@tanstack/react-query" 3 | 4 | import { CollectionsOptions, CollectionsResponse, getCollections } from "../lib/api/getCollections" 5 | import { useStoryKitContext } from "../providers/StoryKitProvider" 6 | 7 | export type UseCollectionsOptions = { 8 | options?: CollectionsOptions 9 | queryOptions?: IpQueryOptions 10 | } 11 | 12 | export function useCollections({ options, queryOptions }: UseCollectionsOptions = {}) { 13 | const { chain, apiKey, apiClient } = useStoryKitContext() 14 | 15 | return useQuery({ 16 | queryKey: ["getCollections", options, queryOptions], 17 | queryFn: async () => { 18 | const { data, error } = await getCollections({ options, chainName: chain.name, apiKey, apiClient }) 19 | if (error) throw error 20 | return data 21 | }, 22 | ...queryOptions, 23 | }) as UseQueryResult 24 | } 25 | -------------------------------------------------------------------------------- /packages/storykit/src/hooks/useDetailedIpLicenseTerms.ts: -------------------------------------------------------------------------------- 1 | import { IpQueryOptions } from "@/types/openapi" 2 | import { UseQueryResult, useQuery } from "@tanstack/react-query" 3 | import { Address } from "viem" 4 | 5 | import { DetailedIpLicenseTermsResponse, getDetailedIpLicenseTerms } from "../lib/api/getDetailedIpLicenseTerms" 6 | import { useStoryKitContext } from "../providers/StoryKitProvider" 7 | 8 | export type UseDetailedIpLicenseTermsOptions = { 9 | ipIds: Address[] 10 | queryOptions?: IpQueryOptions 11 | } 12 | 13 | export function useDetailedIpLicenseTerms({ ipIds, queryOptions }: UseDetailedIpLicenseTermsOptions) { 14 | const { chain, apiKey, apiClient } = useStoryKitContext() 15 | return useQuery({ 16 | queryKey: ["getDetailedIpLicenseTerms", ipIds, queryOptions], 17 | queryFn: async () => { 18 | const { data, error } = await getDetailedIpLicenseTerms({ ipIds, chainName: chain.name, apiKey, apiClient }) 19 | if (error) throw error 20 | return data 21 | }, 22 | ...queryOptions, 23 | }) as UseQueryResult 24 | } 25 | -------------------------------------------------------------------------------- /packages/storykit/src/hooks/useDispute.ts: -------------------------------------------------------------------------------- 1 | import { IpQueryOptions } from "@/types/openapi" 2 | import { UseQueryResult, useQuery } from "@tanstack/react-query" 3 | 4 | import { DisputeResponse, getDispute } from "../lib/api/getDispute" 5 | import { useStoryKitContext } from "../providers/StoryKitProvider" 6 | 7 | export type UseDisputeOptions = { 8 | disputeId: string 9 | queryOptions?: IpQueryOptions 10 | } 11 | 12 | export function useDispute({ disputeId, queryOptions }: UseDisputeOptions) { 13 | const { chain, apiKey, apiClient } = useStoryKitContext() 14 | 15 | return useQuery({ 16 | queryKey: ["getDispute", disputeId, queryOptions], 17 | queryFn: async () => { 18 | const { data, error } = await getDispute({ disputeId, chainName: chain.name, apiKey, apiClient }) 19 | if (error) throw error 20 | return data 21 | }, 22 | ...queryOptions, 23 | }) as UseQueryResult 24 | } 25 | -------------------------------------------------------------------------------- /packages/storykit/src/hooks/useDisputes.ts: -------------------------------------------------------------------------------- 1 | import { IpQueryOptions } from "@/types/openapi" 2 | import { UseQueryResult, useQuery } from "@tanstack/react-query" 3 | 4 | import { DisputesOptions, DisputesResponse, getDisputes } from "../lib/api/getDisputes" 5 | import { useStoryKitContext } from "../providers/StoryKitProvider" 6 | 7 | export type UseDisputesOptions = { 8 | options?: DisputesOptions 9 | queryOptions?: IpQueryOptions 10 | } 11 | 12 | export function useDisputes({ options, queryOptions }: UseDisputesOptions = {}) { 13 | const { chain, apiKey, apiClient } = useStoryKitContext() 14 | 15 | return useQuery({ 16 | queryKey: ["getDisputes", options, queryOptions], 17 | queryFn: async () => { 18 | const { data, error } = await getDisputes({ options, chainName: chain.name, apiKey, apiClient }) 19 | if (error) throw error 20 | return data 21 | }, 22 | ...queryOptions, 23 | }) as UseQueryResult 24 | } 25 | -------------------------------------------------------------------------------- /packages/storykit/src/hooks/useIpAsset.ts: -------------------------------------------------------------------------------- 1 | import { IpQueryOptions } from "@/types/openapi" 2 | import { UseQueryResult, useQuery } from "@tanstack/react-query" 3 | import { Address } from "viem" 4 | 5 | import { IpAssetResponse, getIpAsset } from "../lib/api/getIpAsset" 6 | import { useStoryKitContext } from "../providers/StoryKitProvider" 7 | 8 | export type UseIpAssetOptions = { 9 | ipId: Address 10 | queryOptions?: IpQueryOptions 11 | } 12 | 13 | export function useIpAsset({ ipId, queryOptions }: UseIpAssetOptions) { 14 | const { chain, apiKey, apiClient } = useStoryKitContext() 15 | 16 | return useQuery({ 17 | queryKey: ["getIpAsset", ipId, queryOptions], 18 | queryFn: async () => { 19 | const { data, error } = await getIpAsset({ ipId, chainName: chain.name, apiKey, apiClient }) 20 | if (error) throw error 21 | return data 22 | }, 23 | ...queryOptions, 24 | }) as UseQueryResult 25 | } 26 | -------------------------------------------------------------------------------- /packages/storykit/src/hooks/useIpAssetEdges.ts: -------------------------------------------------------------------------------- 1 | import { IpQueryOptions } from "@/types/openapi" 2 | import { UseQueryResult, useQuery } from "@tanstack/react-query" 3 | import { Address } from "viem" 4 | 5 | import { IpAssetEdgesOptions, IpAssetEdgesResponse, getIpAssetEdges } from "../lib/api/getIpAssetEdges" 6 | import { useStoryKitContext } from "../providers/StoryKitProvider" 7 | 8 | export type UseIpAssetEdgesOptions = { 9 | ipId?: Address 10 | parentIpId?: Address 11 | options?: IpAssetEdgesOptions 12 | queryOptions?: IpQueryOptions 13 | } 14 | 15 | export function useIpAssetEdges({ ipId, parentIpId, options, queryOptions }: UseIpAssetEdgesOptions = {}) { 16 | const { chain, apiKey, apiClient } = useStoryKitContext() 17 | 18 | return useQuery({ 19 | queryKey: ["getIpAssetEdges", ipId, parentIpId, options, queryOptions], 20 | queryFn: async () => { 21 | const { data, error } = await getIpAssetEdges({ 22 | ipId, 23 | parentIpId, 24 | options, 25 | chainName: chain.name, 26 | apiKey, 27 | apiClient, 28 | }) 29 | if (error) throw error 30 | return data 31 | }, 32 | ...queryOptions, 33 | }) as UseQueryResult 34 | } 35 | -------------------------------------------------------------------------------- /packages/storykit/src/hooks/useIpAssetMetadata.ts: -------------------------------------------------------------------------------- 1 | import { IpQueryOptions } from "@/types/openapi" 2 | import { UseQueryResult, useQuery } from "@tanstack/react-query" 3 | import { Address } from "viem" 4 | 5 | import { IpAssetMetadataResponse, getIpAssetMetadata } from "../lib/api/getIpAssetMetadata" 6 | import { useStoryKitContext } from "../providers/StoryKitProvider" 7 | 8 | export type UseIpAssetMetadataOptions = { 9 | ipId: Address 10 | queryOptions?: IpQueryOptions 11 | } 12 | 13 | export function useIpAssetMetadata({ ipId, queryOptions }: UseIpAssetMetadataOptions) { 14 | const { chain, apiKey, apiClient } = useStoryKitContext() 15 | 16 | return useQuery({ 17 | queryKey: ["getIpAssetMetadata", ipId, queryOptions], 18 | queryFn: async () => { 19 | const { data, error } = await getIpAssetMetadata({ ipId, chainName: chain.name, apiKey, apiClient }) 20 | if (error) throw error 21 | return data 22 | }, 23 | retry: false, 24 | ...queryOptions, 25 | }) as UseQueryResult 26 | } 27 | -------------------------------------------------------------------------------- /packages/storykit/src/hooks/useIpAssetTerms.ts: -------------------------------------------------------------------------------- 1 | import { IpQueryOptions } from "@/types/openapi" 2 | import { UseQueryResult, useQuery } from "@tanstack/react-query" 3 | import { Address } from "viem" 4 | 5 | import { IpAssetTermsResponse, getIpAssetTerms } from "../lib/api/getIpAssetTerms" 6 | import { useStoryKitContext } from "../providers/StoryKitProvider" 7 | 8 | export type UseIpAssetTermsOptions = { 9 | ipId: Address 10 | queryOptions?: IpQueryOptions 11 | } 12 | 13 | export function useIpAssetTerms({ ipId, queryOptions }: UseIpAssetTermsOptions) { 14 | const { chain, apiKey, apiClient } = useStoryKitContext() 15 | 16 | return useQuery({ 17 | queryKey: ["getIpAssetTerms", ipId, queryOptions], 18 | queryFn: async () => { 19 | const { data, error } = await getIpAssetTerms({ ipId, chainName: chain.name, apiKey, apiClient }) 20 | if (error) throw error 21 | return data 22 | }, 23 | ...queryOptions, 24 | }) as UseQueryResult 25 | } 26 | -------------------------------------------------------------------------------- /packages/storykit/src/hooks/useIpAssets.ts: -------------------------------------------------------------------------------- 1 | import { IpQueryOptions } from "@/types/openapi" 2 | import { UseQueryResult, useQuery } from "@tanstack/react-query" 3 | import { Address } from "viem" 4 | 5 | import { IpAssetsOptions, IpAssetsResponse, getIpAssets } from "../lib/api/getIpAssets" 6 | import { useStoryKitContext } from "../providers/StoryKitProvider" 7 | 8 | export type UseIpAssetsOptions = { 9 | ipIds?: Address[] 10 | options?: IpAssetsOptions 11 | queryOptions?: IpQueryOptions 12 | } 13 | 14 | export function useIpAssets({ ipIds, options, queryOptions }: UseIpAssetsOptions = {}) { 15 | const { chain, apiKey, apiClient } = useStoryKitContext() 16 | 17 | return useQuery({ 18 | queryKey: ["getIpAssets", ipIds, options, queryOptions], 19 | queryFn: async () => { 20 | const { data, error } = await getIpAssets({ ipIds, options, chainName: chain.name, apiKey, apiClient }) 21 | if (error) throw error 22 | return data 23 | }, 24 | ...queryOptions, 25 | }) as UseQueryResult 26 | } 27 | -------------------------------------------------------------------------------- /packages/storykit/src/hooks/useIpAssetsTerms.ts: -------------------------------------------------------------------------------- 1 | import { IpQueryOptions } from "@/types/openapi" 2 | import { UseQueryResult, useQuery } from "@tanstack/react-query" 3 | import { Address } from "viem" 4 | 5 | import { IpAssetsTermsOptions, IpAssetsTermsResponse, getIpAssetsTerms } from "../lib/api/getIpAssetsTerms" 6 | import { useStoryKitContext } from "../providers/StoryKitProvider" 7 | 8 | export type UseIpAssetsTermsOptions = { 9 | ipIds?: Address[] 10 | options?: IpAssetsTermsOptions 11 | queryOptions?: IpQueryOptions 12 | } 13 | 14 | export function useIpAssetsTerms({ ipIds, options, queryOptions }: UseIpAssetsTermsOptions = {}) { 15 | const { chain, apiKey, apiClient } = useStoryKitContext() 16 | 17 | return useQuery({ 18 | queryKey: ["getIpAssetsTerms", ipIds, options, queryOptions], 19 | queryFn: async () => { 20 | const { data, error } = await getIpAssetsTerms({ ipIds, options, chainName: chain.name, apiKey, apiClient }) 21 | if (error) throw error 22 | return data 23 | }, 24 | ...queryOptions, 25 | }) as UseQueryResult 26 | } 27 | -------------------------------------------------------------------------------- /packages/storykit/src/hooks/useIpGroupEdges.ts: -------------------------------------------------------------------------------- 1 | import { IpQueryOptions } from "@/types/openapi" 2 | import { UseQueryResult, useQuery } from "@tanstack/react-query" 3 | import { Address } from "viem" 4 | 5 | import { IpGroupEdgesOptions, IpGroupEdgesResponse, getIpGroupEdges } from "../lib/api/getIpGroupEdges" 6 | import { useStoryKitContext } from "../providers/StoryKitProvider" 7 | 8 | export type UseIpGroupEdgesOptions = { 9 | groupId?: Address 10 | ipAssetIds?: Address[] 11 | options?: IpGroupEdgesOptions 12 | queryOptions?: IpQueryOptions 13 | } 14 | 15 | export function useIpGroupEdges({ groupId, ipAssetIds, options, queryOptions }: UseIpGroupEdgesOptions = {}) { 16 | const { chain, apiKey, apiClient } = useStoryKitContext() 17 | 18 | return useQuery({ 19 | queryKey: ["getIpGroupEdges", groupId, ipAssetIds, options, queryOptions], 20 | queryFn: async () => { 21 | const { data, error } = await getIpGroupEdges({ 22 | groupId, 23 | ipAssetIds, 24 | options, 25 | chainName: chain.name, 26 | apiKey, 27 | apiClient, 28 | }) 29 | if (error) throw error 30 | return data 31 | }, 32 | ...queryOptions, 33 | }) as UseQueryResult 34 | } 35 | -------------------------------------------------------------------------------- /packages/storykit/src/hooks/useIpGroups.ts: -------------------------------------------------------------------------------- 1 | import { IpQueryOptions } from "@/types/openapi" 2 | import { UseQueryResult, useQuery } from "@tanstack/react-query" 3 | 4 | import { IpGroupsOptions, IpGroupsResponse, getIpGroups } from "../lib/api/getIpGroups" 5 | import { useStoryKitContext } from "../providers/StoryKitProvider" 6 | 7 | export type UseIpGroupsOptions = { 8 | groupId?: string 9 | options?: IpGroupsOptions 10 | queryOptions?: IpQueryOptions 11 | } 12 | 13 | export function useIpGroups({ groupId, options, queryOptions }: UseIpGroupsOptions = {}) { 14 | const { chain, apiKey, apiClient } = useStoryKitContext() 15 | 16 | return useQuery({ 17 | queryKey: ["getIpGroups", groupId, options, queryOptions], 18 | queryFn: async () => { 19 | const { data, error } = await getIpGroups({ groupId, options, chainName: chain.name, apiKey, apiClient }) 20 | if (error) throw error 21 | return data 22 | }, 23 | ...queryOptions, 24 | }) as UseQueryResult 25 | } 26 | -------------------------------------------------------------------------------- /packages/storykit/src/hooks/useLatestTransactions.ts: -------------------------------------------------------------------------------- 1 | import { IpQueryOptions } from "@/types/openapi" 2 | import { UseQueryResult, useQuery } from "@tanstack/react-query" 3 | 4 | import { 5 | LatestTransactionsOptions, 6 | LatestTransactionsResponse, 7 | getLatestTransactions, 8 | } from "../lib/api/getLatestTransactions" 9 | import { useStoryKitContext } from "../providers/StoryKitProvider" 10 | 11 | export type UseLatestTransactionsOptions = { 12 | options?: LatestTransactionsOptions 13 | queryOptions?: IpQueryOptions 14 | } 15 | 16 | export function useLatestTransactions({ options, queryOptions }: UseLatestTransactionsOptions = {}) { 17 | const { chain, apiKey, apiClient } = useStoryKitContext() 18 | 19 | return useQuery({ 20 | queryKey: ["getLatestTransactions", options, queryOptions], 21 | queryFn: async () => { 22 | const { data, error } = await getLatestTransactions({ options, chainName: chain.name, apiKey, apiClient }) 23 | if (error) throw error 24 | return data 25 | }, 26 | ...queryOptions, 27 | }) as UseQueryResult 28 | } 29 | -------------------------------------------------------------------------------- /packages/storykit/src/hooks/useLicenseMintingFee.ts: -------------------------------------------------------------------------------- 1 | import { IpQueryOptions } from "@/types/openapi" 2 | import { UseQueryResult, useQuery } from "@tanstack/react-query" 3 | import { Address } from "viem" 4 | 5 | import { LicenseMintingFeeResponse, getLicenseMintingFee } from "../lib/api/getLicenseMintingFee" 6 | import { useStoryKitContext } from "../providers/StoryKitProvider" 7 | 8 | export type UseLicenseMintingFeeOptions = { 9 | licenseMintingFeePaidId: Address 10 | queryOptions?: IpQueryOptions 11 | } 12 | 13 | export function useLicenseMintingFee({ licenseMintingFeePaidId, queryOptions }: UseLicenseMintingFeeOptions) { 14 | const { chain, apiKey, apiClient } = useStoryKitContext() 15 | 16 | return useQuery({ 17 | queryKey: ["getLicenseMintingFee", licenseMintingFeePaidId, queryOptions], 18 | queryFn: async () => { 19 | const { data, error } = await getLicenseMintingFee({ 20 | licenseMintingFeePaidId, 21 | chainName: chain.name, 22 | apiKey, 23 | apiClient, 24 | }) 25 | if (error) throw error 26 | return data 27 | }, 28 | ...queryOptions, 29 | }) as UseQueryResult 30 | } 31 | -------------------------------------------------------------------------------- /packages/storykit/src/hooks/useLicenseMintingFees.ts: -------------------------------------------------------------------------------- 1 | import { IpQueryOptions } from "@/types/openapi" 2 | import { UseQueryResult, useQuery } from "@tanstack/react-query" 3 | 4 | import { 5 | LicenseMintingFeesOptions, 6 | LicenseMintingFeesResponse, 7 | getLicenseMintingFees, 8 | } from "../lib/api/getLicenseMintingFees" 9 | import { useStoryKitContext } from "../providers/StoryKitProvider" 10 | 11 | export type UseLicenseMintingFeesOptions = { 12 | options?: LicenseMintingFeesOptions 13 | queryOptions?: IpQueryOptions 14 | } 15 | 16 | export function useLicenseMintingFees({ options, queryOptions }: UseLicenseMintingFeesOptions = {}) { 17 | const { chain, apiKey, apiClient } = useStoryKitContext() 18 | 19 | return useQuery({ 20 | queryKey: ["getLicenseMintingFees", options, queryOptions], 21 | queryFn: async () => { 22 | const { data, error } = await getLicenseMintingFees({ 23 | options, 24 | chainName: chain.name, 25 | apiKey, 26 | apiClient, 27 | }) 28 | if (error) throw error 29 | return data 30 | }, 31 | ...queryOptions, 32 | }) as UseQueryResult 33 | } 34 | -------------------------------------------------------------------------------- /packages/storykit/src/hooks/useLicenseTemplate.ts: -------------------------------------------------------------------------------- 1 | import { IpQueryOptions } from "@/types/openapi" 2 | import { UseQueryResult, useQuery } from "@tanstack/react-query" 3 | import { Address } from "viem" 4 | 5 | import { LicenseTemplateResponse, getLicenseTemplate } from "../lib/api/getLicenseTemplate" 6 | import { useStoryKitContext } from "../providers/StoryKitProvider" 7 | 8 | export type UseLicenseTemplateOptions = { 9 | licenseTemplateId: Address 10 | queryOptions?: IpQueryOptions 11 | } 12 | 13 | export function useLicenseTemplate({ licenseTemplateId, queryOptions }: UseLicenseTemplateOptions) { 14 | const { chain, apiKey, apiClient } = useStoryKitContext() 15 | 16 | return useQuery({ 17 | queryKey: ["getLicenseTemplate", licenseTemplateId, queryOptions], 18 | queryFn: async () => { 19 | const { data, error } = await getLicenseTemplate({ licenseTemplateId, chainName: chain.name, apiKey, apiClient }) 20 | if (error) throw error 21 | return data 22 | }, 23 | ...queryOptions, 24 | }) as UseQueryResult 25 | } 26 | -------------------------------------------------------------------------------- /packages/storykit/src/hooks/useLicenseTemplates.ts: -------------------------------------------------------------------------------- 1 | import { IpQueryOptions } from "@/types/openapi" 2 | import { UseQueryResult, useQuery } from "@tanstack/react-query" 3 | 4 | import { LicenseTemplatesOptions, LicenseTemplatesResponse, getLicenseTemplates } from "../lib/api/getLicenseTemplates" 5 | import { useStoryKitContext } from "../providers/StoryKitProvider" 6 | 7 | export type UseLicenseTemplatesOptions = { 8 | options?: LicenseTemplatesOptions 9 | queryOptions?: IpQueryOptions 10 | } 11 | 12 | export function useLicenseTemplates({ options, queryOptions }: UseLicenseTemplatesOptions = {}) { 13 | const { chain, apiKey, apiClient } = useStoryKitContext() 14 | 15 | return useQuery({ 16 | queryKey: ["getLicenseTemplates", options, queryOptions], 17 | queryFn: async () => { 18 | const { data, error } = await getLicenseTemplates({ options, chainName: chain.name, apiKey, apiClient }) 19 | if (error) throw error 20 | return data 21 | }, 22 | ...queryOptions, 23 | }) as UseQueryResult 24 | } 25 | -------------------------------------------------------------------------------- /packages/storykit/src/hooks/useLicenseTerms.ts: -------------------------------------------------------------------------------- 1 | import { IpQueryOptions } from "@/types/openapi" 2 | import { UseQueryResult, useQuery } from "@tanstack/react-query" 3 | 4 | import { LicenseTermsResponse, getLicenseTerms } from "../lib/api/getLicenseTerms" 5 | import { useStoryKitContext } from "../providers/StoryKitProvider" 6 | 7 | export type UseLicenseTermsOptions = { 8 | licenseTermId: string 9 | queryOptions?: IpQueryOptions 10 | } 11 | 12 | export function useLicenseTerms({ licenseTermId, queryOptions }: UseLicenseTermsOptions) { 13 | const { chain, apiKey, apiClient } = useStoryKitContext() 14 | 15 | return useQuery({ 16 | queryKey: ["getLicenseTerms", licenseTermId, queryOptions], 17 | queryFn: async () => { 18 | const { data, error } = await getLicenseTerms({ licenseTermId, chainName: chain.name, apiKey, apiClient }) 19 | if (error) throw error 20 | return data 21 | }, 22 | ...queryOptions, 23 | }) as UseQueryResult 24 | } 25 | -------------------------------------------------------------------------------- /packages/storykit/src/hooks/useLicenseToken.ts: -------------------------------------------------------------------------------- 1 | import { IpQueryOptions } from "@/types/openapi" 2 | import { UseQueryResult, useQuery } from "@tanstack/react-query" 3 | 4 | import { LicenseTokenResponse, getLicenseToken } from "../lib/api/getLicenseToken" 5 | import { useStoryKitContext } from "../providers/StoryKitProvider" 6 | 7 | export type UseLicenseTokenOptions = { 8 | licenseTokenId: string 9 | queryOptions?: IpQueryOptions 10 | } 11 | 12 | export function useLicenseToken({ licenseTokenId, queryOptions }: UseLicenseTokenOptions) { 13 | const { chain, apiKey, apiClient } = useStoryKitContext() 14 | 15 | return useQuery({ 16 | queryKey: ["getLicenseToken", licenseTokenId, queryOptions], 17 | queryFn: async () => { 18 | const { data, error } = await getLicenseToken({ licenseTokenId, chainName: chain.name, apiKey, apiClient }) 19 | if (error) throw error 20 | return data 21 | }, 22 | ...queryOptions, 23 | }) as UseQueryResult 24 | } 25 | -------------------------------------------------------------------------------- /packages/storykit/src/hooks/useLicenseTokens.ts: -------------------------------------------------------------------------------- 1 | import { IpQueryOptions } from "@/types/openapi" 2 | import { UseQueryResult, useQuery } from "@tanstack/react-query" 3 | 4 | import { LicenseTokensOptions, LicenseTokensResponse, getLicenseTokens } from "../lib/api/getLicenseTokens" 5 | import { useStoryKitContext } from "../providers/StoryKitProvider" 6 | 7 | export type UseLicenseTokensOptions = { 8 | options?: LicenseTokensOptions 9 | queryOptions?: IpQueryOptions 10 | } 11 | 12 | export function useLicenseTokens({ options, queryOptions }: UseLicenseTokensOptions = {}) { 13 | const { chain, apiKey, apiClient } = useStoryKitContext() 14 | 15 | return useQuery({ 16 | queryKey: ["getLicenseTokens", options, queryOptions], 17 | queryFn: async () => { 18 | const { data, error } = await getLicenseTokens({ options, chainName: chain.name, apiKey, apiClient }) 19 | if (error) throw error 20 | return data 21 | }, 22 | ...queryOptions, 23 | }) as UseQueryResult 24 | } 25 | -------------------------------------------------------------------------------- /packages/storykit/src/hooks/useLicensesTerms.ts: -------------------------------------------------------------------------------- 1 | import { IpQueryOptions } from "@/types/openapi" 2 | import { UseQueryResult, useQuery } from "@tanstack/react-query" 3 | 4 | import { LicensesTermsOptions, LicensesTermsResponse, getLicensesTerms } from "../lib/api/getLicensesTerms" 5 | import { useStoryKitContext } from "../providers/StoryKitProvider" 6 | 7 | export type UseLicensesTermsOptions = { 8 | options?: LicensesTermsOptions 9 | queryOptions?: IpQueryOptions 10 | } 11 | 12 | export function useLicensesTerms({ options, queryOptions }: UseLicensesTermsOptions = {}) { 13 | const { chain, apiKey, apiClient } = useStoryKitContext() 14 | 15 | return useQuery({ 16 | queryKey: ["getLicensesTerms", options, queryOptions], 17 | queryFn: async () => { 18 | const { data, error } = await getLicensesTerms({ options, chainName: chain.name, apiKey, apiClient }) 19 | if (error) throw error 20 | return data 21 | }, 22 | ...queryOptions, 23 | }) as UseQueryResult 24 | } 25 | -------------------------------------------------------------------------------- /packages/storykit/src/hooks/useModule.ts: -------------------------------------------------------------------------------- 1 | import { IpQueryOptions } from "@/types/openapi" 2 | import { UseQueryResult, useQuery } from "@tanstack/react-query" 3 | import { Address } from "viem" 4 | 5 | import { ModuleResponse, getModule } from "../lib/api/getModule" 6 | import { useStoryKitContext } from "../providers/StoryKitProvider" 7 | 8 | export type UseModuleOptions = { 9 | moduleId: Address 10 | queryOptions?: IpQueryOptions 11 | } 12 | 13 | export function useModule({ moduleId, queryOptions }: UseModuleOptions) { 14 | const { chain, apiKey, apiClient } = useStoryKitContext() 15 | 16 | return useQuery({ 17 | queryKey: ["getModule", moduleId, queryOptions], 18 | queryFn: async () => { 19 | const { data, error } = await getModule({ moduleId, chainName: chain.name, apiKey, apiClient }) 20 | if (error) throw error 21 | return data 22 | }, 23 | ...queryOptions, 24 | }) as UseQueryResult 25 | } 26 | -------------------------------------------------------------------------------- /packages/storykit/src/hooks/useModules.ts: -------------------------------------------------------------------------------- 1 | import { IpQueryOptions } from "@/types/openapi" 2 | import { UseQueryResult, useQuery } from "@tanstack/react-query" 3 | 4 | import { ModulesOptions, ModulesResponse, getModules } from "../lib/api/getModules" 5 | import { useStoryKitContext } from "../providers/StoryKitProvider" 6 | 7 | export type UseModulesOptions = { 8 | options?: ModulesOptions 9 | queryOptions?: IpQueryOptions 10 | } 11 | 12 | export function useModules({ options, queryOptions }: UseModulesOptions = {}) { 13 | const { chain, apiKey, apiClient } = useStoryKitContext() 14 | 15 | return useQuery({ 16 | queryKey: ["getModules", options, queryOptions], 17 | queryFn: async () => { 18 | const { data, error } = await getModules({ options, chainName: chain.name, apiKey, apiClient }) 19 | if (error) throw error 20 | return data 21 | }, 22 | ...queryOptions, 23 | }) as UseQueryResult 24 | } 25 | -------------------------------------------------------------------------------- /packages/storykit/src/hooks/useNFTByTokenId.ts: -------------------------------------------------------------------------------- 1 | import { getNFTByTokenId } from "@/lib/alchemy" 2 | import { useStoryKitContext } from "@/providers/StoryKitProvider" 3 | import { NFTMetadata } from "@/types/alchemy" 4 | import { IpQueryOptions } from "@/types/openapi" 5 | import { UseQueryResult, useQuery } from "@tanstack/react-query" 6 | import { Address } from "viem" 7 | 8 | export type UseNFTByTokenIdOptions = { 9 | contractAddress: Address 10 | tokenId: string 11 | queryOptions?: IpQueryOptions 12 | } 13 | 14 | export function useNFTByTokenId({ contractAddress, tokenId, queryOptions }: UseNFTByTokenIdOptions) { 15 | const { chain, alchemyApiKey } = useStoryKitContext() 16 | 17 | if (!alchemyApiKey) { 18 | throw new Error("Alchemy API key is not set. Please set it in the StoryKitProvider") 19 | } 20 | 21 | return useQuery({ 22 | queryKey: ["getNFTByTokenId", contractAddress, tokenId, chain.alchemyId], 23 | queryFn: async () => { 24 | const data = await getNFTByTokenId({ 25 | contractAddress, 26 | tokenId, 27 | chainName: chain.alchemyId, 28 | apiKey: alchemyApiKey, 29 | }) 30 | return data 31 | }, 32 | ...queryOptions, 33 | }) as UseQueryResult 34 | } 35 | -------------------------------------------------------------------------------- /packages/storykit/src/hooks/useNFTByTokenIds.ts: -------------------------------------------------------------------------------- 1 | import { NFT, getNFTByTokenIds } from "@/lib/alchemy" 2 | import { useStoryKitContext } from "@/providers/StoryKitProvider" 3 | import { NFTMetadata, NFTMetadataBatchResponse } from "@/types/alchemy" 4 | import { IpQueryOptions } from "@/types/openapi" 5 | import { UseQueryResult, useQuery } from "@tanstack/react-query" 6 | 7 | export type UseNFTByTokenIdsOptions = { 8 | nfts: NFT[] 9 | queryOptions?: IpQueryOptions 10 | } 11 | 12 | export function useNFTByTokenIds({ nfts, queryOptions }: UseNFTByTokenIdsOptions) { 13 | const { chain, alchemyApiKey } = useStoryKitContext() 14 | 15 | if (!alchemyApiKey) { 16 | throw new Error("Alchemy API key is not set. Please set it in the StoryKitProvider") 17 | } 18 | 19 | return useQuery({ 20 | queryKey: ["getNFTByTokenIds", nfts, chain.alchemyId], 21 | queryFn: async () => { 22 | const data = await getNFTByTokenIds({ 23 | nfts, 24 | chainName: chain.alchemyId, 25 | apiKey: alchemyApiKey, 26 | }) 27 | return data 28 | }, 29 | ...queryOptions, 30 | }) as UseQueryResult 31 | } 32 | -------------------------------------------------------------------------------- /packages/storykit/src/hooks/useNFTByWallet.ts: -------------------------------------------------------------------------------- 1 | import { WalletNFTRequest, getNFTByWallet } from "@/lib/alchemy" 2 | import { useStoryKitContext } from "@/providers/StoryKitProvider" 3 | import { NFTWalletResponse } from "@/types/alchemy" 4 | import { IpQueryOptions } from "@/types/openapi" 5 | import { UseQueryResult, useQuery } from "@tanstack/react-query" 6 | 7 | export type UseNFTByWalletOptions = { 8 | options: WalletNFTRequest 9 | queryOptions?: IpQueryOptions 10 | } 11 | 12 | export function useNFTByWallet({ options, queryOptions }: UseNFTByWalletOptions) { 13 | const { chain, alchemyApiKey } = useStoryKitContext() 14 | 15 | if (!alchemyApiKey) { 16 | throw new Error("Alchemy API key is not set. Please set it in the StoryKitProvider") 17 | } 18 | 19 | return useQuery({ 20 | queryKey: ["getNFTByWallet", options, chain.alchemyId], 21 | queryFn: async () => { 22 | const data = await getNFTByWallet({ 23 | options, 24 | chainName: chain.alchemyId, 25 | apiKey: alchemyApiKey, 26 | }) 27 | return data 28 | }, 29 | ...queryOptions, 30 | }) as UseQueryResult 31 | } 32 | -------------------------------------------------------------------------------- /packages/storykit/src/hooks/useOwnersByTokenId.ts: -------------------------------------------------------------------------------- 1 | import { getOwnersByTokenId } from "@/lib/alchemy" 2 | import { useStoryKitContext } from "@/providers/StoryKitProvider" 3 | import { OwnersByTokenIdResponse } from "@/types/alchemy" 4 | import { IpQueryOptions } from "@/types/openapi" 5 | import { UseQueryResult, useQuery } from "@tanstack/react-query" 6 | import { Address } from "viem" 7 | 8 | export type UseOwnersByTokenIdOptions = { 9 | contractAddress: Address 10 | tokenId: string 11 | queryOptions?: IpQueryOptions 12 | } 13 | 14 | export function useOwnersByTokenId({ contractAddress, tokenId, queryOptions }: UseOwnersByTokenIdOptions) { 15 | const { chain, alchemyApiKey } = useStoryKitContext() 16 | 17 | if (!alchemyApiKey) { 18 | throw new Error("Alchemy API key is not set. Please set it in the StoryKitProvider") 19 | } 20 | 21 | return useQuery({ 22 | queryKey: ["getOwnersByTokenId", contractAddress, tokenId, chain.alchemyId], 23 | queryFn: async () => { 24 | const data = await getOwnersByTokenId({ 25 | contractAddress, 26 | tokenId, 27 | chainName: chain.alchemyId, 28 | apiKey: alchemyApiKey, 29 | }) 30 | return data 31 | }, 32 | ...queryOptions, 33 | }) as UseQueryResult 34 | } 35 | -------------------------------------------------------------------------------- /packages/storykit/src/hooks/usePermission.ts: -------------------------------------------------------------------------------- 1 | import { IpQueryOptions } from "@/types/openapi" 2 | import { UseQueryResult, useQuery } from "@tanstack/react-query" 3 | import { Address } from "viem" 4 | 5 | import { PermissionResponse, getPermission } from "../lib/api/getPermission" 6 | import { useStoryKitContext } from "../providers/StoryKitProvider" 7 | 8 | export type UsePermissionOptions = { 9 | permissionId: Address 10 | queryOptions?: IpQueryOptions 11 | } 12 | 13 | export function usePermission({ permissionId, queryOptions }: UsePermissionOptions) { 14 | const { chain, apiKey, apiClient } = useStoryKitContext() 15 | 16 | return useQuery({ 17 | queryKey: ["getPermission", permissionId, queryOptions], 18 | queryFn: async () => { 19 | const { data, error } = await getPermission({ permissionId, chainName: chain.name, apiKey, apiClient }) 20 | if (error) throw error 21 | return data 22 | }, 23 | ...queryOptions, 24 | }) as UseQueryResult 25 | } 26 | -------------------------------------------------------------------------------- /packages/storykit/src/hooks/usePermissions.ts: -------------------------------------------------------------------------------- 1 | import { IpQueryOptions } from "@/types/openapi" 2 | import { UseQueryResult, useQuery } from "@tanstack/react-query" 3 | 4 | import { PermissionsOptions, PermissionsResponse, getPermissions } from "../lib/api/getPermissions" 5 | import { useStoryKitContext } from "../providers/StoryKitProvider" 6 | 7 | export type UsePermissionsOptions = { 8 | options?: PermissionsOptions 9 | queryOptions?: IpQueryOptions 10 | } 11 | 12 | export function usePermissions({ options, queryOptions }: UsePermissionsOptions = {}) { 13 | const { chain, apiKey, apiClient } = useStoryKitContext() 14 | 15 | return useQuery({ 16 | queryKey: ["getPermissions", options, queryOptions], 17 | queryFn: async () => { 18 | const { data, error } = await getPermissions({ options, chainName: chain.name, apiKey, apiClient }) 19 | if (error) throw error 20 | return data 21 | }, 22 | ...queryOptions, 23 | }) as UseQueryResult 24 | } 25 | -------------------------------------------------------------------------------- /packages/storykit/src/hooks/useRoyaltyPayment.ts: -------------------------------------------------------------------------------- 1 | import { IpQueryOptions } from "@/types/openapi" 2 | import { UseQueryResult, useQuery } from "@tanstack/react-query" 3 | import { Address } from "viem" 4 | 5 | import { RoyaltyPaymentResponse, getRoyaltyPayment } from "../lib/api/getRoyaltyPayment" 6 | import { useStoryKitContext } from "../providers/StoryKitProvider" 7 | 8 | export type UseRoyaltyPaymentOptions = { 9 | royaltyPayId: Address 10 | queryOptions?: IpQueryOptions 11 | } 12 | 13 | export function useRoyaltyPayment({ royaltyPayId, queryOptions }: UseRoyaltyPaymentOptions) { 14 | const { chain, apiKey, apiClient } = useStoryKitContext() 15 | 16 | return useQuery({ 17 | queryKey: ["getRoyaltyPayment", royaltyPayId, queryOptions], 18 | queryFn: async () => { 19 | const { data, error } = await getRoyaltyPayment({ royaltyPayId, chainName: chain.name, apiKey, apiClient }) 20 | if (error) throw error 21 | return data 22 | }, 23 | ...queryOptions, 24 | }) as UseQueryResult 25 | } 26 | -------------------------------------------------------------------------------- /packages/storykit/src/hooks/useRoyaltyPayments.ts: -------------------------------------------------------------------------------- 1 | import { IpQueryOptions } from "@/types/openapi" 2 | import { UseQueryResult, useQuery } from "@tanstack/react-query" 3 | 4 | import { RoyaltyPaymentsOptions, RoyaltyPaymentsResponse, getRoyaltyPayments } from "../lib/api/getRoyaltyPayments" 5 | import { useStoryKitContext } from "../providers/StoryKitProvider" 6 | 7 | export type UseRoyaltyPaymentsOptions = { 8 | options?: RoyaltyPaymentsOptions 9 | queryOptions?: IpQueryOptions 10 | } 11 | 12 | export function useRoyaltyPayments({ options, queryOptions }: UseRoyaltyPaymentsOptions = {}) { 13 | const { chain, apiKey, apiClient } = useStoryKitContext() 14 | 15 | return useQuery({ 16 | queryKey: ["getRoyaltyPayments", options, queryOptions], 17 | queryFn: async () => { 18 | const { data, error } = await getRoyaltyPayments({ options, chainName: chain.name, apiKey, apiClient }) 19 | if (error) throw error 20 | return data 21 | }, 22 | ...queryOptions, 23 | }) as UseQueryResult 24 | } 25 | -------------------------------------------------------------------------------- /packages/storykit/src/hooks/useTransaction.ts: -------------------------------------------------------------------------------- 1 | import { IpQueryOptions } from "@/types/openapi" 2 | import { UseQueryResult, useQuery } from "@tanstack/react-query" 3 | import { Address } from "viem" 4 | 5 | import { TransactionResponse, getTransaction } from "../lib/api/getTransaction" 6 | import { useStoryKitContext } from "../providers/StoryKitProvider" 7 | 8 | export type UseTransactionOptions = { 9 | trxId: Address 10 | queryOptions?: IpQueryOptions 11 | } 12 | 13 | export function useTransaction({ trxId, queryOptions }: UseTransactionOptions) { 14 | const { chain, apiKey, apiClient } = useStoryKitContext() 15 | 16 | return useQuery({ 17 | queryKey: ["getTransaction", trxId, queryOptions], 18 | queryFn: async () => { 19 | const { data, error } = await getTransaction({ trxId, chainName: chain.name, apiKey, apiClient }) 20 | if (error) throw error 21 | return data 22 | }, 23 | ...queryOptions, 24 | }) as UseQueryResult 25 | } 26 | -------------------------------------------------------------------------------- /packages/storykit/src/hooks/useTransactions.ts: -------------------------------------------------------------------------------- 1 | import { IpQueryOptions } from "@/types/openapi" 2 | import { UseQueryResult, useQuery } from "@tanstack/react-query" 3 | 4 | import { TransactionsOptions, TransactionsResponse, getTransactions } from "../lib/api/getTransactions" 5 | import { useStoryKitContext } from "../providers/StoryKitProvider" 6 | 7 | export type UseTransactionsOptions = { 8 | options?: TransactionsOptions 9 | queryOptions?: IpQueryOptions 10 | } 11 | 12 | export function useTransactions({ options, queryOptions }: UseTransactionsOptions = {}) { 13 | const { chain, apiKey, apiClient } = useStoryKitContext() 14 | 15 | return useQuery({ 16 | queryKey: ["getTransactions", options, queryOptions], 17 | queryFn: async () => { 18 | const { data, error } = await getTransactions({ options, chainName: chain.name, apiKey, apiClient }) 19 | if (error) throw error 20 | return data 21 | }, 22 | ...queryOptions, 23 | }) as UseQueryResult 24 | } 25 | -------------------------------------------------------------------------------- /packages/storykit/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./components" 2 | export * from "./providers" 3 | export * from "./types" 4 | export * from "./lib" 5 | export * from "./constants" 6 | export * from "./hooks" 7 | -------------------------------------------------------------------------------- /packages/storykit/src/lib/api/apiClient.ts: -------------------------------------------------------------------------------- 1 | import { API_URL } from "@/constants/api" 2 | import type { paths } from "@/types/schema" 3 | import createClient, { Client, type Middleware } from "openapi-fetch" 4 | 5 | const middleware: Middleware = { 6 | async onRequest({ request }) { 7 | request.headers.set("Content-Type", "application/json") 8 | return request 9 | }, 10 | } 11 | 12 | export type ApiClient = Client 13 | 14 | export const createApiClient = (baseUrl: string): Client => { 15 | const client = createClient({ baseUrl }) 16 | client.use(middleware) 17 | return client 18 | } 19 | 20 | // utillities if someone wants to use the api requests without the StoryKitProvider 21 | export const stagingClient = createApiClient(API_URL.STAGING) 22 | export const prodClient = createApiClient(API_URL.PRODUCTION) 23 | -------------------------------------------------------------------------------- /packages/storykit/src/lib/api/getCollection.ts: -------------------------------------------------------------------------------- 1 | import { paths } from "@/types/schema" 2 | import { FetchResponse } from "openapi-fetch" 3 | 4 | import { ApiClient } from "./apiClient" 5 | import { getQuery } from "./getQuery" 6 | 7 | export type CollectionResponse = 8 | paths["/api/v3/collections/{collectionId}"]["get"]["responses"][200]["content"]["application/json"] 9 | export type CollectionOptions = paths["/api/v3/collections/{collectionId}"]["options"] 10 | 11 | export type GetCollectionOptions = { 12 | apiClient: ApiClient 13 | collectionId: string 14 | chainName: string 15 | apiKey: string 16 | } 17 | 18 | export function getCollection({ apiClient, collectionId, chainName, apiKey }: GetCollectionOptions) { 19 | return getQuery({ 20 | apiClient, 21 | path: "/api/v3/collections/{collectionId}", 22 | pathParams: { collectionId }, 23 | chainName, 24 | apiKey, 25 | }) as Promise> 26 | } 27 | -------------------------------------------------------------------------------- /packages/storykit/src/lib/api/getCollections.ts: -------------------------------------------------------------------------------- 1 | import { paths } from "@/types/schema" 2 | import { FetchResponse } from "openapi-fetch" 3 | 4 | import { ApiClient } from "./apiClient" 5 | import { listQuery } from "./listQuery" 6 | 7 | export type CollectionsResponse = paths["/api/v3/collections"]["post"]["responses"][200]["content"]["application/json"] 8 | 9 | export type CollectionsOptions = 10 | paths["/api/v3/collections"]["post"]["requestBody"]["content"]["application/json"]["options"] 11 | 12 | export type GetCollectionsOptions = { 13 | apiClient: ApiClient 14 | options?: CollectionsOptions 15 | chainName: string 16 | apiKey: string 17 | } 18 | 19 | export function getCollections({ apiClient, options, chainName, apiKey }: GetCollectionsOptions) { 20 | return listQuery({ 21 | apiClient, 22 | path: "/api/v3/collections", 23 | body: { options }, 24 | chainName, 25 | apiKey, 26 | }) as Promise> 27 | } 28 | -------------------------------------------------------------------------------- /packages/storykit/src/lib/api/getDetailedIpLicenseTerms.ts: -------------------------------------------------------------------------------- 1 | import { paths } from "@/types/schema" 2 | import { FetchResponse } from "openapi-fetch" 3 | 4 | import { ApiClient } from "./apiClient" 5 | import { listQuery } from "./listQuery" 6 | 7 | export type DetailedIpLicenseTermsResponse = 8 | paths["/api/v3/detailed-ip-license-terms"]["post"]["responses"][200]["content"]["application/json"] 9 | 10 | export type DetailedIpLicenseTermsOptions = 11 | paths["/api/v3/detailed-ip-license-terms"]["post"]["requestBody"]["content"]["application/json"]["options"] 12 | 13 | export type GetDetailedIpLicenseTermsOptions = { 14 | apiClient: ApiClient 15 | ipIds: string[] 16 | chainName: string 17 | apiKey: string 18 | } 19 | 20 | export function getDetailedIpLicenseTerms({ apiClient, ipIds, chainName, apiKey }: GetDetailedIpLicenseTermsOptions) { 21 | return listQuery({ 22 | apiClient, 23 | path: "/api/v3/detailed-ip-license-terms", 24 | body: { options: { where: { ipIds: ipIds } } }, 25 | chainName, 26 | apiKey, 27 | }) as Promise> 28 | } 29 | -------------------------------------------------------------------------------- /packages/storykit/src/lib/api/getDispute.ts: -------------------------------------------------------------------------------- 1 | import { paths } from "@/types/schema" 2 | import { FetchResponse } from "openapi-fetch" 3 | 4 | import { ApiClient } from "./apiClient" 5 | import { getQuery } from "./getQuery" 6 | 7 | export type DisputeResponse = 8 | paths["/api/v3/disputes/{disputeId}"]["get"]["responses"][200]["content"]["application/json"] 9 | export type DisputeOptions = paths["/api/v3/disputes/{disputeId}"]["options"] 10 | 11 | export type GetDisputeOptions = { 12 | apiClient: ApiClient 13 | disputeId: string 14 | chainName: string 15 | apiKey: string 16 | } 17 | 18 | export function getDispute({ apiClient, disputeId, chainName, apiKey }: GetDisputeOptions) { 19 | return getQuery({ 20 | apiClient, 21 | path: "/api/v3/disputes/{disputeId}", 22 | pathParams: { disputeId }, 23 | chainName, 24 | apiKey, 25 | }) as Promise> 26 | } 27 | -------------------------------------------------------------------------------- /packages/storykit/src/lib/api/getDisputes.ts: -------------------------------------------------------------------------------- 1 | import { paths } from "@/types/schema" 2 | import { FetchResponse } from "openapi-fetch" 3 | 4 | import { ApiClient } from "./apiClient" 5 | import { listQuery } from "./listQuery" 6 | 7 | export type DisputesResponse = paths["/api/v3/disputes"]["post"]["responses"][200]["content"]["application/json"] 8 | export type DisputesOptions = paths["/api/v3/disputes"]["post"]["requestBody"]["content"]["application/json"]["options"] 9 | 10 | export type GetDisputesOptions = { 11 | apiClient: ApiClient 12 | options?: DisputesOptions 13 | chainName: string 14 | apiKey: string 15 | } 16 | 17 | export function getDisputes({ apiClient, options, chainName, apiKey }: GetDisputesOptions) { 18 | return listQuery({ 19 | apiClient, 20 | path: "/api/v3/disputes", 21 | body: { options: options || {} }, 22 | chainName, 23 | apiKey, 24 | }) as Promise> 25 | } 26 | -------------------------------------------------------------------------------- /packages/storykit/src/lib/api/getIpAsset.ts: -------------------------------------------------------------------------------- 1 | import { paths } from "@/types/schema" 2 | import { FetchResponse } from "openapi-fetch" 3 | 4 | import { ApiClient } from "./apiClient" 5 | import { getQuery } from "./getQuery" 6 | 7 | export type IpAssetResponse = paths["/api/v3/assets/{assetId}"]["get"]["responses"][200]["content"]["application/json"] 8 | export type IpAssetOptions = paths["/api/v3/assets/{assetId}"]["options"] 9 | 10 | export type GetIpAssetOptions = { 11 | apiClient: ApiClient 12 | ipId: string 13 | chainName: string 14 | apiKey: string 15 | } 16 | 17 | export function getIpAsset({ apiClient, ipId, chainName, apiKey }: GetIpAssetOptions) { 18 | return getQuery({ 19 | apiClient, 20 | path: "/api/v3/assets/{assetId}", 21 | pathParams: { assetId: ipId }, 22 | additionalHeaders: { "X-Extend-Asset": "true" }, 23 | chainName, 24 | apiKey, 25 | }) as Promise> 26 | } 27 | -------------------------------------------------------------------------------- /packages/storykit/src/lib/api/getIpAssetEdges.ts: -------------------------------------------------------------------------------- 1 | import { paths } from "@/types/schema" 2 | import { FetchResponse } from "openapi-fetch" 3 | import { Address } from "viem" 4 | 5 | import { ApiClient } from "./apiClient" 6 | import { listQuery } from "./listQuery" 7 | 8 | export type IpAssetEdgesResponse = 9 | paths["/api/v3/assets/edges"]["post"]["responses"][200]["content"]["application/json"] 10 | 11 | export type IpAssetEdgesOptions = 12 | paths["/api/v3/assets/edges"]["post"]["requestBody"]["content"]["application/json"]["options"] 13 | 14 | export type GetIpAssetEdgesOptions = { 15 | apiClient: ApiClient 16 | ipId?: Address 17 | parentIpId?: Address 18 | options?: IpAssetEdgesOptions 19 | chainName: string 20 | apiKey: string 21 | } 22 | 23 | export function getIpAssetEdges({ apiClient, ipId, parentIpId, options, chainName, apiKey }: GetIpAssetEdgesOptions) { 24 | return listQuery({ 25 | apiClient, 26 | path: "/api/v3/assets/edges", 27 | body: { 28 | options: { 29 | ...options, 30 | where: { 31 | ...options?.where, 32 | ...(ipId ? { ipId } : {}), 33 | ...(parentIpId ? { parentIpId } : {}), 34 | }, 35 | }, 36 | }, 37 | chainName, 38 | apiKey, 39 | }) as Promise> 40 | } 41 | -------------------------------------------------------------------------------- /packages/storykit/src/lib/api/getIpAssetMetadata.ts: -------------------------------------------------------------------------------- 1 | import { paths } from "@/types/schema" 2 | import { FetchResponse } from "openapi-fetch" 3 | 4 | import { ApiClient } from "./apiClient" 5 | import { getQuery } from "./getQuery" 6 | 7 | export type IpAssetMetadataResponse = 8 | paths["/api/v3/assets/{assetId}/metadata"]["get"]["responses"][200]["content"]["application/json"] 9 | export type IpAssetMetadataOptions = paths["/api/v3/assets/{assetId}/metadata"]["options"] 10 | 11 | export type GetIpAssetMetadataOptions = { 12 | apiClient: ApiClient 13 | ipId: string 14 | chainName: string 15 | apiKey: string 16 | } 17 | 18 | export function getIpAssetMetadata({ apiClient, ipId, chainName, apiKey }: GetIpAssetMetadataOptions) { 19 | return getQuery({ 20 | apiClient, 21 | path: "/api/v3/assets/{assetId}/metadata", 22 | pathParams: { assetId: ipId }, 23 | chainName, 24 | apiKey, 25 | }) as Promise> 26 | } 27 | -------------------------------------------------------------------------------- /packages/storykit/src/lib/api/getIpAssetTerms.ts: -------------------------------------------------------------------------------- 1 | import { paths } from "@/types/schema" 2 | import { FetchResponse } from "openapi-fetch" 3 | 4 | import { ApiClient } from "./apiClient" 5 | import { getQuery } from "./getQuery" 6 | 7 | export type IpAssetTermsResponse = 8 | paths["/api/v3/licenses/ip/terms/{ipId}"]["get"]["responses"][200]["content"]["application/json"] 9 | 10 | export type IpAssetTermsOptions = paths["/api/v3/licenses/ip/terms/{ipId}"]["options"] 11 | 12 | export type GetIpAssetTermsOptions = { 13 | apiClient: ApiClient 14 | ipId: string 15 | chainName: string 16 | apiKey: string 17 | } 18 | 19 | export function getIpAssetTerms({ apiClient, ipId, chainName, apiKey }: GetIpAssetTermsOptions) { 20 | return getQuery({ 21 | apiClient, 22 | path: "/api/v3/licenses/ip/terms/{ipId}", 23 | pathParams: { ipId: ipId }, 24 | additionalHeaders: { "X-Extend-Asset": "true" }, 25 | chainName, 26 | apiKey, 27 | }) as Promise> 28 | } 29 | -------------------------------------------------------------------------------- /packages/storykit/src/lib/api/getIpAssets.ts: -------------------------------------------------------------------------------- 1 | import { paths } from "@/types/schema" 2 | import { FetchResponse } from "openapi-fetch" 3 | import { Address } from "viem" 4 | 5 | import { ApiClient } from "./apiClient" 6 | import { listQuery } from "./listQuery" 7 | 8 | export type IpAssetsResponse = paths["/api/v3/assets"]["post"]["responses"][200]["content"]["application/json"] 9 | 10 | export type IpAssetsOptions = paths["/api/v3/assets"]["post"]["requestBody"]["content"]["application/json"]["options"] 11 | 12 | export type GetIpAssetsOptions = { 13 | apiClient: ApiClient 14 | ipIds?: Address[] // ipIds from options added here for convenience 15 | options?: IpAssetsOptions 16 | chainName: string 17 | apiKey: string 18 | } 19 | 20 | export function getIpAssets({ apiClient, ipIds, options, chainName, apiKey }: GetIpAssetsOptions) { 21 | return listQuery({ 22 | apiClient, 23 | path: "/api/v3/assets", 24 | body: { options: { ...options, ...(ipIds ? { ipAssetIds: ipIds } : {}) } }, 25 | chainName, 26 | apiKey, 27 | }) as Promise> 28 | } 29 | -------------------------------------------------------------------------------- /packages/storykit/src/lib/api/getIpAssetsTerms.ts: -------------------------------------------------------------------------------- 1 | import { paths } from "@/types/schema" 2 | import { FetchResponse } from "openapi-fetch" 3 | import { Address } from "viem" 4 | 5 | import { ApiClient } from "./apiClient" 6 | import { listQuery } from "./listQuery" 7 | 8 | export type IpAssetsTermsResponse = 9 | paths["/api/v3/licenses/ip/terms"]["post"]["responses"][200]["content"]["application/json"] 10 | 11 | export type IpAssetsTermsOptions = 12 | paths["/api/v3/licenses/ip/terms"]["post"]["requestBody"]["content"]["application/json"]["options"] 13 | 14 | export type GetIpAssetsTermsOptions = { 15 | apiClient: ApiClient 16 | ipIds?: Address[] // ipIds from options added here for convenience 17 | options?: IpAssetsTermsOptions 18 | chainName: string 19 | apiKey: string 20 | } 21 | 22 | export function getIpAssetsTerms({ apiClient, ipIds, options, chainName, apiKey }: GetIpAssetsTermsOptions) { 23 | return listQuery({ 24 | apiClient, 25 | path: "/api/v3/licenses/ip/terms", 26 | body: { options: { ...options, ...(ipIds ? { ipAssetIds: ipIds } : {}) } }, 27 | chainName, 28 | apiKey, 29 | }) as Promise> 30 | } 31 | -------------------------------------------------------------------------------- /packages/storykit/src/lib/api/getIpGroupEdges.ts: -------------------------------------------------------------------------------- 1 | import { paths } from "@/types/schema" 2 | import { FetchResponse } from "openapi-fetch" 3 | import { Address } from "viem" 4 | 5 | import { ApiClient } from "./apiClient" 6 | import { listQuery } from "./listQuery" 7 | 8 | export type IpGroupEdgesResponse = 9 | paths["/api/v3/ip-group-edges"]["post"]["responses"][200]["content"]["application/json"] 10 | 11 | export type IpGroupEdgesOptions = 12 | paths["/api/v3/ip-group-edges"]["post"]["requestBody"]["content"]["application/json"]["options"] 13 | 14 | export type GetIpGroupEdgesOptions = { 15 | apiClient: ApiClient 16 | groupId?: Address 17 | ipAssetIds?: Address[] 18 | options?: IpGroupEdgesOptions 19 | chainName: string 20 | apiKey: string 21 | } 22 | 23 | export function getIpGroupEdges({ 24 | apiClient, 25 | groupId, 26 | ipAssetIds, 27 | options, 28 | chainName, 29 | apiKey, 30 | }: GetIpGroupEdgesOptions) { 31 | return listQuery({ 32 | apiClient, 33 | path: "/api/v3/ip-group-edges", 34 | body: { 35 | options: { 36 | ...options, 37 | ipAssetIds, 38 | where: { 39 | ...options?.where, 40 | ...(groupId ? { groupId } : {}), 41 | }, 42 | }, 43 | }, 44 | chainName, 45 | apiKey, 46 | }) as Promise> 47 | } 48 | -------------------------------------------------------------------------------- /packages/storykit/src/lib/api/getIpGroups.ts: -------------------------------------------------------------------------------- 1 | import { paths } from "@/types/schema" 2 | import { FetchResponse } from "openapi-fetch" 3 | 4 | import { ApiClient } from "./apiClient" 5 | import { listQuery } from "./listQuery" 6 | 7 | export type IpGroupsResponse = paths["/api/v3/ip-groups"]["post"]["responses"][200]["content"]["application/json"] 8 | 9 | export type IpGroupsOptions = 10 | paths["/api/v3/ip-groups"]["post"]["requestBody"]["content"]["application/json"]["options"] 11 | 12 | export type GetIpGroupsOptions = { 13 | apiClient: ApiClient 14 | groupId?: string // Single groupId as per API schema 15 | options?: IpGroupsOptions 16 | chainName: string 17 | apiKey: string 18 | } 19 | 20 | export function getIpGroups({ apiClient, groupId, options, chainName, apiKey }: GetIpGroupsOptions) { 21 | return listQuery({ 22 | apiClient, 23 | path: "/api/v3/ip-groups", 24 | body: { 25 | options: { 26 | ...options, 27 | where: { 28 | ...options?.where, 29 | ...(groupId ? { groupId } : {}), 30 | }, 31 | }, 32 | }, 33 | chainName, 34 | apiKey, 35 | }) as Promise> 36 | } 37 | -------------------------------------------------------------------------------- /packages/storykit/src/lib/api/getLatestTransactions.ts: -------------------------------------------------------------------------------- 1 | import { paths } from "@/types/schema" 2 | import { FetchResponse } from "openapi-fetch" 3 | 4 | import { ApiClient } from "./apiClient" 5 | import { listQuery } from "./listQuery" 6 | 7 | export type LatestTransactionsResponse = 8 | paths["/api/v3/transactions/latest"]["post"]["responses"][200]["content"]["application/json"] 9 | 10 | export type LatestTransactionsOptions = 11 | paths["/api/v3/transactions/latest"]["post"]["requestBody"]["content"]["application/json"]["options"] 12 | 13 | export type GetLatestTransactionsOptions = { 14 | apiClient: ApiClient 15 | options?: LatestTransactionsOptions 16 | chainName: string 17 | apiKey: string 18 | } 19 | 20 | export function getLatestTransactions({ apiClient, options, chainName, apiKey }: GetLatestTransactionsOptions) { 21 | return listQuery({ 22 | apiClient, 23 | path: "/api/v3/transactions/latest", 24 | body: { options }, 25 | chainName, 26 | apiKey, 27 | }) as Promise> 28 | } 29 | -------------------------------------------------------------------------------- /packages/storykit/src/lib/api/getLicenseMintingFee.ts: -------------------------------------------------------------------------------- 1 | import { paths } from "@/types/schema" 2 | import { FetchResponse } from "openapi-fetch" 3 | 4 | import { ApiClient } from "./apiClient" 5 | import { getQuery } from "./getQuery" 6 | 7 | export type LicenseMintingFeeResponse = 8 | paths["/api/v3/licenses/mintingfees/{licenseMintingFeePaidId}"]["get"]["responses"][200]["content"]["application/json"] 9 | export type LicenseMintingFeeOptions = paths["/api/v3/licenses/mintingfees/{licenseMintingFeePaidId}"]["options"] 10 | 11 | export type GetLicenseMintingFeeOptions = { 12 | apiClient: ApiClient 13 | licenseMintingFeePaidId: string 14 | chainName: string 15 | apiKey: string 16 | } 17 | 18 | export function getLicenseMintingFee({ 19 | apiClient, 20 | licenseMintingFeePaidId, 21 | chainName, 22 | apiKey, 23 | }: GetLicenseMintingFeeOptions) { 24 | return getQuery({ 25 | apiClient, 26 | path: "/api/v3/licenses/mintingfees/{licenseMintingFeePaidId}", 27 | pathParams: { licenseMintingFeePaidId }, 28 | chainName, 29 | apiKey, 30 | }) as Promise> 31 | } 32 | -------------------------------------------------------------------------------- /packages/storykit/src/lib/api/getLicenseMintingFees.ts: -------------------------------------------------------------------------------- 1 | import { paths } from "@/types/schema" 2 | import { FetchResponse } from "openapi-fetch" 3 | 4 | import { ApiClient } from "./apiClient" 5 | import { listQuery } from "./listQuery" 6 | 7 | export type LicenseMintingFeesResponse = 8 | paths["/api/v3/licenses/mintingfees"]["post"]["responses"][200]["content"]["application/json"] 9 | export type LicenseMintingFeesOptions = 10 | paths["/api/v3/licenses/mintingfees"]["post"]["requestBody"]["content"]["application/json"]["options"] 11 | 12 | export type GetLicenseMintingFeesOptions = { 13 | apiClient: ApiClient 14 | options?: LicenseMintingFeesOptions 15 | chainName: string 16 | apiKey: string 17 | } 18 | 19 | export function getLicenseMintingFees({ apiClient, options, chainName, apiKey }: GetLicenseMintingFeesOptions) { 20 | return listQuery({ 21 | apiClient, 22 | path: "/api/v3/licenses/mintingfees", 23 | body: { options: options || {} }, 24 | chainName, 25 | apiKey, 26 | }) as Promise> 27 | } 28 | -------------------------------------------------------------------------------- /packages/storykit/src/lib/api/getLicenseTemplate.ts: -------------------------------------------------------------------------------- 1 | import { paths } from "@/types/schema" 2 | import { FetchResponse } from "openapi-fetch" 3 | 4 | import { ApiClient } from "./apiClient" 5 | import { getQuery } from "./getQuery" 6 | 7 | export type LicenseTemplateResponse = 8 | paths["/api/v3/licenses/templates/{licenseTemplateId}"]["get"]["responses"][200]["content"]["application/json"] 9 | export type LicenseTemplateOptions = paths["/api/v3/licenses/templates/{licenseTemplateId}"]["options"] 10 | 11 | export type GetLicenseTemplateOptions = { 12 | apiClient: ApiClient 13 | licenseTemplateId: string 14 | chainName: string 15 | apiKey: string 16 | } 17 | 18 | export function getLicenseTemplate({ apiClient, licenseTemplateId, chainName, apiKey }: GetLicenseTemplateOptions) { 19 | return getQuery({ 20 | apiClient, 21 | path: "/api/v3/licenses/templates/{licenseTemplateId}", 22 | pathParams: { licenseTemplateId }, 23 | chainName, 24 | apiKey, 25 | }) as Promise> 26 | } 27 | -------------------------------------------------------------------------------- /packages/storykit/src/lib/api/getLicenseTemplates.ts: -------------------------------------------------------------------------------- 1 | import { paths } from "@/types/schema" 2 | import { FetchResponse } from "openapi-fetch" 3 | 4 | import { ApiClient } from "./apiClient" 5 | import { listQuery } from "./listQuery" 6 | 7 | export type LicenseTemplatesResponse = 8 | paths["/api/v3/licenses/templates"]["post"]["responses"][200]["content"]["application/json"] 9 | export type LicenseTemplatesOptions = 10 | paths["/api/v3/licenses/templates"]["post"]["requestBody"]["content"]["application/json"]["options"] 11 | 12 | export type GetLicenseTemplatesOptions = { 13 | apiClient: ApiClient 14 | options?: LicenseTemplatesOptions 15 | chainName: string 16 | apiKey: string 17 | } 18 | 19 | export function getLicenseTemplates({ apiClient, options, chainName, apiKey }: GetLicenseTemplatesOptions) { 20 | return listQuery({ 21 | apiClient, 22 | path: "/api/v3/licenses/templates", 23 | body: { options: options || {} }, 24 | chainName, 25 | apiKey, 26 | }) as Promise> 27 | } 28 | -------------------------------------------------------------------------------- /packages/storykit/src/lib/api/getLicenseTerms.ts: -------------------------------------------------------------------------------- 1 | import { paths } from "@/types/schema" 2 | import { FetchResponse } from "openapi-fetch" 3 | 4 | import { ApiClient } from "./apiClient" 5 | import { getQuery } from "./getQuery" 6 | 7 | export type LicenseTermsResponse = 8 | paths["/api/v3/licenses/terms/{licenseTermId}"]["get"]["responses"][200]["content"]["application/json"] 9 | export type LicenseTermsOptions = paths["/api/v3/licenses/terms/{licenseTermId}"]["options"] 10 | 11 | export type GetLicenseTermsOptions = { 12 | apiClient: ApiClient 13 | licenseTermId: string 14 | chainName: string 15 | apiKey: string 16 | } 17 | 18 | export function getLicenseTerms({ apiClient, licenseTermId, chainName, apiKey }: GetLicenseTermsOptions) { 19 | return getQuery({ 20 | apiClient, 21 | path: "/api/v3/licenses/terms/{licenseTermId}", 22 | pathParams: { licenseTermId }, 23 | chainName, 24 | apiKey, 25 | }) as Promise> 26 | } 27 | -------------------------------------------------------------------------------- /packages/storykit/src/lib/api/getLicenseToken.ts: -------------------------------------------------------------------------------- 1 | import { paths } from "@/types/schema" 2 | import { FetchResponse } from "openapi-fetch" 3 | 4 | import { ApiClient } from "./apiClient" 5 | import { getQuery } from "./getQuery" 6 | 7 | export type LicenseTokenResponse = 8 | paths["/api/v3/licenses/tokens/{licenseTokenId}"]["get"]["responses"][200]["content"]["application/json"] 9 | export type LicenseTokenOptions = paths["/api/v3/licenses/tokens/{licenseTokenId}"]["options"] 10 | 11 | export type GetLicenseTokenOptions = { 12 | apiClient: ApiClient 13 | licenseTokenId: string 14 | chainName: string 15 | apiKey: string 16 | } 17 | 18 | export function getLicenseToken({ apiClient, licenseTokenId, chainName, apiKey }: GetLicenseTokenOptions) { 19 | return getQuery({ 20 | apiClient, 21 | path: "/api/v3/licenses/tokens/{licenseTokenId}", 22 | pathParams: { licenseTokenId }, 23 | chainName, 24 | apiKey, 25 | }) as Promise> 26 | } 27 | -------------------------------------------------------------------------------- /packages/storykit/src/lib/api/getLicenseTokens.ts: -------------------------------------------------------------------------------- 1 | import { paths } from "@/types/schema" 2 | import { FetchResponse } from "openapi-fetch" 3 | 4 | import { ApiClient } from "./apiClient" 5 | import { listQuery } from "./listQuery" 6 | 7 | export type LicenseTokensResponse = 8 | paths["/api/v3/licenses/tokens"]["post"]["responses"][200]["content"]["application/json"] 9 | export type LicenseTokensOptions = 10 | paths["/api/v3/licenses/tokens"]["post"]["requestBody"]["content"]["application/json"]["options"] 11 | 12 | export type GetLicenseTokensOptions = { 13 | apiClient: ApiClient 14 | options?: LicenseTokensOptions 15 | chainName: string 16 | apiKey: string 17 | } 18 | 19 | export function getLicenseTokens({ apiClient, options, chainName, apiKey }: GetLicenseTokensOptions) { 20 | return listQuery({ 21 | apiClient, 22 | path: "/api/v3/licenses/tokens", 23 | body: { options: options || {} }, 24 | chainName, 25 | apiKey, 26 | }) as Promise> 27 | } 28 | -------------------------------------------------------------------------------- /packages/storykit/src/lib/api/getLicensesTerms.ts: -------------------------------------------------------------------------------- 1 | import { paths } from "@/types/schema" 2 | import { FetchResponse } from "openapi-fetch" 3 | 4 | import { ApiClient } from "./apiClient" 5 | import { listQuery } from "./listQuery" 6 | 7 | export type LicensesTermsResponse = 8 | paths["/api/v3/licenses/terms"]["post"]["responses"][200]["content"]["application/json"] 9 | export type LicensesTermsOptions = 10 | paths["/api/v3/licenses/terms"]["post"]["requestBody"]["content"]["application/json"]["options"] 11 | 12 | export type GetLicensesTermsOptions = { 13 | apiClient: ApiClient 14 | options?: LicensesTermsOptions 15 | chainName: string 16 | apiKey: string 17 | } 18 | 19 | export function getLicensesTerms({ apiClient, options, chainName, apiKey }: GetLicensesTermsOptions) { 20 | return listQuery({ 21 | apiClient, 22 | path: "/api/v3/licenses/terms", 23 | body: { options: options || {} }, 24 | chainName, 25 | apiKey, 26 | }) as Promise> 27 | } 28 | -------------------------------------------------------------------------------- /packages/storykit/src/lib/api/getModule.ts: -------------------------------------------------------------------------------- 1 | import { paths } from "@/types/schema" 2 | import { FetchResponse } from "openapi-fetch" 3 | 4 | import { ApiClient } from "./apiClient" 5 | import { getQuery } from "./getQuery" 6 | 7 | export type ModuleResponse = paths["/api/v3/modules/{moduleId}"]["get"]["responses"][200]["content"]["application/json"] 8 | export type ModuleOptions = paths["/api/v3/modules/{moduleId}"]["options"] 9 | 10 | export type GetModuleOptions = { 11 | apiClient: ApiClient 12 | moduleId: string 13 | chainName: string 14 | apiKey: string 15 | } 16 | 17 | export function getModule({ apiClient, moduleId, chainName, apiKey }: GetModuleOptions) { 18 | return getQuery({ 19 | apiClient, 20 | path: "/api/v3/modules/{moduleId}", 21 | pathParams: { moduleId }, 22 | chainName, 23 | apiKey, 24 | }) as Promise> 25 | } 26 | -------------------------------------------------------------------------------- /packages/storykit/src/lib/api/getModules.ts: -------------------------------------------------------------------------------- 1 | import { paths } from "@/types/schema" 2 | import { FetchResponse } from "openapi-fetch" 3 | 4 | import { ApiClient } from "./apiClient" 5 | import { listQuery } from "./listQuery" 6 | 7 | export type ModulesResponse = paths["/api/v3/modules"]["post"]["responses"][200]["content"]["application/json"] 8 | export type ModulesOptions = paths["/api/v3/modules"]["post"]["requestBody"]["content"]["application/json"]["options"] 9 | 10 | export type GetModulesOptions = { 11 | apiClient: ApiClient 12 | options?: ModulesOptions 13 | chainName: string 14 | apiKey: string 15 | } 16 | 17 | export function getModules({ apiClient, options, chainName, apiKey }: GetModulesOptions) { 18 | return listQuery({ 19 | apiClient, 20 | path: "/api/v3/modules", 21 | body: { options: options || {} }, 22 | chainName, 23 | apiKey, 24 | }) as Promise> 25 | } 26 | -------------------------------------------------------------------------------- /packages/storykit/src/lib/api/getPermission.ts: -------------------------------------------------------------------------------- 1 | import { paths } from "@/types/schema" 2 | import { FetchResponse } from "openapi-fetch" 3 | 4 | import { ApiClient } from "./apiClient" 5 | import { getQuery } from "./getQuery" 6 | 7 | export type PermissionResponse = 8 | paths["/api/v3/permissions/{permissionId}"]["get"]["responses"][200]["content"]["application/json"] 9 | export type PermissionOptions = paths["/api/v3/permissions/{permissionId}"]["options"] 10 | 11 | export type GetPermissionOptions = { 12 | apiClient: ApiClient 13 | permissionId: string 14 | chainName: string 15 | apiKey: string 16 | } 17 | 18 | export function getPermission({ apiClient, permissionId, chainName, apiKey }: GetPermissionOptions) { 19 | return getQuery({ 20 | apiClient, 21 | path: "/api/v3/permissions/{permissionId}", 22 | pathParams: { permissionId }, 23 | chainName, 24 | apiKey, 25 | }) as Promise> 26 | } 27 | -------------------------------------------------------------------------------- /packages/storykit/src/lib/api/getPermissions.ts: -------------------------------------------------------------------------------- 1 | import { paths } from "@/types/schema" 2 | import { FetchResponse } from "openapi-fetch" 3 | 4 | import { ApiClient } from "./apiClient" 5 | import { listQuery } from "./listQuery" 6 | 7 | export type PermissionsResponse = paths["/api/v3/permissions"]["post"]["responses"][200]["content"]["application/json"] 8 | 9 | export type PermissionsOptions = 10 | paths["/api/v3/permissions"]["post"]["requestBody"]["content"]["application/json"]["options"] 11 | 12 | export type GetPermissionsOptions = { 13 | apiClient: ApiClient 14 | options?: PermissionsOptions 15 | chainName: string 16 | apiKey: string 17 | } 18 | 19 | export function getPermissions({ apiClient, options, chainName, apiKey }: GetPermissionsOptions) { 20 | return listQuery({ 21 | apiClient, 22 | path: "/api/v3/permissions", 23 | body: { options }, 24 | chainName, 25 | apiKey, 26 | }) as Promise> 27 | } 28 | -------------------------------------------------------------------------------- /packages/storykit/src/lib/api/getQuery.ts: -------------------------------------------------------------------------------- 1 | import type { paths } from "@/types/schema" 2 | import { FetchOptions } from "openapi-fetch" 3 | import { HttpMethod, PathsWithMethod } from "openapi-typescript-helpers" 4 | 5 | import { ApiClient } from "./apiClient" 6 | 7 | type Paths = PathsWithMethod 8 | type Params> = M extends keyof paths[P] ? FetchOptions : never 9 | 10 | export type GetQueryParams

> = { 11 | apiClient: ApiClient 12 | path: P 13 | chainName: string 14 | apiKey: string 15 | pathParams: Params<"get", P>["params"]["path"] 16 | additionalHeaders?: Record 17 | } 18 | 19 | export function getQuery

>({ 20 | apiClient, 21 | path, 22 | chainName, 23 | apiKey, 24 | pathParams, 25 | additionalHeaders, 26 | }: GetQueryParams

) { 27 | const requestParams = { 28 | params: { 29 | path: pathParams, 30 | header: { 31 | "X-Chain": chainName, 32 | "X-Api-Key": apiKey, 33 | ...additionalHeaders, 34 | }, 35 | }, 36 | } as Params<"get", P> 37 | 38 | return apiClient.GET(path, requestParams) 39 | } 40 | -------------------------------------------------------------------------------- /packages/storykit/src/lib/api/getRoyaltyPayment.ts: -------------------------------------------------------------------------------- 1 | import { paths } from "@/types/schema" 2 | import { FetchResponse } from "openapi-fetch" 3 | import { Address } from "viem" 4 | 5 | import { ApiClient } from "./apiClient" 6 | import { getQuery } from "./getQuery" 7 | 8 | export type RoyaltyPaymentResponse = 9 | paths["/api/v3/royalties/payments/{royaltyPayId}"]["get"]["responses"][200]["content"]["application/json"] 10 | 11 | export type GetRoyaltyPaymentOptions = { 12 | apiClient: ApiClient 13 | royaltyPayId: Address 14 | chainName: string 15 | apiKey: string 16 | } 17 | 18 | export function getRoyaltyPayment({ apiClient, royaltyPayId, chainName, apiKey }: GetRoyaltyPaymentOptions) { 19 | return getQuery({ 20 | apiClient, 21 | path: "/api/v3/royalties/payments/{royaltyPayId}", 22 | pathParams: { royaltyPayId }, 23 | chainName, 24 | apiKey, 25 | }) as Promise> 26 | } 27 | -------------------------------------------------------------------------------- /packages/storykit/src/lib/api/getRoyaltyPayments.ts: -------------------------------------------------------------------------------- 1 | import { paths } from "@/types/schema" 2 | import { FetchResponse } from "openapi-fetch" 3 | 4 | import { ApiClient } from "./apiClient" 5 | import { listQuery } from "./listQuery" 6 | 7 | export type RoyaltyPaymentsResponse = 8 | paths["/api/v3/royalties/payments"]["post"]["responses"][200]["content"]["application/json"] 9 | 10 | export type RoyaltyPaymentsOptions = 11 | paths["/api/v3/royalties/payments"]["post"]["requestBody"]["content"]["application/json"]["options"] 12 | 13 | export type GetRoyaltyPaymentsOptions = { 14 | apiClient: ApiClient 15 | options?: RoyaltyPaymentsOptions 16 | chainName: string 17 | apiKey: string 18 | } 19 | 20 | export function getRoyaltyPayments({ apiClient, options, chainName, apiKey }: GetRoyaltyPaymentsOptions) { 21 | return listQuery({ 22 | apiClient, 23 | path: "/api/v3/royalties/payments", 24 | body: { options }, 25 | chainName, 26 | apiKey, 27 | }) as Promise> 28 | } 29 | -------------------------------------------------------------------------------- /packages/storykit/src/lib/api/getTransaction.ts: -------------------------------------------------------------------------------- 1 | import { paths } from "@/types/schema" 2 | import { FetchResponse } from "openapi-fetch" 3 | 4 | import { ApiClient } from "./apiClient" 5 | import { getQuery } from "./getQuery" 6 | 7 | export type TransactionResponse = 8 | paths["/api/v3/transactions/{trxId}"]["get"]["responses"][200]["content"]["application/json"] 9 | export type TransactionOptions = paths["/api/v3/transactions/{trxId}"]["options"] 10 | 11 | export type GetTransactionOptions = { 12 | apiClient: ApiClient 13 | trxId: string 14 | chainName: string 15 | apiKey: string 16 | } 17 | 18 | export function getTransaction({ apiClient, trxId, chainName, apiKey }: GetTransactionOptions) { 19 | return getQuery({ 20 | apiClient, 21 | path: "/api/v3/transactions/{trxId}", 22 | pathParams: { trxId }, 23 | chainName, 24 | apiKey, 25 | }) as Promise> 26 | } 27 | -------------------------------------------------------------------------------- /packages/storykit/src/lib/api/getTransactions.ts: -------------------------------------------------------------------------------- 1 | import { paths } from "@/types/schema" 2 | import { FetchResponse } from "openapi-fetch" 3 | 4 | import { ApiClient } from "./apiClient" 5 | import { listQuery } from "./listQuery" 6 | 7 | export type TransactionsResponse = 8 | paths["/api/v3/transactions"]["post"]["responses"][200]["content"]["application/json"] 9 | 10 | export type TransactionsOptions = 11 | paths["/api/v3/transactions"]["post"]["requestBody"]["content"]["application/json"]["options"] 12 | 13 | export type GetTransactionsOptions = { 14 | apiClient: ApiClient 15 | options?: TransactionsOptions 16 | chainName: string 17 | apiKey: string 18 | } 19 | 20 | export function getTransactions({ apiClient, options, chainName, apiKey }: GetTransactionsOptions) { 21 | return listQuery({ 22 | apiClient, 23 | path: "/api/v3/transactions", 24 | body: { options }, 25 | chainName, 26 | apiKey, 27 | }) as Promise> 28 | } 29 | -------------------------------------------------------------------------------- /packages/storykit/src/lib/api/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./apiClient" 2 | export * from "./getCollection" 3 | export * from "./getCollections" 4 | export * from "./getDetailedIpLicenseTerms" 5 | export * from "./getDispute" 6 | export * from "./getDisputes" 7 | export * from "./getIpAsset" 8 | export * from "./getIpAssetEdges" 9 | export * from "./getIpAssetMetadata" 10 | export * from "./getIpAssets" 11 | export * from "./getIpAssetsTerms" 12 | export * from "./getIpAssetTerms" 13 | export * from "./getIpGroupEdges" 14 | export * from "./getIpGroups" 15 | export * from "./getLatestTransactions" 16 | export * from "./getLicenseMintingFee" 17 | export * from "./getLicenseMintingFees" 18 | export * from "./getLicenseTemplate" 19 | export * from "./getLicenseTemplates" 20 | export * from "./getLicenseTerms" 21 | export * from "./getLicensesTerms" 22 | export * from "./getLicenseToken" 23 | export * from "./getLicenseTokens" 24 | export * from "./getModule" 25 | export * from "./getModules" 26 | export * from "./getPermission" 27 | export * from "./getPermissions" 28 | export * from "./getRoyaltyPayment" 29 | export * from "./getRoyaltyPayments" 30 | export * from "./getTransaction" 31 | export * from "./getTransactions" 32 | -------------------------------------------------------------------------------- /packages/storykit/src/lib/api/listQuery.ts: -------------------------------------------------------------------------------- 1 | import type { paths } from "@/types/schema" 2 | import { FetchOptions } from "openapi-fetch" 3 | import { HttpMethod, PathsWithMethod } from "openapi-typescript-helpers" 4 | 5 | import { ApiClient } from "./apiClient" 6 | 7 | type Paths = PathsWithMethod 8 | type Params> = M extends keyof paths[P] ? FetchOptions : never 9 | 10 | export type ListQueryParams

> = { 11 | apiClient: ApiClient 12 | path: P 13 | chainName: string 14 | apiKey: string 15 | body?: Params<"post", P>["body"] 16 | additionalHeaders?: Record 17 | } 18 | 19 | export function listQuery

>({ 20 | apiClient, 21 | path, 22 | chainName, 23 | apiKey, 24 | body, 25 | additionalHeaders, 26 | }: ListQueryParams

) { 27 | const requestParams = { 28 | params: { 29 | header: { 30 | "X-Chain": chainName, 31 | "X-Api-Key": apiKey, 32 | ...additionalHeaders, 33 | }, 34 | }, 35 | } as Params<"post", P> 36 | 37 | const requestBody = { 38 | body: body || {}, 39 | } as Params<"post", P>["body"] 40 | 41 | return apiClient.POST(path, { ...requestParams, ...requestBody }) 42 | } 43 | -------------------------------------------------------------------------------- /packages/storykit/src/lib/functions/convertLicenseTermObject.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/no-explicit-any */ 2 | import { Trait } from "@/types/assets" 3 | import { PILTerms } from "@/types/openapi" 4 | 5 | import { camelize } from "../utils" 6 | 7 | type LicenseTerms = Partial 8 | 9 | export function convertLicenseTermObject(licenseTerms: Trait[]): LicenseTerms { 10 | return licenseTerms.reduce((acc: LicenseTerms, option: Trait): LicenseTerms => { 11 | const key = camelize(option.trait_type) as keyof PILTerms 12 | acc[key] = option.value === "true" ? true : option.value === "false" ? false : (option.value as any) 13 | return acc 14 | }, {}) 15 | } 16 | -------------------------------------------------------------------------------- /packages/storykit/src/lib/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./utils" 2 | export * from "./functions/convertLicenseTermObject" 3 | export * from "./api" 4 | -------------------------------------------------------------------------------- /packages/storykit/src/providers/IpProvider/index.tsx: -------------------------------------------------------------------------------- 1 | export * from "./IpProvider" 2 | -------------------------------------------------------------------------------- /packages/storykit/src/providers/IpRegistrationProvider/__docs__/Example.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from "react" 2 | 3 | import { IPRegistrationProvider, useIPRegistration } from "../IpRegistrationProvider" 4 | 5 | const Example: FC<{ 6 | children?: React.ReactNode 7 | }> = ({ children = }) => { 8 | return {children} 9 | } 10 | 11 | const ExampleComponent = () => { 12 | const { nftImage } = useIPRegistration() 13 | return <>{nftImage ? : null} 14 | } 15 | 16 | export default Example 17 | -------------------------------------------------------------------------------- /packages/storykit/src/providers/IpRegistrationProvider/__docs__/IpRegistrationProvider.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { Meta, StoryObj } from "@storybook/react" 2 | 3 | import Example from "./Example" 4 | 5 | const meta = { 6 | title: "WIP/IpRegistrationProvider", 7 | component: Example, 8 | parameters: { 9 | layout: "centered", 10 | }, 11 | } satisfies Meta 12 | 13 | export default meta 14 | type Story = StoryObj 15 | 16 | export const Empty: Story = { 17 | argTypes: { 18 | children: { control: false }, 19 | }, 20 | } 21 | -------------------------------------------------------------------------------- /packages/storykit/src/providers/IpRegistrationProvider/index.tsx: -------------------------------------------------------------------------------- 1 | export * from "./IpRegistrationProvider" 2 | -------------------------------------------------------------------------------- /packages/storykit/src/providers/RoyaltyGraphProvider/RoyaltyGraphProvider.tsx: -------------------------------------------------------------------------------- 1 | import { getRoyaltiesByIPs } from "@/lib/royalty-graph" 2 | import { STORYKIT_SUPPORTED_CHAIN } from "@/types/chains" 3 | import { RoyaltiesGraph } from "@/types/royalty-graph" 4 | import { useQuery } from "@tanstack/react-query" 5 | import React from "react" 6 | import { Address } from "viem" 7 | 8 | import { useStoryKitContext } from "../StoryKitProvider" 9 | 10 | const RoyaltyGraphContext = React.createContext<{ 11 | royaltyGraphData: RoyaltiesGraph | undefined 12 | isRoyaltyGraphDataLoading: boolean 13 | refetchRoyaltyGraphData: () => void 14 | isRoyaltyGraphDataFetched: boolean 15 | } | null>(null) 16 | 17 | export const RoyaltyGraphProvider = ({ ipIds, children }: { ipIds: Address[]; children: React.ReactNode }) => { 18 | const { chain } = useStoryKitContext() 19 | const { 20 | isLoading: isRoyaltyGraphDataLoading, 21 | data: royaltyGraphData, 22 | refetch: refetchRoyaltyGraphData, 23 | isFetched: isRoyaltyGraphDataFetched, 24 | } = useQuery({ 25 | queryKey: ["getRoyaltiesByIPs", ipIds], 26 | queryFn: () => getRoyaltiesByIPs(ipIds, chain.name as STORYKIT_SUPPORTED_CHAIN), 27 | enabled: true, 28 | }) 29 | 30 | return ( 31 | 39 | {children} 40 | 41 | ) 42 | } 43 | 44 | export const useRoyaltyGraphContext = () => { 45 | const context = React.useContext(RoyaltyGraphContext) 46 | if (!context) { 47 | throw new Error("useRoyaltyGraphContext must be used within a RoyaltyGraphProvider") 48 | } 49 | return context 50 | } 51 | -------------------------------------------------------------------------------- /packages/storykit/src/providers/RoyaltyGraphProvider/index.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storyprotocol/ipkit/c6af37d67770517d73f760ad8bb0d2258ea6c887/packages/storykit/src/providers/RoyaltyGraphProvider/index.tsx -------------------------------------------------------------------------------- /packages/storykit/src/providers/StoryKitProvider/__docs__/StoryKitProvider.stories.tsx: -------------------------------------------------------------------------------- 1 | import { STORYKIT_SUPPORTED_CHAIN, WRAPPED_IP } from "@/types/chains" 2 | import type { Meta, StoryObj } from "@storybook/react" 3 | 4 | import Example from "./Example" 5 | 6 | const meta = { 7 | title: "Providers/StoryKitProvider", 8 | component: Example, 9 | parameters: { 10 | layout: "centered", 11 | disableStoryProvider: true, 12 | }, 13 | argTypes: { 14 | chain: { control: "select", options: Object.values(STORYKIT_SUPPORTED_CHAIN) }, 15 | defaultCurrency: { control: "select", options: [WRAPPED_IP] }, 16 | theme: { control: "select", options: ["default", "story"] }, 17 | mode: { control: "select", options: ["auto", "light", "dark"] }, 18 | }, 19 | args: { 20 | chain: STORYKIT_SUPPORTED_CHAIN.STORY_MAINNET, 21 | theme: "default", 22 | mode: "auto", 23 | }, 24 | } satisfies Meta 25 | 26 | export default meta 27 | type Story = StoryObj 28 | 29 | export const Aeneid: Story = { 30 | argTypes: { 31 | children: { control: false }, 32 | }, 33 | args: { 34 | chain: STORYKIT_SUPPORTED_CHAIN.AENEID_TESTNET, 35 | defaultCurrency: WRAPPED_IP, 36 | }, 37 | } 38 | 39 | export const Mainnet: Story = { 40 | argTypes: { 41 | children: { control: false }, 42 | }, 43 | args: { 44 | chain: STORYKIT_SUPPORTED_CHAIN.STORY_MAINNET, 45 | defaultCurrency: WRAPPED_IP, 46 | }, 47 | } 48 | 49 | export const DarkMode: Story = { 50 | argTypes: { 51 | children: { control: false }, 52 | }, 53 | args: { 54 | mode: "dark", 55 | }, 56 | } 57 | 58 | export const Theme: Story = { 59 | argTypes: { 60 | children: { control: false }, 61 | }, 62 | args: { 63 | theme: "story", 64 | }, 65 | } 66 | -------------------------------------------------------------------------------- /packages/storykit/src/providers/StoryKitProvider/index.tsx: -------------------------------------------------------------------------------- 1 | export * from "./StoryKitProvider" 2 | -------------------------------------------------------------------------------- /packages/storykit/src/providers/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./IpProvider" 2 | export * from "./StoryKitProvider" 3 | -------------------------------------------------------------------------------- /packages/storykit/src/stories/data/index.ts: -------------------------------------------------------------------------------- 1 | import { Address } from "viem" 2 | 3 | // Random IP assets from Mainnet Explorer 4 | export const MAINNET_PREVIEW_IP_ASSETS: Address[] = [ 5 | "0xB1D831271A68Db5c18c8F0B69327446f7C8D0A42", // Ippy 6 | "0x3F85e3f767cE8e62A01A48109952e227d349AE10", // Mahojin 7 | "0x2537Ac30592930B2F46e6ad05fad0D1Fef0626E4", // Mycellium 8 | ] 9 | 10 | // Random IP assets from Aeneid Explorer 11 | export const AENEID_PREVIEW_IP_ASSETS: Address[] = [ 12 | "0xe488c586b78988e384669C7672DAE7EFFA320EfC", 13 | "0x1bDadAA83a3489821894f1691eA62F835Ec9C317", 14 | "0x08aedDC966D196f0201A50c2CB77caBa1C2CFcE4", 15 | ] 16 | 17 | // Combined IP assets for stories 18 | const STORY_MAINNET_IP_ASSETS_NAME = MAINNET_PREVIEW_IP_ASSETS.map((ip: Address) => `Mainnet: ${ip}`) as Address[] 19 | const STORY_MAINNET_IP_ASSETS_MAP = Object.fromEntries(MAINNET_PREVIEW_IP_ASSETS.map((ip) => [`Mainnet: ${ip}`, ip])) 20 | 21 | const STORY_AENEID_IP_ASSETS_NAME = AENEID_PREVIEW_IP_ASSETS.map((ip: Address) => `Aeneid: ${ip}`) as Address[] 22 | const STORY_AENEID_IP_ASSETS_MAP = Object.fromEntries(AENEID_PREVIEW_IP_ASSETS.map((ip) => [`Aeneid: ${ip}`, ip])) 23 | 24 | const STORY_IP_ASSETS = [...STORY_MAINNET_IP_ASSETS_NAME, ...STORY_AENEID_IP_ASSETS_NAME] 25 | const STORY_IP_ASSETS_MAP = { ...STORY_MAINNET_IP_ASSETS_MAP, ...STORY_AENEID_IP_ASSETS_MAP } 26 | 27 | export { STORY_IP_ASSETS, STORY_IP_ASSETS_MAP } 28 | -------------------------------------------------------------------------------- /packages/storykit/src/styles/fonts.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Inter&display=swap"); 2 | @import url("https://fonts.googleapis.com/css2?family=Inter:wght@700&display=swap"); 3 | @import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap"); 4 | -------------------------------------------------------------------------------- /packages/storykit/src/tests/data/0x5FCeDadBbDF710Ac3C528F6Aac9D1bD9ac18D9a8-license.json: -------------------------------------------------------------------------------- 1 | { 2 | "data": [ 3 | { 4 | "id": "0", 5 | "licensorIpId": "0x5FCeDadBbDF710Ac3C528F6Aac9D1bD9ac18D9a8", 6 | "licenseTemplate": "0x6B63194E3E1a0bC80104db44Cb2b42c5DB448a57", 7 | "licenseTermsId": "2", 8 | "transferable": "true", 9 | "owner": "0x0000000000000000000000000000000000000000", 10 | "mintedAt": "1712693520", 11 | "expiresAt": "0", 12 | "burntAt": "1712693520", 13 | "blockNumber": "5663375", 14 | "blockTime": "1712693520" 15 | }, 16 | { 17 | "id": "1", 18 | "licensorIpId": "0x5FCeDadBbDF710Ac3C528F6Aac9D1bD9ac18D9a8", 19 | "licenseTemplate": "0x6B63194E3E1a0bC80104db44Cb2b42c5DB448a57", 20 | "licenseTermsId": "2", 21 | "transferable": "true", 22 | "owner": "0x0000000000000000000000000000000000000000", 23 | "mintedAt": "1712693520", 24 | "expiresAt": "0", 25 | "burntAt": "1712693520", 26 | "blockNumber": "5663375", 27 | "blockTime": "1712693520" 28 | }, 29 | { 30 | "id": "2", 31 | "licensorIpId": "0x5FCeDadBbDF710Ac3C528F6Aac9D1bD9ac18D9a8", 32 | "licenseTemplate": "0x6B63194E3E1a0bC80104db44Cb2b42c5DB448a57", 33 | "licenseTermsId": "2", 34 | "transferable": "true", 35 | "owner": "0x0000000000000000000000000000000000000000", 36 | "mintedAt": "1712693520", 37 | "expiresAt": "0", 38 | "burntAt": "1712693520", 39 | "blockNumber": "5663375", 40 | "blockTime": "1712693520" 41 | } 42 | ] 43 | } 44 | -------------------------------------------------------------------------------- /packages/storykit/src/tests/data/0x6510c5487312cfEd3e1b9939C6Cad33b5F47358F-royalty.json: -------------------------------------------------------------------------------- 1 | { 2 | "data": { 3 | "id": "0x6510c5487312cfEd3e1b9939C6Cad33b5F47358F", 4 | "ipRoyaltyVault": "0x09a374B18627e22d3f49b8E482a69eA3f5da76D7", 5 | "royaltyStack": "60000000", 6 | "targetAncestors": [ 7 | "0x76cfcb1e454c3d2574c99849b254e8c5649389f5", 8 | "0x88D0AbE1e9E17862a9786693282c41c107A9bb91", 9 | "0xA80508bb45DA7c2828e646d9A724167f1bBF7b47" 10 | ], 11 | "targetRoyaltyAmount": [ 12 | "20000000", 13 | "20000000", 14 | "20000000" 15 | ], 16 | "blockNumber": "6042312", 17 | "blockTimestamp": "1717564908" 18 | } 19 | } -------------------------------------------------------------------------------- /packages/storykit/src/types/chains.ts: -------------------------------------------------------------------------------- 1 | import { STORY_AENEID, STORY_MAINNET } from "@/constants/chains" 2 | import { Address, zeroAddress } from "viem" 3 | 4 | export type ERC20Token = { 5 | name: string 6 | address: Address 7 | symbol: string 8 | decimals?: number 9 | } 10 | 11 | export type ChainConfig = { 12 | id: number 13 | name: string 14 | displayName: string 15 | rpcUrl: string 16 | blockExplorerUrl: string 17 | protocolExplorerUrl: string 18 | alchemyId: string 19 | apiVersion: string 20 | defaultCurrency?: ERC20Token 21 | } 22 | 23 | export type SupportedChainConfig = typeof STORY_AENEID | typeof STORY_MAINNET 24 | 25 | export enum STORYKIT_SUPPORTED_CHAIN { 26 | AENEID_TESTNET = "story-aeneid", 27 | STORY_MAINNET = "story", 28 | } 29 | 30 | export const WRAPPED_IP: ERC20Token = { 31 | name: "Wrapped IP", 32 | address: "0x1514000000000000000000000000000000000000", // Same for all chains 33 | symbol: "WIP", 34 | } 35 | -------------------------------------------------------------------------------- /packages/storykit/src/types/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./assets" 2 | 3 | export * from "./chains" 4 | export * from "./openapi" 5 | export * from "./alchemy" 6 | -------------------------------------------------------------------------------- /packages/storykit/src/types/royalty-graph.ts: -------------------------------------------------------------------------------- 1 | import { Address } from "viem" 2 | 3 | export type RoyaltiesGraph = { 4 | royalties: RoyaltyGraph[] 5 | } 6 | 7 | export type RoyaltyGraph = { 8 | ipId: Address 9 | balances: RoyaltyBalance[] 10 | } 11 | 12 | export type RoyaltyBalance = { 13 | balance: string 14 | tokenAddress: Address 15 | links: RoyaltyLink[] 16 | mintFee: RoyaltyMintFee[] 17 | } 18 | 19 | export type RoyaltyLink = { 20 | parentIpId: Address 21 | childIpId: Address 22 | tokenAddress: Address 23 | amount: string 24 | licenseRoyaltyPolicy: Address 25 | } 26 | 27 | export type RoyaltyMintFee = { 28 | amount: string 29 | tokenAddress: Address 30 | } 31 | -------------------------------------------------------------------------------- /packages/storykit/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@storykit/typescript-config/react-library.json", 3 | "include": ["src"], 4 | "compilerOptions": { 5 | "paths": { 6 | "@/*": ["./src/*"] 7 | }, 8 | "jsx": "react", // or "react-jsx" if using React 17+ 9 | "resolveJsonModule": true, 10 | "declaration": true, 11 | "declarationMap": true, 12 | "emitDeclarationOnly": false, 13 | "composite": false, 14 | "baseUrl": ".", 15 | "rootDir": "src", 16 | "outDir": "dist" 17 | // "noUncheckedIndexedAccess": true 18 | }, 19 | "exclude": ["dist", "build", "node_modules"] 20 | } 21 | -------------------------------------------------------------------------------- /pnpm-workspace.yaml: -------------------------------------------------------------------------------- 1 | packages: 2 | - "examples/*" 3 | - "packages/*" 4 | -------------------------------------------------------------------------------- /turbo.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://turborepo.org/schema.json", 3 | "pipeline": { 4 | "build": { 5 | "dependsOn": ["^build"], 6 | "outputs": ["dist/**", ".next/**", "!.next/cache/**"], 7 | "cache": false 8 | }, 9 | "lint": { 10 | "outputs": [] 11 | }, 12 | "dev": { 13 | "cache": false, 14 | "persistent": true 15 | }, 16 | "format": { 17 | "cache": false 18 | } 19 | } 20 | } 21 | --------------------------------------------------------------------------------