feat(listing): update listing api & different relate content

.vscode/settings.json

@@ -0,0 +1,14 @@
+{
+  "workbench.colorCustomizations": {
+    "sash.hoverBorder": "#ae91f6",
+    "statusBar.background": "#8c62f2",
+    "statusBar.foreground": "#e7e7e7",
+    "statusBarItem.hoverBackground": "#ae91f6",
+    "statusBarItem.remoteBackground": "#8c62f2",
+    "statusBarItem.remoteForeground": "#e7e7e7"
+  },
+  "peacock.color": "#8c62f2",
+  "peacock.affectActivityBar": false,
+  "peacock.affectStatusBar": true,
+  "peacock.affectTitleBar": false,
+}

apps/arkmarket/app/collection/(collection)/[address]/components/collection-items-grid-item.tsx

@@ -7,6 +7,7 @@ import { env } from "@/env.mjs";
 import { CollectionItem } from "@/types";
 
 import { removeLeadingZeros } from "@/lib/utils";
+import { convertWeiPriceToEth } from "@/lib/utils/convertPrice";
 import {
   Card,
   CardContent,
@@ -19,14 +20,13 @@ import Image from "@/components/ui/image";
 interface CollectionItemsGridItemProps {
   item: CollectionItem;
   address: string;
-  name: string;
 }
 
 const CollectionItemsGridItem: React.FC<CollectionItemsGridItemProps> = ({
   item,
   address,
-  name
 }) => {
+  const price = convertWeiPriceToEth(item.listing_price || "0");
   return (
     <Link href={`/collection/${address}/${item.token_id}`}>
       <Card className="rounded hover:border-foreground">
@@ -73,10 +73,13 @@ const CollectionItemsGridItem: React.FC<CollectionItemsGridItemProps> = ({
             </>
           )}
         </CardContent>
-        <CardFooter className="px-2 pb-2 pt-2">
-          <span className="text-xs font-semibold">{`${name} #${removeLeadingZeros(
-            item.token_id
-          )}`}</span>
+        <CardFooter className="px-2 pb-2 pt-2 flex flex-col items-start">
+          <span className="text-xs font-semibold">{item?.normalized_metadata?.name}</span>
+          {item.listing_price !== "" ? (
+            <span className="float-right text-xs text-muted-foreground">
+              {price} ETH
+            </span>
+          ) :(<span className="float-right text-xs text-muted-foreground">{" - "}</span>)}
         </CardFooter>
       </Card>
     </Link>

apps/arkmarket/app/collection/(collection)/[address]/components/collection-items-grid.tsx

@@ -5,20 +5,18 @@ import { CollectionItem } from "@/types";
 import CollectionItemsGridItem from "./collection-items-grid-item";
 
 interface CollectionItemsGridProps {
-  name: string;
   items: CollectionItem[];
   address: string;
 }
 
 const CollectionItemsGrid: React.FC<CollectionItemsGridProps> = ({
-  name,
   items,
   address
 }) => {
   return (
     <div className="grid grid-cols-1 gap-2 md:grid-cols-5 lg:grid-cols-7 ">
       {items.map((item: any) => (
-        <CollectionItemsGridItem key={item.token_id} name={name} item={item} address={address} />
+        <CollectionItemsGridItem key={item.token_id} item={item} address={address} />
       ))}
     </div>
   );

apps/arkmarket/app/collection/(collection)/[address]/components/collection-items-list-header.tsx

@@ -16,7 +16,7 @@ const CollectionListHeader = () => {
         <Checkbox />
       </div>
       <div className="align flex w-64 flex-auto items-center ">Item</div>
-      <div className="align flex w-24 flex-auto items-center justify-end">
+      <div className="align flex w-28 flex-auto items-center justify-end">
         <span>Price</span>
         {getIsSorted === "desc" ? (
           <ArrowDownIcon className="ml-2 h-4 w-4" />

apps/arkmarket/app/collection/(collection)/[address]/components/collection-items-list-row.tsx

@@ -7,21 +7,21 @@ import { env } from "@/env.mjs";
 import { CollectionItem } from "@/types";
 
 import { removeLeadingZeros } from "@/lib/utils";
+import { convertWeiPriceToEth } from "@/lib/utils/convertPrice";
 import { Checkbox } from "@/components/ui/checkbox";
 import Image from "@/components/ui/image";
 import { Separator } from "@/components/ui/separator";
 
 interface CollectionRowProps {
   item: CollectionItem;
   address: string;
-  name: string;
 }
 
 const CollectionRow: React.FC<CollectionRowProps> = ({
   item,
   address,
-  name
 }) => {
+  const price = convertWeiPriceToEth(item.listing_price || "0");
   return (
     <Link href={`/collection/${address}/${item.token_id}`}>
       <div className="flex h-12 w-full text-sm hover:bg-accent">
@@ -51,10 +51,18 @@ const CollectionRow: React.FC<CollectionRowProps> = ({
               alt={item.token_id}
             />
           )}
-          <span>{`${name} ${removeLeadingZeros(item.token_id)}`}</span>
+          <span>{item?.normalized_metadata?.name}</span>
         </div>
-        <div className="align flex w-24 flex-auto items-center justify-end">
-          <span>0.34</span>
+        <div className="align flex w-28 flex-auto items-center justify-end">
+          {item.listing_price !== "" ? (
+            <span className="float-right">
+              {price} ETH
+            </span>
+          ) : (
+            <span className="float-right">
+              {" - "}
+            </span>
+          )}
         </div>
         <div className="align flex w-24 flex-auto items-center justify-end">
           <span>0.3</span>

apps/arkmarket/app/collection/(collection)/[address]/components/collection-items-list.tsx

@@ -21,13 +21,11 @@ interface item {
 interface CollectionItemsListProps {
   items: item[];
   address: string;
-  name: string;
 }
 
 const CollectionsList: React.FC<CollectionItemsListProps> = ({
   items,
   address,
-  name
 }) => {
   return (
     <div className="hidden h-full flex-1 flex-col space-y-4 md:flex">
@@ -38,7 +36,6 @@ const CollectionsList: React.FC<CollectionItemsListProps> = ({
             key={item.token_id}
             address={address}
             item={item}
-            name={name}
           />
         ))}
       </div>

apps/arkmarket/app/collection/(collection)/[address]/components/collection-items.tsx

@@ -6,9 +6,9 @@ import Collection from "./collection";
 
 interface CollectionItemsProps {
   address: string;
-  name: string;
 }
 
+//?status=buy_now
 const fetchNfts = async (address: string) => {
   const res = await fetch(
     `${env.NEXT_PUBLIC_ARK_API_DOMAIN}/v1/nfts/${address}`,
@@ -29,15 +29,13 @@ const fetchNfts = async (address: string) => {
 
 const CollectionItems: React.FC<CollectionItemsProps> = async ({
   address,
-  name
 }) => {
   const collectionItems = await fetchNfts(address);
 
   return (
     <Collection
       collectionItems={collectionItems.result}
       address={address}
-      name={name}
     />
   );
 };

apps/arkmarket/app/collection/(collection)/[address]/components/collection.tsx

@@ -9,13 +9,11 @@ import CollectionItemsList from "./collection-items-list";
 interface CollectionProps {
   collectionItems: any[];
   address: string;
-  name: string;
 }
 
 const Collection: React.FC<CollectionProps> = ({
   collectionItems,
   address,
-  name
 }) => {
   const [view, setView] = React.useState<"grid" | "list">("grid");
   return (
@@ -27,13 +25,11 @@ const Collection: React.FC<CollectionProps> = ({
       />
       {view === "grid" ? (
         <CollectionItemsGrid
-          name={name}
           address={address}
           items={collectionItems}
         />
       ) : (
         <CollectionItemsList
-          name={name}
           address={address}
           items={collectionItems}
         />

apps/arkmarket/app/collection/(collection)/[address]/layout.tsx

@@ -1,10 +1,14 @@
-import { PropsWithChildren } from "react";
+import * as React from "react";
 
 import { env } from "@/env.mjs";
 import { Collection } from "@/types";
 
 import CollectionHeader from "./components/collection-header";
 
+interface PageProps {
+  params: { address: string };
+}
+
 const getCollection = async (address: string) => {
   const res = await fetch(
     `${env.NEXT_PUBLIC_ARK_API_DOMAIN}/v1/collections/${address}`,
@@ -19,14 +23,12 @@ const getCollection = async (address: string) => {
   return res.json();
 };
 
-interface ProfileLayoutProps {
+interface CollectionLayoutProps {
+  children: React.ReactNode;
   params: { address: string };
 }
 
-const ProfileLayout: React.FC<PropsWithChildren<ProfileLayoutProps>> = async ({
-  params,
-  children
-}) => {
+const CollectionLayout: React.FC<CollectionLayoutProps> = async ({ children, params }) => {
   const collection = (await getCollection(params.address)) as Collection;
 
   return (
@@ -37,4 +39,4 @@ const ProfileLayout: React.FC<PropsWithChildren<ProfileLayoutProps>> = async ({
   );
 };
 
-export default ProfileLayout;
+export default CollectionLayout;

apps/arkmarket/app/collection/(collection)/[address]/page.tsx

@@ -1,33 +1,13 @@
 import * as React from "react";
 
-import { env } from "@/env.mjs";
-import { Collection } from "@/types";
-
-import CollectionHeader from "./components/collection-header";
 import CollectionItems from "./components/collection-items";
 
 interface PageProps {
   params: { address: string };
 }
 
-const getCollection = async (address: string) => {
-  const res = await fetch(
-    `${env.NEXT_PUBLIC_ARK_API_DOMAIN}/v1/collections/${address}`,
-    {
-      headers: {
-        "X-API-KEY": "yW0akON1f55mOFwBPXPme4AFfLktbRiQ2GNdT1Mc",
-        "Content-Type": "application/json"
-      },
-      next: { revalidate: 30 }
-    }
-  );
-  return res.json();
-};
-
 const Page: React.FC<PageProps> = async ({ params }) => {
-  const collection = (await getCollection(params.address)) as Collection;
-
-  return <CollectionItems address={params.address} name={collection.name} />;
+  return <CollectionItems address={params.address} />;
 };
 
 export default Page;

apps/arkmarket/app/collection/(token)/[address]/[token_id]/components/header.tsx

@@ -1,4 +1,10 @@
+"use client";
+
 import React from "react";
+import Link from "next/link";
+
+import { useAccount } from "@starknet-react/core";
+import { validateAndParseAddress } from "starknet";
 
 import { Badge } from "@/components/ui/badge";
 
@@ -18,6 +24,14 @@ interface TokenSidebarProps {
 }
 
 const Header: React.FC<TokenSidebarProps> = ({ token }) => {
+  const { address } = useAccount();
+  const [walletAddress, setWalletAddress] = React.useState<string>("");
+  React.useEffect(() => {
+    if (address !== undefined) {
+      setWalletAddress(validateAndParseAddress(address));
+    }
+  }, [address]);
+
   return (
     <>
       <div className="flex flex-col space-y-2">
@@ -35,7 +49,11 @@ const Header: React.FC<TokenSidebarProps> = ({ token }) => {
         </div>
         <div className="flex w-32 flex-col">
           <span className="text-xs text-muted-foreground">Owner</span>
-          <span className="font-semibold truncate">{token.owner}</span>
+          <span className="truncate font-semibold">
+            <Link href={`/profile/${token.owner}`}>
+              {token.owner === walletAddress ? "You" : token.owner}
+            </Link>
+          </span>
         </div>
         <div className="flex w-32 flex-col">
           <span className="text-xs text-muted-foreground">Held for</span>

apps/arkmarket/app/collection/(token)/[address]/[token_id]/components/token-actions.tsx

@@ -1,53 +1,38 @@
 "use client";
 
-import React, { useEffect } from "react";
+import React from "react";
 
 import { useAccount } from "@starknet-react/core";
 import { validateAndParseAddress } from "starknet";
 
-import { Skeleton } from "@/components/ui/skeleton";
-
 import TokenOwnerActions from "./token-owner-actions";
 import TokenPublicActions from "./token-public-actions";
 
 interface TokenActionsProps {
-  tokenId: string;
+  token: any;
   contractAddress: string;
-  tokenOwnerAddress: string;
 }
 
 const TokenActions: React.FC<TokenActionsProps> = ({
-  tokenId,
-  contractAddress,
-  tokenOwnerAddress
+  token,
+  contractAddress
 }) => {
+  console.log(token);
   const { address } = useAccount();
   const [walletAddress, setWalletAddress] = React.useState<string>("");
-  useEffect(() => {
+  React.useEffect(() => {
     if (address !== undefined) {
       setWalletAddress(validateAndParseAddress(address));
     }
   }, [address]);
-
-  if (!address) {
-    return (
-      <div className="flex items-center space-x-4">
-        <Skeleton className="h-24 w-full rounded-lg" />
-      </div>
-    );
-  }
-
+
   return (
     <div>
-      {tokenOwnerAddress === walletAddress && (
-        <TokenOwnerActions
-          tokenId={tokenId}
-          tokenOwnerAddress={"contractAddress"}
-          contractAddress={contractAddress}
-        />
+      {token.owner === walletAddress && (
+        <TokenOwnerActions token={token} contractAddress={contractAddress} />
       )}
-      {tokenOwnerAddress !== walletAddress && walletAddress !== undefined && (
-        <TokenPublicActions />
+      {token.owner !== walletAddress && walletAddress !== undefined && (
+        <TokenPublicActions token={token} />
       )}
     </div>
   );