diff --git a/packages/storykit/src/components/CollectionGraph/CollectionGraph.tsx b/packages/storykit/src/components/CollectionGraph/CollectionGraph.tsx index b38b9d1..e09b50e 100644 --- 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 index 299f5c0..b946576 100644 --- 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 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 index 04d7e14..ae162e5 100644 --- 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 = ({ showName = false, showRelationship = false, darkMode = false, + chain = STORYKIT_SUPPORTED_CHAIN.STORY_TESTNET, }) => { const [collections, setCollections] = useState(null) const [nfts, setNfts] = useState(null) @@ -33,6 +35,7 @@ const Example: FC = ({
- NFT Image -
+ NFT Image +
${nftData?.name || "Untitled"}
@@ -194,6 +194,7 @@ export async function convertAssetToGraphFormat(jsonData: Asset, nftData: NFTMet return { nodes, links } } + export async function fetchNFTMetadata(assets: Asset[]): Promise> { const chunkSize = 200 const nftDataMap = new Map() @@ -213,7 +214,7 @@ export async function fetchNFTMetadata(assets: Asset[]): Promise ({ - 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 index b2db09d..d8bba96 100644 --- 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"]