fix: seasonpass UX improvements

BibliothecaDAO · Dec 5, 2024 · 6a0ce6f · 6a0ce6f
1 parent 44cc18f
commit 6a0ce6f
Show file tree

Hide file tree

Showing 7 changed files with 388 additions and 20 deletions.
diff --git a/apps/arkmarket/src/app/collection/[collectionAddress]/components/collection-header.tsx b/apps/arkmarket/src/app/collection/[collectionAddress]/components/collection-header.tsx
@@ -20,8 +20,6 @@ import CopyButton from "~/components/copy-button";
 import ExternalLink from "~/components/external-link";
 import CollectionHeaderStats from "./collection-header-stats";
 import { CollectionDescription, homepageConfig } from "~/config/homepage";
-import { useQuery } from "@tanstack/react-query";
-import getCollection from "~/lib/getCollection";
 
 import useCollection from "~/hooks/useCollection";
 

diff --git a/...ket/src/app/collection/[collectionAddress]/components/collection-items-data-list-view.tsx b/...ket/src/app/collection/[collectionAddress]/components/collection-items-data-list-view.tsx
@@ -57,23 +57,26 @@ export default function CollectionItemsDataListView({
   return (
     <Table ref={tableRef} className="w-full min-w-[1024px] table-auto">
       <TableHeader className="sticky top-0 h-10 bg-green-500/20">
-        <TableRow className="flex">
+        <TableRow className={cn(
+          "grid h-full w-full items-center",
+          gridTemplateColumnValue,
+        )}>
           <TableHead className="sticky left-0 top-0 flex min-w-[240px] flex-grow items-center bg-background pl-5">
             Item
           </TableHead>
-          <TableHead className="flex w-[25%] items-center bg-background">
+          <TableHead className="flex items-center bg-background">
             Current price
           </TableHead>
-          <TableHead className="flex w-[20%] items-center bg-background">
+          <TableHead className="flex items-center bg-background">
             Last sold
           </TableHead>
-          <TableHead className="flex w-[15%] items-center bg-background">
+          <TableHead className="flex items-center bg-background">
             Floor difference
           </TableHead>
-          <TableHead className="flex w-[10%] items-center bg-background">
+          <TableHead className="flex items-center bg-background">
             Owner
           </TableHead>
-          <TableHead className="flex w-[10%] items-center bg-background">
+          <TableHead className="flex items-center bg-background">
             Time listed
           </TableHead>
         </TableRow>

diff --git a/apps/arkmarket/src/app/collection/[collectionAddress]/components/collection-token-image.tsx b/apps/arkmarket/src/app/collection/[collectionAddress]/components/collection-token-image.tsx
@@ -1,7 +1,8 @@
 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 { Resources } from "~/hooks/useSeasonPass";
+import { useSeasonPass } from "~/hooks/useSeasonPass";
 import type { CollectionToken } from "~/types";
 
 interface CollectionTokenImageProps {
@@ -13,6 +14,7 @@ interface CollectionTokenImageProps {
 
 export function CollectionTokenImage({ token, height, width }: PropsWithClassName<CollectionTokenImageProps>) {
   const { attributes, isBeast, beastTypeIcon, formatBeastName } = useBeasts(token);
+  const { isSeasonPass, realmsResources } = useSeasonPass(token);
 
   if (isBeast(token.collection_address)) {
     const TypeIcon = beastTypeIcon(attributes.type.toLowerCase() as keyof typeof beastTypeIcon);
@@ -40,6 +42,24 @@ export function CollectionTokenImage({ token, height, width }: PropsWithClassNam
       </div>
     )
   }
+  if (isSeasonPass(token.collection_address)) {
+    return (
+      <div className="aspect-square w-full object-contain p-3 pt-4">
+        <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}
+        />
+        <div className="flex flex-row gap-2 mt-4">
+          {realmsResources.map((r, idx) => <RealmsResourceItem key={idx} resource={r} />)}
+        </div>
+      </div>
+    )
+  }
 
   return (
     <Media
@@ -53,3 +73,8 @@ export function CollectionTokenImage({ token, height, width }: PropsWithClassNam
     />
   );
 }
+function RealmsResourceItem({ resource }: { resource: Resources }) {
+  return (
+    <Media src={resource.img} height={20} width={20} alt={""} />
+  )
+}
diff --git a/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-image.tsx b/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-image.tsx
@@ -1,6 +1,8 @@
 import type { PropsWithClassName } from "@ark-market/ui";
 import Media from "~/components/media";
 import { useBeasts } from "~/hooks/useBeasts";
+import type { Resources } from "~/hooks/useSeasonPass";
+import { useSeasonPass } from "~/hooks/useSeasonPass";
 import type { Token } from "~/types";
 
 interface TokenSummaryProps {
@@ -9,6 +11,7 @@ interface TokenSummaryProps {
 
 export function TokenImage({ token }: PropsWithClassName<TokenSummaryProps>) {
   const { attributes, isBeast, beastTypeIcon, formatBeastName } = useBeasts(token);
+  const { isSeasonPass, realmsResources } = useSeasonPass(token);
 
   if (isBeast(token.collection_address)) {
     const TypeIcon = beastTypeIcon(attributes.type.toLowerCase() as keyof typeof beastTypeIcon);
@@ -37,6 +40,23 @@ export function TokenImage({ token }: PropsWithClassName<TokenSummaryProps>) {
     )
   }
 
+  if (isSeasonPass(token.collection_address)) {
+    return (
+      <div className="aspect-square w-full object-contain p-3 pt-4">
+        <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"
+        />
+        <div className="flex flex-row gap-2 mt-4">
+          {realmsResources.map((r, idx) => <RealmsResourceItem key={idx} resource={r} />)}
+        </div>
+      </div>
+    )
+  }
+
   return (
     <Media
       src={token.metadata?.animation_url ?? token.metadata?.image}
@@ -51,3 +71,12 @@ export function TokenImage({ token }: PropsWithClassName<TokenSummaryProps>) {
     />
   );
 }
+
+function RealmsResourceItem({ resource }: { resource: Resources }) {
+  return (
+    <div className="flex items-center">
+      <Media src={resource.img} height={25} width={25} alt={resource.description} />
+      <span className="pl-2">{resource.trait}</span>
+    </div>
+  )
+}
diff --git a/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/page.tsx b/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/page.tsx
@@ -2,7 +2,6 @@
 
 import { notFound } from "next/navigation";
 
-import { useTokenLoading } from "~/hooks/useTokenLoading";
 import { Suspense } from "react";
 import { TokenPageDetails, TokenPageDetailsSkeleton } from "./components/token-page-details";
 import { CollectionDescription } from "~/config/homepage";
@@ -30,12 +29,12 @@ export default async function TokenPage({
           content={`https://ark-market-unframed.vercel.app/api/og/token?collection_address=${contractAddress}&token_id=${tokenId}`}
         />
       </head>
-        <Suspense fallback={<TokenPageDetailsSkeleton />}>
-          <TokenPageDetails
-            contractAddress={contractAddress}
-            tokenId={tokenId}
-          />
-        </Suspense>
+      <Suspense fallback={<TokenPageDetailsSkeleton />}>
+        <TokenPageDetails
+          contractAddress={contractAddress}
+          tokenId={tokenId}
+        />
+      </Suspense>
     </>
   );
 }
diff --git a/apps/arkmarket/src/components/data-footer.tsx b/apps/arkmarket/src/components/data-footer.tsx
@@ -1,4 +1,4 @@
-/* eslint-disable @typescript-eslint/no-unnecessary-condition */
+
 import type { PropsWithClassName } from "@ark-market/ui";
 import { cn } from "@ark-market/ui";
 import { Discord, Github, XIcon } from "@ark-market/ui/icons";
@@ -29,9 +29,6 @@ export default function DataFooter({ className }: PropsWithClassName) {
         <ExternalLink href={siteConfig.links.github}>
           <Github className="size-4" />
         </ExternalLink>
-        <ExternalLink href={siteConfig.links.github}>
-          <Github className="size-4" />
-        </ExternalLink>
         <Separator orientation="vertical" />
       </div>
       <Prices />