Skip to content

Commit 4fd35f1

Browse files
kien-ngokien-ngo
committed
update
1 parent 4ae50f5 commit 4fd35f1

File tree

5 files changed

+78
-83
lines changed

5 files changed

+78
-83
lines changed

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

Lines changed: 14 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import { Flex } from "@chakra-ui/react";
2-
import { Card, Text } from "tw-components";
1+
import { Card } from "@/components/ui/card";
32

43
interface NftPropertyProps {
54
// biome-ignore lint/suspicious/noExplicitAny: FIXME
@@ -8,22 +7,19 @@ interface NftPropertyProps {
87

98
export const NftProperty: React.FC<NftPropertyProps> = ({ property }) => {
109
return (
11-
<Card as={Flex} flexDir="column" gap={2}>
12-
{property?.trait_type && (
13-
<Text
14-
size="label.sm"
15-
color="primary.500"
16-
textAlign="center"
17-
lineHeight={1.2}
18-
>
19-
{property?.trait_type}
20-
</Text>
21-
)}
22-
<Text size="label.md" textAlign="center">
23-
{typeof property?.value === "object"
24-
? JSON.stringify(property?.value || {})
25-
: property?.value}
26-
</Text>
10+
<Card className="flex p-3">
11+
<div className="m-auto flex flex-col items-center">
12+
{property?.trait_type && (
13+
<p className="text-center text-primary text-sm leading-[1.2]">
14+
{property?.trait_type}
15+
</p>
16+
)}
17+
<p className="text-center">
18+
{typeof property?.value === "object"
19+
? JSON.stringify(property?.value || {})
20+
: property?.value}
21+
</p>
22+
</div>
2723
</Card>
2824
);
2925
};

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

Lines changed: 25 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
"use client";
22

3-
import { Skeleton, Stat, StatLabel, StatNumber } from "@chakra-ui/react";
3+
import { Card } from "@/components/ui/card";
4+
import { Skeleton } from "@/components/ui/skeleton";
45
import { useMemo } from "react";
56
import type { ThirdwebContract } from "thirdweb";
67
import {
@@ -9,7 +10,6 @@ import {
910
totalSupply,
1011
} from "thirdweb/extensions/erc721";
1112
import { useReadContract } from "thirdweb/react";
12-
import { Card } from "tw-components";
1313

1414
interface SupplyCardsProps {
1515
contract: ThirdwebContract;
@@ -38,25 +38,31 @@ export const SupplyCards: React.FC<SupplyCardsProps> = ({ contract }) => {
3838

3939
return (
4040
<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>
41+
<Card className="w-full p-4">
42+
<div>Total Supply</div>
43+
{nextTokenIdQuery.isSuccess ? (
44+
<div className="font-semibold">{realTotalSupply.toString()}</div>
45+
) : (
46+
<Skeleton className="h-4 w-[100px]" />
47+
)}
4648
</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>
49+
<Card className="w-full p-4">
50+
<div>Claimed Supply</div>
51+
{totalSupplyQuery.isSuccess ? (
52+
<div className="font-semibold">
53+
{totalSupplyQuery?.data?.toString()}
54+
</div>
55+
) : (
56+
<Skeleton className="h-4 w-[100px]" />
57+
)}
5258
</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>
59+
<Card className="w-full p-4">
60+
<div>Unclaimed Supply</div>
61+
{totalSupplyQuery.isSuccess && nextTokenIdQuery.isSuccess ? (
62+
<div className="font-semibold">{unclaimedSupply}</div>
63+
) : (
64+
<Skeleton className="h-4 w-[100px]" />
65+
)}
6066
</Card>
6167
</div>
6268
);

‎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]/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>{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

‎apps/dashboard/src/components/wallets/ConnectWalletPlayground/ThemeButton.tsx‎

Lines changed: 14 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
import { Tooltip } from "@chakra-ui/react";
1+
import { Button } from "@/components/ui/button";
2+
import { ToolTipLabel } from "@/components/ui/tooltip";
3+
import { cn } from "@/lib/utils";
24
import { useTrack } from "hooks/analytics/useTrack";
3-
import { Button } from "tw-components";
45

56
export function ThemeButton(props: {
67
theme: "light" | "dark";
@@ -11,22 +12,20 @@ export function ThemeButton(props: {
1112
}) {
1213
const trackEvent = useTrack();
1314
const bg = props.theme === "dark" ? "black" : "white";
14-
const borderColor = props.theme === "dark" ? "gray.800" : "gray.200";
15+
const borderColor =
16+
props.theme === "dark" ? "border-gray-800" : "border-gray-200";
1517
return (
16-
<Tooltip label={props.theme === "dark" ? "Dark" : "Light"}>
18+
<ToolTipLabel label={props.theme === "dark" ? "Dark" : "Light"}>
1719
<Button
1820
disabled={props.disabled}
19-
cursor={props.disabled ? "not-allowed" : "pointer"}
20-
w={10}
21-
h={10}
22-
borderRadius="50%"
21+
className={cn(
22+
props.disabled ? "cursor-not-allowed" : "cursor-pointer",
23+
"h-10 w-10 rounded-full border-[3px] border-border",
24+
`bg-${bg}`,
25+
`hover:bg-${bg}`,
26+
props.isSelected ? "border-blue-500" : borderColor,
27+
)}
2328
aria-label={props.theme}
24-
border="3px solid"
25-
bg={bg}
26-
_hover={{
27-
bg,
28-
}}
29-
borderColor={props.isSelected ? "blue.500" : borderColor}
3029
onClick={
3130
props.disabled
3231
? undefined
@@ -42,6 +41,6 @@ export function ThemeButton(props: {
4241
}
4342
}
4443
/>
45-
</Tooltip>
44+
</ToolTipLabel>
4645
);
4746
}

0 commit comments

Comments
 (0)