Migrate Marketplace Listing Stats on Contract Overview page to shadcn+tailwind

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/MarketplaceDetails.tsx

@@ -1,6 +1,5 @@
 import { WalletAddress } from "@/components/blocks/wallet-address";
 import {
-  Flex,
   GridItem,
   SimpleGrid,
   Skeleton,
@@ -84,7 +83,7 @@ const DirectListingCards: React.FC<ListingCardsSectionProps> = ({
 
   return (
     <>
-      <Flex align="center" justify="space-between" w="full">
+      <div className="flex w-full items-center justify-between">
         <h2 className="font-semibold text-2xl tracking-tight">
           Direct Listing
         </h2>
@@ -100,7 +99,7 @@ const DirectListingCards: React.FC<ListingCardsSectionProps> = ({
         >
           View all -&gt;
         </TrackedLink>
-      </Flex>
+      </div>
       <ListingCards
         listings={listings}
         isPending={listingsQuery.isPending}
@@ -151,7 +150,7 @@ const EnglishAuctionCards: React.FC<ListingCardsSectionProps> = ({
 
   return (
     <>
-      <Flex align="center" justify="space-between" w="full">
+      <div className="flex w-full items-center justify-between">
         <Heading size="label.lg">English Auctions</Heading>
         <TrackedLink
           category={trackingCategory}
@@ -165,7 +164,7 @@ const EnglishAuctionCards: React.FC<ListingCardsSectionProps> = ({
         >
           View all -&gt;
         </TrackedLink>
-      </Flex>
+      </div>
       <ListingCards
         listings={auctions}
         isPending={auctionsQuery.isPending}
@@ -193,28 +192,30 @@ export const MarketplaceDetails: React.FC<MarketplaceDetailsVersionProps> = ({
   chainSlug,
 }) => {
   return (
-    <Flex gap={6} flexDirection="column">
-      <Heading size="title.sm">Listings</Heading>
+    <div className="flex flex-col gap-6">
+      <h2 className="font-semibold text-2xl tracking-tight">Listings</h2>
       <ListingStatsV3
         contract={contract}
         hasDirectListings={hasDirectListings}
         hasEnglishAuctions={hasEnglishAuctions}
       />
+
       {hasDirectListings && contract && (
         <DirectListingCards
           contract={contract}
           trackingCategory={trackingCategory}
           chainSlug={chainSlug}
         />
       )}
+
       {hasEnglishAuctions && contract && (
         <EnglishAuctionCards
           contract={contract}
           trackingCategory={trackingCategory}
           chainSlug={chainSlug}
         />
       )}
-    </Flex>
+    </div>
   );
 };
 
@@ -298,7 +299,7 @@ const ListingCards: React.FC<ListingCardsProps> = ({
                 />
               </Skeleton>
             </div>
-            <Flex p={4} pb={3} gap={1} direction="column">
+            <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>
@@ -334,7 +335,7 @@ const ListingCards: React.FC<ListingCardsProps> = ({
                 <b>{listing.currencyValue.displayValue}</b>{" "}
                 {listing.currencyValue.symbol}
               </SkeletonText>
-            </Flex>
+            </div>
           </Card>
         </GridItem>
       ))}

apps/dashboard/src/contract-ui/tabs/listings/components/listing-stats.tsx

@@ -1,9 +1,8 @@
-import { Skeleton, Stat, StatLabel, StatNumber } from "@chakra-ui/react";
+import { SkeletonContainer } from "@/components/ui/skeleton";
 import { useMemo } from "react";
 import type { ThirdwebContract } from "thirdweb";
 import { totalAuctions, totalListings } from "thirdweb/extensions/marketplace";
 import { useReadContract } from "thirdweb/react";
-import { Card } from "tw-components";
 
 const TotalListingsStat: React.FC<{ contract: ThirdwebContract }> = ({
   contract,
@@ -20,16 +19,13 @@ const TotalListingsStat: React.FC<{ contract: ThirdwebContract }> = ({
   );
 
   return (
-    <Card as={Stat}>
-      <StatLabel mb={{ base: 1, md: 0 }}>Total Listings</StatLabel>
-      <Skeleton
-        isLoaded={
-          directListingsQuery.isSuccess && englishAuctionsQuery.isSuccess
-        }
-      >
-        <StatNumber>{combinedListingCount.toString()}</StatNumber>
-      </Skeleton>
-    </Card>
+    <StatCard
+      value={combinedListingCount.toString()}
+      label="Total Listings"
+      isPending={
+        directListingsQuery.isPending || englishAuctionsQuery.isPending
+      }
+    />
   );
 };
 
@@ -41,12 +37,11 @@ const DirectListingsStat: React.FC<{ contract: ThirdwebContract }> = ({
   });
 
   return (
-    <Card as={Stat}>
-      <StatLabel mb={{ base: 1, md: 0 }}>Direct Listings</StatLabel>
-      <Skeleton isLoaded={directListingsQuery.isSuccess}>
-        <StatNumber>{(directListingsQuery.data || 0n).toString()}</StatNumber>
-      </Skeleton>
-    </Card>
+    <StatCard
+      value={(directListingsQuery.data || 0n).toString()}
+      isPending={directListingsQuery.isPending}
+      label="Direct Listings"
+    />
   );
 };
 
@@ -58,12 +53,11 @@ const EnglishAuctionsStat: React.FC<{ contract: ThirdwebContract }> = ({
   });
 
   return (
-    <Card as={Stat}>
-      <StatLabel mb={{ base: 1, md: 0 }}>English Auctions</StatLabel>
-      <Skeleton isLoaded={englishAuctionsQuery.isSuccess}>
-        <StatNumber>{(englishAuctionsQuery.data || 0n).toString()}</StatNumber>
-      </Skeleton>
-    </Card>
+    <StatCard
+      value={(englishAuctionsQuery.data || 0n).toString()}
+      isPending={englishAuctionsQuery.isPending}
+      label="English Auctions"
+    />
   );
 };
 
@@ -79,7 +73,7 @@ export const ListingStatsV3: React.FC<ListingStatsV3Props> = ({
   hasEnglishAuctions,
 }) => {
   return (
-    <div className="flex flex-row gap-3 md:gap-6">
+    <div className="flex flex-row gap-3 md:gap-6 [&>*]:grow">
       {hasDirectListings && hasEnglishAuctions && contract && (
         <TotalListingsStat contract={contract} />
       )}
@@ -88,3 +82,20 @@ export const ListingStatsV3: React.FC<ListingStatsV3Props> = ({
     </div>
   );
 };
+
+function StatCard(props: {
+  value: string;
+  isPending: boolean;
+  label: string;
+}) {
+  return (
+    <dl className="block rounded-lg border border-border bg-muted/50 p-4">
+      <dt className="mb-1.5 text-sm md:text-base">{props.label}</dt>
+      <SkeletonContainer
+        loadedData={props.isPending ? undefined : props.value}
+        skeletonData={"0000"}
+        render={(v) => <dd className="truncate font-semibold text-xl">{v}</dd>}
+      />
+    </dl>
+  );
+}