Dashboard: Migrate marketplace contract pages from chakra to tailwind (#7730)

<!--

## 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 focuses on improving the UI components and their functionality in the dashboard application, particularly around NFT listings, by enhancing type safety, optimizing rendering, and updating UI elements for better usability.

### Detailed summary
- Made `image_url` optional in `getWalletNFTs.ts`.
- Updated button styles and sizes in `list-button.tsx`.
- Enhanced `CurrencySelector` component with better class management.
- Refactored `ContractDirectListingsPage` and `ContractEnglishAuctionsPage` to use `props`.
- Improved `ListingDrawer` layout and added table components for better data presentation.
- Refined `MarketplaceTable` to handle pagination and data fetching more efficiently.
- Updated listing forms to use new UI components and improved validation.
- Enhanced error handling and loading states across various components.

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

<!-- end pr-codex -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

* **New Features**
  * Enhanced currency selector with an icon-based back button and improved styling flexibility.

* **Refactor**
  * Migrated marketplace listing forms and tables to a new custom UI component library for a more consistent and modern interface.
  * Simplified and streamlined marketplace table and drawer components, removing legacy dependencies and improving layout.
  * Updated listing and auction pages to delegate call-to-action buttons for better composability.
  * Improved listing details drawer with a structured table layout and clearer asset information.

* **Bug Fixes**
  * Improved handling of missing NFT images to prevent errors when image URLs are unavailable.

* **Style**
  * Updated button and icon styles for a more polished user experience.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: MananTank

apps/dashboard/src/@/actions/getWalletNFTs.ts

@@ -98,7 +98,7 @@ export async function getWalletNFTs(params: {
 type OwnedNFTInsightResponse = {
   name: string;
   description: string;
-  image_url: string;
+  image_url?: string;
   background_color: string;
   external_url: string;
   metadata_url: string;
@@ -186,7 +186,7 @@ async function getWalletNFTsFromInsight(params: {
         description: nft.description,
         external_url: nft.external_url,
         image: isDev
-          ? nft.image_url.replace("ipfscdn.io/", "thirdwebstorage-dev.com/")
+          ? nft.image_url?.replace("ipfscdn.io/", "thirdwebstorage-dev.com/")
           : nft.image_url,
         name: nft.name,
         uri: isDev

apps/dashboard/src/@/components/blocks/CurrencySelector.tsx

@@ -1,3 +1,4 @@
+import { ArrowLeftIcon } from "lucide-react";
 import { useMemo, useState } from "react";
 import { isAddress, NATIVE_TOKEN_ADDRESS, ZERO_ADDRESS } from "thirdweb";
 import { Button } from "@/components/ui/button";
@@ -109,10 +110,10 @@ export function CurrencySelector({
           className="rounded-r-none rounded-l-md"
           onClick={() => setIsAddingCurrency(false)}
         >
-          <-
+          <ArrowLeftIcon className="size-4" />
         </Button>
         <Input
-          className="w-full rounded-none"
+          className={cn("w-full rounded-none", className)}
           onChange={(e) => setEditCustomCurrency(e.target.value)}
           placeholder="ERC20 Address"
           required
@@ -156,7 +157,7 @@ export function CurrencySelector({
               : value?.toLowerCase()
         }
       >
-        <SelectTrigger>
+        <SelectTrigger className={className}>
           <SelectValue placeholder="Select Currency" />
         </SelectTrigger>
         <SelectContent>

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

@@ -23,29 +23,27 @@ export const CancelTab: React.FC<CancelTabProps> = ({
     : cancelListing({ contract, listingId: BigInt(id) });
   const cancelQuery = useSendAndConfirmTransaction();
   return (
-    <div className="flex flex-col gap-3 pt-3">
-      <TransactionButton
-        className="self-end"
-        client={contract.client}
-        isLoggedIn={isLoggedIn}
-        isPending={cancelQuery.isPending}
-        onClick={() => {
-          const promise = cancelQuery.mutateAsync(transaction, {
-            onError: (error) => {
-              console.error(error);
-            },
-          });
-          toast.promise(promise, {
-            error: "Failed to cancel",
-            loading: `Cancelling ${isAuction ? "auction" : "listing"}`,
-            success: "Item cancelled successfully",
-          });
-        }}
-        transactionCount={1}
-        txChainID={contract.chain.id}
-      >
-        Cancel {isAuction ? "Auction" : "Listing"}
-      </TransactionButton>
-    </div>
+    <TransactionButton
+      className="self-end"
+      client={contract.client}
+      isLoggedIn={isLoggedIn}
+      isPending={cancelQuery.isPending}
+      onClick={() => {
+        const promise = cancelQuery.mutateAsync(transaction, {
+          onError: (error) => {
+            console.error(error);
+          },
+        });
+        toast.promise(promise, {
+          error: "Failed to cancel",
+          loading: `Cancelling ${isAuction ? "auction" : "listing"}`,
+          success: "Item cancelled successfully",
+        });
+      }}
+      transactionCount={1}
+      txChainID={contract.chain.id}
+    >
+      Cancel {isAuction ? "Auction" : "Listing"}
+    </TransactionButton>
   );
 };

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

@@ -51,8 +51,14 @@ export const CreateListingButton: React.FC<CreateListingButtonProps> = ({
     <ListerOnly contract={contract}>
       <Sheet onOpenChange={setOpen} open={open}>
         <SheetTrigger asChild>
-          <Button variant="primary" {...restButtonProps} disabled={!address}>
-            {createText} <PlusIcon className="ml-2 size-5" />
+          <Button
+            {...restButtonProps}
+            disabled={!address}
+            className="gap-2"
+            size="sm"
+          >
+            <PlusIcon className="size-4" />
+            {createText}
           </Button>
         </SheetTrigger>
         <SheetContent className="w-full overflow-y-auto sm:min-w-[540px] lg:min-w-[700px]">