Dashboard: Contract page style adjustments, fixes, reduce chakra usage

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/direct-listings/ContractDirectListingsPage.tsx

@@ -17,7 +17,9 @@ export const ContractDirectListingsPage: React.FC<
   return (
     <div className="flex flex-col gap-6">
       <div className="flex flex-row items-center justify-between">
-        <p className="text-lg">Contract Listings</p>
+        <h2 className="font-semibold text-2xl tracking-tight">
+          Direct Listings
+        </h2>
         <div className="flex flex-row gap-4">
           <CreateListingButton
             isInsightSupported={isInsightSupported}

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/english-auctions/ContractEnglishAuctionsPage.tsx

@@ -17,7 +17,9 @@ export const ContractEnglishAuctionsPage: React.FC<
   return (
     <div className="flex flex-col gap-6">
       <div className="flex flex-row items-center justify-between">
-        <p className="text-lg">Contract Auctions</p>
+        <h2 className="font-semibold text-2xl tracking-tight">
+          English Auctions
+        </h2>
         <div className="flex flex-row gap-4">
           <CreateListingButton
             contract={contract}

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/primary-dashboard-button.tsx

@@ -89,7 +89,7 @@ function AddToProjectButton(props: {
   return (
     <Dialog>
       <DialogTrigger asChild>
-        <Button className="gap-2" variant="outline">
+        <Button className="gap-2 bg-card" variant="outline">
           <PlusIcon className="size-4" />
           Add To Project
         </Button>

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/ContractNFTPage.tsx

@@ -60,7 +60,7 @@ export const ContractNFTPage: React.FC<NftOverviewPageProps> = ({
   return (
     <div className="flex flex-col gap-6">
       <div className="flex flex-col gap-3 xl:flex-row xl:items-center xl:justify-between">
-        <h2 className="font-semibold text-2xl tracking-tight">Contract NFTs</h2>
+        <h2 className="font-semibold text-2xl tracking-tight">NFTs</h2>
         <div className="grid grid-cols-2 gap-2 md:flex">
           {isRevealable && (
             <NFTRevealButton contract={contract} twAccount={twAccount} />

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/supply-cards.tsx

@@ -7,7 +7,7 @@ import {
   totalSupply,
 } from "thirdweb/extensions/erc721";
 import { useReadContract } from "thirdweb/react";
-import { Stat } from "../../overview/components/stat-card";
+import { StatCard } from "../../overview/components/stat-card";
 
 interface SupplyCardsProps {
   contract: ThirdwebContract;
@@ -35,18 +35,18 @@ export const SupplyCards: React.FC<SupplyCardsProps> = ({ contract }) => {
   );
 
   return (
-    <div className="flex flex-row gap-3 md:gap-6 [&>*]:grow">
-      <Stat
+    <div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
+      <StatCard
         value={realTotalSupply.toString()}
         label="Total Supply"
         isPending={nextTokenIdQuery.isPending}
       />
-      <Stat
+      <StatCard
         value={totalSupplyQuery?.data?.toString() || "N/A"}
         label="Claimed Supply"
         isPending={totalSupplyQuery.isPending}
       />
-      <Stat
+      <StatCard
         value={unclaimedSupply}
         label="Unclaimed Supply"
         isPending={totalSupplyQuery.isPending || nextTokenIdQuery.isPending}

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

@@ -38,7 +38,7 @@ export const ContractOverviewPage: React.FC<ContractOverviewPageProps> = ({
   publishedBy,
 }) => {
   return (
-    <div className="flex flex-col gap-8 lg:flex-row">
+    <div className="flex flex-col gap-10 lg:flex-row lg:gap-8">
       <div className="flex grow flex-col gap-10">
         <ContractChecklist
           isErc721={isErc721}

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

@@ -2,8 +2,10 @@
 
 import { WalletAddress } from "@/components/blocks/wallet-address";
 import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import { SkeletonContainer } from "@/components/ui/skeleton";
 import { TrackedLinkTW } from "@/components/ui/tracked-link";
+import { ArrowRightIcon } from "lucide-react";
 import { useMemo } from "react";
 import type { ThirdwebContract } from "thirdweb";
 import {
@@ -79,28 +81,37 @@ const DirectListingCards: React.FC<ListingCardsSectionProps> = ({
   }
 
   return (
-    <>
-      <div className="flex w-full items-center justify-between">
-        <h2 className="font-semibold text-2xl tracking-tight">
-          Direct Listing
+    <div className="rounded-lg border bg-card">
+      <div className="flex w-full items-center justify-between border-b px-6 py-4">
+        <h2 className="font-semibold text-xl tracking-tight">
+          Direct Listings
         </h2>
-        <TrackedLinkTW
-          category={trackingCategory}
-          label="view_all_direct_listings"
-          className="text-link-foreground hover:text-foreground"
-          href={directListingsHref}
+        <Button
+          asChild
+          variant="outline"
+          size="sm"
+          className="gap-2 bg-background text-muted-foreground"
         >
-          View all -&gt;
-        </TrackedLinkTW>
+          <TrackedLinkTW
+            category={trackingCategory}
+            label="view_all_direct_listings"
+            href={directListingsHref}
+          >
+            View all <ArrowRightIcon className="size-4" />
+          </TrackedLinkTW>
+        </Button>
       </div>
-      <ListingCards
-        listings={listings}
-        isPending={listingsQuery.isPending}
-        trackingCategory={trackingCategory}
-        chainSlug={chainSlug}
-        contractAddress={contract.address}
-      />
-    </>
+
+      <div className="p-6">
+        <ListingCards
+          listings={listings}
+          isPending={listingsQuery.isPending}
+          trackingCategory={trackingCategory}
+          chainSlug={chainSlug}
+          contractAddress={contract.address}
+        />
+      </div>
+    </div>
   );
 };
 
@@ -142,28 +153,36 @@ const EnglishAuctionCards: React.FC<ListingCardsSectionProps> = ({
   }
 
   return (
-    <>
-      <div className="flex w-full items-center justify-between">
-        <h2 className="font-semibold text-2xl tracking-tight">
+    <div className="rounded-lg border bg-card">
+      <div className="flex w-full items-center justify-between border-b px-6 py-4">
+        <h2 className="font-semibold text-xl tracking-tight">
           English Auctions
         </h2>
-        <TrackedLinkTW
-          category={trackingCategory}
-          label="view_all_english_auctions"
-          className="text-link-foreground hover:text-foreground"
-          href={englishAuctionsHref}
+        <Button
+          asChild
+          variant="outline"
+          size="sm"
+          className="gap-2 bg-background text-muted-foreground"
         >
-          View all -&gt;
-        </TrackedLinkTW>
+          <TrackedLinkTW
+            category={trackingCategory}
+            label="view_all_english_auctions"
+            href={englishAuctionsHref}
+          >
+            View all <ArrowRightIcon className="size-4" />
+          </TrackedLinkTW>
+        </Button>
       </div>
-      <ListingCards
-        listings={auctions}
-        isPending={auctionsQuery.isPending}
-        trackingCategory={trackingCategory}
-        chainSlug={chainSlug}
-        contractAddress={contract.address}
-      />
-    </>
+      <div className="p-6">
+        <ListingCards
+          listings={auctions}
+          isPending={auctionsQuery.isPending}
+          trackingCategory={trackingCategory}
+          chainSlug={chainSlug}
+          contractAddress={contract.address}
+        />
+      </div>
+    </div>
   );
 };
 
@@ -261,12 +280,16 @@ const ListingCards: React.FC<ListingCardsProps> = ({
   const englishAuctionsHref = `/${chainSlug}/${contractAddress}/english-auctions`;
 
   return (
-    <div className="grid grid-cols-2 gap-3 md:grid-cols-3 md:gap-6 max-sm:[&>*:nth-child(n+3)]:hidden">
+    <div className="grid grid-cols-1 gap-4 md:grid-cols-3 ">
       {listings.map((listing, index) => (
         <div
-          className="relative rounded-lg border border-border bg-card transition-colors hover:border-active-border"
+          className="group hover:-translate-y-0.5 relative flex h-full cursor-pointer flex-col rounded-lg bg-background duration-200 hover:scale-[1.01]"
           key={`${listing.creatorAddress}-${index}`}
         >
+          {/* border */}
+          <div className="absolute inset-0 rounded-lg border border-border" />
+
+          {/* image */}
           <div className="relative aspect-square w-full overflow-hidden rounded-lg">
             {/* Image */}
             <SkeletonContainer
@@ -323,21 +346,23 @@ const ListingCards: React.FC<ListingCardsProps> = ({
               />
             )}
 
+            {/* seller */}
             <SkeletonContainer
               loadedData={isPending ? undefined : listing.creatorAddress}
               skeletonData={listing.creatorAddress}
-              className="mt-4"
+              className="mt-4 border-t pt-4"
               render={(v) => (
                 <div>
-                  <p className="text-muted-foreground text-sm">Seller</p>
+                  <p className="text-muted-foreground text-xs">Seller</p>
                   <WalletAddress
-                    className="relative z-[1] self-start"
+                    className="relative z-[1] self-start text-xs"
                     address={v}
                   />
                 </div>
               )}
             />
 
+            {/* price */}
             {!isPending && (
               <Badge
                 variant="outline"

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

@@ -42,7 +42,7 @@ export function NFTDetails({
     <div className="rounded-lg border bg-card">
       {/* header */}
       <div className="flex items-center justify-between border-b px-6 py-4">
-        <h2 className="font-semibold text-xl tracking-tight">NFT Details</h2>
+        <h2 className="font-semibold text-xl tracking-tight">NFTs</h2>
         <Button variant="outline" asChild className="bg-background" size="sm">
           <TrackedLinkTW
             category={trackingCategory}

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

@@ -16,3 +16,20 @@ export function Stat({
     </dl>
   );
 }
+
+export function StatCard({
+  label,
+  value,
+  isPending,
+}: { label: string; value: string; isPending: boolean }) {
+  return (
+    <dl className="grow rounded-lg border bg-card p-4">
+      <dt className="text-muted-foreground text-sm">{label}</dt>
+      <SkeletonContainer
+        skeletonData={"000000"}
+        loadedData={isPending ? undefined : value}
+        render={(v) => <dd className="font-medium text-lg">{v}</dd>}
+      />
+    </dl>
+  );
+}

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/components/supply.tsx

@@ -19,15 +19,14 @@ export const TokenDetailsCard: React.FC<TokenBalancesProps> = ({
 }) => {
   const address = useActiveAccount()?.address;
 
-  const tokenBalanceQuery = useReadContract(getBalance, {
+  const ownedTokenBalanceQuery = useReadContract(getBalance, {
     contract,
     address: address || "",
     queryOptions: { enabled: !!address },
   });
 
   const tokenSupplyQuery = useReadContract(totalSupply, {
     contract,
-    queryOptions: { enabled: !!address },
   });
 
   const tokenMetadataQuery = useReadContract(getCurrencyMetadata, { contract });
@@ -54,7 +53,7 @@ export const TokenDetailsCard: React.FC<TokenBalancesProps> = ({
     <TokenDetailsCardUI
       isWalletConnected={!!address}
       tokenSupply={tokenSupply}
-      ownedBalance={tokenBalanceQuery.data}
+      ownedBalance={ownedTokenBalanceQuery.data}
     />
   );
 };

apps/dashboard/src/tw-components/nft-media.tsx

@@ -57,7 +57,7 @@ export const NFTMediaWithEmptyState: React.FC<{
         poster={props.metadata.image}
         requireInteraction={props.requireInteraction}
         controls={props.controls}
-        className="h-full w-full"
+        className="[&>div]:!bg-accent [&_a]:!text-muted-foreground [&_a]:!no-underline [&_svg]:!size-6 [&_svg]:!text-muted-foreground aspect-square h-full w-full"
       />
     </div>
   );