Skip to content

Commit f358fe7

Browse files
jnsdlsjnsdls
committed
[Dashboard] replace Chakra Box with shadcn
1 parent dcd6b99 commit f358fe7

File tree

27 files changed

+114
-176
lines changed

27 files changed

+114
-176
lines changed

‎apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/list-form.tsx

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import { Card } from "@/components/ui/card";
44
import { useDashboardOwnedNFTs } from "@3rdweb-sdk/react/hooks/useDashboardOwnedNFTs";
55
import { useWalletNFTs } from "@3rdweb-sdk/react/hooks/useWalletNFTs";
66
import {
7-
Box,
87
Flex,
98
FormControl,
109
Input,
@@ -539,27 +538,25 @@ export const CreateListingsForm: React.FC<CreateListingsFormProps> = ({
539538
</Card>
540539
}
541540
>
542-
<Box
543-
borderRadius="lg"
544-
cursor="pointer"
541+
<div
542+
className={cn(
543+
"rounded-lg overflow-hidden cursor-pointer",
544+
isSelected(nft) &&
545+
"outline outline-3 outline-purple-500",
546+
)}
545547
onClick={() =>
546548
isSelected(nft)
547549
? form.setValue("selected", undefined)
548550
: form.setValue("selected", nft)
549551
}
550-
outline={isSelected(nft) ? "3px solid" : undefined}
551-
outlineColor={
552-
isSelected(nft) ? "purple.500" : undefined
553-
}
554-
overflow="hidden"
555552
>
556553
<NFTMediaWithEmptyState
557554
metadata={nft.metadata}
558555
width="140px"
559556
height="140px"
560557
requireInteraction
561558
/>
562-
</Box>
559+
</div>
563560
</Tooltip>
564561
);
565562
})}

‎apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/Inputs/ClaimPriceInput.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Box, Flex } from "@chakra-ui/react";
1+
import { Flex } from "@chakra-ui/react";
22
import { CurrencySelector } from "components/shared/CurrencySelector";
33
import { NATIVE_TOKEN_ADDRESS } from "thirdweb";
44
import { useClaimConditionsFormContext } from "..";
@@ -36,14 +36,14 @@ export const ClaimPriceInput = (props: {
3636
}
3737
>
3838
<Flex gap={2} flexDir={{ base: "column", md: "row" }}>
39-
<Box w={{ base: "100%", md: "50%" }} minW="70px">
39+
<div className="min-w-[70px] w-full md:w-1/2">
4040
<PriceInput
4141
w="full"
4242
value={field.price?.toString() || ""}
4343
onChange={(val) => form.setValue(`phases.${phaseIndex}.price`, val)}
4444
/>
45-
</Box>
46-
<Box w={{ base: "100%", md: isColumn ? "50%" : "100%" }}>
45+
</div>
46+
<div className={cn("w-full", isColumn ? "md:w-1/2" : "md:w-full")}>
4747
<CurrencySelector
4848
contractChainId={props.contractChainId}
4949
isDisabled={formDisabled}
@@ -55,7 +55,7 @@ export const ClaimPriceInput = (props: {
5555
)
5656
}
5757
/>
58-
</Box>
58+
</div>
5959
</Flex>
6060
</CustomFormControl>
6161
);

‎apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/Inputs/ClaimerSelection.tsx

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Button } from "@/components/ui/button";
2-
import { Box, Flex, Select } from "@chakra-ui/react";
2+
import { Flex, Select } from "@chakra-ui/react";
33
import { UploadIcon } from "lucide-react";
44
import { useClaimConditionsFormContext } from "..";
55
import { CustomFormControl } from "../common";
@@ -147,10 +147,7 @@ export const ClaimerSelection = () => {
147147
</Flex>
148148
</Flex>
149149
) : (
150-
<Box
151-
w={{ base: "100%", md: "50%" }}
152-
display={{ base: "none", md: "block" }}
153-
/>
150+
<div className="hidden w-full md:block md:w-1/2" />
154151
)}
155152
</Flex>
156153
</CustomFormControl>

‎apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/index.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import {
99
AlertDescription,
1010
AlertIcon,
1111
AlertTitle,
12-
Box,
1312
Flex,
1413
Menu,
1514
MenuButton,
@@ -645,7 +644,10 @@ export const ClaimConditionsForm: React.FC<ClaimConditionsFormProps> = ({
645644
</div>
646645

647646
<div className="flex flex-row">
648-
<AdminOnly contract={contract} fallback={<Box pb={5} />}>
647+
<AdminOnly
648+
contract={contract}
649+
fallback={<div className="pb-5" />}
650+
>
649651
<Flex justifyContent="center" alignItems="center" gap={3}>
650652
{(hasRemovedPhases || hasAddedPhases) && (
651653
<Text color="red.500" fontWeight="bold">

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ export const AccountSigner: React.FC<AccountSignerProps> = ({
3434
endTimestamp,
3535
} = item;
3636
return (
37-
<Card position="relative" p={8}>
37+
<Card className="relative p-8">
3838
<Flex direction="column" gap={8}>
3939
<Flex flexDir="column" gap={2} mt={{ base: 4, md: 0 }}>
4040
<Flex

‎apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/account/components/account-balance.tsx

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

33
import { useSplitBalances } from "@3rdweb-sdk/react/hooks/useSplit";
4-
import { SimpleGrid, Stat, StatLabel, StatNumber } from "@chakra-ui/react";
4+
import { SimpleGrid, StatLabel, StatNumber } from "@chakra-ui/react";
55
import type { ThirdwebContract } from "thirdweb";
66
import { useActiveWalletChain, useWalletBalance } from "thirdweb/react";
77
import { Card } from "tw-components";
@@ -21,14 +21,14 @@ export const AccountBalance: React.FC<AccountBalanceProps> = ({ contract }) => {
2121

2222
return (
2323
<SimpleGrid spacing={{ base: 3, md: 6 }} columns={{ base: 2, md: 4 }}>
24-
<Card as={Stat}>
24+
<Card className="[&>*]:m-0">
2525
<StatLabel mb={{ base: 1, md: 0 }}>{balance?.symbol}</StatLabel>
2626
<StatNumber>{balance?.displayValue}</StatNumber>
2727
</Card>
2828
{balanceQuery?.data
2929
?.filter((bl) => bl.name !== "Native Token")
3030
.map((bl) => (
31-
<Card as={Stat} key={bl.symbol}>
31+
<Card className="[&>*]:m-0" key={bl.symbol}>
3232
<StatLabel mb={{ base: 1, md: 0 }}>{bl.symbol}</StatLabel>
3333
<StatNumber>{bl.display_balance}</StatNumber>
3434
</Card>

‎apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/accounts-count.tsx

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,6 @@
11
"use client";
22

3-
import {
4-
SimpleGrid,
5-
Skeleton,
6-
Stat,
7-
StatLabel,
8-
StatNumber,
9-
} from "@chakra-ui/react";
3+
import { SimpleGrid, Skeleton, StatLabel, StatNumber } from "@chakra-ui/react";
104
import type { ThirdwebContract } from "thirdweb";
115
import { totalAccounts } from "thirdweb/extensions/erc4337";
126
import { useReadContract } from "thirdweb/react";
@@ -20,7 +14,7 @@ export const AccountsCount: React.FC<AccountsCountProps> = ({ contract }) => {
2014
const totalAccountsQuery = useReadContract(totalAccounts, { contract });
2115
return (
2216
<SimpleGrid columns={{ base: 1, md: 3 }} spacing={{ base: 3, md: 6 }}>
23-
<Card as={Stat}>
17+
<Card className="[&>*]:m-0">
2418
<StatLabel mb={{ base: 1, md: 0 }}>Total Accounts</StatLabel>
2519
<Skeleton isLoaded={totalAccountsQuery.isSuccess}>
2620
<StatNumber>{totalAccountsQuery.data?.toString()}</StatNumber>

‎apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/events/events-feed.tsx

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ import {
1111
AccordionButton,
1212
AccordionItem,
1313
AccordionPanel,
14-
Box,
1514
ButtonGroup,
1615
Divider,
1716
Flex,
@@ -114,7 +113,7 @@ export const EventsFeed: React.FC<EventsFeedProps> = ({ contract }) => {
114113
</FormControl>
115114
</div>
116115
</Flex>
117-
<Card p={0} overflow="hidden">
116+
<Card className="overflow-hidden p-0">
118117
<SimpleGrid
119118
gap={2}
120119
columns={12}
@@ -198,14 +197,14 @@ const EventsFeedItem: React.FC<EventsFeedItemProps> = ({
198197
alignItems="center"
199198
_last={{ borderBottomWidth: 0 }}
200199
>
201-
<Box gridColumn="span 3">
200+
<div className="col-span-3">
202201
<div className="flex flex-row items-center gap-3">
203202
<Tooltip
204203
p={0}
205204
bg="transparent"
206205
boxShadow="none"
207206
label={
208-
<Card py={2} px={4} bgColor="backgroundHighlight">
207+
<Card className="bg-backgroundHighlight px-4 py-2">
209208
<Text size="label.sm">
210209
Copy transaction hash to clipboard
211210
</Text>
@@ -227,9 +226,9 @@ const EventsFeedItem: React.FC<EventsFeedItemProps> = ({
227226
{transaction.transactionHash.slice(0, 32)}...
228227
</Text>
229228
</div>
230-
</Box>
229+
</div>
231230

232-
<Box gridColumn="span 1" />
231+
<div className="col-span-1" />
233232

234233
<ButtonGroup
235234
size="sm"
@@ -262,7 +261,7 @@ const EventsFeedItem: React.FC<EventsFeedItemProps> = ({
262261
)}
263262
</ButtonGroup>
264263

265-
<Box gridColumn="span 3">
264+
<div className="col-span-3">
266265
<div className="flex flex-row justify-between gap-2">
267266
<Text fontFamily="mono" noOfLines={1}>
268267
{transaction.blockNumber}
@@ -271,7 +270,7 @@ const EventsFeedItem: React.FC<EventsFeedItemProps> = ({
271270
<ChevronDownIcon className="size-4" />
272271
</div>
273272
</div>
274-
</Box>
273+
</div>
275274
</SimpleGrid>
276275
</AccordionButton>
277276
<AccordionPanel>
@@ -312,15 +311,15 @@ const EventsFeedItem: React.FC<EventsFeedItemProps> = ({
312311
key={`${transaction.transactionHash}_${event.logIndex}`}
313312
>
314313
<SimpleGrid columns={12} gap={2}>
315-
<Box gridColumn="span 3">
314+
<div className="col-span-3">
316315
<Text fontWeight="bold">{event.eventName}</Text>
317-
</Box>
318-
<Box gridColumn="span 9">
316+
</div>
317+
<div className="col-span-9">
319318
<CodeClient
320319
code={stringify(event.args, null, 2)}
321320
lang="json"
322321
/>
323-
</Box>
322+
</div>
324323
</SimpleGrid>
325324

326325
{arr.length - 1 === idx ? null : <Divider />}
@@ -353,7 +352,7 @@ const TransactionData: React.FC<TransactionDataProps> = ({
353352
bg="transparent"
354353
boxShadow="none"
355354
label={
356-
<Card py={2} px={4} bgColor="backgroundHighlight">
355+
<Card className="bg-backgroundHighlight px-4 py-2">
357356
<Text size="label.sm">{description}</Text>
358357
</Card>
359358
}

‎apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/permissions/ContractPermissionsPage.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export const ContractPermissionsPage: React.FC<
2525

2626
if (!detectedPermissionEnumerable) {
2727
return (
28-
<Card as={Flex} flexDir="column" gap={3}>
28+
<Card className="flex flex-col gap-3">
2929
{/* TODO extract this out into it's own component and make it better */}
3030
<Heading size="subtitle.md">
3131
Missing PermissionsEnumerable Extension

‎apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/proposals/ContractProposalsPage.tsx

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

33
import { voteTokenBalances } from "@3rdweb-sdk/react/hooks/useVote";
4-
import { Divider, Flex, Stat, StatLabel, StatNumber } from "@chakra-ui/react";
4+
import { Divider, Flex, StatLabel, StatNumber } from "@chakra-ui/react";
55
import { useMemo } from "react";
66
import type { ThirdwebContract } from "thirdweb";
77
import * as VoteExt from "thirdweb/extensions/vote";
@@ -61,7 +61,11 @@ export const ContractProposalsPage: React.FC<ProposalsPageProps> = ({
6161
<Heading size="title.sm">Voting Tokens</Heading>
6262
<div className="flex flex-row gap-2">
6363
{voteTokenBalancesQuery.data?.map((balance) => (
64-
<Card as={Stat} key={balance.address} maxWidth="240px">
64+
<Card
65+
className="[&>*]:m-0"
66+
key={balance.address}
67+
style={{ maxWidth: 240 }}
68+
>
6569
<StatLabel>
6670
{balance.address?.toLowerCase() === address?.toLowerCase()
6771
? "Your Balance"

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -142,7 +142,7 @@ export const SettingsMetadata = ({
142142
);
143143

144144
return (
145-
<Card p={0} position="relative" overflow="hidden">
145+
<Card className="relative overflow-hidden p-0">
146146
<SettingDetectedState type="metadata" detectedState={detectedState} />
147147
<Flex
148148
as="form"

‎apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/platform-fees.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ export const SettingsPlatformFees = ({
7575
);
7676

7777
return (
78-
<Card p={0} position="relative" overflow="hidden">
78+
<Card className="relative overflow-hidden p-0">
7979
<SettingDetectedState type="platformFee" detectedState={detectedState} />
8080
<Flex
8181
as="form"

‎apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/primary-sale.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ export const SettingsPrimarySale = ({
6767
);
6868

6969
return (
70-
<Card p={0} position="relative" overflow="hidden">
70+
<Card className="relative overflow-hidden p-0">
7171
<SettingDetectedState type="primarySale" detectedState={detectedState} />
7272
<Flex
7373
as="form"

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ export const SettingsRoyalties = ({
8888
);
8989

9090
return (
91-
<Card p={0} position="relative" overflow="hidden">
91+
<Card className="relative overflow-hidden p-0">
9292
<SettingDetectedState type="royalties" detectedState={detectedState} />
9393
<Flex
9494
as="form"

‎apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/split/ContractSplitPage.tsx

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import {
55
Flex,
66
SimpleGrid,
77
Spinner,
8-
Stat,
98
StatLabel,
109
StatNumber,
1110
} from "@chakra-ui/react";
@@ -121,7 +120,7 @@ export const ContractSplitPage: React.FC<SplitPageProps> = ({
121120
<div className="flex flex-col gap-8">
122121
<Flex gap={4} flexDir="column">
123122
<SimpleGrid spacing={{ base: 3, md: 6 }} columns={{ base: 2, md: 4 }}>
124-
<Card as={Stat}>
123+
<Card className="[&>*]:m-0">
125124
<StatLabel mb={{ base: 1, md: 0 }}>
126125
{nativeBalanceQuery.data?.symbol}
127126
</StatLabel>
@@ -145,7 +144,11 @@ export const ContractSplitPage: React.FC<SplitPageProps> = ({
145144
(balanceQuery?.data || [])
146145
?.filter((bl) => bl.name !== "Native Token")
147146
?.map((balance) => (
148-
<Card as={Stat} key={balance.token_address} maxWidth="2xs">
147+
<Card
148+
className="[&>*]:m-0"
149+
key={balance.token_address}
150+
style={{ maxWidth: "20rem" }}
151+
>
149152
<StatLabel as={Heading} size="label.lg">
150153
{balance.name === "Native Token"
151154
? v4Chain?.nativeCurrency.symbol || "Native Token"

‎apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/contract-subscriptions/components/contract-subscriptions-table.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -287,7 +287,7 @@ const ChainLastBlockTimestamp = ({
287287
}
288288

289289
return (
290-
<Card bgColor="backgroundHighlight">
290+
<Card className="bg-backgroundHighlight">
291291
<Text>{format(ethBlockQuery.data, "PP pp z")}</Text>
292292
</Card>
293293
);
@@ -405,7 +405,7 @@ const RemoveModal = ({
405405
subscription.
406406
</Text>
407407

408-
<Card as={Flex} flexDir="column" gap={4}>
408+
<Card className="flex flex-col gap-4">
409409
<FormControl>
410410
<FormLabel>Chain</FormLabel>
411411
<Flex align="center" gap={2}>

0 commit comments

Comments
 (0)