Dashboard: Migrate marketplace contract pages from chakra to tailwind

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]">