Merge pull request #34 from storyprotocol/allen/iliad-testnet-ip-graph

storyprotocol · Aug 27, 2024 · 4d1a970 · 4d1a970
2 parents 21a3d73 + 9601ce0
commit 4d1a970
Show file tree

Hide file tree

Showing 6 changed files with 76 additions and 7 deletions.
diff --git a/packages/storykit/src/components/CollectionGraph/CollectionGraph.tsx b/packages/storykit/src/components/CollectionGraph/CollectionGraph.tsx
@@ -1,4 +1,5 @@
 import { listResource } from "@/lib/api"
+import { STORYKIT_SUPPORTED_CHAIN } from "@/lib/constants"
 import { cn } from "@/lib/utils"
 import { RESOURCE_TYPE } from "@/types/api"
 import { useQuery } from "@tanstack/react-query"
@@ -19,6 +20,7 @@ export type CollectionGraphProps = {
   showName?: boolean
   showRelationship?: boolean
   darkMode?: boolean
+  chain: STORYKIT_SUPPORTED_CHAIN
 }
 
 function CollectionGraph({
@@ -28,11 +30,13 @@ function CollectionGraph({
   showName = false,
   showRelationship = false,
   darkMode = false,
+  chain = STORYKIT_SUPPORTED_CHAIN.SEPOLIA,
 }: CollectionGraphProps) {
   const { isLoading: isAssetDataLoading, data: assetData } = useQuery({
-    queryKey: [RESOURCE_TYPE.ASSET, collectionAddress],
+    queryKey: [RESOURCE_TYPE.ASSET, collectionAddress, chain],
     queryFn: () =>
       listResource(RESOURCE_TYPE.ASSET, {
+        chain,
         pagination: { limit: 1000 },
         where: { tokenContract: collectionAddress },
       }),

diff --git a/packages/storykit/src/components/CollectionGraph/__docs__/CollectionGraph.stories.tsx b/packages/storykit/src/components/CollectionGraph/__docs__/CollectionGraph.stories.tsx
@@ -1,4 +1,5 @@
-import { PREVIEW_COLLECTION_ADDRESS } from "@/stories/data"
+import { STORYKIT_SUPPORTED_CHAIN } from "@/lib/constants"
+import { ILIAD_TESTNET_COLLECTION, PREVIEW_COLLECTION_ADDRESS } from "@/stories/data"
 import type { Meta, StoryObj } from "@storybook/react"
 import { expect, waitFor } from "@storybook/test"
 
@@ -21,17 +22,53 @@ type Story = StoryObj<typeof meta>
 
 export const Select: Story = {
   argTypes: {
+    chain: {
+      options: [...Object.values(STORYKIT_SUPPORTED_CHAIN)],
+    },
     collectionAddress: { options: PREVIEW_COLLECTION_ADDRESS },
   },
   args: {
+    chain: STORYKIT_SUPPORTED_CHAIN.SEPOLIA,
     collectionAddress: PREVIEW_COLLECTION_ADDRESS[0] as `0x${string}`,
   },
 }
+
+export const IliadTestnetMint: Story = {
+  argTypes: {
+    chain: {
+      options: [...Object.values(STORYKIT_SUPPORTED_CHAIN)],
+    },
+    collectionAddress: { control: "text" },
+  },
+  args: {
+    chain: STORYKIT_SUPPORTED_CHAIN.STORY_TESTNET,
+    collectionAddress: ILIAD_TESTNET_COLLECTION[0] as `0x${string}`,
+  },
+  play: async ({ args, canvasElement }) => {
+    const wait = (timeout: number) => new Promise((resolve) => setTimeout(resolve, timeout))
+    await wait(10000)
+
+    await waitFor(
+      () => {
+        const canvas = canvasElement.querySelector("canvas")
+        expect(canvasElement.querySelector(".force-graph-container")).toBeInTheDocument()
+        expect(canvasElement.querySelector(".graph-tooltip")).toBeInTheDocument()
+        expect(canvas).toHaveAttribute("style", `width: ${args.width || 400}px; height: ${args.height || 300}px;`)
+      },
+      { timeout: 10000 }
+    )
+  },
+}
+
 export const Input: Story = {
   argTypes: {
+    chain: {
+      options: [...Object.values(STORYKIT_SUPPORTED_CHAIN)],
+    },
     collectionAddress: { control: "text" },
   },
   args: {
+    chain: STORYKIT_SUPPORTED_CHAIN.SEPOLIA,
     collectionAddress: PREVIEW_COLLECTION_ADDRESS[0] as `0x${string}`,
   },
   play: async ({ args, canvasElement }) => {
@@ -73,9 +110,13 @@ export const Input: Story = {
 
 export const MultiChilds: Story = {
   argTypes: {
+    chain: {
+      options: [...Object.values(STORYKIT_SUPPORTED_CHAIN)],
+    },
     collectionAddress: { control: "text" },
   },
   args: {
+    chain: STORYKIT_SUPPORTED_CHAIN.SEPOLIA,
     collectionAddress: PREVIEW_COLLECTION_ADDRESS[0] as `0x${string}`,
   },
   play: async ({ args, canvasElement }) => {
@@ -96,9 +137,13 @@ export const MultiChilds: Story = {
 
 export const MultiParents: Story = {
   argTypes: {
+    chain: {
+      options: [...Object.values(STORYKIT_SUPPORTED_CHAIN)],
+    },
     collectionAddress: { control: "text" },
   },
   args: {
+    chain: STORYKIT_SUPPORTED_CHAIN.SEPOLIA,
     collectionAddress: PREVIEW_COLLECTION_ADDRESS[0] as `0x${string}`,
     width: 500,
     height: 500,
@@ -121,9 +166,13 @@ export const MultiParents: Story = {
 
 export const NoChildIP: Story = {
   argTypes: {
+    chain: {
+      options: [...Object.values(STORYKIT_SUPPORTED_CHAIN)],
+    },
     collectionAddress: { control: "text" },
   },
   args: {
+    chain: STORYKIT_SUPPORTED_CHAIN.SEPOLIA,
     collectionAddress: PREVIEW_COLLECTION_ADDRESS[0] as `0x${string}`,
   },
   play: async ({ args, canvasElement }) => {

diff --git a/packages/storykit/src/components/CollectionGraph/__docs__/Example.tsx b/packages/storykit/src/components/CollectionGraph/__docs__/Example.tsx
@@ -1,3 +1,4 @@
+import { STORYKIT_SUPPORTED_CHAIN } from "@/lib/constants"
 import { getCollectionByAddress, getNFTByWallet } from "@/lib/simplehash"
 import { PREVIEW_COLLECTION_ADDRESS } from "@/stories/data"
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
@@ -13,6 +14,7 @@ const Example: FC<CollectionGraphProps> = ({
   showName = false,
   showRelationship = false,
   darkMode = false,
+  chain = STORYKIT_SUPPORTED_CHAIN.STORY_TESTNET,
 }) => {
   const [collections, setCollections] = useState<any>(null)
   const [nfts, setNfts] = useState<any>(null)
@@ -33,6 +35,7 @@ const Example: FC<CollectionGraphProps> = ({
       <QueryClientProvider client={queryClient}>
         <div className="flex h-full items-center justify-center">
           <CollectionGraph
+            chain={chain}
             collectionAddress={collectionAddress}
             width={width}
             height={height}

diff --git a/packages/storykit/src/lib/constants.ts b/packages/storykit/src/lib/constants.ts
@@ -1,6 +1,16 @@
-export const API_BASE_URL = "https://api.storyprotocol.net"
+export const API_BASE_URL = "https://edge.stg.storyprotocol.net"
 
 export enum STORYKIT_SUPPORTED_CHAIN {
   SEPOLIA = "sepolia",
   STORY_TESTNET = "story-testnet",
 }
+
+export const CHAINNAME_TO_CHAINID: { [key: string]: number } = {
+  "story-testnet": 1513,
+  sepolia: 11155111,
+}
+
+export const CHAINID_TO_CHAINNAME: { [key: number]: string } = {
+  1513: "story-testnet",
+  11155111: "sepolia",
+}
diff --git a/packages/storykit/src/lib/graph.ts b/packages/storykit/src/lib/graph.ts
@@ -3,7 +3,7 @@ import { Asset, NFTMetadata } from "@/types"
 import { Address } from "viem"
 
 import { NFT, getNFTByTokenId, getNFTByTokenIds } from "./simplehash"
-
+import { CHAINID_TO_CHAINNAME } from "./constants"
 export interface GraphNode {
   id: string
   name: string
@@ -36,8 +36,8 @@ export interface GraphData {
 export function generateNFTDetails(nftData: NFTMetadata | undefined, assetId: Address): string {
   return `
     <div class="graph-content">
-      <img src="${nftData?.previews?.image_small_url || nftData?.image_url || "https://play.storyprotocol.xyz/_next/static/media/sp_logo_black.2e1d7450.svg"}" alt="NFT Image" style="max-width:250px; background-color:white;"/>
-      <div style="font-size:24px">
+      <img src="${nftData?.previews?.image_small_url || nftData?.image_url || "https://play.storyprotocol.xyz/_next/static/media/sp_logo_black.2e1d7450.svg"}" alt="NFT Image" style="max-width:250px; background-color:white;"/>      
+      <div style="font-size:24px; width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
         ${nftData?.name || "Untitled"}
       </div>
       <div style="font-size:10px; display:flex; width:100%; justify-content: space-between">
@@ -194,6 +194,7 @@ export async function convertAssetToGraphFormat(jsonData: Asset, nftData: NFTMet
 
   return { nodes, links }
 }
+
 export async function fetchNFTMetadata(assets: Asset[]): Promise<Map<string, NFTMetadata>> {
   const chunkSize = 200
   const nftDataMap = new Map<string, NFTMetadata>()
@@ -213,7 +214,7 @@ export async function fetchNFTMetadata(assets: Asset[]): Promise<Map<string, NFT
   // Iterate over each chunk and fetch NFT metadata
   for (const chunk of assetChunks) {
     const nfts: NFT[] = chunk.map((asset) => ({
-      chain: "ethereum-sepolia",
+      chain: CHAINID_TO_CHAINNAME[Number(asset.nftMetadata.chainId)],
       tokenAddress: asset.nftMetadata.tokenContract,
       tokenId: asset.nftMetadata.tokenId,
     }))

diff --git a/packages/storykit/src/stories/data/index.ts b/packages/storykit/src/stories/data/index.ts
@@ -24,3 +24,5 @@ export const PREVIEW_COLLECTION_ADDRESS = [
   "0x6ec84740F929B80dB5740390b4DF0Ff876999af0",
   "0xfFEde4fcB198f940B7610d2e6A1c45A9164537A4",
 ]
+
+export const ILIAD_TESTNET_COLLECTION = ["0x4c5f56a2FF75a8617337E33f75EB459Db422916F"]