fix individual token display

BibliothecaDAO · Oct 5, 2024 · 0026d2f · 0026d2f
1 parent 45d48cb
commit 0026d2f
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 32 deletions.
diff --git a/apps/nextjs/src/app/(app)/collection/[id]/[tokenId]/L2Token.tsx b/apps/nextjs/src/app/(app)/collection/[id]/[tokenId]/L2Token.tsx
@@ -11,9 +11,8 @@ import {
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
-  Button,
-} from "@realms-world/ui";
-
+} from "@realms-world/ui/components/ui/accordion";
+import { Button } from "@realms-world/ui/components/ui/button";
 import { BuyModal } from "../../marketplace/buy/BuyModal";
 import TokenOwnerActions from "../../marketplace/TokenOwnerActions";
 import { L2ActivityCard } from "../(list)/activity/L2ActivityCard";
@@ -40,34 +39,49 @@ export const L2Token = ({
   let { data: erc721Token } = useQuery({
     queryKey: ["erc721Token", contractAddress, tokenId],
     queryFn: async () => {
-      return await getToken({ client: arkClient, contractAddress, tokenId: parseInt(tokenId) })
+      return await getToken({
+        client: arkClient,
+        contractAddress,
+        tokenId: parseInt(tokenId),
+      });
     },
     refetchInterval: 10000,
     initialData: { data: token },
-  })
+  });
   let { data: listing } = useQuery({
     queryKey: ["erc721Listings", contractAddress, tokenId],
     queryFn: async () => {
-      return await getTokenMarketdata({ client: arkClient, contractAddress, tokenId: parseInt(tokenId) })
+      return await getTokenMarketdata({
+        client: arkClient,
+        contractAddress,
+        tokenId: parseInt(tokenId),
+      });
     },
     refetchInterval: 5000,
   });
   const { data: activities } = useQuery({
     queryKey: ["erc721Activities", contractAddress, tokenId],
     queryFn: async () => {
-      return await getTokenActivity({ client: arkClient, contractAddress, tokenId: parseInt(tokenId) })
+      return await getTokenActivity({
+        client: arkClient,
+        contractAddress,
+        tokenId: parseInt(tokenId),
+      });
     },
     refetchInterval: 5000,
-
   });
   const { address } = useAccount();
   const expiryDiff = useTimeDiff(listing?.data?.listing.end_date ?? 0);
 
-  const price = useTokenPrice(listing?.data?.listing?.start_amount, listing?.data?.listing?.currency_address);
+  const price = useTokenPrice(
+    listing?.data?.listing?.start_amount,
+    listing?.data?.listing?.currency_address,
+  );
 
-  if (!erc721Token?.data || !listing?.data) return <div>Token Information Loading</div>;
-  erc721Token = erc721Token.data
-  listing = listing.data
+  if (!erc721Token?.data || !listing?.data)
+    return <div>Token Information Loading</div>;
+  erc721Token = erc721Token.data;
+  listing = listing.data;
 
   return (
     <>
@@ -121,12 +135,10 @@ export const L2Token = ({
             <AccordionTrigger className="text-lg">Listings</AccordionTrigger>
             <AccordionContent className="-mt-4 w-full flex-wrap gap-x-2">
               {listing.is_listed ? (
-                <ListingCard
-                  listing={listing}
-                  token={token}
-                />
-              )
-                : "No Active Listings"}
+                <ListingCard listing={listing} token={token} />
+              ) : (
+                "No Active Listings"
+              )}
             </AccordionContent>
           </div>
         </AccordionItem>
@@ -136,13 +148,15 @@ export const L2Token = ({
               Token Activity
             </AccordionTrigger>
             <AccordionContent className="-mt-4 w-full flex-wrap gap-x-2">
-              {activities?.data.map((activity: TokenActivity, index: number) => {
-                return <L2ActivityCard key={index} activity={activity} />;
-              })}
+              {activities?.data.map(
+                (activity: TokenActivity, index: number) => {
+                  return <L2ActivityCard key={index} activity={activity} />;
+                },
+              )}
             </AccordionContent>
           </div>
         </AccordionItem>
       </Accordion>
-    </>*/}
-
+    </>
+  );
 };
diff --git a/apps/nextjs/src/app/(app)/collection/[id]/[tokenId]/TokenInformation.tsx b/apps/nextjs/src/app/(app)/collection/[id]/[tokenId]/TokenInformation.tsx
@@ -11,6 +11,7 @@ import { Button } from "@realms-world/ui/components/ui/button";
 
 import { ContractImage } from "./ContractImage";
 import { TokenAttribute } from "./TokenAttribute";
+import Media from "@/app/_components/Media";
 
 export const TokenInformation = ({
   children,
@@ -21,6 +22,7 @@ export const TokenInformation = ({
   owner,
   image,
   attributes,
+  imageMediaKey,
 }: {
   collection?: NonNullable<
     paths["/collections/v5"]["get"]["responses"]["200"]["schema"]["collections"]
@@ -30,17 +32,18 @@ export const TokenInformation = ({
   name?: string | null;
   owner?: string | null;
   image?: string | null;
+  imageMediaKey?: string;
   attributes?:
-  | Attributes[]
-  | NonNullable<RouterOutputs["erc721Tokens"]["byId"]>["attributes"];
+    | Attributes[]
+    | NonNullable<RouterOutputs["erc721Tokens"]["byId"]>["attributes"];
   tokenId: number;
 }) => {
-
   return (
     <>
       <div className="mt-8 flex w-full flex-none flex-col sm:mt-16 md:w-1/3">
         {image ? (
-          <Image
+          <Media
+            mediaKey={imageMediaKey}
             src={image}
             alt={name ?? "token"}
             width={1000}
@@ -90,13 +93,17 @@ export const TokenInformation = ({
           ""
         )}
       </div>
-      <div className="my-1 w-full px-4 md:w-2/3 md:px-4 mt-16">
+      <div className="my-1 mt-16 w-full px-4 md:w-2/3 md:px-4">
         <div className="mb-8 flex justify-between">
           <Button size={"sm"} variant={"default"} asChild>
             <Link href={`/collection/${collectionId}`}>
               <ArrowLeft className="mr-2 w-4 self-center" />{" "}
               <span className="self-center">
-                {CollectionDetails[collectionId as keyof typeof CollectionDetails].displayName}
+                {
+                  CollectionDetails[
+                    collectionId as keyof typeof CollectionDetails
+                  ].displayName
+                }
               </span>
             </Link>
           </Button>

diff --git a/apps/nextjs/src/app/(app)/collection/[id]/[tokenId]/page.tsx b/apps/nextjs/src/app/(app)/collection/[id]/[tokenId]/page.tsx
@@ -77,7 +77,11 @@ const L2TokenData = async ({
   collectionId: string;
 }) => {
   const client = marketPlaceClientBuilder(fetch);
-  const { data: erc721Token } = await getToken({ client, contractAddress, tokenId: parseInt(tokenId) });
+  const { data: erc721Token } = await getToken({
+    client,
+    contractAddress,
+    tokenId: parseInt(tokenId),
+  });
 
   return (
     <>
@@ -90,6 +94,7 @@ const L2TokenData = async ({
           attributes={erc721Token.attributes}
           //collection={erc721Token}
           collectionId={collectionId}
+          imageMediaKey={erc721Token.metadata?.image_key}
         >
           <L2Token
             contractAddress={contractAddress}

diff --git a/apps/nextjs/src/app/_components/PageLayout.tsx b/apps/nextjs/src/app/_components/PageLayout.tsx
@@ -28,8 +28,8 @@ export const PageLayout = ({ title, children, size }: PageLayoutProps) => {
       <div className={cn("", baseLayerWrapperVariants({ size }))}>
         {title && (
           <>
-            <h1 className="mb-8 text-4xl font-bold">{title}</h1>
-            <hr className="my-8 border" />
+            <h1 className="p-6 text-4xl font-bold">{title}</h1>
+            <hr className="mb-8 border" />
           </>
         )}
         {children}