Skip to content

Migrate Marketplace listing cards on overview page to shadcn/tailwind #5041

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

Merged
merged 1 commit into from
Oct 15, 2024
Merged

Migrate Marketplace listing cards on overview page to shadcn/tailwind #5041

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
188 changes: 100 additions & 88 deletions ...ashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/MarketplaceDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,7 @@
import { WalletAddress } from "@/components/blocks/wallet-address";
import {
GridItem,
SimpleGrid,
Skeleton,
SkeletonText,
useBreakpointValue,
} from "@chakra-ui/react";
import { Badge } from "@/components/ui/badge";
import { SkeletonContainer } from "@/components/ui/skeleton";
import { TrackedLinkTW } from "@/components/ui/tracked-link";
import { ListingStatsV3 } from "contract-ui/tabs/listings/components/listing-stats";
import { useMemo } from "react";
import type { ThirdwebContract } from "thirdweb";
Expand All @@ -19,7 +15,6 @@ import {
} from "thirdweb/extensions/marketplace";
import { useReadContract } from "thirdweb/react";
import { min } from "thirdweb/utils";
import { Badge, Card, Heading, Text, TrackedLink } from "tw-components";
import { NFTMediaWithEmptyState } from "tw-components/nft-media";

type ListingData =
Expand Down Expand Up @@ -87,18 +82,14 @@ const DirectListingCards: React.FC<ListingCardsSectionProps> = ({
<h2 className="font-semibold text-2xl tracking-tight">
Direct Listing
</h2>
<TrackedLink
<TrackedLinkTW
category={trackingCategory}
label="view_all_direct_listings"
color="blue.400"
_light={{
color: "blue.600",
}}
gap={4}
className="text-link-foreground hover:text-foreground"
href={directListingsHref}
>
View all -&gt;
</TrackedLink>
</TrackedLinkTW>
</div>
<ListingCards
listings={listings}
Expand Down Expand Up @@ -151,19 +142,17 @@ const EnglishAuctionCards: React.FC<ListingCardsSectionProps> = ({
return (
<>
<div className="flex w-full items-center justify-between">
<Heading size="label.lg">English Auctions</Heading>
<TrackedLink
<h2 className="font-semibold text-2xl tracking-tight">
English Auctions
</h2>
<TrackedLinkTW
category={trackingCategory}
label="view_all_english_auctions"
color="blue.400"
_light={{
color: "blue.600",
}}
gap={4}
className="text-link-foreground hover:text-foreground"
href={englishAuctionsHref}
>
View all -&gt;
</TrackedLink>
</TrackedLinkTW>
</div>
<ListingCards
listings={auctions}
Expand Down Expand Up @@ -200,15 +189,15 @@ export const MarketplaceDetails: React.FC<MarketplaceDetailsVersionProps> = ({
hasEnglishAuctions={hasEnglishAuctions}
/>

{hasDirectListings && contract && (
{hasDirectListings && (
<DirectListingCards
contract={contract}
trackingCategory={trackingCategory}
chainSlug={chainSlug}
/>
)}

{hasEnglishAuctions && contract && (
{hasEnglishAuctions && (
<EnglishAuctionCards
contract={contract}
trackingCategory={trackingCategory}
Expand Down Expand Up @@ -263,82 +252,105 @@ const ListingCards: React.FC<ListingCardsProps> = ({
chainSlug,
contractAddress,
}) => {
const isMobile = useBreakpointValue({ base: true, md: false });

listings = isPending
? Array.from({ length: isMobile ? 2 : 3 }).map((_, idx) =>
dummyMetadata(idx),
)
: listings.slice(0, isMobile ? 2 : 3);
? Array.from({ length: 3 }).map((_, idx) => dummyMetadata(idx))
: listings.slice(0, 3);

const directListingsHref = `/${chainSlug}/${contractAddress}/direct-listings`;
const englishAuctionsHref = `/${chainSlug}/${contractAddress}/english-auctions`;

return (
<SimpleGrid gap={{ base: 3, md: 6 }} columns={{ base: 2, md: 3 }}>
<div className="grid grid-cols-2 gap-3 md:grid-cols-3 md:gap-6 max-sm:[&>*:nth-child(n+3)]:hidden">
{listings.map((listing, index) => (
<GridItem
<div
className="relative rounded-lg border border-border bg-muted/50 hover:border-foreground hover:bg-muted"
key={`${listing.creatorAddress}-${index}`}
as={TrackedLink}
category={trackingCategory}
href={
listing.type === "direct-listing"
? directListingsHref
: englishAuctionsHref
}
_hover={{ opacity: 0.75, textDecoration: "none" }}
>
<Card p={0} position="relative">
<div className="relative aspect-square w-full overflow-hidden rounded-xl">
<Skeleton isLoaded={!isPending}>
<NFTMediaWithEmptyState
metadata={listing.asset.metadata}
requireInteraction
width="100%"
height="100%"
/>
</Skeleton>
</div>
<div className="flex flex-col gap-1 p-4 pb-3">
<Skeleton w={!isPending ? "100%" : "50%"} isLoaded={!isPending}>
<Heading size="label.md">{listing.asset.metadata.name}</Heading>
</Skeleton>
{isMarketplaceV1 && (
<SkeletonText isLoaded={!isPending}>
<Text size="body.sm">
{listing.type === "direct-listing"
<div className="relative aspect-square w-full overflow-hidden rounded-lg">
{/* Image */}
<SkeletonContainer
loadedData={isPending ? undefined : listing.asset.metadata}
skeletonData={listing.asset.metadata}
className="block h-full w-full"
render={(v) => {
return (
<NFTMediaWithEmptyState
metadata={v}
requireInteraction
width="100%"
height="100%"
/>
);
}}
/>
</div>

<div className="flex flex-col gap-1 p-4 pb-3">
{/* Card Link + Title */}
<SkeletonContainer
loadedData={isPending ? undefined : listing.asset.metadata.name}
skeletonData="Listing Title"
render={(v) => (
<TrackedLinkTW
category={trackingCategory}
className="before:absolute before:inset-0"
href={
listing.type === "direct-listing"
? directListingsHref
: englishAuctionsHref
}
>
{v}
</TrackedLinkTW>
)}
/>

{isMarketplaceV1 && (
<SkeletonContainer
className="self-start"
loadedData={
isPending
? undefined
: listing.type === "direct-listing"
? "Direct Listing"
: "English Auction"}
</Text>
</SkeletonText>
: "English Auction"
}
skeletonData={listing.type}
render={(v) => (
<p className="text-muted-foreground text-sm">{v}</p>
)}
/>
)}

<SkeletonContainer
loadedData={isPending ? undefined : listing.creatorAddress}
skeletonData={listing.creatorAddress}
className="mt-4"
render={(v) => (
<div>
<p className="text-muted-foreground text-sm">Seller</p>
<WalletAddress
className="relative z-[1] self-start"
address={v}
/>
</div>
)}
/>

<Text size="body.sm" mt={4}>
Seller
</Text>
<SkeletonText isLoaded={!isPending}>
<WalletAddress address={listing.creatorAddress} />
</SkeletonText>
<SkeletonText
as={Badge}
background="backgroundHighlight"
isLoaded={!isPending}
skeletonHeight={3.5}
noOfLines={1}
position="absolute"
rounded="lg"
size="body.xs"
p={2}
top={2}
right={2}
{!isPending && (
<Badge
variant="outline"
className="absolute top-2 right-2 bg-background py-1.5"
>
<b>{listing.currencyValue.displayValue}</b>{" "}
{listing.currencyValue.symbol}
</SkeletonText>
</div>
</Card>
</GridItem>
<p className="line-clamp-1">
<b>{listing.currencyValue.displayValue}</b>{" "}
{listing.currencyValue.symbol}
</p>
</Badge>
)}
</div>
</div>
))}
</SimpleGrid>
</div>
);
};
4 changes: 2 additions & 2 deletions apps/dashboard/src/tw-components/nft-media.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export const NFTMediaWithEmptyState: React.FC<{
height: props.height,
}}
className={cn(
"grid flex-shrink-0 place-items-center overflow-hidden rounded-xl border border-border object-contain",
"grid flex-shrink-0 place-items-center overflow-hidden rounded-lg border border-border object-contain",
props.className,
)}
>
Expand All @@ -44,7 +44,7 @@ export const NFTMediaWithEmptyState: React.FC<{
height: props.height,
}}
className={cn(
"flex-shrink-0 overflow-hidden rounded-xl object-contain",
"flex-shrink-0 overflow-hidden rounded-lg object-contain",
props.className,
)}
>
Expand Down
Loading