[Dashboard] Remove unnecessary chakra-ui Tabs in Listing sheet (#5076)

Remove unnecessary Tabs, just put the button at the bottom, since there's ever been only 1 tab anyway

![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/VtULqGKSp33n0VHOzNJK/53a75b30-20b2-471c-9566-4b022a96b616.png)

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on refactoring the marketplace components by removing unused files and consolidating the listing cancellation functionality into a single component, `CancelTab`. It also enhances the `ListingDrawer` component with improved UI elements for displaying asset information.

### Detailed summary
- Deleted `CancelDirectListing.tsx` and `CancelEnglishAuction.tsx`.
- Introduced `CancelTab` for handling cancellation of listings and auctions.
- Updated `ListingDrawer` to use `CancelTab`.
- Replaced `useTxNotifications` with `toast` for transaction feedback.
- Added `CopyAddressButton` and `CopyTextButton` for better user interaction.
- Refactored asset details display in `ListingDrawer` for improved readability.

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

<!-- end pr-codex -->

Author: kien-ngo

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/CancelDirectListing.tsx

@@ -3,7 +3,7 @@
 import { TransactionButton } from "components/buttons/TransactionButton";
 import { useTrack } from "hooks/analytics/useTrack";
 import { useAllChainsData } from "hooks/chains/allChains";
-import { useTxNotifications } from "hooks/useTxNotifications";
+import { toast } from "sonner";
 import type { ThirdwebContract } from "thirdweb";
 import { cancelAuction, cancelListing } from "thirdweb/extensions/marketplace";
 import { useSendAndConfirmTransaction } from "thirdweb/react";
@@ -25,14 +25,9 @@ export const CancelTab: React.FC<CancelTabProps> = ({
   const transaction = isAuction
     ? cancelAuction({ contract, auctionId: BigInt(id) })
     : cancelListing({ contract, listingId: BigInt(id) });
-  const { onSuccess, onError } = useTxNotifications(
-    "Listing cancelled",
-    "Error cancelling listing",
-  );
   const cancelQuery = useSendAndConfirmTransaction();
   return (
     <div className="flex flex-col gap-3 pt-3">
-      {/* maybe some text? */}
       <TransactionButton
         txChainID={contract.chain.id}
         transactionCount={1}
@@ -43,15 +38,14 @@ export const CancelTab: React.FC<CancelTabProps> = ({
             action: "cancel-listing",
             label: "attempt",
           });
-          cancelQuery.mutate(transaction, {
+          const promise = cancelQuery.mutateAsync(transaction, {
             onSuccess: () => {
               trackEvent({
                 category: "marketplace",
                 action: "cancel-listing",
                 label: "success",
                 network,
               });
-              onSuccess();
             },
             onError: (error) => {
               trackEvent({
@@ -61,14 +55,19 @@ export const CancelTab: React.FC<CancelTabProps> = ({
                 network,
                 error,
               });
-              onError(error);
+              console.error(error);
             },
           });
+          toast.promise(promise, {
+            loading: `Cancelling ${isAuction ? "auction" : "listing"}`,
+            success: "Item cancelled successfully",
+            error: "Failed to cancel",
+          });
         }}
         colorScheme="primary"
         alignSelf="flex-end"
       >
-        Cancel Listing
+        Cancel {isAuction ? "Auction" : "Listing"}
       </TransactionButton>
     </div>
   );