From 24319f45707a198a1fd9120154b86d6e4a1f3dd1 Mon Sep 17 00:00:00 2001
From: MananTank <manantankm@gmail.com>
Date: Fri, 18 Apr 2025 09:15:29 +0000
Subject: [PATCH] [TOOL-4175] Dashboard: Add buy listing button in listing
 drawer in marketplace (#6757)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR introduces the `BuyDirectListingButton` component into the `ListingDrawer` component, enhancing the marketplace functionality by allowing users to buy listings directly. It also updates documentation and adds error handling for the transaction process.

### Detailed summary
- Updated documentation for the `BuyDirectListingButton` to specify `BuyDirectListingButtonProps`.
- Imported `BuyDirectListingButton` in `listing-drawer.tsx`.
- Implemented the `BuyDirectListingButton` in the `ListingDrawer` component.
- Added error and success toast notifications for transaction outcomes.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
---
 .../components/listing-drawer.tsx             | 29 +++++++++++++++----
 .../thirdweb/BuyDirectListingButton/index.tsx |  5 +---
 2 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/listing-drawer.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/listing-drawer.tsx
index 3710305c378..8a70bc72cc6 100644
--- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/listing-drawer.tsx
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/listing-drawer.tsx
@@ -10,10 +10,11 @@ import type {
   DirectListing,
   EnglishAuction,
 } from "thirdweb/extensions/marketplace";
-import { useActiveAccount } from "thirdweb/react";
+import { BuyDirectListingButton, useActiveAccount } from "thirdweb/react";
 
 import { CodeClient } from "@/components/ui/code/code.client";
 import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
+import { toast } from "sonner";
 import { NFTMediaWithEmptyState } from "tw-components/nft-media";
 import { CancelTab } from "./cancel-tab";
 import { LISTING_STATUS } from "./types";
@@ -141,11 +142,6 @@ export const ListingDrawer: React.FC<NFTDrawerProps> = ({
                   </GridItem>
                 </>
               )}
-
-              {/*
-                  Todo: Add a Buy button somewhere in this section once the Dashboard is fully migrated to v5 (?)
-                  Kien already shipped a prebuilt component for the Marketplace Buy Button in SDK v5
-                */}
             </SimpleGrid>
           </Card>
           {data?.asset.metadata.properties ? (
@@ -168,6 +164,27 @@ export const ListingDrawer: React.FC<NFTDrawerProps> = ({
             twAccount={twAccount}
           />
         )}
+
+        {!isOwner && renderData.status === "ACTIVE" && (
+          <BuyDirectListingButton
+            listingId={renderData.id}
+            contractAddress={renderData.assetContractAddress}
+            chain={contract.chain}
+            client={contract.client}
+            className="w-full"
+            quantity={1n}
+            onError={(error) => {
+              toast.error("Failed to buy listing", {
+                description: error.message,
+              });
+            }}
+            onTransactionConfirmed={() => {
+              toast.success("Listing bought successfully");
+            }}
+          >
+            Buy Listing
+          </BuyDirectListingButton>
+        )}
       </SheetContent>
     </Sheet>
   );
diff --git a/packages/thirdweb/src/react/web/ui/prebuilt/thirdweb/BuyDirectListingButton/index.tsx b/packages/thirdweb/src/react/web/ui/prebuilt/thirdweb/BuyDirectListingButton/index.tsx
index 6fcee3d6fc8..51a73da4b00 100644
--- a/packages/thirdweb/src/react/web/ui/prebuilt/thirdweb/BuyDirectListingButton/index.tsx
+++ b/packages/thirdweb/src/react/web/ui/prebuilt/thirdweb/BuyDirectListingButton/index.tsx
@@ -57,10 +57,7 @@ export type BuyDirectListingButtonProps = Omit<
  * Since it uses the TransactionButton, it can take in any props that can be passed
  * to the [`TransactionButton`](https://portal.thirdweb.com/references/typescript/v5/TransactionButton)
  *
- *
- * @param props
- * @returns <TransactionButton />
- *
+ * @param props props of type [BuyDirectListingButtonProps](https://portal.thirdweb.com/references/typescript/v5/BuyDirectListingButtonProps)
  * @example
  * ```tsx
  * import { BuyDirectListingButton } from "thirdweb/react";