Skip to content

Commit 75c4d12

Browse files
kien-ngokien-ngo
committed
[Dashboard] Remove tw-components from marketplace components
1 parent 535e1df commit 75c4d12

File tree

6 files changed

+67
-96
lines changed

6 files changed

+67
-96
lines changed

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

Lines changed: 16 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import { isMoralisSupported } from "lib/wallet/nfts/moralis";
2222
import { isSimpleHashSupported } from "lib/wallet/nfts/simpleHash";
2323
import type { WalletNFT } from "lib/wallet/nfts/types";
2424
import { CircleAlertIcon, InfoIcon } from "lucide-react";
25+
import Link from "next/link";
2526
import { type Dispatch, type SetStateAction, useMemo, useState } from "react";
2627
import { useForm } from "react-hook-form";
2728
import { toast } from "sonner";
@@ -47,14 +48,7 @@ import type {
4748
CreateListingParams,
4849
} from "thirdweb/extensions/marketplace";
4950
import { useActiveAccount, useSendAndConfirmTransaction } from "thirdweb/react";
50-
import {
51-
FormErrorMessage,
52-
FormHelperText,
53-
FormLabel,
54-
Heading,
55-
Link,
56-
Text,
57-
} from "tw-components";
51+
import { FormErrorMessage, FormHelperText, FormLabel } from "tw-components";
5852
import { NFTMediaWithEmptyState } from "tw-components/nft-media";
5953
import { shortenIfAddress } from "utils/usedapp-external";
6054

@@ -357,34 +351,30 @@ export const CreateListingsForm: React.FC<CreateListingsFormProps> = ({
357351
})}
358352
>
359353
<FormControl>
360-
<Heading as={FormLabel} size="label.lg">
361-
Select NFT
362-
</Heading>
354+
<FormLabel>Select NFT</FormLabel>
363355
<FormHelperText mb="8px">
364356
Select the NFT you want to list for sale
365357
</FormHelperText>
366358
{!isSupportedChain ? (
367359
<Flex flexDir="column" gap={4} mb={4}>
368360
<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">
369361
<InfoIcon className="size-6 text-orange-400 dark:text-orange-900" />
370-
<Text color="orange.800" _dark={{ color: "orange.900" }}>
362+
<p className="text-orange-800 dark:text-orange-900">
371363
This chain is not supported by our NFT API yet, please enter the
372364
contract address of the NFT you want to list.
373-
</Text>
365+
</p>
374366
</div>
375367
<FormControl
376368
isInvalid={!!form.formState.errors.selected?.contractAddress}
377369
>
378-
<Heading as={FormLabel} size="label.lg">
379-
Contract address
380-
</Heading>
370+
<FormLabel>Contract address</FormLabel>
381371
<SolidityInput
382372
solidityType="address"
383373
formContext={form}
384374
{...form.register("selected.contractAddress", {
385375
required: "Contract address is required",
386376
})}
387-
placeholder=""
377+
placeholder="0x..."
388378
/>
389379
<FormErrorMessage>
390380
{form.formState.errors.selected?.contractAddress?.message}
@@ -458,21 +448,19 @@ export const CreateListingsForm: React.FC<CreateListingsFormProps> = ({
458448
) : nfts && nfts.length === 0 ? (
459449
<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">
460450
<InfoIcon className="size-6 text-orange-400 dark:text-orange-900" />
461-
<Text color="orange.800" _dark={{ color: "orange.900" }}>
451+
<p className="text-orange-800 dark:text-orange-900">
462452
There are no NFTs owned by this wallet. You need NFTs to create a
463453
listing. You can create NFTs with thirdweb.{" "}
464-
<Link href="/explore/nft" color="blue.600" isExternal>
454+
<Link href="/explore/nft" color="blue.600" target="_blank">
465455
Explore NFT contracts
466456
</Link>
467457
.
468-
</Text>
458+
</p>
469459
</div>
470460
) : null}
471461
</FormControl>
472462
<FormControl isRequired isDisabled={noNfts}>
473-
<Heading as={FormLabel} size="label.lg">
474-
Listing Currency
475-
</Heading>
463+
<FormLabel>Listing Currency</FormLabel>
476464
<CurrencySelector
477465
contractChainId={chainId}
478466
value={form.watch("currencyContractAddress")}
@@ -485,11 +473,11 @@ export const CreateListingsForm: React.FC<CreateListingsFormProps> = ({
485473
</FormHelperText>
486474
</FormControl>
487475
<FormControl isRequired isDisabled={noNfts}>
488-
<Heading as={FormLabel} size="label.lg">
476+
<FormLabel>
489477
{form.watch("listingType") === "auction"
490478
? "Buyout Price Per Token"
491479
: "Listing Price"}
492-
</Heading>
480+
</FormLabel>
493481
<Input {...form.register("pricePerToken")} />
494482
<FormHelperText>
495483
{form.watch("listingType") === "auction"
@@ -500,9 +488,7 @@ export const CreateListingsForm: React.FC<CreateListingsFormProps> = ({
500488
{form.watch("selected")?.type?.toLowerCase() !== "erc721" && (
501489
<FormControl isRequired isDisabled={noNfts}>
502490
<div className="flex flex-row justify-between gap-2">
503-
<Heading as={FormLabel} size="label.lg">
504-
Quantity
505-
</Heading>
491+
<FormLabel>Quantity</FormLabel>
506492
</div>
507493
<Input {...form.register("quantity")} />
508494
<FormHelperText>
@@ -513,18 +499,14 @@ export const CreateListingsForm: React.FC<CreateListingsFormProps> = ({
513499
{form.watch("listingType") === "auction" && (
514500
<>
515501
<FormControl isRequired isDisabled={noNfts}>
516-
<Heading as={FormLabel} size="label.lg">
517-
Reserve Price Per Token
518-
</Heading>
502+
<FormLabel>Reserve Price Per Token</FormLabel>
519503
<Input {...form.register("reservePricePerToken")} />
520504
<FormHelperText>
521505
The minimum price per token necessary to bid on this auction
522506
</FormHelperText>
523507
</FormControl>
524508
<FormControl isRequired>
525-
<Heading as={FormLabel} size="label.lg">
526-
Auction Duration
527-
</Heading>
509+
<FormLabel>Auction Duration</FormLabel>
528510
<Select {...form.register("listingDurationInSeconds")}>
529511
{auctionTimes.map((time) => (
530512
<option key={time.value} value={time.value}>

‎apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/listing-drawer.tsx‎

Lines changed: 30 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import { WalletAddress } from "@/components/blocks/wallet-address";
22
import { CopyAddressButton } from "@/components/ui/CopyAddressButton";
33
import { CopyTextButton } from "@/components/ui/CopyTextButton";
4+
import { Badge } from "@/components/ui/badge";
5+
import { Card } from "@/components/ui/card";
46
import { Sheet, SheetContent } from "@/components/ui/sheet";
57
import { Flex, GridItem, SimpleGrid, usePrevious } from "@chakra-ui/react";
68
import type { ThirdwebContract } from "thirdweb";
@@ -9,7 +11,8 @@ import type {
911
EnglishAuction,
1012
} from "thirdweb/extensions/marketplace";
1113
import { useActiveAccount } from "thirdweb/react";
12-
import { Badge, Card, CodeBlock, Heading, Text } from "tw-components";
14+
15+
import { CodeBlock } from "@/components/ui/CodeBlock";
1316
import { NFTMediaWithEmptyState } from "tw-components/nft-media";
1417
import { CancelTab } from "./cancel-tab";
1518
import { LISTING_STATUS } from "./types";
@@ -51,18 +54,20 @@ export const ListingDrawer: React.FC<NFTDrawerProps> = ({
5154
height="150px"
5255
/>
5356
<Flex flexDir="column" gap={2} w="70%">
54-
<Heading size="title.lg">{renderData.asset.metadata.name}</Heading>
55-
<Text size="label.md" noOfLines={6}>
57+
<p className="font-bold text-lg">
58+
{renderData.asset.metadata.name}
59+
</p>
60+
<p className="line-clamp-6 truncate text-base leading-normal">
5661
{renderData.asset.metadata.name}
57-
</Text>
62+
</p>
5863
</Flex>
5964
</div>
6065

6166
<Flex flexDir="column" gap={4}>
62-
<Card as={Flex} flexDir="column" gap={3}>
67+
<Card className="flex flex-col gap-3 p-4">
6368
<SimpleGrid rowGap={3} columns={12} placeItems="center left">
6469
<GridItem colSpan={3}>
65-
<Heading size="label.md">Asset contract address</Heading>
70+
<p className="font-bold">Asset contract address</p>
6671
</GridItem>
6772
<GridItem colSpan={9}>
6873
<CopyAddressButton
@@ -71,7 +76,7 @@ export const ListingDrawer: React.FC<NFTDrawerProps> = ({
7176
/>
7277
</GridItem>
7378
<GridItem colSpan={3}>
74-
<Heading size="label.md">Token ID</Heading>
79+
<p className="font-bold">Token ID</p>
7580
</GridItem>
7681
<GridItem colSpan={9}>
7782
<CopyTextButton
@@ -82,13 +87,13 @@ export const ListingDrawer: React.FC<NFTDrawerProps> = ({
8287
/>
8388
</GridItem>
8489
<GridItem colSpan={3}>
85-
<Heading size="label.md">Seller</Heading>
90+
<p className="font-bold">Seller</p>
8691
</GridItem>
8792
<GridItem colSpan={9}>
8893
<WalletAddress address={renderData.creatorAddress} />
8994
</GridItem>
9095
<GridItem colSpan={3}>
91-
<Heading size="label.md">Listing ID</Heading>
96+
<p className="font-bold">Listing ID</p>
9297
</GridItem>
9398
<GridItem colSpan={9}>
9499
<CopyTextButton
@@ -99,49 +104,37 @@ export const ListingDrawer: React.FC<NFTDrawerProps> = ({
99104
/>
100105
</GridItem>
101106
<GridItem colSpan={3}>
102-
<Heading size="label.md">Type</Heading>
103-
</GridItem>
104-
<GridItem colSpan={9}>
105-
<Text fontFamily="mono" size="body.md">
106-
{renderData.asset.type}
107-
</Text>
107+
<p className="font-bold">Type</p>
108108
</GridItem>
109+
<GridItem colSpan={9}>{renderData.asset.type}</GridItem>
109110
<GridItem colSpan={3}>
110-
<Heading size="label.md">Status</Heading>
111+
<p className="font-bold">Status</p>
111112
</GridItem>
112113
<GridItem colSpan={9}>
113-
<Badge
114-
size="label.sm"
115-
variant="subtle"
116-
textTransform="capitalize"
117-
>
114+
<Badge className="uppercase">
118115
{LISTING_STATUS[renderData.status]}
119116
</Badge>
120117
</GridItem>
121118
<GridItem colSpan={3}>
122-
<Heading size="label.md">Quantity</Heading>
119+
<p className="font-bold">Quantity</p>
123120
</GridItem>
124121
<GridItem colSpan={9}>
125-
<Text fontFamily="mono" size="body.md">
126-
{(renderData.quantity || 0n).toString()}{" "}
127-
{/* For listings that are completed, the `quantity` would be `0`
122+
{(renderData.quantity || 0n).toString()}{" "}
123+
{/* For listings that are completed, the `quantity` would be `0`
128124
So we show this text to make it clear */}
129-
{LISTING_STATUS[renderData.status] === "Completed"
130-
? "(Sold out)"
131-
: ""}
132-
</Text>
125+
{LISTING_STATUS[renderData.status] === "Completed"
126+
? "(Sold out)"
127+
: ""}
133128
</GridItem>
134129

135130
{renderData.type === "direct-listing" && (
136131
<>
137132
<GridItem colSpan={3}>
138-
<Heading size="label.md">Price</Heading>
133+
<p className="font-bold">Price</p>
139134
</GridItem>
140135
<GridItem colSpan={9}>
141-
<Text fontFamily="mono" size="body.md">
142-
{renderData.currencyValuePerToken.displayValue}{" "}
143-
{renderData.currencyValuePerToken.symbol}
144-
</Text>
136+
{renderData.currencyValuePerToken.displayValue}{" "}
137+
{renderData.currencyValuePerToken.symbol}
145138
</GridItem>
146139
</>
147140
)}
@@ -153,16 +146,15 @@ export const ListingDrawer: React.FC<NFTDrawerProps> = ({
153146
</SimpleGrid>
154147
</Card>
155148
{data?.asset.metadata.properties ? (
156-
<Card as={Flex} flexDir="column" gap={4}>
157-
<Heading size="label.md">Attributes</Heading>
149+
<Card className="flex flex-col gap-3 p-4">
150+
<p className="font-bold">Attributes</p>
158151
<CodeBlock
159152
code={
160153
JSON.stringify(data.asset.metadata.properties, null, 2) || ""
161154
}
162155
language="json"
163156
canCopy={false}
164-
wrap={false}
165-
overflow="auto"
157+
className="overflow-auto"
166158
/>
167159
</Card>
168160
) : null}

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

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { WalletAddress } from "@/components/blocks/wallet-address";
2+
import { Button } from "@/components/ui/button";
23
import {
3-
ButtonGroup,
4-
Flex,
54
IconButton,
65
Select,
76
Skeleton,
@@ -38,7 +37,6 @@ import type {
3837
EnglishAuction,
3938
} from "thirdweb/extensions/marketplace";
4039
import { min } from "thirdweb/utils";
41-
import { Button, Text } from "tw-components";
4240
import { ListingDrawer } from "./listing-drawer";
4341
import { LISTING_STATUS } from "./types";
4442

@@ -73,9 +71,9 @@ const tableColumns: Column<DirectListing | EnglishAuction>[] = [
7371
// biome-ignore lint/suspicious/noExplicitAny: FIXME
7472
Cell: ({ cell }: { cell: Cell<any, any> }) => {
7573
return (
76-
<Text size="label.md" whiteSpace="nowrap">
74+
<p className="whitespace-nowrap text-muted-foreground">
7775
{cell.value.displayValue} {cell.value.symbol}
78-
</Text>
76+
</p>
7977
);
8078
},
8179
},
@@ -182,21 +180,23 @@ export const MarketplaceTable: React.FC<MarketplaceTableProps> = ({
182180
>(null);
183181

184182
return (
185-
<Flex gap={4} direction="column">
186-
<ButtonGroup size="sm" variant="outline" isAttached>
183+
<div className="flex flex-col gap-4">
184+
<div className="flex flex-row">
187185
<Button
188186
onClick={() => setListingsToShow("all")}
189-
variant={listingsToShow === "all" ? "solid" : "outline"}
187+
variant={listingsToShow === "all" ? "default" : "outline"}
188+
className="w-18 rounded-r-none"
190189
>
191190
All
192191
</Button>
193192
<Button
194193
onClick={() => setListingsToShow("valid")}
195-
variant={listingsToShow === "valid" ? "solid" : "outline"}
194+
variant={listingsToShow === "valid" ? "default" : "outline"}
195+
className="rounded-l-none"
196196
>
197197
Valid
198198
</Button>
199-
</ButtonGroup>
199+
</div>
200200
<TableContainer maxW="100%" className="relative">
201201
{((listingsToShow === "all" && getAllQueryResult.isFetching) ||
202202
(listingsToShow === "valid" && getValidQueryResult.isFetching)) && (
@@ -226,9 +226,9 @@ export const MarketplaceTable: React.FC<MarketplaceTableProps> = ({
226226
// biome-ignore lint/suspicious/noArrayIndexKey: FIXME
227227
key={columnIndex}
228228
>
229-
<Text as="label" size="label.sm" color="faded">
229+
<p className="text-muted-foreground">
230230
{column.render("Header")}
231-
</Text>
231+
</p>
232232
</Th>
233233
))}
234234
{/* // Need to add an empty header for the drawer button */}
@@ -273,7 +273,7 @@ export const MarketplaceTable: React.FC<MarketplaceTableProps> = ({
273273
</Table>
274274
</TableContainer>
275275
<div className="flex w-full items-center justify-center">
276-
<Flex gap={2} direction="row" align="center">
276+
<div className="flex flex-row items-center gap-2">
277277
<IconButton
278278
isDisabled={!canPreviousPage || totalCountQuery.isPending}
279279
aria-label="first page"
@@ -286,7 +286,7 @@ export const MarketplaceTable: React.FC<MarketplaceTableProps> = ({
286286
icon={<ChevronLeftIcon className="size-4" />}
287287
onClick={() => previousPage()}
288288
/>
289-
<Text whiteSpace="nowrap">
289+
<p className="whitespace-nowrap">
290290
Page <strong>{pageIndex + 1}</strong> of{" "}
291291
<Skeleton
292292
as="span"
@@ -295,7 +295,7 @@ export const MarketplaceTable: React.FC<MarketplaceTableProps> = ({
295295
>
296296
<strong>{pageCount}</strong>
297297
</Skeleton>
298-
</Text>
298+
</p>
299299
<IconButton
300300
isDisabled={!canNextPage || totalCountQuery.isPending}
301301
aria-label="next page"
@@ -322,8 +322,8 @@ export const MarketplaceTable: React.FC<MarketplaceTableProps> = ({
322322
<option value="250">250</option>
323323
<option value="500">500</option>
324324
</Select>
325-
</Flex>
325+
</div>
326326
</div>
327-
</Flex>
327+
</div>
328328
);
329329
};

0 commit comments

Comments
 (0)