From 453e45bd528c7cc6b7b67309b9f1332bfedaaa46 Mon Sep 17 00:00:00 2001
From: kien-ngo <github@kien.ngo>
Date: Mon, 11 Nov 2024 00:09:18 +0000
Subject: [PATCH] [Dashboard] Remove tw-components from marketplace components
 (#5367)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on replacing the `tw-components` library's `Text` and `Heading` components with standard HTML elements like `<p>` and `<div>` to simplify the code structure and improve styling consistency across various components in the dashboard.

### Detailed summary
- Replaced `Text` components with `<p>` in `csv-data-table.tsx`, `ContractDirectListingsPage.tsx`, and `ContractEnglishAuctionsPage.tsx`.
- Changed `Heading` components to `<p>` in multiple files for consistency.
- Updated button variants from `solid` to `default` in `marketplace-table.tsx`.
- Removed unnecessary imports of `Text` and `Heading` from `tw-components` in several files.
- Adjusted styling classes for better alignment and consistency.
- Enhanced layout structure in the `ListingDrawer` and `CreateListingsForm` components.

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

<!-- end pr-codex -->
---
 .../(marketplace)/components/list-form.tsx    | 50 +++++---------
 .../components/listing-drawer.tsx             | 68 ++++++++-----------
 .../components/marketplace-table.tsx          | 34 +++++-----
 .../ContractDirectListingsPage.tsx            |  3 +-
 .../ContractEnglishAuctionsPage.tsx           |  3 +-
 .../_components/csv-data-table.tsx            |  5 +-
 6 files changed, 67 insertions(+), 96 deletions(-)

diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/list-form.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/list-form.tsx
index 88cab8d9926..50507f5b34a 100644
--- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/list-form.tsx
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/list-form.tsx
@@ -22,6 +22,7 @@ import { isMoralisSupported } from "lib/wallet/nfts/moralis";
 import { isSimpleHashSupported } from "lib/wallet/nfts/simpleHash";
 import type { WalletNFT } from "lib/wallet/nfts/types";
 import { CircleAlertIcon, InfoIcon } from "lucide-react";
+import Link from "next/link";
 import { type Dispatch, type SetStateAction, useMemo, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -47,14 +48,7 @@ import type {
   CreateListingParams,
 } from "thirdweb/extensions/marketplace";
 import { useActiveAccount, useSendAndConfirmTransaction } from "thirdweb/react";
-import {
-  FormErrorMessage,
-  FormHelperText,
-  FormLabel,
-  Heading,
-  Link,
-  Text,
-} from "tw-components";
+import { FormErrorMessage, FormHelperText, FormLabel } from "tw-components";
 import { NFTMediaWithEmptyState } from "tw-components/nft-media";
 import { shortenIfAddress } from "utils/usedapp-external";
 
@@ -357,9 +351,7 @@ export const CreateListingsForm: React.FC<CreateListingsFormProps> = ({
       })}
     >
       <FormControl>
-        <Heading as={FormLabel} size="label.lg">
-          Select NFT
-        </Heading>
+        <FormLabel>Select NFT</FormLabel>
         <FormHelperText mb="8px">
           Select the NFT you want to list for sale
         </FormHelperText>
@@ -367,24 +359,22 @@ export const CreateListingsForm: React.FC<CreateListingsFormProps> = ({
           <Flex flexDir="column" gap={4} mb={4}>
             <div className="flex flex-row items-center gap-3 rounded-md border border-border border-orange-100 bg-orange-50 p-[10px] dark:border-orange-300 dark:bg-orange-300">
               <InfoIcon className="size-6 text-orange-400 dark:text-orange-900" />
-              <Text color="orange.800" _dark={{ color: "orange.900" }}>
+              <p className="text-orange-800 dark:text-orange-900">
                 This chain is not supported by our NFT API yet, please enter the
                 contract address of the NFT you want to list.
-              </Text>
+              </p>
             </div>
             <FormControl
               isInvalid={!!form.formState.errors.selected?.contractAddress}
             >
-              <Heading as={FormLabel} size="label.lg">
-                Contract address
-              </Heading>
+              <FormLabel>Contract address</FormLabel>
               <SolidityInput
                 solidityType="address"
                 formContext={form}
                 {...form.register("selected.contractAddress", {
                   required: "Contract address is required",
                 })}
-                placeholder=""
+                placeholder="0x..."
               />
               <FormErrorMessage>
                 {form.formState.errors.selected?.contractAddress?.message}
@@ -458,21 +448,19 @@ export const CreateListingsForm: React.FC<CreateListingsFormProps> = ({
         ) : nfts && nfts.length === 0 ? (
           <div className="flex flex-row items-center gap-3 rounded-md border border-border border-orange-100 bg-orange-50 p-[10px] dark:border-orange-300 dark:bg-orange-300">
             <InfoIcon className="size-6 text-orange-400 dark:text-orange-900" />
-            <Text color="orange.800" _dark={{ color: "orange.900" }}>
+            <p className="text-orange-800 dark:text-orange-900">
               There are no NFTs owned by this wallet. You need NFTs to create a
               listing. You can create NFTs with thirdweb.{" "}
-              <Link href="/explore/nft" color="blue.600" isExternal>
+              <Link href="/explore/nft" color="blue.600" target="_blank">
                 Explore NFT contracts
               </Link>
               .
-            </Text>
+            </p>
           </div>
         ) : null}
       </FormControl>
       <FormControl isRequired isDisabled={noNfts}>
-        <Heading as={FormLabel} size="label.lg">
-          Listing Currency
-        </Heading>
+        <FormLabel>Listing Currency</FormLabel>
         <CurrencySelector
           contractChainId={chainId}
           value={form.watch("currencyContractAddress")}
@@ -485,11 +473,11 @@ export const CreateListingsForm: React.FC<CreateListingsFormProps> = ({
         </FormHelperText>
       </FormControl>
       <FormControl isRequired isDisabled={noNfts}>
-        <Heading as={FormLabel} size="label.lg">
+        <FormLabel>
           {form.watch("listingType") === "auction"
             ? "Buyout Price Per Token"
             : "Listing Price"}
-        </Heading>
+        </FormLabel>
         <Input {...form.register("pricePerToken")} />
         <FormHelperText>
           {form.watch("listingType") === "auction"
@@ -500,9 +488,7 @@ export const CreateListingsForm: React.FC<CreateListingsFormProps> = ({
       {form.watch("selected")?.type?.toLowerCase() !== "erc721" && (
         <FormControl isRequired isDisabled={noNfts}>
           <div className="flex flex-row justify-between gap-2">
-            <Heading as={FormLabel} size="label.lg">
-              Quantity
-            </Heading>
+            <FormLabel>Quantity</FormLabel>
           </div>
           <Input {...form.register("quantity")} />
           <FormHelperText>
@@ -513,18 +499,14 @@ export const CreateListingsForm: React.FC<CreateListingsFormProps> = ({
       {form.watch("listingType") === "auction" && (
         <>
           <FormControl isRequired isDisabled={noNfts}>
-            <Heading as={FormLabel} size="label.lg">
-              Reserve Price Per Token
-            </Heading>
+            <FormLabel>Reserve Price Per Token</FormLabel>
             <Input {...form.register("reservePricePerToken")} />
             <FormHelperText>
               The minimum price per token necessary to bid on this auction
             </FormHelperText>
           </FormControl>
           <FormControl isRequired>
-            <Heading as={FormLabel} size="label.lg">
-              Auction Duration
-            </Heading>
+            <FormLabel>Auction Duration</FormLabel>
             <Select {...form.register("listingDurationInSeconds")}>
               {auctionTimes.map((time) => (
                 <option key={time.value} value={time.value}>
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 f8320567e69..d414680f7c4 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
@@ -1,6 +1,8 @@
 import { WalletAddress } from "@/components/blocks/wallet-address";
 import { CopyAddressButton } from "@/components/ui/CopyAddressButton";
 import { CopyTextButton } from "@/components/ui/CopyTextButton";
+import { Badge } from "@/components/ui/badge";
+import { Card } from "@/components/ui/card";
 import { Sheet, SheetContent } from "@/components/ui/sheet";
 import { Flex, GridItem, SimpleGrid, usePrevious } from "@chakra-ui/react";
 import type { ThirdwebContract } from "thirdweb";
@@ -9,7 +11,8 @@ import type {
   EnglishAuction,
 } from "thirdweb/extensions/marketplace";
 import { useActiveAccount } from "thirdweb/react";
-import { Badge, Card, CodeBlock, Heading, Text } from "tw-components";
+
+import { CodeBlock } from "@/components/ui/CodeBlock";
 import { NFTMediaWithEmptyState } from "tw-components/nft-media";
 import { CancelTab } from "./cancel-tab";
 import { LISTING_STATUS } from "./types";
@@ -51,18 +54,20 @@ export const ListingDrawer: React.FC<NFTDrawerProps> = ({
             height="150px"
           />
           <Flex flexDir="column" gap={2} w="70%">
-            <Heading size="title.lg">{renderData.asset.metadata.name}</Heading>
-            <Text size="label.md" noOfLines={6}>
+            <p className="font-bold text-lg">
+              {renderData.asset.metadata.name}
+            </p>
+            <p className="line-clamp-6 truncate text-base leading-normal">
               {renderData.asset.metadata.name}
-            </Text>
+            </p>
           </Flex>
         </div>
 
         <Flex flexDir="column" gap={4}>
-          <Card as={Flex} flexDir="column" gap={3}>
+          <Card className="flex flex-col gap-3 p-4">
             <SimpleGrid rowGap={3} columns={12} placeItems="center left">
               <GridItem colSpan={3}>
-                <Heading size="label.md">Asset contract address</Heading>
+                <p className="font-bold">Asset contract address</p>
               </GridItem>
               <GridItem colSpan={9}>
                 <CopyAddressButton
@@ -71,7 +76,7 @@ export const ListingDrawer: React.FC<NFTDrawerProps> = ({
                 />
               </GridItem>
               <GridItem colSpan={3}>
-                <Heading size="label.md">Token ID</Heading>
+                <p className="font-bold">Token ID</p>
               </GridItem>
               <GridItem colSpan={9}>
                 <CopyTextButton
@@ -82,13 +87,13 @@ export const ListingDrawer: React.FC<NFTDrawerProps> = ({
                 />
               </GridItem>
               <GridItem colSpan={3}>
-                <Heading size="label.md">Seller</Heading>
+                <p className="font-bold">Seller</p>
               </GridItem>
               <GridItem colSpan={9}>
                 <WalletAddress address={renderData.creatorAddress} />
               </GridItem>
               <GridItem colSpan={3}>
-                <Heading size="label.md">Listing ID</Heading>
+                <p className="font-bold">Listing ID</p>
               </GridItem>
               <GridItem colSpan={9}>
                 <CopyTextButton
@@ -99,49 +104,37 @@ export const ListingDrawer: React.FC<NFTDrawerProps> = ({
                 />
               </GridItem>
               <GridItem colSpan={3}>
-                <Heading size="label.md">Type</Heading>
-              </GridItem>
-              <GridItem colSpan={9}>
-                <Text fontFamily="mono" size="body.md">
-                  {renderData.asset.type}
-                </Text>
+                <p className="font-bold">Type</p>
               </GridItem>
+              <GridItem colSpan={9}>{renderData.asset.type}</GridItem>
               <GridItem colSpan={3}>
-                <Heading size="label.md">Status</Heading>
+                <p className="font-bold">Status</p>
               </GridItem>
               <GridItem colSpan={9}>
-                <Badge
-                  size="label.sm"
-                  variant="subtle"
-                  textTransform="capitalize"
-                >
+                <Badge className="uppercase">
                   {LISTING_STATUS[renderData.status]}
                 </Badge>
               </GridItem>
               <GridItem colSpan={3}>
-                <Heading size="label.md">Quantity</Heading>
+                <p className="font-bold">Quantity</p>
               </GridItem>
               <GridItem colSpan={9}>
-                <Text fontFamily="mono" size="body.md">
-                  {(renderData.quantity || 0n).toString()}{" "}
-                  {/* For listings that are completed, the `quantity` would be `0`
+                {(renderData.quantity || 0n).toString()}{" "}
+                {/* For listings that are completed, the `quantity` would be `0`
                     So we show this text to make it clear */}
-                  {LISTING_STATUS[renderData.status] === "Completed"
-                    ? "(Sold out)"
-                    : ""}
-                </Text>
+                {LISTING_STATUS[renderData.status] === "Completed"
+                  ? "(Sold out)"
+                  : ""}
               </GridItem>
 
               {renderData.type === "direct-listing" && (
                 <>
                   <GridItem colSpan={3}>
-                    <Heading size="label.md">Price</Heading>
+                    <p className="font-bold">Price</p>
                   </GridItem>
                   <GridItem colSpan={9}>
-                    <Text fontFamily="mono" size="body.md">
-                      {renderData.currencyValuePerToken.displayValue}{" "}
-                      {renderData.currencyValuePerToken.symbol}
-                    </Text>
+                    {renderData.currencyValuePerToken.displayValue}{" "}
+                    {renderData.currencyValuePerToken.symbol}
                   </GridItem>
                 </>
               )}
@@ -153,16 +146,15 @@ export const ListingDrawer: React.FC<NFTDrawerProps> = ({
             </SimpleGrid>
           </Card>
           {data?.asset.metadata.properties ? (
-            <Card as={Flex} flexDir="column" gap={4}>
-              <Heading size="label.md">Attributes</Heading>
+            <Card className="flex flex-col gap-3 p-4">
+              <p className="font-bold">Attributes</p>
               <CodeBlock
                 code={
                   JSON.stringify(data.asset.metadata.properties, null, 2) || ""
                 }
                 language="json"
                 canCopy={false}
-                wrap={false}
-                overflow="auto"
+                className="overflow-auto"
               />
             </Card>
           ) : null}
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/marketplace-table.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/marketplace-table.tsx
index 1784e397011..5cae3fc813b 100644
--- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/marketplace-table.tsx
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/marketplace-table.tsx
@@ -1,7 +1,6 @@
 import { WalletAddress } from "@/components/blocks/wallet-address";
+import { Button } from "@/components/ui/button";
 import {
-  ButtonGroup,
-  Flex,
   IconButton,
   Select,
   Skeleton,
@@ -38,7 +37,6 @@ import type {
   EnglishAuction,
 } from "thirdweb/extensions/marketplace";
 import { min } from "thirdweb/utils";
-import { Button, Text } from "tw-components";
 import { ListingDrawer } from "./listing-drawer";
 import { LISTING_STATUS } from "./types";
 
@@ -73,9 +71,9 @@ const tableColumns: Column<DirectListing | EnglishAuction>[] = [
     // biome-ignore lint/suspicious/noExplicitAny: FIXME
     Cell: ({ cell }: { cell: Cell<any, any> }) => {
       return (
-        <Text size="label.md" whiteSpace="nowrap">
+        <p className="whitespace-nowrap text-muted-foreground">
           {cell.value.displayValue} {cell.value.symbol}
-        </Text>
+        </p>
       );
     },
   },
@@ -182,21 +180,23 @@ export const MarketplaceTable: React.FC<MarketplaceTableProps> = ({
   >(null);
 
   return (
-    <Flex gap={4} direction="column">
-      <ButtonGroup size="sm" variant="outline" isAttached>
+    <div className="flex flex-col gap-4">
+      <div className="flex flex-row">
         <Button
           onClick={() => setListingsToShow("all")}
-          variant={listingsToShow === "all" ? "solid" : "outline"}
+          variant={listingsToShow === "all" ? "default" : "outline"}
+          className="w-18 rounded-r-none"
         >
           All
         </Button>
         <Button
           onClick={() => setListingsToShow("valid")}
-          variant={listingsToShow === "valid" ? "solid" : "outline"}
+          variant={listingsToShow === "valid" ? "default" : "outline"}
+          className="rounded-l-none"
         >
           Valid
         </Button>
-      </ButtonGroup>
+      </div>
       <TableContainer maxW="100%" className="relative">
         {((listingsToShow === "all" && getAllQueryResult.isFetching) ||
           (listingsToShow === "valid" && getValidQueryResult.isFetching)) && (
@@ -226,9 +226,9 @@ export const MarketplaceTable: React.FC<MarketplaceTableProps> = ({
                     // biome-ignore lint/suspicious/noArrayIndexKey: FIXME
                     key={columnIndex}
                   >
-                    <Text as="label" size="label.sm" color="faded">
+                    <p className="text-muted-foreground">
                       {column.render("Header")}
-                    </Text>
+                    </p>
                   </Th>
                 ))}
                 {/* // Need to add an empty header for the drawer button */}
@@ -273,7 +273,7 @@ export const MarketplaceTable: React.FC<MarketplaceTableProps> = ({
         </Table>
       </TableContainer>
       <div className="flex w-full items-center justify-center">
-        <Flex gap={2} direction="row" align="center">
+        <div className="flex flex-row items-center gap-2">
           <IconButton
             isDisabled={!canPreviousPage || totalCountQuery.isPending}
             aria-label="first page"
@@ -286,7 +286,7 @@ export const MarketplaceTable: React.FC<MarketplaceTableProps> = ({
             icon={<ChevronLeftIcon className="size-4" />}
             onClick={() => previousPage()}
           />
-          <Text whiteSpace="nowrap">
+          <p className="whitespace-nowrap">
             Page <strong>{pageIndex + 1}</strong> of{" "}
             <Skeleton
               as="span"
@@ -295,7 +295,7 @@ export const MarketplaceTable: React.FC<MarketplaceTableProps> = ({
             >
               <strong>{pageCount}</strong>
             </Skeleton>
-          </Text>
+          </p>
           <IconButton
             isDisabled={!canNextPage || totalCountQuery.isPending}
             aria-label="next page"
@@ -322,8 +322,8 @@ export const MarketplaceTable: React.FC<MarketplaceTableProps> = ({
             <option value="250">250</option>
             <option value="500">500</option>
           </Select>
-        </Flex>
+        </div>
       </div>
-    </Flex>
+    </div>
   );
 };
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/direct-listings/ContractDirectListingsPage.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/direct-listings/ContractDirectListingsPage.tsx
index 84374f3bb1f..0db0032f7a0 100644
--- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/direct-listings/ContractDirectListingsPage.tsx
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/direct-listings/ContractDirectListingsPage.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 import type { ThirdwebContract } from "thirdweb";
-import { Heading } from "tw-components";
 import { CreateListingButton } from "../components/list-button";
 import { DirectListingsTable } from "./components/table";
 
@@ -15,7 +14,7 @@ export const ContractDirectListingsPage: React.FC<
   return (
     <div className="flex flex-col gap-6">
       <div className="flex flex-row items-center justify-between">
-        <Heading size="title.sm">Contract Listings</Heading>
+        <p className="text-lg">Contract Listings</p>
         <div className="flex flex-row gap-4">
           <CreateListingButton
             contract={contract}
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/english-auctions/ContractEnglishAuctionsPage.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/english-auctions/ContractEnglishAuctionsPage.tsx
index 9ae85672039..94a49703c96 100644
--- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/english-auctions/ContractEnglishAuctionsPage.tsx
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/english-auctions/ContractEnglishAuctionsPage.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 import type { ThirdwebContract } from "thirdweb";
-import { Heading } from "tw-components";
 import { CreateListingButton } from "../components/list-button";
 import { EnglishAuctionsTable } from "./components/table";
 
@@ -15,7 +14,7 @@ export const ContractEnglishAuctionsPage: React.FC<
   return (
     <div className="flex flex-col gap-6">
       <div className="flex flex-row items-center justify-between">
-        <Heading size="title.sm">Contract Auctions</Heading>
+        <p className="text-lg">Contract Auctions</p>
         <div className="flex flex-row gap-4">
           <CreateListingButton
             contract={contract}
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/csv-data-table.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/csv-data-table.tsx
index 21d502c53c8..a0605e54cdc 100644
--- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/csv-data-table.tsx
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/csv-data-table.tsx
@@ -17,7 +17,6 @@ import {
   ChevronRightIcon,
 } from "lucide-react";
 import { type Column, usePagination, useTable } from "react-table";
-import { Text } from "tw-components";
 
 interface CsvDataTableProps<T extends object> {
   data: T[];
@@ -78,9 +77,9 @@ export function CsvDataTable<T extends object>({
                     // biome-ignore lint/suspicious/noArrayIndexKey: FIXME
                     key={columnIndex}
                   >
-                    <Text as="label" size="label.sm" color="faded">
+                    <p className="text-muted-foreground">
                       {column.render("Header")}
-                    </Text>
+                    </p>
                   </Th>
                 ))}
               </Tr>