Skip to content

Commit 672f7d0

Browse files
MananTankMananTank
committed
Dashboard: Contract page style adjustments, fixes, reduce chakra usage (#6664)
<!-- start pr-codex --> ## PR-Codex overview This PR focuses on enhancing the UI components within the dashboard, improving layout consistency, and updating text for better clarity and user experience. ### Detailed summary - Updated `Button` styles in `primary-dashboard-button.tsx`. - Increased gap in layout for `ContractOverviewPage.tsx`. - Changed headings to `h2` for better accessibility in auction and listing pages. - Introduced `StatCard` component for consistent stats display. - Renamed `tokenBalanceQuery` to `ownedTokenBalanceQuery` for clarity. - Updated `SupplyCards` to use `StatCard` instead of `Stat`. - Improved layout structure with new divs and classes for better styling. - Added `ArrowRightIcon` to navigation links for visual cues. > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}` <!-- end pr-codex -->
1 parent a9eda9f commit 672f7d0

File tree

11 files changed

+102
-57
lines changed

11 files changed

+102
-57
lines changed

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,9 @@ export const ContractDirectListingsPage: React.FC<
1717
return (
1818
<div className="flex flex-col gap-6">
1919
<div className="flex flex-row items-center justify-between">
20-
<p className="text-lg">Contract Listings</p>
20+
<h2 className="font-semibold text-2xl tracking-tight">
21+
Direct Listings
22+
</h2>
2123
<div className="flex flex-row gap-4">
2224
<CreateListingButton
2325
isInsightSupported={isInsightSupported}

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,9 @@ export const ContractEnglishAuctionsPage: React.FC<
1717
return (
1818
<div className="flex flex-col gap-6">
1919
<div className="flex flex-row items-center justify-between">
20-
<p className="text-lg">Contract Auctions</p>
20+
<h2 className="font-semibold text-2xl tracking-tight">
21+
English Auctions
22+
</h2>
2123
<div className="flex flex-row gap-4">
2224
<CreateListingButton
2325
contract={contract}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ function AddToProjectButton(props: {
8989
return (
9090
<Dialog>
9191
<DialogTrigger asChild>
92-
<Button className="gap-2" variant="outline">
92+
<Button className="gap-2 bg-card" variant="outline">
9393
<PlusIcon className="size-4" />
9494
Add To Project
9595
</Button>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ export const ContractNFTPage: React.FC<NftOverviewPageProps> = ({
6060
return (
6161
<div className="flex flex-col gap-6">
6262
<div className="flex flex-col gap-3 xl:flex-row xl:items-center xl:justify-between">
63-
<h2 className="font-semibold text-2xl tracking-tight">Contract NFTs</h2>
63+
<h2 className="font-semibold text-2xl tracking-tight">NFTs</h2>
6464
<div className="grid grid-cols-2 gap-2 md:flex">
6565
{isRevealable && (
6666
<NFTRevealButton contract={contract} twAccount={twAccount} />

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {
77
totalSupply,
88
} from "thirdweb/extensions/erc721";
99
import { useReadContract } from "thirdweb/react";
10-
import { Stat } from "../../overview/components/stat-card";
10+
import { StatCard } from "../../overview/components/stat-card";
1111

1212
interface SupplyCardsProps {
1313
contract: ThirdwebContract;
@@ -35,18 +35,18 @@ export const SupplyCards: React.FC<SupplyCardsProps> = ({ contract }) => {
3535
);
3636

3737
return (
38-
<div className="flex flex-row gap-3 md:gap-6 [&>*]:grow">
39-
<Stat
38+
<div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
39+
<StatCard
4040
value={realTotalSupply.toString()}
4141
label="Total Supply"
4242
isPending={nextTokenIdQuery.isPending}
4343
/>
44-
<Stat
44+
<StatCard
4545
value={totalSupplyQuery?.data?.toString() || "N/A"}
4646
label="Claimed Supply"
4747
isPending={totalSupplyQuery.isPending}
4848
/>
49-
<Stat
49+
<StatCard
5050
value={unclaimedSupply}
5151
label="Unclaimed Supply"
5252
isPending={totalSupplyQuery.isPending || nextTokenIdQuery.isPending}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ export const ContractOverviewPage: React.FC<ContractOverviewPageProps> = ({
3838
publishedBy,
3939
}) => {
4040
return (
41-
<div className="flex flex-col gap-8 lg:flex-row">
41+
<div className="flex flex-col gap-10 lg:flex-row lg:gap-8">
4242
<div className="flex grow flex-col gap-10">
4343
<ContractChecklist
4444
isErc721={isErc721}

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

Lines changed: 67 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,10 @@
22

33
import { WalletAddress } from "@/components/blocks/wallet-address";
44
import { Badge } from "@/components/ui/badge";
5+
import { Button } from "@/components/ui/button";
56
import { SkeletonContainer } from "@/components/ui/skeleton";
67
import { TrackedLinkTW } from "@/components/ui/tracked-link";
8+
import { ArrowRightIcon } from "lucide-react";
79
import { useMemo } from "react";
810
import type { ThirdwebContract } from "thirdweb";
911
import {
@@ -79,28 +81,37 @@ const DirectListingCards: React.FC<ListingCardsSectionProps> = ({
7981
}
8082

8183
return (
82-
<>
83-
<div className="flex w-full items-center justify-between">
84-
<h2 className="font-semibold text-2xl tracking-tight">
85-
Direct Listing
84+
<div className="rounded-lg border bg-card">
85+
<div className="flex w-full items-center justify-between border-b px-6 py-4">
86+
<h2 className="font-semibold text-xl tracking-tight">
87+
Direct Listings
8688
</h2>
87-
<TrackedLinkTW
88-
category={trackingCategory}
89-
label="view_all_direct_listings"
90-
className="text-link-foreground hover:text-foreground"
91-
href={directListingsHref}
89+
<Button
90+
asChild
91+
variant="outline"
92+
size="sm"
93+
className="gap-2 bg-background text-muted-foreground"
9294
>
93-
View all -&gt;
94-
</TrackedLinkTW>
95+
<TrackedLinkTW
96+
category={trackingCategory}
97+
label="view_all_direct_listings"
98+
href={directListingsHref}
99+
>
100+
View all <ArrowRightIcon className="size-4" />
101+
</TrackedLinkTW>
102+
</Button>
95103
</div>
96-
<ListingCards
97-
listings={listings}
98-
isPending={listingsQuery.isPending}
99-
trackingCategory={trackingCategory}
100-
chainSlug={chainSlug}
101-
contractAddress={contract.address}
102-
/>
103-
</>
104+
105+
<div className="p-6">
106+
<ListingCards
107+
listings={listings}
108+
isPending={listingsQuery.isPending}
109+
trackingCategory={trackingCategory}
110+
chainSlug={chainSlug}
111+
contractAddress={contract.address}
112+
/>
113+
</div>
114+
</div>
104115
);
105116
};
106117

@@ -142,28 +153,36 @@ const EnglishAuctionCards: React.FC<ListingCardsSectionProps> = ({
142153
}
143154

144155
return (
145-
<>
146-
<div className="flex w-full items-center justify-between">
147-
<h2 className="font-semibold text-2xl tracking-tight">
156+
<div className="rounded-lg border bg-card">
157+
<div className="flex w-full items-center justify-between border-b px-6 py-4">
158+
<h2 className="font-semibold text-xl tracking-tight">
148159
English Auctions
149160
</h2>
150-
<TrackedLinkTW
151-
category={trackingCategory}
152-
label="view_all_english_auctions"
153-
className="text-link-foreground hover:text-foreground"
154-
href={englishAuctionsHref}
161+
<Button
162+
asChild
163+
variant="outline"
164+
size="sm"
165+
className="gap-2 bg-background text-muted-foreground"
155166
>
156-
View all -&gt;
157-
</TrackedLinkTW>
167+
<TrackedLinkTW
168+
category={trackingCategory}
169+
label="view_all_english_auctions"
170+
href={englishAuctionsHref}
171+
>
172+
View all <ArrowRightIcon className="size-4" />
173+
</TrackedLinkTW>
174+
</Button>
158175
</div>
159-
<ListingCards
160-
listings={auctions}
161-
isPending={auctionsQuery.isPending}
162-
trackingCategory={trackingCategory}
163-
chainSlug={chainSlug}
164-
contractAddress={contract.address}
165-
/>
166-
</>
176+
<div className="p-6">
177+
<ListingCards
178+
listings={auctions}
179+
isPending={auctionsQuery.isPending}
180+
trackingCategory={trackingCategory}
181+
chainSlug={chainSlug}
182+
contractAddress={contract.address}
183+
/>
184+
</div>
185+
</div>
167186
);
168187
};
169188

@@ -261,12 +280,16 @@ const ListingCards: React.FC<ListingCardsProps> = ({
261280
const englishAuctionsHref = `/${chainSlug}/${contractAddress}/english-auctions`;
262281

263282
return (
264-
<div className="grid grid-cols-2 gap-3 md:grid-cols-3 md:gap-6 max-sm:[&>*:nth-child(n+3)]:hidden">
283+
<div className="grid grid-cols-1 gap-4 md:grid-cols-3 ">
265284
{listings.map((listing, index) => (
266285
<div
267-
className="relative rounded-lg border border-border bg-card transition-colors hover:border-active-border"
286+
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]"
268287
key={`${listing.creatorAddress}-${index}`}
269288
>
289+
{/* border */}
290+
<div className="absolute inset-0 rounded-lg border border-border" />
291+
292+
{/* image */}
270293
<div className="relative aspect-square w-full overflow-hidden rounded-lg">
271294
{/* Image */}
272295
<SkeletonContainer
@@ -323,21 +346,23 @@ const ListingCards: React.FC<ListingCardsProps> = ({
323346
/>
324347
)}
325348

349+
{/* seller */}
326350
<SkeletonContainer
327351
loadedData={isPending ? undefined : listing.creatorAddress}
328352
skeletonData={listing.creatorAddress}
329-
className="mt-4"
353+
className="mt-4 border-t pt-4"
330354
render={(v) => (
331355
<div>
332-
<p className="text-muted-foreground text-sm">Seller</p>
356+
<p className="text-muted-foreground text-xs">Seller</p>
333357
<WalletAddress
334-
className="relative z-[1] self-start"
358+
className="relative z-[1] self-start text-xs"
335359
address={v}
336360
/>
337361
</div>
338362
)}
339363
/>
340364

365+
{/* price */}
341366
{!isPending && (
342367
<Badge
343368
variant="outline"

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ export function NFTDetails({
4242
<div className="rounded-lg border bg-card">
4343
{/* header */}
4444
<div className="flex items-center justify-between border-b px-6 py-4">
45-
<h2 className="font-semibold text-xl tracking-tight">NFT Details</h2>
45+
<h2 className="font-semibold text-xl tracking-tight">NFTs</h2>
4646
<Button variant="outline" asChild className="bg-background" size="sm">
4747
<TrackedLinkTW
4848
category={trackingCategory}

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,3 +16,20 @@ export function Stat({
1616
</dl>
1717
);
1818
}
19+
20+
export function StatCard({
21+
label,
22+
value,
23+
isPending,
24+
}: { label: string; value: string; isPending: boolean }) {
25+
return (
26+
<dl className="grow rounded-lg border bg-card p-4">
27+
<dt className="text-muted-foreground text-sm">{label}</dt>
28+
<SkeletonContainer
29+
skeletonData={"000000"}
30+
loadedData={isPending ? undefined : value}
31+
render={(v) => <dd className="font-medium text-lg">{v}</dd>}
32+
/>
33+
</dl>
34+
);
35+
}

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,15 +19,14 @@ export const TokenDetailsCard: React.FC<TokenBalancesProps> = ({
1919
}) => {
2020
const address = useActiveAccount()?.address;
2121

22-
const tokenBalanceQuery = useReadContract(getBalance, {
22+
const ownedTokenBalanceQuery = useReadContract(getBalance, {
2323
contract,
2424
address: address || "",
2525
queryOptions: { enabled: !!address },
2626
});
2727

2828
const tokenSupplyQuery = useReadContract(totalSupply, {
2929
contract,
30-
queryOptions: { enabled: !!address },
3130
});
3231

3332
const tokenMetadataQuery = useReadContract(getCurrencyMetadata, { contract });
@@ -54,7 +53,7 @@ export const TokenDetailsCard: React.FC<TokenBalancesProps> = ({
5453
<TokenDetailsCardUI
5554
isWalletConnected={!!address}
5655
tokenSupply={tokenSupply}
57-
ownedBalance={tokenBalanceQuery.data}
56+
ownedBalance={ownedTokenBalanceQuery.data}
5857
/>
5958
);
6059
};

0 commit comments

Comments
 (0)