From 88e9723d4120698bae748c28fef4e10cfbb35ce1 Mon Sep 17 00:00:00 2001
From: paul launay <launay.p@gmail.com>
Date: Fri, 28 Jun 2024 15:41:32 +0200
Subject: [PATCH 1/5] feat: integrate new token actions flow

---
 .../[token_id]/components/create-listing.tsx  | 262 ++++++++--------
 .../[token_id]/components/create-offer.tsx    |   2 +-
 apps/arkmarket/src/app/layout.tsx             |   2 +-
 .../token-actions-accept-best-offer.tsx       |  82 +++++
 .../components/token-actions-buttons.tsx      |  92 ++++++
 .../token-actions-cancel-listing.tsx          |  55 ++++
 .../token-actions-create-listing.tsx          | 283 ++++++++++++++++++
 .../components/token-actions-empty.tsx        |  35 +++
 .../components/token-actions-header.tsx       |  39 +++
 .../token-actions-listing-badge.tsx           |  26 ++
 .../components/token-actions-make-bid.tsx     | 160 ++++++++++
 .../components/token-actions-make-offer.tsx   | 221 ++++++++++++++
 .../components/token-actions-price.tsx        |  59 ++++
 .../token-actions-token-overview.tsx          |  38 +++
 .../[tokenId]/components/token-actions.tsx    | 135 ++++-----
 .../[tokenId]/components/token-summary.tsx    |   2 +-
 .../components/tokens-actions-buy-now.tsx     | 120 ++++++++
 .../[contractAddress]/[tokenId]/page.tsx      |  24 +-
 apps/arkmarket/src/components/providers.tsx   |   2 +-
 packages/ui/src/form.tsx                      |   6 +-
 packages/ui/src/input.tsx                     |   2 +-
 packages/ui/src/select.tsx                    |   2 +-
 22 files changed, 1447 insertions(+), 202 deletions(-)
 create mode 100644 apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-actions-accept-best-offer.tsx
 create mode 100644 apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-actions-buttons.tsx
 create mode 100644 apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-actions-cancel-listing.tsx
 create mode 100644 apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-actions-create-listing.tsx
 create mode 100644 apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-actions-empty.tsx
 create mode 100644 apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-actions-header.tsx
 create mode 100644 apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-actions-listing-badge.tsx
 create mode 100644 apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-actions-make-bid.tsx
 create mode 100644 apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-actions-make-offer.tsx
 create mode 100644 apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-actions-price.tsx
 create mode 100644 apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-actions-token-overview.tsx
 create mode 100644 apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/tokens-actions-buy-now.tsx

diff --git a/apps/arkmarket/src/app/assets/[contract_address]/[token_id]/components/create-listing.tsx b/apps/arkmarket/src/app/assets/[contract_address]/[token_id]/components/create-listing.tsx
index ddd590ee..a1654c99 100644
--- a/apps/arkmarket/src/app/assets/[contract_address]/[token_id]/components/create-listing.tsx
+++ b/apps/arkmarket/src/app/assets/[contract_address]/[token_id]/components/create-listing.tsx
@@ -1,14 +1,23 @@
 "use client";
 
+import { useState } from "react";
 import { useCreateAuction, useCreateListing } from "@ark-project/react";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useAccount } from "@starknet-react/core";
+import { ShoppingBag } from "lucide-react";
 import moment from "moment";
 import { useForm } from "react-hook-form";
 import { parseEther } from "viem";
 import * as z from "zod";
 
 import { Button } from "@ark-market/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@ark-market/ui/dialog";
 import {
   Form,
   FormControl,
@@ -29,9 +38,10 @@ import {
 
 import type { Token, TokenMarketData } from "~/types";
 import { env } from "~/env";
+import TokenMedia from "./token-media";
 
 interface CreateListingProps {
-  token?: Token;
+  token: Token;
   tokenMarketData?: TokenMarketData;
 }
 
@@ -50,17 +60,10 @@ const formSchema = z.object({
   duration: z.string(),
   type: z.enum([FIXED, AUCTION]),
 });
-// .refine(
-//   (data) =>
-//     data.type === AUCTION ? data.endAmount > data.startAmount : true,
-//   {
-//     message: "Reserve price must be greater than starting price",
-//     path: ["endAmount"]
-//   }
-// );
 
 const CreateListing: React.FC<CreateListingProps> = ({ token }) => {
   const { account } = useAccount();
+  const [isOpen, setIsOpen] = useState(false);
   const { createListing, status } = useCreateListing();
   const { create: createAuction, status: auctionStatus } = useCreateAuction();
 
@@ -75,15 +78,9 @@ const CreateListing: React.FC<CreateListingProps> = ({ token }) => {
   });
 
   async function onSubmit(values: z.infer<typeof formSchema>) {
-    if (account === undefined || !token?.contract_address || !token.token_id) {
-      console.error("Account, token address, or token ID is missing");
-      return;
-    }
-
-    const tokenId = parseInt(token.token_id, 10);
-
-    if (isNaN(tokenId)) {
-      console.error("Invalid tokenId");
+    if (!account) {
+      // TODO: Handle error with toast
+      console.error("Account is missing");
       return;
     }
 
@@ -123,124 +120,147 @@ const CreateListing: React.FC<CreateListingProps> = ({ token }) => {
   }
 
   const isAuction = form.getValues("type") === AUCTION;
-  const duration = form.watch("duration");
-  const expiredAt = moment().add(duration, "hours").format("LLLL");
+  // const duration = form.watch("duration");
+  // const expiredAt = moment().add(duration, "hours").format("LLLL");
   const isLoading = status === "loading" || auctionStatus === "loading";
 
   return (
-    <div className="w-full rounded border p-4">
-      <div className="mb-4 font-semibold">List for sale</div>
-      <Form {...form}>
-        <form
-          onSubmit={form.handleSubmit(onSubmit)}
-          className="flex flex-col space-y-4"
-        >
-          <FormField
-            control={form.control}
-            name="type"
-            render={({ field }) => (
-              <FormItem className="">
-                <FormLabel>Choose a type of sale</FormLabel>
-                <FormControl>
-                  <RadioGroup
-                    onValueChange={field.onChange}
-                    defaultValue={field.value}
-                    className="gap-0 rounded border"
-                  >
-                    <FormItem className="flex items-center justify-center border-b p-4">
-                      <FormLabel className="flex flex-grow flex-col space-y-2 font-normal">
-                        <span className="font-semibold">Fixed price</span>
-                        <span className="">
-                          The item is listed at the price you set.
-                        </span>
-                      </FormLabel>
-                      <FormControl>
-                        <RadioGroupItem value={FIXED} className="h-6 w-6" />
-                      </FormControl>
-                    </FormItem>
-                    <FormItem className="flex items-center justify-center p-4">
-                      <FormLabel className="flex flex-grow flex-col space-y-2 font-normal">
-                        <span className="font-semibold">
-                          Sell to highest bidder
-                        </span>
-                        <span className="">
-                          The item is listed for auction.
-                        </span>
-                      </FormLabel>
-                      <FormControl>
-                        <RadioGroupItem value={AUCTION} className="h-6 w-6" />
-                      </FormControl>
-                    </FormItem>
-                  </RadioGroup>
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-          <FormField
-            control={form.control}
-            name="startAmount"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Starting Price</FormLabel>
-                <FormControl>
-                  <Input placeholder="Amount" {...field} />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-          {isAuction && (
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DialogTrigger
+        asChild
+        className="mx-auto flex max-w-[416px] flex-col items-center gap-4 lg:flex-row lg:gap-8"
+      >
+        <Button className="relative w-full" size="xl">
+          <ShoppingBag size={24} className="absolute left-4" />
+          <span>List for sale</span>
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader className="items-center">
+          <DialogTitle>List for sale</DialogTitle>
+        </DialogHeader>
+        <div className="flex items-center space-x-4">
+          <div className="size-24 overflow-hidden rounded">
+            <TokenMedia token={token} />
+          </div>
+          <div className="">
+            <div className="font-bold">Duo #{token.token_id}</div>
+            <div className="text-muted-foreground">Everai</div>
+          </div>
+          <div className="grow" />
+        </div>
+        <Form {...form}>
+          <form
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="flex flex-col space-y-4"
+          >
             <FormField
               control={form.control}
-              name="endAmount"
+              name="type"
               render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Reserve Price</FormLabel>
+                <FormItem className="">
+                  <FormLabel>Choose a type of sale</FormLabel>
                   <FormControl>
-                    <Input placeholder="Amount" {...field} />
+                    <RadioGroup
+                      onValueChange={field.onChange}
+                      defaultValue={field.value}
+                      className="gap-0 rounded border"
+                    >
+                      <FormItem className="flex items-center justify-center border-b p-4">
+                        <FormLabel className="text-md flex flex-grow flex-col space-y-2 font-normal">
+                          <span className="font-semibold">Fixed price</span>
+                          <span className="">
+                            The item is listed at the price you set.
+                          </span>
+                        </FormLabel>
+                        <FormControl>
+                          <RadioGroupItem value={FIXED} className="h-6 w-6" />
+                        </FormControl>
+                      </FormItem>
+                      <FormItem className="flex items-center justify-center p-4">
+                        <FormLabel className="text-md flex flex-grow flex-col space-y-2 font-normal">
+                          <span className="font-semibold">
+                            Sell to highest bidder
+                          </span>
+                          <span className="">
+                            The item is listed for auction.
+                          </span>
+                        </FormLabel>
+                        <FormControl>
+                          <RadioGroupItem value={AUCTION} className="h-6 w-6" />
+                        </FormControl>
+                      </FormItem>
+                    </RadioGroup>
                   </FormControl>
                   <FormMessage />
                 </FormItem>
               )}
             />
-          )}
-          <FormField
-            control={form.control}
-            name="duration"
-            render={({ field }) => (
-              <FormItem>
-                <div className="flex justify-between">
-                  <FormLabel>Duration</FormLabel>
-                  <div className="text-sm">Expires {expiredAt}</div>
-                </div>
-                <Select
-                  onValueChange={field.onChange}
-                  defaultValue={field.value.toString()}
-                >
+            <FormField
+              control={form.control}
+              name="startAmount"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Set starting price</FormLabel>
                   <FormControl>
-                    <SelectTrigger className="">
-                      <SelectValue placeholder="Theme" />
-                    </SelectTrigger>
+                    <Input placeholder="Amount" {...field} />
                   </FormControl>
-                  <SelectContent>
-                    <SelectItem value="1">1 hour</SelectItem>
-                    <SelectItem value="3">3 hours</SelectItem>
-                    <SelectItem value="6">6 hours</SelectItem>
-                    <SelectItem value="24">1 day</SelectItem>
-                    <SelectItem value="72">3 days</SelectItem>
-                  </SelectContent>
-                </Select>
-                <FormMessage />
-              </FormItem>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            {isAuction && (
+              <FormField
+                control={form.control}
+                name="endAmount"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Set reserve price</FormLabel>
+                    <FormControl>
+                      <Input placeholder="Amount" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
             )}
-          />
-          <Button type="submit" className="" disabled={isLoading}>
-            {isLoading ? "Loading..." : "Complete Listing"}
-          </Button>
-        </form>
-      </Form>
-    </div>
+            <FormField
+              control={form.control}
+              name="duration"
+              render={({ field }) => (
+                <FormItem>
+                  <div className="flex justify-between">
+                    <FormLabel>Set expiration</FormLabel>
+                    {/* <div className="text-sm">Expires {expiredAt}</div> */}
+                  </div>
+                  <Select
+                    onValueChange={field.onChange}
+                    defaultValue={field.value.toString()}
+                  >
+                    <FormControl>
+                      <SelectTrigger className="">
+                        <SelectValue placeholder="Theme" />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent>
+                      <SelectItem value="1">1 hour</SelectItem>
+                      <SelectItem value="3">3 hours</SelectItem>
+                      <SelectItem value="6">6 hours</SelectItem>
+                      <SelectItem value="24">1 day</SelectItem>
+                      <SelectItem value="72">3 days</SelectItem>
+                    </SelectContent>
+                  </Select>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <Button type="submit" className="" disabled={isLoading}>
+              {isLoading ? "Loading..." : "Complete Listing"}
+            </Button>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
   );
 };
 
diff --git a/apps/arkmarket/src/app/assets/[contract_address]/[token_id]/components/create-offer.tsx b/apps/arkmarket/src/app/assets/[contract_address]/[token_id]/components/create-offer.tsx
index af6b3438..897ffad3 100644
--- a/apps/arkmarket/src/app/assets/[contract_address]/[token_id]/components/create-offer.tsx
+++ b/apps/arkmarket/src/app/assets/[contract_address]/[token_id]/components/create-offer.tsx
@@ -33,7 +33,7 @@ import TokenMedia from "./token-media";
 
 interface CreateOfferProps {
   token: Token;
-  tokenMarketData: TokenMarketData | undefined;
+  tokenMarketData?: TokenMarketData;
 }
 
 export default function CreateOffer({
diff --git a/apps/arkmarket/src/app/layout.tsx b/apps/arkmarket/src/app/layout.tsx
index a95dd5c0..3fbad26c 100644
--- a/apps/arkmarket/src/app/layout.tsx
+++ b/apps/arkmarket/src/app/layout.tsx
@@ -70,7 +70,7 @@ export default function RootLayout({ children }: PropsWithChildren) {
             {children}
             <SpeedInsights />
           </div>
-          <Toaster />
+          <Toaster richColors />
           <Footer />
           <DataFooter className="fixed bottom-0 hidden w-full lg:flex" />
         </Providers>
diff --git a/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-actions-accept-best-offer.tsx b/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-actions-accept-best-offer.tsx
new file mode 100644
index 00000000..a567560f
--- /dev/null
+++ b/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-actions-accept-best-offer.tsx
@@ -0,0 +1,82 @@
+"use client";
+
+import * as React from "react";
+import { useFulfillAuction, useFulfillOffer } from "@ark-project/react";
+import { ReloadIcon } from "@radix-ui/react-icons";
+import { useAccount } from "@starknet-react/core";
+import { Tag } from "lucide-react";
+import { formatEther } from "viem";
+
+import { areAddressesEqual } from "@ark-market/ui";
+import { Button } from "@ark-market/ui/button";
+import { Separator } from "@ark-market/ui/separator";
+
+import type { Token, TokenMarketData } from "~/types";
+import { env } from "~/env";
+
+interface TokenActionsAcceptBestOfferProps {
+  token: Token;
+  tokenMarketData: TokenMarketData | undefined;
+  isAuction: boolean;
+}
+
+export default function TokenActionsAcceptBestOffer({
+  token,
+  tokenMarketData,
+  isAuction,
+}: TokenActionsAcceptBestOfferProps) {
+  const { address, account } = useAccount();
+  const { fulfill: fulfillAuction, status: statusAuction } =
+    useFulfillAuction();
+  const { fulfillOffer, status } = useFulfillOffer();
+  const isOwner = areAddressesEqual(token.owner, address);
+
+  if (!account || !isOwner || !tokenMarketData?.has_offer) {
+    return null;
+  }
+
+  const handleClick = async () => {
+    try {
+      if (isAuction) {
+        await fulfillAuction({
+          starknetAccount: account,
+          brokerId: env.NEXT_PUBLIC_BROKER_ID,
+          tokenAddress: token.contract_address,
+          tokenId: token.token_id,
+          orderHash: tokenMarketData.top_bid.order_hash,
+          relatedOrderHash: tokenMarketData.order_hash,
+        });
+      } else {
+        await fulfillOffer({
+          starknetAccount: account,
+          brokerId: env.NEXT_PUBLIC_BROKER_ID,
+          tokenAddress: token.contract_address,
+          tokenId: token.token_id,
+          orderHash: tokenMarketData.top_bid.order_hash,
+        });
+      }
+    } catch (error) {
+      console.log("Error accepting offer", error);
+    }
+  };
+
+  const isLoading = status === "loading" || statusAuction === "loading";
+
+  return (
+    <Button
+      onClick={handleClick}
+      disabled={isLoading}
+      className="relative w-full lg:max-w-[50%]"
+      size="xl"
+    >
+      {isLoading ? (
+        <ReloadIcon className="absolute left-4 size-6 animate-spin" />
+      ) : (
+        <Tag size={24} className="absolute left-4" />
+      )}
+      Accept offer
+      <Separator orientation="vertical" className="h-5" />
+      {formatEther(BigInt(tokenMarketData.top_bid.amount))} ETH
+    </Button>
+  );
+}
diff --git a/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-actions-buttons.tsx b/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-actions-buttons.tsx
new file mode 100644
index 00000000..e29e4588
--- /dev/null
+++ b/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-actions-buttons.tsx
@@ -0,0 +1,92 @@
+"use client";
+
+import { useRef } from "react";
+import { useInView } from "framer-motion";
+
+import type { Token, TokenMarketData } from "~/types";
+import TokenActionsAcceptBestOffer from "./token-actions-accept-best-offer";
+import TokenActionsBar from "./token-actions-bar";
+import TokenActionsCancelListing from "./token-actions-cancel-listing";
+import { TokenActionsCreateListing } from "./token-actions-create-listing";
+import TokenActionsMakeBid from "./token-actions-make-bid";
+import TokenActionsMakeOffer from "./token-actions-make-offer";
+import TokenActionsBuyNow from "./tokens-actions-buy-now";
+
+interface TokenActionsButtonsProps {
+  isListed: boolean;
+  isAuction: boolean;
+  hasOffers: boolean;
+  isOwner: boolean;
+  startAmount: string;
+  token: Token;
+  tokenMarketData: TokenMarketData;
+}
+
+export default function TokenActionsButtons({
+  isListed,
+  isAuction,
+  hasOffers,
+  isOwner,
+  // startAmount,
+  token,
+  tokenMarketData,
+}: TokenActionsButtonsProps) {
+  const ref = useRef<HTMLDivElement | null>(null);
+  // const isActionItemsInView = useInView(ref, { margin: "-72px 0px 0px 0px" });
+
+  return (
+    <>
+      {/* {isActionItemsInView || <TokenActionsBar />} */}
+      <div className="flex flex-col gap-4 lg:flex-row lg:gap-8" ref={ref}>
+        {isOwner ? (
+          <>
+            {isListed ? (
+              <>
+                {hasOffers && (
+                  <TokenActionsAcceptBestOffer
+                    token={token}
+                    tokenMarketData={tokenMarketData}
+                    isAuction={isAuction}
+                  />
+                )}
+                <TokenActionsCancelListing
+                  token={token}
+                  tokenMarketData={tokenMarketData}
+                />
+              </>
+            ) : (
+              <TokenActionsCreateListing
+                token={token}
+                tokenMarketData={tokenMarketData}
+              />
+            )}
+          </>
+        ) : (
+          <>
+            {isListed && (
+              <>
+                {isAuction ? (
+                  <>
+                    <TokenActionsMakeBid
+                      token={token}
+                      tokenMarketData={tokenMarketData}
+                    />
+                  </>
+                ) : (
+                  <TokenActionsBuyNow
+                    token={token}
+                    tokenMarketData={tokenMarketData}
+                  />
+                )}
+              </>
+            )}
+            <TokenActionsMakeOffer
+              token={token}
+              tokenMarketData={tokenMarketData}
+            />
+          </>
+        )}
+      </div>
+    </>
+  );
+}
diff --git a/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-actions-cancel-listing.tsx b/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-actions-cancel-listing.tsx
new file mode 100644
index 00000000..1675733f
--- /dev/null
+++ b/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-actions-cancel-listing.tsx
@@ -0,0 +1,55 @@
+"use client";
+
+import { useCancel } from "@ark-project/react";
+import { ReloadIcon } from "@radix-ui/react-icons";
+import { useAccount } from "@starknet-react/core";
+import { ListX } from "lucide-react";
+
+import { areAddressesEqual } from "@ark-market/ui";
+import { Button } from "@ark-market/ui/button";
+
+import type { Token, TokenMarketData } from "~/types";
+
+interface TokenActionsCancelListingProps {
+  token: Token;
+  tokenMarketData: TokenMarketData;
+}
+
+export default function TokenActionsCancelListing({
+  token,
+  tokenMarketData,
+}: TokenActionsCancelListingProps) {
+  const { account, address } = useAccount();
+  const { cancel, status } = useCancel();
+  const isOwner = areAddressesEqual(token.owner, address);
+
+  if (!account || !isOwner || !tokenMarketData.is_listed) {
+    return;
+  }
+
+  const handleClick = async () => {
+    await cancel({
+      starknetAccount: account,
+      orderHash: BigInt(tokenMarketData.order_hash),
+      tokenAddress: token.contract_address,
+      tokenId: BigInt(token.token_id),
+    });
+  };
+
+  return (
+    <Button
+      onClick={handleClick}
+      disabled={status === "loading"}
+      className="relative w-full lg:max-w-[50%]"
+      size="xl"
+      variant="secondary"
+    >
+      {status === "loading" ? (
+        <ReloadIcon className="absolute left-4 h-6 w-6 animate-spin" />
+      ) : (
+        <ListX size={24} className="absolute left-4" />
+      )}
+      Cancel listing
+    </Button>
+  );
+}
diff --git a/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-actions-create-listing.tsx b/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-actions-create-listing.tsx
new file mode 100644
index 00000000..bda182af
--- /dev/null
+++ b/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-actions-create-listing.tsx
@@ -0,0 +1,283 @@
+"use client";
+
+import { useState } from "react";
+import { useCreateAuction, useCreateListing } from "@ark-project/react";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useAccount } from "@starknet-react/core";
+import { List } from "lucide-react";
+import moment from "moment";
+import { useForm } from "react-hook-form";
+import { parseEther } from "viem";
+import * as z from "zod";
+
+import { Button } from "@ark-market/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTrigger,
+} from "@ark-market/ui/dialog";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@ark-market/ui/form";
+import { Input } from "@ark-market/ui/input";
+import { RadioGroup, RadioGroupItem } from "@ark-market/ui/radio-group";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@ark-market/ui/select";
+
+import type { Token, TokenMarketData } from "~/types";
+import TokenMedia from "~/app/assets/[contract_address]/[token_id]/components/token-media";
+import { env } from "~/env";
+
+interface TokenActionsCreateListingProps {
+  token: Token;
+  tokenMarketData?: TokenMarketData;
+}
+
+const FIXED = "fixed";
+const AUCTION = "auction";
+
+const formSchema = z.object({
+  startAmount: z.string({
+    invalid_type_error: "Please enter a valid amount",
+  }),
+  endAmount: z
+    .string({
+      invalid_type_error: "Please enter a valid amount",
+    })
+    .optional(),
+  duration: z.string(),
+  type: z.enum([FIXED, AUCTION]),
+});
+
+export function TokenActionsCreateListing({
+  token,
+  // tokenMarketData,
+}: TokenActionsCreateListingProps) {
+  const { account } = useAccount();
+  const [isOpen, setIsOpen] = useState(false);
+  const { createListing, status } = useCreateListing();
+  const { create: createAuction, status: auctionStatus } = useCreateAuction();
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    mode: "onBlur",
+    defaultValues: {
+      type: FIXED,
+      startAmount: "0.1",
+      duration: "1",
+    },
+  });
+
+  async function onSubmit(values: z.infer<typeof formSchema>) {
+    if (!account) {
+      // TODO: Handle error with toast
+      console.error("Account is missing");
+      return;
+    }
+
+    const processedValues = {
+      brokerId: env.NEXT_PUBLIC_BROKER_ID,
+      tokenAddress: token.contract_address,
+      tokenId: BigInt(token.token_id),
+      startAmount: parseEther(values.startAmount),
+      endAmount: values.endAmount ? parseEther(values.endAmount) : BigInt(0),
+      endDate: moment().add(values.duration, "hours").unix(),
+    };
+
+    try {
+      if (values.type === AUCTION) {
+        await createAuction({
+          starknetAccount: account,
+          brokerId: env.NEXT_PUBLIC_BROKER_ID,
+          tokenAddress: token.contract_address,
+          tokenId: processedValues.tokenId,
+          endDate: processedValues.endDate,
+          startAmount: processedValues.startAmount,
+          endAmount: processedValues.endAmount,
+        });
+      } else {
+        await createListing({
+          starknetAccount: account,
+          brokerId: env.NEXT_PUBLIC_BROKER_ID,
+          tokenAddress: token.contract_address,
+          tokenId: processedValues.tokenId,
+          endDate: processedValues.endDate,
+          startAmount: processedValues.startAmount,
+        });
+      }
+
+      // queryClient.setQueryData(
+      //   ["tokenMarketData", token.contract_address, token.token_id],
+      //   {
+      //     ...tokenMarketData,
+      //     is_listed: true,
+      //     type: values.type === AUCTION ? "AUCTION" ,
+      //     start_amount: processedValues.startAmount,
+      //     end_amount: processedValues.endAmount,
+      //     end_date: processedValues.endDate,
+      //   },
+      // );
+    } catch (error) {
+      console.error("error: create listing failed", error);
+    }
+  }
+
+  const isAuction = form.getValues("type") === AUCTION;
+  // const duration = form.watch("duration");
+  // const expiredAt = moment().add(duration, "hours").format("LLLL");
+  const isLoading = status === "loading" || auctionStatus === "loading";
+
+  return (
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DialogTrigger asChild>
+        <Button className="relative w-full lg:max-w-[50%]" size="xl">
+          <List size={24} className="absolute left-4" />
+          <span>List for sale</span>
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader className="items-center">
+          {/* <DialogTitle>List for sale</DialogTitle> */}
+        </DialogHeader>
+        <div className="flex-row gap-10">
+          <div className="text-center text-xl font-semibold">List for sale</div>
+          <div className="flex items-center space-x-4">
+            <div className="size-24 overflow-hidden rounded">
+              <TokenMedia token={token} />
+            </div>
+            <div className="">
+              <div className="font-bold">Duo #{token.token_id}</div>
+              <div className="text-muted-foreground">Everai</div>
+            </div>
+            <div className="grow" />
+          </div>
+
+          <Form {...form}>
+            <form
+              onSubmit={form.handleSubmit(onSubmit)}
+              className="flex flex-col space-y-4"
+            >
+              <FormField
+                control={form.control}
+                name="type"
+                render={({ field }) => (
+                  <FormItem className="">
+                    <FormLabel>Choose a type of sale</FormLabel>
+                    <FormControl>
+                      <RadioGroup
+                        onValueChange={field.onChange}
+                        defaultValue={field.value}
+                        className="gap-0 rounded border"
+                      >
+                        <FormItem className="flex items-center justify-center border-b p-4">
+                          <FormLabel className="text-md flex flex-grow flex-col space-y-2 font-normal">
+                            <span className="font-semibold">Fixed price</span>
+                            <span className="">
+                              The item is listed at the price you set.
+                            </span>
+                          </FormLabel>
+                          <FormControl>
+                            <RadioGroupItem value={FIXED} className="h-6 w-6" />
+                          </FormControl>
+                        </FormItem>
+                        <FormItem className="flex items-center justify-center p-4">
+                          <FormLabel className="text-md flex flex-grow flex-col space-y-2 font-normal">
+                            <span className="font-semibold">
+                              Sell to highest bidder
+                            </span>
+                            <span className="">
+                              The item is listed for auction.
+                            </span>
+                          </FormLabel>
+                          <FormControl>
+                            <RadioGroupItem
+                              value={AUCTION}
+                              className="h-6 w-6"
+                            />
+                          </FormControl>
+                        </FormItem>
+                      </RadioGroup>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="startAmount"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Set starting price</FormLabel>
+                    <FormControl>
+                      <Input placeholder="Amount" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              {isAuction && (
+                <FormField
+                  control={form.control}
+                  name="endAmount"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Set reserve price</FormLabel>
+                      <FormControl>
+                        <Input placeholder="Amount" {...field} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              )}
+              <FormField
+                control={form.control}
+                name="duration"
+                render={({ field }) => (
+                  <FormItem>
+                    <div className="flex justify-between">
+                      <FormLabel>Set expiration</FormLabel>
+                      {/* <div className="text-sm">Expires {expiredAt}</div> */}
+                    </div>
+                    <Select
+                      onValueChange={field.onChange}
+                      defaultValue={field.value.toString()}
+                    >
+                      <FormControl>
+                        <SelectTrigger className="">
+                          <SelectValue placeholder="Theme" />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        <SelectItem value="1">1 hour</SelectItem>
+                        <SelectItem value="3">3 hours</SelectItem>
+                        <SelectItem value="6">6 hours</SelectItem>
+                        <SelectItem value="24">1 day</SelectItem>
+                        <SelectItem value="72">3 days</SelectItem>
+                      </SelectContent>
+                    </Select>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <Button type="submit" className="" disabled={isLoading}>
+                {isLoading ? "Loading..." : "Complete Listing"}
+              </Button>
+            </form>
+          </Form>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-actions-empty.tsx b/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-actions-empty.tsx
new file mode 100644
index 00000000..50e1ecdb
--- /dev/null
+++ b/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-actions-empty.tsx
@@ -0,0 +1,35 @@
+"use client";
+
+import { Meh } from "lucide-react";
+
+import type { Token } from "~/types";
+import { TokenActionsCreateListing } from "./token-actions-create-listing";
+import TokenActionsMakeOffer from "./token-actions-make-offer";
+
+interface TokenActionsEmptyProps {
+  token: Token;
+  isOwner: boolean;
+}
+
+export default function TokenActionsEmpty({
+  token,
+  isOwner,
+}: TokenActionsEmptyProps) {
+  return (
+    <div className="rounded-lg bg-card p-5 text-center lg:px-8 lg:pb-10 lg:pt-8">
+      <div className="flex flex-col items-center pb-8 text-muted-foreground">
+        <Meh size={42} className="flex-shrink-0" />
+        <p className="mt-3 text-center text-xl font-semibold">
+          {isOwner
+            ? "You have not assigned a price to your token yet."
+            : "This token has not been listed yet."}
+        </p>
+      </div>
+      {isOwner ? (
+        <TokenActionsCreateListing token={token} />
+      ) : (
+        <TokenActionsMakeOffer token={token} />
+      )}
+    </div>
+  );
+}
diff --git a/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-actions-header.tsx b/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-actions-header.tsx
new file mode 100644
index 00000000..4a478725
--- /dev/null
+++ b/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-actions-header.tsx
@@ -0,0 +1,39 @@
+"use client";
+
+import { TimerReset } from "lucide-react";
+import moment from "moment";
+
+import TokenActionsListingBadge from "./token-actions-listing-badge";
+
+interface TokenActionsProps {
+  isListed: boolean;
+  isAuction: boolean;
+  expiresAt: number;
+}
+
+export default function TokenActionsHeader({
+  isListed,
+  isAuction,
+  expiresAt,
+}: TokenActionsProps) {
+  const now = moment();
+  const target = moment.unix(expiresAt);
+  const duration = moment.duration(target.diff(now));
+  const days = Math.floor(duration.asDays());
+  const hours = duration.hours();
+  const minutes = duration.minutes();
+
+  return (
+    <div className="mb-6 flex flex-col-reverse gap-6 font-medium text-muted-foreground lg:flex-row lg:items-center lg:justify-between lg:gap-5">
+      <TokenActionsListingBadge isListed={isListed} isAuction={isAuction} />
+      {isListed && (
+        <div className="flex items-center gap-1.5">
+          <TimerReset />
+          <p>
+            Time Left {days}d {hours}h {minutes}m
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-actions-listing-badge.tsx b/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-actions-listing-badge.tsx
new file mode 100644
index 00000000..5499b682
--- /dev/null
+++ b/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-actions-listing-badge.tsx
@@ -0,0 +1,26 @@
+import { cn } from "@ark-market/ui";
+
+interface ListingBadgeProps {
+  isListed: boolean;
+  isAuction: boolean;
+}
+
+export default function TokenActionsListingBadge({
+  isListed,
+  isAuction,
+}: ListingBadgeProps) {
+  return (
+    <div
+      className={cn(
+        "w-fit rounded-xl border border-blue-500 px-4 py-2 text-sm text-blue-500",
+        isListed
+          ? isAuction
+            ? "border-green-500 text-green-500"
+            : "border-blue-500 text-blue-500"
+          : "border-orange-500 text-orange-500",
+      )}
+    >
+      {isListed ? (isAuction ? "Up for auction" : "For sale") : "Not for sale"}
+    </div>
+  );
+}
diff --git a/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-actions-make-bid.tsx b/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-actions-make-bid.tsx
new file mode 100644
index 00000000..ddaa3c14
--- /dev/null
+++ b/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-actions-make-bid.tsx
@@ -0,0 +1,160 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useConfig, useCreateOffer } from "@ark-project/react";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { ReloadIcon } from "@radix-ui/react-icons";
+import { useAccount } from "@starknet-react/core";
+import { Tag } from "lucide-react";
+import { useForm } from "react-hook-form";
+import { formatEther, parseEther } from "viem";
+import * as z from "zod";
+
+import { areAddressesEqual } from "@ark-market/ui";
+import { Button } from "@ark-market/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@ark-market/ui/dialog";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+} from "@ark-market/ui/form";
+import { Input } from "@ark-market/ui/input";
+
+import type { Token, TokenMarketData } from "~/types";
+import TokenMedia from "~/app/assets/[contract_address]/[token_id]/components/token-media";
+import { env } from "~/env";
+
+interface TokenActionsMakeBidProps {
+  token: Token;
+  tokenMarketData: TokenMarketData;
+}
+
+export default function TokenActionsMakeBid({
+  token,
+  tokenMarketData,
+}: TokenActionsMakeBidProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const config = useConfig();
+  const { account, address } = useAccount();
+  const { response, createOffer, status } = useCreateOffer();
+  const isOwner = address && areAddressesEqual(token.owner, address);
+  const formSchema = z.object({
+    startAmount: z.string(),
+  });
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      startAmount: formatEther(BigInt(tokenMarketData.start_amount)),
+    },
+  });
+
+  useEffect(() => {
+    form.reset();
+  }, [form, isOpen]);
+
+  useEffect(() => {
+    if (response) {
+      setIsOpen(false);
+    }
+  }, [response]);
+
+  async function onSubmit(values: z.infer<typeof formSchema>) {
+    if (!account || !config) {
+      return;
+    }
+
+    const tokenIdNumber = parseInt(token.token_id, 10);
+
+    if (isNaN(tokenIdNumber)) {
+      console.error("Invalid token ID");
+      return;
+    }
+
+    const processedValues = {
+      brokerId: env.NEXT_PUBLIC_BROKER_ID,
+      currencyAddress: config.starknetCurrencyContract,
+      tokenAddress: token.contract_address,
+      tokenId: BigInt(token.token_id),
+      startAmount: parseEther(values.startAmount),
+    };
+
+    await createOffer({
+      starknetAccount: account,
+      ...processedValues,
+    });
+  }
+
+  if (!account || isOwner) {
+    return;
+  }
+
+  const isDisabled = form.formState.isSubmitting || status === "loading";
+  const price = formatEther(BigInt(tokenMarketData.start_amount));
+  const reservePrice = formatEther(BigInt(tokenMarketData.end_amount));
+
+  return (
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DialogTrigger asChild>
+        <Button className="relative w-full" variant="secondary" size="xl">
+          <Tag size={24} className="absolute left-4" />
+          Make an offer
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Place a bid</DialogTitle>
+        </DialogHeader>
+        <div className="flex items-center space-x-4">
+          <div className="w-16 overflow-hidden rounded">
+            <TokenMedia token={token} />
+          </div>
+          <div className="">
+            <div className="font-bold">Duo #{token.token_id}</div>
+            <div className="text-muted-foreground">Everai</div>
+          </div>
+          <div className="grow" />
+          <div className="">
+            <div className="text-right font-bold">{price} ETH</div>
+            <div className="text-right text-muted-foreground">
+              Reserve {reservePrice} ETH
+            </div>
+          </div>
+        </div>
+        <Form {...form}>
+          <form
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="flex flex-col space-y-4"
+          >
+            <FormField
+              control={form.control}
+              name="startAmount"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Price</FormLabel>
+                  <FormControl>
+                    <Input autoComplete="off" placeholder="Price" {...field} />
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+            <Button type="submit" disabled={isDisabled}>
+              {status === "loading" ? (
+                <ReloadIcon className="animate-spin" />
+              ) : (
+                "Place a bid"
+              )}
+            </Button>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-actions-make-offer.tsx b/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-actions-make-offer.tsx
new file mode 100644
index 00000000..e9e4f984
--- /dev/null
+++ b/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-actions-make-offer.tsx
@@ -0,0 +1,221 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useConfig, useCreateOffer } from "@ark-project/react";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { ReloadIcon } from "@radix-ui/react-icons";
+import { useAccount } from "@starknet-react/core";
+import { BadgeCheck, Tag } from "lucide-react";
+import { useForm } from "react-hook-form";
+import { parseEther } from "viem";
+import * as z from "zod";
+
+import { areAddressesEqual } from "@ark-market/ui";
+import { Button } from "@ark-market/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTrigger,
+} from "@ark-market/ui/dialog";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@ark-market/ui/form";
+import { Input } from "@ark-market/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@ark-market/ui/select";
+import { toast } from "@ark-market/ui/toast";
+
+import type { Token, TokenMarketData } from "~/types";
+import TokenMedia from "~/app/assets/[contract_address]/[token_id]/components/token-media";
+import { env } from "~/env";
+
+const formSchema = z.object({
+  startAmount: z.string(),
+  duration: z.string(),
+});
+
+interface CreateOfferProps {
+  token: Token;
+  tokenMarketData?: TokenMarketData;
+}
+
+export default function TokenActionsMakeOffer({
+  token,
+  // tokenMarketData,
+}: CreateOfferProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const config = useConfig();
+  const { account, address } = useAccount();
+  const { response, createOffer, status } = useCreateOffer();
+  const isOwner = address && areAddressesEqual(token.owner, address);
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      startAmount: "",
+      duration: "1",
+    },
+  });
+
+  useEffect(() => {
+    form.reset();
+  }, [form, isOpen]);
+
+  useEffect(() => {
+    if (response) {
+      setIsOpen(false);
+    }
+  }, [response]);
+
+  async function onSubmit(values: z.infer<typeof formSchema>) {
+    if (!account) {
+      return;
+    }
+
+    const processedValues = {
+      brokerId: env.NEXT_PUBLIC_BROKER_ID,
+      currencyAddress: config?.starknetCurrencyContract,
+      tokenAddress: token.contract_address,
+      tokenId: BigInt(token.token_id),
+      startAmount: parseEther(values.startAmount),
+    };
+
+    await createOffer({
+      starknetAccount: account,
+      ...processedValues,
+    });
+
+    toast("Your offer is successfully sent!", {
+      description: <>dadwa</>,
+    });
+  }
+
+  if (!account || isOwner) {
+    return;
+  }
+
+  const isDisabled = form.formState.isSubmitting || status === "loading";
+  const startAmount = form.watch("startAmount");
+
+  return (
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DialogTrigger asChild>
+        <Button
+          className="relative w-full lg:max-w-[50%]"
+          size="xl"
+          variant="secondary"
+        >
+          <Tag size={24} className="absolute left-4" />
+          Make offer
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader className="items-center"></DialogHeader>
+        <div className="flex flex-col gap-6">
+          <div className="text-center text-xl font-semibold">Make an offer</div>
+          <div className="flex items-center space-x-4">
+            <div className="size-24 overflow-hidden rounded-xl">
+              <TokenMedia token={token} />
+            </div>
+            <div className="flex flex-col gap-1">
+              <div className="text-xl font-semibold">Duo #{token.token_id}</div>
+              <div className="flex items-center gap-2">
+                <div className="text-lg font-semibold text-muted-foreground">
+                  Everai
+                </div>
+                <BadgeCheck className="size-4 text-muted-foreground" />
+              </div>
+            </div>
+            <div className="grow" />
+            <div className="flex flex-col gap-1">
+              <div className="text-xl font-semibold">
+                {startAmount || "---"} ETH
+              </div>
+              <div className="text-right text-lg font-semibold text-muted-foreground">
+                $---
+              </div>
+            </div>
+          </div>
+          <Form {...form}>
+            <form
+              onSubmit={form.handleSubmit(onSubmit)}
+              className="flex flex-col space-y-4"
+            >
+              <FormField
+                control={form.control}
+                name="startAmount"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Set price</FormLabel>
+                    <FormControl>
+                      <Input
+                        autoComplete="off"
+                        placeholder="Price"
+                        {...field}
+                      />
+                    </FormControl>
+                    <div className="mx-2 text-lg font-semibold text-muted-foreground">
+                      $---
+                    </div>
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="duration"
+                render={({ field }) => (
+                  <FormItem>
+                    <div className="flex justify-between">
+                      <FormLabel>Offer expiration</FormLabel>
+                      {/* <div className="text-sm">Expires {expiredAt}</div> */}
+                    </div>
+                    <Select
+                      onValueChange={field.onChange}
+                      defaultValue={field.value.toString()}
+                    >
+                      <FormControl>
+                        <SelectTrigger className="">
+                          <SelectValue placeholder="Theme" />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        <SelectItem value="1">1 hour</SelectItem>
+                        <SelectItem value="3">3 hours</SelectItem>
+                        <SelectItem value="6">6 hours</SelectItem>
+                        <SelectItem value="24">1 day</SelectItem>
+                        <SelectItem value="72">3 days</SelectItem>
+                      </SelectContent>
+                    </Select>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <Button
+                type="submit"
+                disabled={isDisabled}
+                className="mx-auto w-fit px-10"
+              >
+                {status === "loading" ? (
+                  <ReloadIcon className="animate-spin" />
+                ) : (
+                  "Make offer"
+                )}
+              </Button>
+            </form>
+          </Form>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-actions-price.tsx b/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-actions-price.tsx
new file mode 100644
index 00000000..e2f0f205
--- /dev/null
+++ b/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-actions-price.tsx
@@ -0,0 +1,59 @@
+"use client";
+
+import { useQuery } from "react-query";
+import { formatEther } from "viem";
+
+import { cn, ellipsableStyles } from "@ark-market/ui";
+
+import getPrices from "~/lib/getPrices";
+
+interface TokenActionsPriceProps {
+  startAmount: string;
+  isAuction: boolean;
+  hasOffer: boolean;
+  topOffer: {
+    amount: string;
+    order_hash: string;
+  };
+}
+
+export default function TokenActionsPrice({
+  startAmount,
+  isAuction,
+  hasOffer,
+  topOffer,
+}: TokenActionsPriceProps) {
+  const { data } = useQuery("prices", getPrices, {
+    refetchInterval: 15_000,
+  });
+
+  const price = hasOffer
+    ? formatEther(BigInt(topOffer.amount))
+    : formatEther(BigInt(startAmount || 0));
+  const priceInUSD = data ? data.ethereum.price * parseFloat(price) : 0;
+
+  return (
+    <div className="mb-6">
+      <div className="font-medium text-secondary-foreground">
+        {hasOffer
+          ? "Best offer"
+          : isAuction
+            ? "Minimum starting price"
+            : "Current Price"}
+      </div>
+      <div className="flex items-end gap-3 lg:gap-6">
+        <div
+          className={cn("text-xl font-semibold lg:text-3xl", ellipsableStyles)}
+        >
+          {price} ETH
+        </div>
+        <div className="text-lg font-semibold text-muted-foreground lg:text-2xl">
+          ${priceInUSD ? priceInUSD.toFixed(2) : "--"}
+        </div>
+        <div className="flex h-8 items-center whitespace-nowrap rounded-full bg-secondary px-3 text-xs text-secondary-foreground lg:text-sm">
+          Royalties 5%
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-actions-token-overview.tsx b/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-actions-token-overview.tsx
new file mode 100644
index 00000000..cd980d11
--- /dev/null
+++ b/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-actions-token-overview.tsx
@@ -0,0 +1,38 @@
+import { BadgeCheck } from "lucide-react";
+
+import type { Token } from "~/types";
+import TokenMedia from "~/app/assets/[contract_address]/[token_id]/components/token-media";
+
+interface tokenActionsTokenOverviewProps {
+  token: Token;
+  amount: string;
+}
+
+export default function TokenActionsTokenOverview({
+  token,
+  amount,
+}: tokenActionsTokenOverviewProps) {
+  return (
+    <div className="flex items-center space-x-4">
+      <div className="size-24 overflow-hidden rounded-xl">
+        <TokenMedia token={token} />
+      </div>
+      <div className="flex flex-col gap-1">
+        <div className="text-xl font-semibold">Duo #{token.token_id}</div>
+        <div className="flex items-center gap-2">
+          <div className="text-lg font-semibold text-muted-foreground">
+            Everai
+          </div>
+          <BadgeCheck className="size-4 text-muted-foreground" />
+        </div>
+      </div>
+      <div className="grow" />
+      <div className="flex flex-col gap-1">
+        <div className="text-xl font-semibold">{amount || "---"} ETH</div>
+        <div className="text-right text-lg font-semibold text-muted-foreground">
+          $---
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-actions.tsx b/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-actions.tsx
index d6c05026..5a968358 100644
--- a/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-actions.tsx
+++ b/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-actions.tsx
@@ -1,90 +1,81 @@
 "use client";
 
-import { useRef } from "react";
-import { useInView } from "framer-motion";
-import { ShoppingBag, Tag, TimerReset } from "lucide-react";
+import { useAccount } from "@starknet-react/core";
+import { useQuery } from "react-query";
+import { hexToNumber } from "viem";
 
 import type { PropsWithClassName } from "@ark-market/ui";
-import { cn, ellipsableStyles, formatUnits } from "@ark-market/ui";
-import { Button } from "@ark-market/ui/button";
+import { areAddressesEqual, cn } from "@ark-market/ui";
 
-import type { TokenInfosApiResponse } from "../queries/getTokenData";
-import useIsSSR from "~/hooks/useIsSSR";
-import MobileTokenAction from "./mobile-token-action";
-import TokenActionsBar from "./token-actions-bar";
+import type { Token, TokenMarketData } from "~/types";
+import { getOrderbookCollectionToken } from "~/app/assets/[contract_address]/[token_id]/data";
+import TokenActionsButtons from "./token-actions-buttons";
+import TokenActionsEmpty from "./token-actions-empty";
+import TokenActionsHeader from "./token-actions-header";
+import TokenActionsPrice from "./token-actions-price";
 
 interface TokenActionsProps {
-  tokenInfos: TokenInfosApiResponse["data"];
+  token: Token;
+  tokenMarketData: TokenMarketData | null;
+  className?: PropsWithClassName["className"];
 }
 
 export default function TokenActions({
+  token,
+  tokenMarketData,
   className,
-  tokenInfos,
-}: PropsWithClassName<TokenActionsProps>) {
-  const ref = useRef<HTMLDivElement | null>(null);
-  const isActionItemsInView = useInView(ref, { margin: "-72px 0px 0px 0px" });
-  const isSSR = useIsSSR();
-  const shouldShowFixedTokenActions = !isSSR && !isActionItemsInView;
+}: TokenActionsProps) {
+  const account = useAccount();
+  const isOwner =
+    !!account.address && areAddressesEqual(account.address, token.owner);
+  const { data } = useQuery(
+    ["tokenMarketData", token.contract_address, token.token_id],
+    () =>
+      getOrderbookCollectionToken({
+        contract_address: token.contract_address,
+        token_id: token.token_id,
+      }),
+    {
+      refetchInterval: 10_000,
+      initialData: tokenMarketData,
+    },
+  );
 
-  return (
-    <>
-      <div
-        className={cn(
-          "rounded-none bg-card p-5 lg:rounded-lg lg:px-8 lg:pb-10 lg:pt-8",
-          className,
-        )}
-      >
-        <div className="flex flex-col-reverse gap-6 font-medium text-muted-foreground lg:flex-row lg:items-center lg:justify-between lg:gap-0">
-          <p className="text-sm lg:text-base">Best Price</p>
-          <div className="flex items-center gap-1.5">
-            <TimerReset />
-            <p>Time Left 12d 13h 45m</p>
-          </div>
-        </div>
+  if (!data || (!data.has_offer && !data.is_listed)) {
+    return <TokenActionsEmpty token={token} isOwner={isOwner} />;
+  }
 
-        <div className="mt-1.5 flex items-center justify-between gap-6 lg:mt-4 lg:justify-start">
-          <div className="flex items-center gap-3 lg:gap-6">
-            <p
-              className={cn(
-                "text-xl font-semibold lg:text-3xl",
-                ellipsableStyles,
-              )}
-            >
-              {formatUnits(BigInt(tokenInfos.price ?? "0"), 18)} ETH
-            </p>
-            <p className="text-lg font-semibold text-muted-foreground lg:text-2xl">
-              $158.86
-            </p>
-          </div>
-          <div className="flex h-8 items-center whitespace-nowrap rounded-full bg-secondary px-3 text-xs text-secondary-foreground lg:text-sm">
-            Royalties _%
-          </div>
-        </div>
+  const isListed = data.is_listed;
+  const isAuction =
+    isListed && hexToNumber(data.end_amount as `0x${string}`) > 0;
 
-        <div
-          className="mt-6 flex flex-col items-center gap-4 lg:mt-9 lg:flex-row lg:gap-8"
-          ref={ref}
-        >
-          <Button className="relative w-full" size="xl">
-            <ShoppingBag size={24} className="absolute left-4" />
-            Buy now for {formatUnits(BigInt(tokenInfos.price ?? "0"), 18)} ETH
-          </Button>
-          <Button className="relative w-full" variant="secondary" size="xl">
-            <Tag size={24} className="absolute left-4" />
-            Make Offer
-          </Button>
-        </div>
-      </div>
-      <TokenActionsBar
-        show={shouldShowFixedTokenActions}
-        tokenInfos={tokenInfos}
-        className="hidden lg:flex"
+  return (
+    <div
+      className={cn(
+        "rounded-lg bg-card p-5 lg:px-8 lg:pb-10 lg:pt-8",
+        className,
+      )}
+    >
+      <TokenActionsHeader
+        isListed={isListed}
+        isAuction={isAuction}
+        expiresAt={data.end_date}
+      />
+      <TokenActionsPrice
+        startAmount={data.start_amount}
+        isAuction={isAuction}
+        hasOffer={data.has_offer}
+        topOffer={data.top_bid}
       />
-      <MobileTokenAction
-        show={shouldShowFixedTokenActions}
-        tokenInfos={tokenInfos}
-        className="lg:hidden"
+      <TokenActionsButtons
+        isListed={isListed}
+        isAuction={isAuction}
+        hasOffers={data.has_offer}
+        isOwner={isOwner}
+        startAmount={data.start_amount}
+        token={token}
+        tokenMarketData={data}
       />
-    </>
+    </div>
   );
 }
diff --git a/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-summary.tsx b/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-summary.tsx
index 293dc8d7..a791020f 100644
--- a/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-summary.tsx
+++ b/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-summary.tsx
@@ -63,7 +63,7 @@ export default function TokenSummary({
             <Share2 className="size-6 text-muted-foreground" />
             <CopyButton
               className="size-6 text-muted-foreground"
-              textToCopy={contractAddress}
+              textToCopy={collection.contract_address}
             />
             <RefreshCw className="size-6 text-muted-foreground" />
           </div>
diff --git a/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/tokens-actions-buy-now.tsx b/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/tokens-actions-buy-now.tsx
new file mode 100644
index 00000000..c96f3db5
--- /dev/null
+++ b/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/tokens-actions-buy-now.tsx
@@ -0,0 +1,120 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useFulfillListing } from "@ark-project/react";
+import { ReloadIcon } from "@radix-ui/react-icons";
+import { useAccount } from "@starknet-react/core";
+import { ShoppingBag } from "lucide-react";
+import { formatEther } from "viem";
+
+import { areAddressesEqual } from "@ark-market/ui";
+import { Button } from "@ark-market/ui/button";
+import { Dialog, DialogContent } from "@ark-market/ui/dialog";
+import { toast } from "@ark-market/ui/toast";
+
+import type { Token, TokenMarketData } from "~/types";
+import { env } from "~/env";
+import TokenActionsTokenOverview from "./token-actions-token-overview";
+
+interface BuyOrderProps {
+  token: Token;
+  tokenMarketData: TokenMarketData;
+}
+
+export default function TokenActionsBuyNow({
+  token,
+  tokenMarketData,
+}: BuyOrderProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const { fulfillListing, status } = useFulfillListing();
+  const { address, account } = useAccount();
+  const isOwner = areAddressesEqual(token.owner, address);
+
+  const handeClick = async () => {
+    setIsOpen(true);
+    await fulfillListing({
+      starknetAccount: account,
+      brokerId: env.NEXT_PUBLIC_BROKER_ID,
+      tokenAddress: token.contract_address,
+      tokenId: token.token_id,
+      orderHash: tokenMarketData.order_hash,
+      startAmount: tokenMarketData.start_amount,
+    });
+  };
+
+  useEffect(() => {
+    if (status === "error") {
+      setIsOpen(false);
+      toast.error("Purchase cancelled by user");
+    }
+  }, [status]);
+
+  if (
+    !account ||
+    isOwner ||
+    !tokenMarketData.is_listed ||
+    tokenMarketData.status === "FULFILLED"
+  ) {
+    return null;
+  }
+
+  const isSuccess = status === "success";
+
+  return (
+    <>
+      <Dialog open={isOpen} onOpenChange={setIsOpen}>
+        <DialogContent
+          className="p-6"
+          onInteractOutside={(e) => {
+            e.preventDefault();
+          }}
+        >
+          {isSuccess ? (
+            <>
+              <div className="flex flex-col gap-10">
+                <div className="flex flex-col gap-4">
+                  <div className="mt-6 text-center text-xl font-semibold">
+                    Congratulations for your purchase
+                  </div>
+                  <div className="text-center text-sm">
+                    Nice purchase, this NFT is now in your wallet ;)
+                  </div>
+                </div>
+                <TokenActionsTokenOverview
+                  token={token}
+                  amount={formatEther(BigInt(tokenMarketData.start_amount))}
+                />
+                <Button onClick={() => setIsOpen(false)}>
+                  Continue to explore NFTs
+                </Button>
+              </div>
+            </>
+          ) : (
+            <>
+              <div className="flex flex-col gap-10">
+                <div className="mt-6 text-center text-xl font-semibold">
+                  Checking your payment
+                </div>
+                <div className="mb-6 flex justify-center">
+                  <ReloadIcon className="mr-4 size-6 animate-spin" />
+                  <div className="text-sm">
+                    Checking your payment can take a few seconds...
+                  </div>
+                </div>
+              </div>
+            </>
+          )}
+        </DialogContent>
+      </Dialog>
+      <Button
+        className="relative w-full"
+        size="xl"
+        disabled={status === "loading"}
+        onClick={handeClick}
+      >
+        <ShoppingBag size={24} className="absolute left-4" />
+        Buy now for {formatEther(BigInt(tokenMarketData.start_amount))} ETH
+      </Button>
+    </>
+  );
+}
diff --git a/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/page.tsx b/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/page.tsx
index 8a2e4878..24fa9416 100644
--- a/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/page.tsx
+++ b/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/page.tsx
@@ -1,5 +1,10 @@
 import { notFound } from "next/navigation";
 
+import {
+  getCollection,
+  getCollectionToken,
+  getOrderbookCollectionToken,
+} from "~/app/assets/[contract_address]/[token_id]/data";
 import MobileTokenActivity from "./components/mobile-token-activity";
 import TokenAbout from "./components/token-about";
 import TokenActions from "./components/token-actions";
@@ -24,10 +29,25 @@ export default async function TokenPage({
     contractAddress,
     tokenId,
   });
+
   if (tokenInfosInitialData === undefined) {
     notFound();
   }
 
+  const token = await getCollectionToken(contractAddress, tokenId);
+
+  let tokenMarketData;
+
+  try {
+    tokenMarketData = await getOrderbookCollectionToken({
+      contract_address: token.contract_address,
+      token_id: token.token_id,
+    });
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  } catch (_error) {
+    tokenMarketData = null;
+  }
+
   return (
     <main className="mx-auto max-w-[160rem] p-5 pt-0 lg:p-8">
       <div className="grid grid-cols-1 gap-5 lg:grid-cols-[minmax(0,1fr)_minmax(0,2fr)] lg:gap-8">
@@ -45,7 +65,8 @@ export default async function TokenPage({
               className="mb-5 lg:mb-0"
             />
             <TokenActions
-              tokenInfos={tokenInfosInitialData.data}
+              token={token}
+              tokenMarketData={tokenMarketData}
               className="-mx-5 lg:mx-0"
             />
           </div>
@@ -64,7 +85,6 @@ export default async function TokenPage({
           />
         </div>
       </div>
-
       <TokenActivity className="mt-20 hidden lg:block" />
       <MobileTokenActivity className="mt-8 lg:hidden" />
     </main>
diff --git a/apps/arkmarket/src/components/providers.tsx b/apps/arkmarket/src/components/providers.tsx
index a5cd4351..f957992f 100644
--- a/apps/arkmarket/src/components/providers.tsx
+++ b/apps/arkmarket/src/components/providers.tsx
@@ -12,7 +12,7 @@ export default function Providers({ children }: PropsWithChildren) {
   const queryClient = new QueryClient();
 
   return (
-    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+    <ThemeProvider attribute="class" defaultTheme="dark">
       <StarknetProvider>
         <ArkProvider
           config={{
diff --git a/packages/ui/src/form.tsx b/packages/ui/src/form.tsx
index d0f67b44..2373ee78 100644
--- a/packages/ui/src/form.tsx
+++ b/packages/ui/src/form.tsx
@@ -116,7 +116,11 @@ const FormLabel = React.forwardRef<
   return (
     <Label
       ref={ref}
-      className={cn(error && "text-destructive", className)}
+      className={cn(
+        error && "text-destructive",
+        "text-lg font-semibold",
+        className,
+      )}
       htmlFor={formItemId}
       {...props}
     />
diff --git a/packages/ui/src/input.tsx b/packages/ui/src/input.tsx
index 7b7ed0a9..163f5711 100644
--- a/packages/ui/src/input.tsx
+++ b/packages/ui/src/input.tsx
@@ -10,7 +10,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          "flex h-12 w-full rounded-lg border border-input bg-transparent px-3 py-1 text-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          "flex h-12 w-full rounded-lg border border-input bg-card px-3 py-1 text-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-transparent disabled:cursor-not-allowed disabled:opacity-50",
           className,
         )}
         ref={ref}
diff --git a/packages/ui/src/select.tsx b/packages/ui/src/select.tsx
index 786a12d2..a90b661e 100644
--- a/packages/ui/src/select.tsx
+++ b/packages/ui/src/select.tsx
@@ -24,7 +24,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-12 w-full items-center justify-between whitespace-nowrap rounded-lg border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      "flex h-12 w-full items-center justify-between whitespace-nowrap rounded-lg border border-input bg-card px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-transparent disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
       className,
     )}
     {...props}

From 5d149dfafef47a0c1a2532ee14c73a9afb122938 Mon Sep 17 00:00:00 2001
From: paul launay <launay.p@gmail.com>
Date: Fri, 28 Jun 2024 16:18:06 +0200
Subject: [PATCH 2/5] fix: fix rebase issues

---
 .../[tokenId]/components/token-actions-buttons.tsx           | 5 +++--
 .../[contractAddress]/[tokenId]/components/token-summary.tsx | 2 +-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-actions-buttons.tsx b/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-actions-buttons.tsx
index e29e4588..4ad09aa8 100644
--- a/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-actions-buttons.tsx
+++ b/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-actions-buttons.tsx
@@ -1,11 +1,12 @@
 "use client";
 
 import { useRef } from "react";
-import { useInView } from "framer-motion";
+
+// import { useInView } from "framer-motion";
 
 import type { Token, TokenMarketData } from "~/types";
 import TokenActionsAcceptBestOffer from "./token-actions-accept-best-offer";
-import TokenActionsBar from "./token-actions-bar";
+// import TokenActionsBar from "./token-actions-bar";
 import TokenActionsCancelListing from "./token-actions-cancel-listing";
 import { TokenActionsCreateListing } from "./token-actions-create-listing";
 import TokenActionsMakeBid from "./token-actions-make-bid";
diff --git a/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-summary.tsx b/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-summary.tsx
index a791020f..293dc8d7 100644
--- a/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-summary.tsx
+++ b/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-summary.tsx
@@ -63,7 +63,7 @@ export default function TokenSummary({
             <Share2 className="size-6 text-muted-foreground" />
             <CopyButton
               className="size-6 text-muted-foreground"
-              textToCopy={collection.contract_address}
+              textToCopy={contractAddress}
             />
             <RefreshCw className="size-6 text-muted-foreground" />
           </div>

From 611b03ce8e69c08c5c82f84b7ec8bb307731a179 Mon Sep 17 00:00:00 2001
From: paul launay <launay.p@gmail.com>
Date: Fri, 28 Jun 2024 16:18:35 +0200
Subject: [PATCH 3/5] feat: update button styles

---
 packages/ui/src/button.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/button.tsx b/packages/ui/src/button.tsx
index e518f8a2..2fab5864 100644
--- a/packages/ui/src/button.tsx
+++ b/packages/ui/src/button.tsx
@@ -26,7 +26,7 @@ const buttonVariants = cva(
         lg: "h-12 px-4",
         xl: "h-14 px-4 text-base",
         icon: "h-12 w-12",
-        "icon-small": "rounded-xs h-8 w-8",
+        "icon-small": "h-8 w-8 rounded-xs",
       },
     },
     defaultVariants: {

From d4873d57f4c2bd40d623bf115ec8a5ef34ae49ab Mon Sep 17 00:00:00 2001
From: paul launay <launay.p@gmail.com>
Date: Fri, 28 Jun 2024 16:20:36 +0200
Subject: [PATCH 4/5] fix: remove unused import

---
 .../arkmarket/src/app/token/[contractAddress]/[tokenId]/page.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/page.tsx b/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/page.tsx
index 24fa9416..68c2795c 100644
--- a/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/page.tsx
+++ b/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/page.tsx
@@ -1,7 +1,6 @@
 import { notFound } from "next/navigation";
 
 import {
-  getCollection,
   getCollectionToken,
   getOrderbookCollectionToken,
 } from "~/app/assets/[contract_address]/[token_id]/data";

From 1835d46d57de68064bcf8d21559deac436db8c9d Mon Sep 17 00:00:00 2001
From: paul launay <launay.p@gmail.com>
Date: Fri, 28 Jun 2024 16:31:23 +0200
Subject: [PATCH 5/5] fix: tryfix preview status error

---
 .../[tokenId]/components/tokens-actions-buy-now.tsx             | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/tokens-actions-buy-now.tsx b/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/tokens-actions-buy-now.tsx
index c96f3db5..b6af6a29 100644
--- a/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/tokens-actions-buy-now.tsx
+++ b/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/tokens-actions-buy-now.tsx
@@ -30,6 +30,8 @@ export default function TokenActionsBuyNow({
   const { address, account } = useAccount();
   const isOwner = areAddressesEqual(token.owner, address);
 
+  console.log("status", status);
+
   const handeClick = async () => {
     setIsOpen(true);
     await fulfillListing({