fix(nft-list): forward item onClick

hyperweb-io · Nov 23, 2023 · aa1c714 · aa1c714
1 parent eb7bba4
commit aa1c714
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 18 deletions.
diff --git a/packages/react/stories/nft/NftProfileCardList.stories.tsx b/packages/react/stories/nft/NftProfileCardList.stories.tsx
@@ -20,45 +20,96 @@ export const Primary: Story = {
     list: [
       {
         imgSrc:
-          "https://res.cloudinary.com/stargaze/image/upload/w_700/m4sxagqpu98z76lcggyj.jpg",
+          "https://ipfs-gw.stargaze-apis.com/ipfs/bafybeibl5rrhfola4m2gxyzfji63fxyboeic36pjxjmrnmgablqhy3mnvy/3054.png",
         name: "Bad Kid #9501",
-        highestOffer: "450",
-        listPrice: "373",
+        priceItems: [
+          {
+            label: "Highest offer",
+            value: "450",
+          },
+          {
+            label: "Listing price",
+            value: "373",
+          },
+        ],
+        onClick: () => {
+          console.log("NFT #1");
+        },
       },
       {
         imgSrc:
-          "https://res.cloudinary.com/stargaze/image/upload/w_700/wnfkydgxvp2vf0fqq277.jpg",
+          "https://ipfs-gw.stargaze-apis.com/ipfs/bafybeibl5rrhfola4m2gxyzfji63fxyboeic36pjxjmrnmgablqhy3mnvy/6.png",
         name: "Bad Kid #9502",
-        highestOffer: "450",
-        listPrice: "373",
+        priceItems: [
+          {
+            label: "Highest offer",
+            value: "450",
+          },
+          {
+            label: "Listing price",
+            value: "373",
+          },
+        ],
       },
       {
         imgSrc:
-          "https://res.cloudinary.com/stargaze/image/upload/w_700/zkmiu7m7jelttu6ewrvu.jpg",
+          "https://ipfs-gw.stargaze-apis.com/ipfs/bafybeicf6q3az6bk4fyilhgk7ytgkctxjb3jsm4542cxtb6r4xsb35zoni/images/608.png",
         name: "Bad Kid #9505",
-        highestOffer: "450",
-        listPrice: "373",
+        priceItems: [
+          {
+            label: "Highest offer",
+            value: "450",
+          },
+          {
+            label: "Listing price",
+            value: "373",
+          },
+        ],
       },
       {
         imgSrc:
-          "https://res.cloudinary.com/stargaze/image/upload/w_700/yisqceq5imrkgrzml02b.jpg",
+          "https://ipfs-gw.stargaze-apis.com/ipfs/bafybeicf6q3az6bk4fyilhgk7ytgkctxjb3jsm4542cxtb6r4xsb35zoni/images/444.png",
         name: "Bad Kid #9506",
-        highestOffer: "450",
-        listPrice: "373",
+        priceItems: [
+          {
+            label: "Highest offer",
+            value: "450",
+          },
+          {
+            label: "Listing price",
+            value: "373",
+          },
+        ],
       },
       {
         imgSrc:
-          "https://res.cloudinary.com/stargaze/image/upload/w_700/benc6jvttlv9nbemyxch.jpg",
+          "https://ipfs-gw.stargaze-apis.com/ipfs/bafybeicf6q3az6bk4fyilhgk7ytgkctxjb3jsm4542cxtb6r4xsb35zoni/images/668.png",
         name: "Bad Kid #9508",
-        highestOffer: "450",
-        listPrice: "373",
+        priceItems: [
+          {
+            label: "Highest offer",
+            value: "450",
+          },
+          {
+            label: "Listing price",
+            value: "373",
+          },
+        ],
       },
       {
         imgSrc:
           "https://res.cloudinary.com/stargaze/image/upload/w_700/ndkbjpwtgys09w1xxwny.jpg",
         name: "Bad Kid #9509",
-        highestOffer: "450",
-        listPrice: "373",
+        priceItems: [
+          {
+            label: "Highest offer",
+            value: "450",
+          },
+          {
+            label: "Listing price",
+            value: "373",
+          },
+        ],
       },
     ],
   },

diff --git a/src/ui/nft-profile-card-list/nft-profile-card-list.lite.tsx b/src/ui/nft-profile-card-list/nft-profile-card-list.lite.tsx
@@ -28,6 +28,7 @@ export default function NftProfileCardList(props: NftProfileCardListProps) {
               name={item?.name}
               imgSrc={item?.imgSrc}
               priceItems={item.priceItems}
+              onClick={(event) => item.onClick(event)}
               thumbnailBehavior={props.thumbnailBehavior}
             />
           </Box>

diff --git a/src/ui/nft-profile-card/nft-profile-card.lite.tsx b/src/ui/nft-profile-card/nft-profile-card.lite.tsx
@@ -22,7 +22,10 @@ export default function NftProfileCard(props: NftProfileCardProps) {
     <Box
       className={clsx(props.className)}
       cursor={typeof props.onClick === "function" ? "pointer" : "default"}
-      attributes={{ ...props.attributes, onClick: () => props?.onClick?.() }}
+      attributes={{
+        ...props.attributes,
+        onClick: (event) => props.onClick?.(event),
+      }}
     >
       <Stack direction="vertical" space="$4">
         <Show when={props.thumbnailBehavior === "full"}>