Skip to content

Commit 4ced3d2

Browse files
kien-ngokien-ngo
committed
[Dashboard] Refactor: Remove chakra components (2) (#5545)
188 imports part of DASH-388 <!-- start pr-codex --> --- ## PR-Codex overview This PR focuses on enhancing the UI components in the dashboard, specifically introducing a new `StatCard` component for displaying statistics and refactoring existing components to utilize this new design pattern, improving consistency and readability. ### Detailed summary - Added a new `StatCard` component in `stat-card.tsx`. - Refactored `SupplyCards` to use `StatCard` for displaying total, claimed, and unclaimed supply. - Updated `NftProperty` component to replace `Text` with `<p>` tags for consistency. - Replaced `Text` components with `<p>` tags in `ContractPermission` for improved styling. > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}` <!-- end pr-codex -->
1 parent f69d1aa commit 4ced3d2

File tree

6 files changed

+67
-84
lines changed

6 files changed

+67
-84
lines changed

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

Lines changed: 6 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Card, Text } from "tw-components";
1+
import { Card } from "@/components/ui/card";
22

33
interface NftPropertyProps {
44
// biome-ignore lint/suspicious/noExplicitAny: FIXME
@@ -7,22 +7,17 @@ interface NftPropertyProps {
77

88
export const NftProperty: React.FC<NftPropertyProps> = ({ property }) => {
99
return (
10-
<Card className="flex flex-col gap-2">
10+
<Card className="flex flex-col gap-2 p-3">
1111
{property?.trait_type && (
12-
<Text
13-
size="label.sm"
14-
color="primary.500"
15-
textAlign="center"
16-
lineHeight={1.2}
17-
>
12+
<p className="text-center text-link-foreground text-sm leading-[1.2]">
1813
{property?.trait_type}
19-
</Text>
14+
</p>
2015
)}
21-
<Text size="label.md" textAlign="center">
16+
<p className="text-center text-muted-foreground text-sm">
2217
{typeof property?.value === "object"
2318
? JSON.stringify(property?.value || {})
2419
: property?.value}
25-
</Text>
20+
</p>
2621
</Card>
2722
);
2823
};

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

Lines changed: 17 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
"use client";
2-
3-
import { Skeleton, Stat, StatLabel, StatNumber } from "@chakra-ui/react";
42
import { useMemo } from "react";
53
import type { ThirdwebContract } from "thirdweb";
64
import {
@@ -9,7 +7,7 @@ import {
97
totalSupply,
108
} from "thirdweb/extensions/erc721";
119
import { useReadContract } from "thirdweb/react";
12-
import { Card } from "tw-components";
10+
import { StatCard } from "../../overview/components/stat-card";
1311

1412
interface SupplyCardsProps {
1513
contract: ThirdwebContract;
@@ -37,27 +35,22 @@ export const SupplyCards: React.FC<SupplyCardsProps> = ({ contract }) => {
3735
);
3836

3937
return (
40-
<div className="flex flex-col gap-3 md:flex-row md:gap-6">
41-
<Card as={Stat}>
42-
<StatLabel mb={{ base: 1, md: 0 }}>Total Supply</StatLabel>
43-
<Skeleton isLoaded={nextTokenIdQuery.isSuccess}>
44-
<StatNumber>{realTotalSupply.toString()}</StatNumber>
45-
</Skeleton>
46-
</Card>
47-
<Card as={Stat}>
48-
<StatLabel mb={{ base: 1, md: 0 }}>Claimed Supply</StatLabel>
49-
<Skeleton isLoaded={totalSupplyQuery.isSuccess}>
50-
<StatNumber>{totalSupplyQuery?.data?.toString()}</StatNumber>
51-
</Skeleton>
52-
</Card>
53-
<Card as={Stat}>
54-
<StatLabel mb={{ base: 1, md: 0 }}>Unclaimed Supply</StatLabel>
55-
<Skeleton
56-
isLoaded={totalSupplyQuery.isSuccess && nextTokenIdQuery.isSuccess}
57-
>
58-
<StatNumber>{unclaimedSupply}</StatNumber>
59-
</Skeleton>
60-
</Card>
38+
<div className="flex flex-row gap-3 md:gap-6 [&>*]:grow">
39+
<StatCard
40+
value={realTotalSupply.toString()}
41+
label="Total Supply"
42+
isPending={nextTokenIdQuery.isPending}
43+
/>
44+
<StatCard
45+
value={totalSupplyQuery?.data?.toString() || "N/A"}
46+
label="Claimed Supply"
47+
isPending={totalSupplyQuery.isPending}
48+
/>
49+
<StatCard
50+
value={unclaimedSupply}
51+
label="Unclaimed Supply"
52+
isPending={totalSupplyQuery.isPending || nextTokenIdQuery.isPending}
53+
/>
6154
</div>
6255
);
6356
};

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

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,6 @@ import type { NFT, ThirdwebContract } from "thirdweb";
4141
import * as ERC721Ext from "thirdweb/extensions/erc721";
4242
import * as ERC1155Ext from "thirdweb/extensions/erc1155";
4343
import { useReadContract } from "thirdweb/react";
44-
import { Heading, Text } from "tw-components";
4544

4645
interface ContractOverviewNFTGetAllProps {
4746
contract: ThirdwebContract;
@@ -61,11 +60,7 @@ export const NFTGetAllTable: React.FC<ContractOverviewNFTGetAllProps> = ({
6160
{
6261
Header: "Token Id",
6362
accessor: (row) => row.id?.toString(),
64-
Cell: (cell: CellProps<NFT, string>) => (
65-
<Text size="body.md" fontFamily="mono">
66-
{cell.value}
67-
</Text>
68-
),
63+
Cell: (cell: CellProps<NFT, string>) => <p>{cell.value}</p>,
6964
},
7065
{
7166
Header: "Media",
@@ -140,9 +135,9 @@ export const NFTGetAllTable: React.FC<ContractOverviewNFTGetAllProps> = ({
140135
Cell: (cell: CellProps<NFT, number>) => {
141136
if (cell.row.original.type === "ERC1155") {
142137
return (
143-
<Text noOfLines={4} size="body.md" fontFamily="mono">
138+
<p className="line-clamp-4 font-mono text-base">
144139
{cell.row.original.supply.toString()}
145-
</Text>
140+
</p>
146141
);
147142
}
148143
},
@@ -267,9 +262,9 @@ export const NFTGetAllTable: React.FC<ContractOverviewNFTGetAllProps> = ({
267262
// biome-ignore lint/suspicious/noArrayIndexKey: FIXME
268263
key={columnIndex}
269264
>
270-
<Text as="label" size="label.sm" color="faded">
265+
<p className="text-muted-foreground">
271266
{column.render("Header")}
272-
</Text>
267+
</p>
273268
</Th>
274269
))}
275270
{/* Need to add an empty header for the drawer button */}
@@ -352,7 +347,7 @@ export const NFTGetAllTable: React.FC<ContractOverviewNFTGetAllProps> = ({
352347
>
353348
<Flex align="center" gap={4}>
354349
<Spinner size="sm" />
355-
<Heading size="label.lg">Fetching new page</Heading>
350+
<p className="text-lg">Fetching new page</p>
356351
</Flex>
357352
</Flex>
358353
)}
@@ -373,12 +368,12 @@ export const NFTGetAllTable: React.FC<ContractOverviewNFTGetAllProps> = ({
373368
icon={<ChevronLeftIcon className="size-4" />}
374369
onClick={() => previousPage()}
375370
/>
376-
<Text whiteSpace="nowrap">
371+
<p className="whitespace-nowrap">
377372
Page <strong>{pageIndex + 1}</strong> of{" "}
378373
<Skeleton as="span" display="inline" isLoaded={querySuccess}>
379374
<strong>{pageCount}</strong>
380375
</Skeleton>
381-
</Text>
376+
</p>
382377
<IconButton
383378
isDisabled={!canNextPage || queryLoading}
384379
aria-label="next page"

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

Lines changed: 1 addition & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import { SkeletonContainer } from "@/components/ui/skeleton";
21
import { useMemo } from "react";
32
import type { ThirdwebContract } from "thirdweb";
43
import { totalAuctions, totalListings } from "thirdweb/extensions/marketplace";
54
import { useReadContract } from "thirdweb/react";
5+
import { StatCard } from "./stat-card";
66

77
const TotalListingsStat: React.FC<{ contract: ThirdwebContract }> = ({
88
contract,
@@ -82,20 +82,3 @@ export const ListingStatsV3: React.FC<ListingStatsV3Props> = ({
8282
</div>
8383
);
8484
};
85-
86-
function StatCard(props: {
87-
value: string;
88-
isPending: boolean;
89-
label: string;
90-
}) {
91-
return (
92-
<dl className="block rounded-lg border border-border bg-muted/50 p-4">
93-
<dt className="mb-1.5 text-sm md:text-base">{props.label}</dt>
94-
<SkeletonContainer
95-
loadedData={props.isPending ? undefined : props.value}
96-
skeletonData={"0000"}
97-
render={(v) => <dd className="truncate font-semibold text-xl">{v}</dd>}
98-
/>
99-
</dl>
100-
);
101-
}

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { SkeletonContainer } from "@/components/ui/skeleton";
2+
3+
export function StatCard(props: {
4+
value: string;
5+
isPending: boolean;
6+
label: string;
7+
}) {
8+
return (
9+
<dl className="block rounded-lg border border-border bg-muted/50 p-4">
10+
<dt className="mb-1.5 text-sm md:text-base">{props.label}</dt>
11+
<SkeletonContainer
12+
loadedData={props.isPending ? undefined : props.value}
13+
skeletonData={"0000"}
14+
render={(v) => <dd className="truncate font-semibold text-xl">{v}</dd>}
15+
/>
16+
</dl>
17+
);
18+
}

‎apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/permissions/components/contract-permission.tsx

Lines changed: 17 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1+
import { Card } from "@/components/ui/card";
12
import { useIsAdmin } from "@3rdweb-sdk/react/hooks/useContractRoles";
23
import { Flex, Select, Spinner } from "@chakra-ui/react";
34
import { InfoIcon } from "lucide-react";
45
import { useFormContext } from "react-hook-form";
56
import { type ThirdwebContract, ZERO_ADDRESS } from "thirdweb";
6-
import { Card, Heading, Text } from "tw-components";
77
import { PermissionEditor } from "./permissions-editor";
88

99
interface ContractPermissionProps {
@@ -17,7 +17,6 @@ export const ContractPermission: React.FC<ContractPermissionProps> = ({
1717
role,
1818
description,
1919
isPending,
20-
2120
contract,
2221
}) => {
2322
const {
@@ -33,23 +32,23 @@ export const ContractPermission: React.FC<ContractPermissionProps> = ({
3332
const isAdmin = useIsAdmin(contract);
3433

3534
return (
36-
<Card position="relative">
35+
<Card className="relative p-4">
3736
<Flex direction="column" gap={3}>
3837
<div className="mb-3 flex flex-col gap-2">
3938
<div className="flex flex-row">
4039
<div className="flex grow flex-col gap-1">
41-
<Heading size="subtitle.sm" textTransform="capitalize">
40+
<p className="font-semibold text-base capitalize">
4241
{role === "minter" ? "Minter / Creator" : role}
43-
</Heading>
44-
<Text>{description}</Text>
42+
</p>
43+
<p className="text-muted-foreground">{description}</p>
4544
</div>
4645

4746
{role === "transfer" && (
4847
<Flex align="center" justify="center" flexGrow={0} flexShrink={0}>
4948
{isPending || isSubmitting ? (
5049
<Flex align="center" gap={2} px={2}>
5150
<Spinner size="sm" />
52-
<Text>{isPending ? "Loading ..." : "Updating ..."}</Text>
51+
<p>{isPending ? "Loading ..." : "Updating ..."}</p>
5352
</Flex>
5453
) : (
5554
<Select
@@ -84,7 +83,7 @@ export const ContractPermission: React.FC<ContractPermissionProps> = ({
8483
{isPending || isSubmitting ? (
8584
<Flex align="center" gap={2} px={2}>
8685
<Spinner size="sm" />
87-
<Text>{isPending ? "Loading ..." : "Updating ..."}</Text>
86+
<p>{isPending ? "Loading ..." : "Updating ..."}</p>
8887
</Flex>
8988
) : (
9089
<Select
@@ -119,7 +118,7 @@ export const ContractPermission: React.FC<ContractPermissionProps> = ({
119118
{isPending || isSubmitting ? (
120119
<Flex align="center" gap={2} px={2}>
121120
<Spinner size="sm" />
122-
<Text>{isPending ? "Loading ..." : "Updating ..."}</Text>
121+
<p>{isPending ? "Loading ..." : "Updating ..."}</p>
123122
</Flex>
124123
) : (
125124
<Select
@@ -165,8 +164,8 @@ export const ContractPermission: React.FC<ContractPermissionProps> = ({
165164
padding="10px"
166165
gap={3}
167166
>
168-
<InfoIcon className="size-6 text-primary-foreground hover:opacity-10" />
169-
<Text color="primary.800" _dark={{ color: "primary.100" }}>
167+
<InfoIcon className="size-6 text-primary hover:opacity-10 dark:text-primary-foreground" />
168+
<p className="text-primary dark:text-primary-foreground">
170169
{isRestricted ? (
171170
<>
172171
The tokens in this contract are currently{" "}
@@ -181,7 +180,7 @@ export const ContractPermission: React.FC<ContractPermissionProps> = ({
181180
transfer their tokens.
182181
</>
183182
)}
184-
</Text>
183+
</p>
185184
</Flex>
186185
)}
187186

@@ -200,8 +199,8 @@ export const ContractPermission: React.FC<ContractPermissionProps> = ({
200199
padding="10px"
201200
gap={3}
202201
>
203-
<InfoIcon className="size-6 text-primary-foreground hover:opacity-10" />
204-
<Text color="primary.800" _dark={{ color: "primary.100" }}>
202+
<InfoIcon className="size-6 text-primary hover:opacity-10 dark:text-primary-foreground" />
203+
<p className="text-primary dark:text-primary-foreground">
205204
{isRestricted ? (
206205
<>
207206
Currently, only addresses specified below will be able to
@@ -210,7 +209,7 @@ export const ContractPermission: React.FC<ContractPermissionProps> = ({
210209
) : (
211210
<>This marketplace is open for anyone to create listings.</>
212211
)}
213-
</Text>
212+
</p>
214213
</Flex>
215214
)}
216215

@@ -229,8 +228,8 @@ export const ContractPermission: React.FC<ContractPermissionProps> = ({
229228
padding="10px"
230229
gap={3}
231230
>
232-
<InfoIcon className="size-6 text-primary-foreground hover:opacity-10" />
233-
<Text color="primary.800" _dark={{ color: "primary.100" }}>
231+
<InfoIcon className="size-6 text-primary hover:opacity-10 dark:text-primary-foreground" />
232+
<p className="text-primary dark:text-primary-foreground">
234233
{isRestricted ? (
235234
<>
236235
Currently, only assets from the contracts specified below
@@ -242,7 +241,7 @@ export const ContractPermission: React.FC<ContractPermissionProps> = ({
242241
contract.
243242
</>
244243
)}
245-
</Text>
244+
</p>
246245
</Flex>
247246
)}
248247

0 commit comments

Comments
 (0)