feat: beasts specific display nft attributes

apps/arkmarket/src/app/collection/[collectionAddress]/components/collection-items-data-grid-view.tsx

@@ -1,4 +1,4 @@
-import { forwardRef } from "react";
+import { forwardRef } from "react"
 import Link from "next/link";
 import { LoaderCircle } from "lucide-react";
 import { VirtuosoGrid } from "react-virtuoso";
@@ -13,8 +13,8 @@ import {
 
 import type { ViewType } from "../../../../components/view-type-toggle-group";
 import type { CollectionToken } from "~/types";
-import Media from "~/components/media";
 import CollectionItemsBuyNow from "./collection-items-buy-now";
+import { CollectionTokenImage } from "./collection-token-image";
 
 const LargeGridContainer = forwardRef<
   HTMLDivElement,
@@ -78,13 +78,9 @@ export default function CollectionItemsDataGridView({
                 key={`${token.collection_address}-${token.token_id}`}
                 prefetch={false}
               >
-                <NftCardMedia>
-                  <Media
-                    src={token.metadata?.image}
-                    mediaKey={token.metadata?.image_key}
-                    thumbnailKey={token.metadata?.image_key_540_540}
-                    alt={token.metadata?.name ?? "Empty"}
-                    className="aspect-square w-full object-contain transition-transform group-hover:scale-110"
+                <NftCardMedia className="aspect-auto">
+                  <CollectionTokenImage
+                    token={token}
                     height={viewType === "large-grid" ? 540 : 340}
                     width={viewType === "large-grid" ? 540 : 340}
                   />
@@ -110,7 +106,7 @@ export default function CollectionItemsDataGridView({
                           )}
                         >
                           {formatUnits(token.price, 18)} LORDS
-                        </p>
+                        </div>
                       ) : (
                         <div
                           className={cn(

apps/arkmarket/src/app/collection/[collectionAddress]/components/collection-items-data-list-view.tsx

@@ -18,6 +18,7 @@ import {
 import type { CollectionToken } from "~/types";
 import Media from "~/components/media";
 import { PriceTag } from "@ark-market/ui/price-tag";
+import Link from "next/link";
 
 const gridTemplateColumnValue =
   "grid-cols-[minmax(10rem,2fr)_repeat(5,minmax(7.25rem,1fr))]";

apps/arkmarket/src/app/collection/[collectionAddress]/components/collection-items-data.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 import { useSuspenseInfiniteQuery } from "@tanstack/react-query";
 
 import type { ViewType } from "../../../../components/view-type-toggle-group";
@@ -14,9 +14,6 @@ import useInfiniteWindowScroll from "~/hooks/useInfiniteWindowScroll";
 import { getCollectionTokens } from "~/lib/getCollectionTokens";
 import CollectionItemsDataGridView from "./collection-items-data-grid-view";
 import CollectionItemsDataListView from "./collection-items-data-list-view";
-import getTokenMarketData from "~/lib/getTokenMarketData";
-import { getOrder } from "@ark-project/core";
-import { useConfig } from "@ark-project/react";
 
 interface CollectionItemsDataProps {
   collectionAddress: string;
@@ -35,7 +32,6 @@ export default function CollectionItemsData({
   filters,
   buyNow,
 }: CollectionItemsDataProps) {
-  const config = useConfig();
   const {
     data: infiniteData,
     fetchNextPage,
@@ -80,10 +76,6 @@ export default function CollectionItemsData({
   // To fix, we need to have the field `currency_address` supported for listing
   const collectionTokensFiltered = useMemo(() => collectionTokens.filter((token) => !(token.token_id === "861" && token.collection_address === "0x00539f522b29ae9251dbf7443c7a950cf260372e69efab3710a11bf17a9599f1"), [collectionTokens]));
 
-  if (isLoading) {
-    return null;
-  }
-
   return (
     <>
       {viewType === "list" ? (

apps/arkmarket/src/app/collection/[collectionAddress]/components/collection-token-image.tsx

@@ -0,0 +1,55 @@
+import type { PropsWithClassName } from "@ark-market/ui";
+import { as } from "vitest/dist/chunks/reporters.DAfKSDh5.js";
+import Media from "~/components/media";
+import { useBeasts } from "~/hooks/useBeasts";
+import type { CollectionToken } from "~/types";
+
+interface CollectionTokenImageProps {
+  token: CollectionToken;
+  height?: number;
+  width?: number;
+}
+
+
+export function CollectionTokenImage({ token, height, width }: PropsWithClassName<CollectionTokenImageProps>) {
+  const { attributes, isBeast, beastTypeIcon, formatBeastName } = useBeasts(token);
+
+  if (isBeast(token.collection_address)) {
+    const TypeIcon = beastTypeIcon(attributes.type.toLowerCase() as keyof typeof beastTypeIcon);
+    return (
+      <div className="aspect-square w-full rounded-lg object-contain border border-foreground p-3 pt-4">
+        <div className="flex justify-between pb-6">
+          <div className=""><TypeIcon className="fill-foreground" /></div>
+          <div># <strong>{token.token_id}</strong></div>
+          <div className="">{attributes.health} HP</div>
+        </div>
+
+        <Media
+          src={token.metadata?.image}
+          mediaKey={token.metadata?.image_key}
+          alt={
+            token.metadata?.name ?? `${token.collection_name} #${token.token_id}`
+          }
+          className="aspect-square w-full rounded-lg object-contain"
+          priority
+        />
+        <div className="flex flex-col gap-1 items-center justify-center py-6 overflow-hidden">
+          <div className="whitespace-nowrap text-ellipsis overflow-hidden">{formatBeastName(attributes)}</div>
+          <div className="text-sm">Lvl {attributes.level}</div>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <Media
+      src={token.metadata?.image}
+      mediaKey={token.metadata?.image_key}
+      thumbnailKey={token.metadata?.image_key_540_540}
+      alt={token.metadata?.name ?? "Empty"}
+      className="aspect-square w-full object-contain transition-transform group-hover:scale-110"
+      height={height}
+      width={width}
+    />
+  );
+}

apps/arkmarket/src/app/components/explore-collection.tsx

@@ -38,39 +38,7 @@ export default function ExploreCollection() {
           .slice(0, exploreCollectionsToShow)
           .map((collection, index) => {
             return (
-              <Link
-                href={`/collection/${collection.address}`}
-                key={index}
-                className={cn("group", focusableStyles)}
-              >
-                <div>
-                  <div className="aspect-video w-full overflow-hidden rounded-lg">
-                    <Image
-                      src={collection.banner_image}
-                      className="aspect-video rounded border transition-transform group-hover:scale-110"
-                      alt={collection.name}
-                      height={512}
-                      width={932}
-                    />
-                  </div>
-                  <div className="mt-4 flex items-center gap-2">
-                    <Image
-                      className="aspect-square w-16 rounded"
-                      src={collection.image}
-                      alt={collection.name}
-                      height={124}
-                      width={124}
-                      unoptimized={collection.image.endsWith(".gif")}
-                    />
-                    <h4 className="text-xl font-semibold">{collection.name}</h4>
-                    <VerifiedIcon className="text-primary" />
-                  </div>
-                )}
-                {index === 1 && (
-                  <div className="hidden sm:block">
-                    <ExploreCollectionCard />
-                  </div>
-                )}
+              <React.Fragment key={index}>
                 <Link
                   href={`/collection/${collection.address}`}
                   className={cn(

apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/desktop-token-activity.tsx

@@ -2,6 +2,7 @@ import { useAccount } from "@starknet-react/core";
 
 import { timeSince } from "@ark-market/ui";
 import { NoActivity } from "@ark-market/ui/icons";
+import type { TokenSymbol } from "@ark-market/ui/price-tag";
 import { PriceTag } from "@ark-market/ui/price-tag";
 import {
   Table,
@@ -25,6 +26,7 @@ export default function DesktopTokenActivity({
   tokenActivity,
 }: DesktopTokenActivityProps) {
   const { address } = useAccount();
+
   return (
     <>
       <Table>
@@ -39,52 +41,40 @@ export default function DesktopTokenActivity({
           </TableRow>
         </TableHeader>
         <TableBody className="font-numbers text-sm font-medium">
-          {tokenActivity.map((activity, index) => {
-
+          {tokenActivity.map((activity) => {
             return (
-              <TableRow className="group h-[4.6875rem]" key={index}>
-                <TableCell className="pl-5 transition-colors group-hover:text-muted-foreground">
-                  <div className="flex items-center gap-4 whitespace-nowrap">
-                    {activityTypeMetadata[activity.activity_type].icon}
-                    <p>{activityTypeMetadata[activity.activity_type].title}</p>
-                  </div>
-                </TableCell>
+              <TableRow
+                className="group h-[4.6875rem]"
+                key={`activity-${activity.time_stamp}`}
+              >
+                <EventCell activity={activity} />
                 <TableCell>
-                  {activity.price !== null ? (
-                    <PriceTag price={activity.price} token="lords" />
+                  {activity.price ? (
+                    <PriceTag
+                      price={activity.price}
+                      token={activity.currency?.symbol.toLowerCase() as TokenSymbol | undefined}
+                    />
                   ) : (
                     "_"
                   )}
                 </TableCell>
-                <TableCell>
-                  {activity.from ? (
-                    <Link href={`/wallet/${activity.from}`}>
-                      {ownerOrShortAddress({
-                        ownerAddress: activity.from,
-                        address,
-                      })}
-                    </Link>
-                  ) : (
-                    "_"
-                  )}
-                </TableCell>
-                <TableCell>
-                  {activity.to ? (
-                    <Link href={`/wallet/${activity.to}`}>
-                      {ownerOrShortAddress({
-                        ownerAddress: activity.to,
-                        address,
-                      })}
-                    </Link>
-                  ) : (
-                    "_"
-                  )}
-                </TableCell>
-                <TableCell className="text-end">
-                  {timeSince(activity.time_stamp)}
-                </TableCell>
+
+                <ActivityToFromCell
+                  ownerAddress={activity.from ?? ""}
+                  address={address}
+                />
+
+                <ActivityToFromCell
+                  ownerAddress={activity.to ?? ""}
+                  address={address}
+                />
+
+                <TableCell>{timeSince(activity.time_stamp)}</TableCell>
+                <ActivityTransaction
+                  transactionHash={activity.transaction_hash}
+                />
               </TableRow>
-            );
+            )
           })}
         </TableBody>
       </Table>

apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-actions-create-listing.tsx

@@ -13,7 +13,7 @@ import * as z from "zod";
 
 import { cn } from "@ark-market/ui";
 import { Button } from "@ark-market/ui/button";
-import { Dialog, DialogContent, DialogTrigger } from "@ark-market/ui/dialog";
+import { Dialog, DialogContent, DialogTitle, DialogTrigger } from "@ark-market/ui/dialog";
 import {
   Form,
   FormControl,
@@ -44,6 +44,7 @@ import ToastExecutedTransactionContent from "./toast-executed-transaction-conten
 import ToastRejectedTransactionContent from "./toast-rejected-transaction-content";
 import TokenActionsTokenOverview from "./token-actions-token-overview";
 import LordsInput from "~/components/lords-input";
+import { DateTimePicker } from "@ark-market/ui/date-time-picker";
 
 interface TokenActionsCreateListingProps {
   token: Token | WalletToken;
@@ -263,6 +264,10 @@ export function TokenActionsCreateListing({
     auctionStatus === "loading";
 
   const startAmountInUsd = convertInUsd({ token: "lords", amount: parseEther(startAmount) });
+  const isLoading = status === "loading" || auctionStatus === "loading";
+  const isTriggerLoading = status === "success" || auctionStatus === "success";
+  const isTriggerDisabled =
+    isTriggerLoading || tokenMarketData?.buy_in_progress;
 
   return (
     <Dialog open={isOpen} modal={modalEnabled} onOpenChange={setIsOpen}>
@@ -273,7 +278,7 @@ export function TokenActionsCreateListing({
             size={small ? "xl" : "xxl"}
             disabled={isTriggerDisabled}
           >
-            {isTriggerLoading ? (
+            {isLoading ? (
               <LoaderCircle
                 className={cn("animate-spin", small ?? "absolute left-4")}
                 size={small ? 20 : 24}
@@ -457,8 +462,8 @@ export function TokenActionsCreateListing({
                                 durationField.value === "custom"
                                   ? endDateTimeField.value
                                   : moment()
-                                      .add(form.getValues("duration"), "hours")
-                                      .toDate()
+                                    .add(form.getValues("duration"), "hours")
+                                    .toDate()
                               }
                               onChange={(value) => {
                                 endDateTimeField.onChange(value);