Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Dashboard] Remove tw-components from marketplace components #5367

Merged
merged 1 commit into from
Nov 11, 2024
Merged

[Dashboard] Remove tw-components from marketplace components #5367

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 16 additions & 34 deletions ...p/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/list-form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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";

Expand Down Expand Up @@ -357,34 +351,30 @@ 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>
{!isSupportedChain ? (
<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}
Expand Down Expand Up @@ -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")}
Expand All @@ -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"
Expand All @@ -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>
Expand All @@ -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}>
Expand Down
68 changes: 30 additions & 38 deletions ...shboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/listing-drawer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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";
Expand Down Expand Up @@ -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
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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>
</>
)}
Expand All @@ -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}
Expand Down
34 changes: 17 additions & 17 deletions ...oard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/marketplace-table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { WalletAddress } from "@/components/blocks/wallet-address";
import { Button } from "@/components/ui/button";
import {
ButtonGroup,
Flex,
IconButton,
Select,
Skeleton,
Expand Down Expand Up @@ -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";

Expand Down Expand Up @@ -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>
);
},
},
Expand Down Expand Up @@ -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)) && (
Expand Down Expand Up @@ -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 */}
Expand Down Expand Up @@ -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"
Expand All @@ -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"
Expand All @@ -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"
Expand All @@ -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>
);
};
Loading
Loading