Sam/provider api key

examples/custom-theme/app/Providers.tsx

@@ -7,7 +7,13 @@ export default function Providers({ children }: { children: React.ReactNode }) {
   const queryClient = new QueryClient()
   return (
     <QueryClientProvider client={queryClient}>
-      <StoryKitProvider chain={STORYKIT_SUPPORTED_CHAIN.STORY_TESTNET} theme="my-theme">
+      <StoryKitProvider 
+        chain={STORYKIT_SUPPORTED_CHAIN.STORY_TESTNET} 
+        apiKey={process.env.NEXT_PUBLIC_STORY_PROTOCOL_X_API_KEY} 
+        appId="theme-example"
+        simplehashKey={process.env.NEXT_PUBLIC_SIMPLE_HASH_API_KEY} 
+        theme="my-theme"
+      >
         {children}
       </StoryKitProvider>
     </QueryClientProvider>

examples/simple-setup/app/IpChildren.tsx

@@ -0,0 +1,26 @@
+import { IpProvider, useIpContext } from "@storyprotocol/storykit"
+
+export default function IpChildren() {
+  const { assetChildrenData, assetData } = useIpContext()
+  const firstFiveChildren = assetChildrenData?.slice(0, 5)
+
+  return (
+    <div className="flex w-full flex-col gap-1">
+      <span className="text-sm font-bold mb-1">Children</span>
+      {firstFiveChildren?.map((child, i) => <div key={i}><IpProvider ipId={child.ipId}><Child /></IpProvider></div>)}
+      {assetData?.childrenCount && assetData?.childrenCount > 5 && <span className="text-xs text-gray-500 mt-1">+ {assetData?.childrenCount - 5} more</span>}
+    </div>
+  )
+}
+
+const Child = () => {
+  const { nftData } = useIpContext()
+  return <div className="flex gap-1 items-center">
+    <div className="w-6 h-6 bg-gray-200 rounded-md overflow-hidden border border-gray-200">
+      {nftData?.previews.image_medium_url ? 
+        // eslint-disable-next-line @next/next/no-img-element
+        <img src={nftData.previews.image_medium_url} alt={nftData.name} className="w-full h-full object-cover" /> 
+      : null}
+    </div>
+    <span className="text-sm">{nftData?.name}</span></div>
+}

examples/simple-setup/app/Providers.tsx

@@ -6,8 +6,13 @@ import { StoryKitProvider, STORYKIT_SUPPORTED_CHAIN } from "@storyprotocol/story
 export default function Providers({ children }: { children: React.ReactNode }) {
   const queryClient = new QueryClient()
   return (
-    <QueryClientProvider client={queryClient}>
-      <StoryKitProvider chain={STORYKIT_SUPPORTED_CHAIN.STORY_TESTNET}>
+    <QueryClientProvider client={queryClient}> 
+      <StoryKitProvider 
+        chain={STORYKIT_SUPPORTED_CHAIN.STORY_TESTNET} 
+        apiKey={process.env.NEXT_PUBLIC_STORY_PROTOCOL_X_API_KEY} 
+        simplehashKey={process.env.NEXT_PUBLIC_SIMPLE_HASH_API_KEY} 
+        appId="example-app"
+      >
         {children}
       </StoryKitProvider>
     </QueryClientProvider>

examples/simple-setup/app/page.tsx

@@ -2,7 +2,7 @@
 
 import { IpProvider, IpLicenseAccordion } from "@storyprotocol/storykit"
 import IpHeader from "./IpHeader"
-
+import IpChildren from "./IpChildren"
 export default function Home() {
   return (
     <div className="flex items-center justify-center h-screen w-screen ">
@@ -11,6 +11,7 @@ export default function Home() {
           <div className="flex flex-col gap-4">
             <IpHeader />
             <IpLicenseAccordion />
+            <IpChildren />
         </div>
         </IpProvider>
       </div>

packages/storykit/.storybook/preview.tsx

@@ -80,8 +80,19 @@ const preview: Preview = {
       if (context.parameters.disableStoryProvider) {
         return <Story />
       }
+      const API_KEY =
+        process.env.STORYBOOK_STORY_PROTOCOL_X_API_KEY || process.env.NEXT_PUBLIC_STORY_PROTOCOL_X_API_KEY || ""
+
+      const SH_KEY = process.env.STORYBOOK_SIMPLE_HASH_API_KEY || process.env.NEXT_PUBLIC_SIMPLE_HASH_API_KEY || ""
+
       return (
-        <StoryProvider chain={context.globals.chain} theme={context.globals.skTheme}>
+        <StoryProvider
+          chain={context.globals.chain}
+          theme={context.globals.skTheme}
+          apiKey={API_KEY}
+          appId="StoryKit"
+          simplehashKey={SH_KEY}
+        >
           <Story />
         </StoryProvider>
       )

packages/storykit/src/components/CollectionGraph/CollectionGraph.tsx

@@ -1,8 +1,7 @@
-import { listResource } from "@/lib/api"
+import { useListResource } from "@/hooks/api"
 import { cn } from "@/lib/utils"
-import { useStoryKitContext } from "@/providers/StoryKitProvider"
+import { useStoryKitContext } from "@/providers"
 import { RESOURCE_TYPE } from "@/types/api"
-import { STORYKIT_SUPPORTED_CHAIN } from "@/types/chains"
 import { useQuery } from "@tanstack/react-query"
 import React, { useEffect, useRef, useState } from "react"
 import { LinkObject } from "react-force-graph-2d"
@@ -31,26 +30,28 @@ function CollectionGraph({
   showRelationship = false,
   darkMode = false,
 }: CollectionGraphProps) {
-  const { chain } = useStoryKitContext()
-  const { isLoading: isAssetDataLoading, data: assetData } = useQuery({
-    queryKey: [RESOURCE_TYPE.ASSET, collectionAddress, chain.name],
-    queryFn: () =>
-      listResource(RESOURCE_TYPE.ASSET, chain.name as STORYKIT_SUPPORTED_CHAIN, {
-        pagination: { limit: 100 },
-        where: { tokenContract: collectionAddress },
-        orderBy: "blockTimestamp", // or blockTimestamp
-        orderDirection: "asc", // or "ASC"
-      }),
-    enabled: Boolean(collectionAddress),
-  })
+  const { simplehashKey } = useStoryKitContext()
+
+  const { isLoading: isAssetDataLoading, data: assetData } = useListResource(
+    RESOURCE_TYPE.ASSET,
+    {
+      pagination: { limit: 100 },
+      where: { tokenContract: collectionAddress },
+      orderBy: "blockTimestamp", // or blockTimestamp
+      orderDirection: "asc", // or "ASC"
+    },
+    {
+      enabled: Boolean(collectionAddress),
+    }
+  )
 
   const {
     isLoading: formattedDataLoading,
     data: formattedGraphData,
     isError,
   } = useQuery({
     queryKey: ["FORMAT_GRAPH_DATA", assetData?.id],
-    queryFn: () => convertMultipleAssetsToGraphFormat(assetData.data as Asset[]),
+    queryFn: () => convertMultipleAssetsToGraphFormat(assetData.data as Asset[], simplehashKey || ""),
     enabled: !!assetData,
   })
 

packages/storykit/src/components/CollectionGraph/__docs__/Example.tsx

@@ -1,8 +1,6 @@
-import { getCollectionByAddress, getNFTByWallet } from "@/lib/simplehash"
-import { useStoryKitContext } from "@/providers"
+import { useGetCollectionByAddress, useGetNFTByWallet } from "@/hooks/simplehash"
 import { ILIAD_PREVIEW_COLLECTION_ADDRESS } from "@/stories/data"
-import { STORYKIT_SUPPORTED_CHAIN } from "@/types/chains"
-import React, { FC, useEffect, useState } from "react"
+import React, { FC } from "react"
 import { Address } from "viem"
 
 import CollectionGraph, { CollectionGraphProps } from "../CollectionGraph"
@@ -15,25 +13,8 @@ const Example: FC<CollectionGraphProps> = ({
   showRelationship = false,
   darkMode = false,
 }) => {
-  const { chain } = useStoryKitContext()
-  const [collections, setCollections] = useState<any>(null)
-  const [nfts, setNfts] = useState<any>(null)
-
-  useEffect(() => {
-    const fetch = async () => {
-      const collectionMetadata = await getCollectionByAddress(
-        "0x7ee32b8B515dEE0Ba2F25f612A04a731eEc24F49",
-        chain.name as STORYKIT_SUPPORTED_CHAIN
-      )
-      setCollections(collectionMetadata)
-      const nftWalletResponse = await getNFTByWallet(
-        "0xB1918E7d6CB67d027F6aBc66DC3273D6ECAD6dE5",
-        chain.name as STORYKIT_SUPPORTED_CHAIN
-      )
-      setNfts(nftWalletResponse)
-    }
-    fetch()
-  }, [chain])
+  const { data: collections } = useGetCollectionByAddress("0x7ee32b8B515dEE0Ba2F25f612A04a731eEc24F49")
+  const { data: nfts } = useGetNFTByWallet("0xB1918E7d6CB67d027F6aBc66DC3273D6ECAD6dE5")
 
   return (
     <>

packages/storykit/src/components/IpGraph/IpGraph.tsx

@@ -28,7 +28,7 @@ export type IpGraphProps = {
  */
 function IpGraph({ width = 500, height = 500, darkMode = false }: IpGraphProps) {
   const { isAssetDataLoading, assetData, nftData } = useIpContext()
-  const { chain } = useStoryKitContext()
+  const { chain, apiKey, appId, simplehashKey } = useStoryKitContext()
 
   const {
     isLoading: formattedDataLoading,
@@ -37,7 +37,14 @@ function IpGraph({ width = 500, height = 500, darkMode = false }: IpGraphProps)
   } = useQuery({
     queryKey: ["FORMAT_GRAPH_DATA", assetData?.id, chain],
     queryFn: () =>
-      convertAssetToGraphFormat(assetData as Asset, nftData as NFTMetadata, chain.name as STORYKIT_SUPPORTED_CHAIN),
+      convertAssetToGraphFormat(
+        assetData as Asset,
+        nftData as NFTMetadata,
+        chain,
+        apiKey || "",
+        appId || "",
+        simplehashKey || ""
+      ),
     enabled: !!(assetData && nftData),
   })
 

packages/storykit/src/components/IpGraph/__docs__/Example.tsx

@@ -1,8 +1,6 @@
-import { getCollectionByAddress, getNFTByWallet } from "@/lib/simplehash"
-import { useStoryKitContext } from "@/providers/StoryKitProvider"
+import { useGetCollectionByAddress, useGetNFTByWallet } from "@/hooks/simplehash"
 import { STORY_IP_ASSETS, STORY_IP_ASSETS_MAP } from "@/stories/data"
-import { STORYKIT_SUPPORTED_CHAIN } from "@/types/chains"
-import React, { FC, useEffect, useState } from "react"
+import React, { FC } from "react"
 import { Address } from "viem"
 
 import { IpProvider } from "../../../providers"
@@ -19,25 +17,8 @@ const Example: FC<{
   height = 300,
   darkMode = false,
 }) => {
-  const { chain } = useStoryKitContext()
-  const [collections, setCollections] = useState<any>(null)
-  const [nfts, setNfts] = useState<any>(null)
-
-  useEffect(() => {
-    const fetch = async () => {
-      const collectionMetadata = await getCollectionByAddress(
-        "0x7ee32b8B515dEE0Ba2F25f612A04a731eEc24F49",
-        chain.name as STORYKIT_SUPPORTED_CHAIN
-      )
-      setCollections(collectionMetadata)
-      const nftWalletResponse = await getNFTByWallet(
-        "0xB1918E7d6CB67d027F6aBc66DC3273D6ECAD6dE5",
-        chain.name as STORYKIT_SUPPORTED_CHAIN
-      )
-      setNfts(nftWalletResponse)
-    }
-    fetch()
-  }, [chain])
+  const { data: collections } = useGetCollectionByAddress("0x7ee32b8B515dEE0Ba2F25f612A04a731eEc24F49")
+  const { data: nfts } = useGetNFTByWallet("0xB1918E7d6CB67d027F6aBc66DC3273D6ECAD6dE5")
 
   return (
     <>

packages/storykit/src/components/LicenseFlavorSelector/LicenseFlavorSelector.tsx

@@ -42,22 +42,22 @@ export const licenseFlavorOptions = [
   },
 ]
 
-const titleStyles = cva("text-foreground font-sans font-bold", {
+const titleStyles = cva("sk-text-foreground sk-font-sans sk-font-bold", {
   variants: {
     size: {
-      small: "text-sm",
-      medium: "text-base",
-      large: "text-lg",
+      small: "sk-text-sm",
+      medium: "sk-text-base",
+      large: "sk-text-lg",
     },
   },
 })
 
-const descriptionStyles = cva("font-medium text-muted-foreground font-sans", {
+const descriptionStyles = cva("sk-font-medium sk-text-muted-foreground sk-font-sans", {
   variants: {
     size: {
-      small: "text-xs",
-      medium: "text-sm",
-      large: "text-base",
+      small: "sk-text-xs",
+      medium: "sk-text-sm",
+      large: "sk-text-base",
     },
   },
 })
@@ -73,9 +73,9 @@ export default function LicenseFlavorSelector({
   const descriptionId = React.useId()
 
   return (
-    <div className={cn("grid gap-4", className)} role="radiogroup">
+    <div className={cn("sk-grid sk-gap-4", className)} role="radiogroup">
       {licenseFlavorOptions.map((flavor) => (
-        <label className="group" key={flavor.value}>
+        <label className="sk-group" key={flavor.value}>
           <input
             type="radio"
             name="pil-flavor"
@@ -84,14 +84,14 @@ export default function LicenseFlavorSelector({
             value={flavor.value}
             checked={value === flavor.value}
             onChange={(e) => onValueChange?.(e.target.value as PIL_FLAVOR)}
-            className="sr-only"
+            className="sk-sr-only"
           />
           <div
             className={cn(
-              "flex flex-col w-full cursor-pointer items-start text-left rounded-lg border-2 bg-popover p-4",
-              "peer-focus-visible:ring-2 peer-focus-visible:ring-offset-2 peer-focus-visible:ring-foreground/40",
-              "group-focus-visible:ring-2 group-focus-visible:ring-offset-2 group-focus-visible:ring-foreground/40",
-              value === flavor.value ? "border-foreground" : "border-border hover:border-foreground"
+              "sk-flex sk-flex-col sk-w-full sk-cursor-pointer sk-items-start sk-text-left sk-rounded-lg sk-border-2 sk-bg-popover sk-p-4",
+              "sk-peer-focus-visible:ring-2 sk-peer-focus-visible:ring-offset-2 sk-peer-focus-visible:ring-foreground/40",
+              "sk-group-focus-visible:ring-2 sk-group-focus-visible:ring-offset-2 sk-group-focus-visible:ring-foreground/40",
+              value === flavor.value ? "sk-border-foreground" : "sk-border-border sk-hover:sk-border-foreground"
             )}
           >
             <div id={titleId} className={titleStyles({ size })}>
@@ -101,7 +101,12 @@ export default function LicenseFlavorSelector({
               {flavor.description}
             </div>
             {rest.showCannots || rest.showCans || rest.showExtras ? (
-              <div className={cn(value === flavor.value ? "block" : "hidden", size === "small" ? "mt-4" : "mt-6")}>
+              <div
+                className={cn(
+                  value === flavor.value ? "sk-block" : "sk-hidden",
+                  size === "small" ? "sk-mt-4" : "sk-mt-6"
+                )}
+              >
                 <LicenseTermsList {...rest} size={size} selectedLicenseTerms={flavor.terms} />
               </div>
             ) : null}

packages/storykit/src/components/LicenseTermsList/LicenseTermsList.tsx

@@ -1,12 +1,9 @@
 import { noLicenseTerms } from "@/constants/pil-flavors"
+import { useGetResource } from "@/hooks/api"
 import { cn } from "@/lib"
-import { getResource } from "@/lib/api"
 import { convertLicenseTermObject } from "@/lib/functions/convertLicenseTermObject"
-import { useStoryKitContext } from "@/providers/StoryKitProvider"
 import { PILTerms } from "@/types"
 import { RESOURCE_TYPE } from "@/types/api"
-import { STORYKIT_SUPPORTED_CHAIN } from "@/types/chains"
-import { useQuery } from "@tanstack/react-query"
 import { cva } from "class-variance-authority"
 import { CircleCheck, CircleMinus, Info } from "lucide-react"
 import React, { useMemo } from "react"
@@ -150,18 +147,7 @@ function LicenseTermsList({
   selectedLicenseTerms,
   selectedLicenseTermsId,
 }: LicenseTermsListProps) {
-  const { chain } = useStoryKitContext()
-
-  const { data: licenseTermsData } = useQuery({
-    queryKey: [RESOURCE_TYPE.LICENSE_TERMS, selectedLicenseTermsId],
-    queryFn: () =>
-      getResource(
-        RESOURCE_TYPE.LICENSE_TERMS,
-        selectedLicenseTermsId as string,
-        chain.name as STORYKIT_SUPPORTED_CHAIN
-      ),
-    enabled: !!selectedLicenseTermsId,
-  })
+  const { data: licenseTermsData } = useGetResource(RESOURCE_TYPE.LICENSE_TERMS, selectedLicenseTermsId as string)
 
   const licenseTerms: Partial<PILTerms> = useMemo(() => {
     // default to selectedLicenseTerms or noLicenseTerms