Skip to content

Commit 8d2bc57

Browse files
MananTankMananTank
committed
Dashboard: Migrate contract/settings page from chakra to tailwind
1 parent a757938 commit 8d2bc57

File tree

5 files changed

+599
-587
lines changed

5 files changed

+599
-587
lines changed

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

Lines changed: 71 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,76 +1,62 @@
11
"use client";
2-
import { Flex, GridItem, SimpleGrid } from "@chakra-ui/react";
32
import type { ThirdwebContract } from "thirdweb";
43
import * as CommonExt from "thirdweb/extensions/common";
4+
import { cn } from "@/lib/utils";
55
import { SettingsMetadata } from "./components/metadata";
66
import { SettingsPlatformFees } from "./components/platform-fees";
77
import { SettingsPrimarySale } from "./components/primary-sale";
88
import { SettingsRoyalties } from "./components/royalties";
99

10-
interface ContractSettingsPageProps {
10+
const ContractSettingsPageInner = (props: {
1111
contract: ThirdwebContract;
1212
isContractMetadataSupported: boolean;
1313
isPrimarySaleSupported: boolean;
1414
isRoyaltiesSupported: boolean;
1515
isPlatformFeesSupported: boolean;
1616
isLoggedIn: boolean;
17-
}
18-
19-
const ContractSettingsPageInner: React.FC<ContractSettingsPageProps> = ({
20-
contract,
21-
isContractMetadataSupported,
22-
isPrimarySaleSupported,
23-
isRoyaltiesSupported,
24-
isPlatformFeesSupported,
25-
isLoggedIn,
2617
}) => {
2718
return (
28-
<Flex direction="column" gap={4}>
29-
<Flex gap={8} w="100%">
30-
<SimpleGrid columns={1} gap={8} w="100%">
31-
{contract && (
32-
<GridItem order={isContractMetadataSupported ? 0 : 100}>
33-
<SettingsMetadata
34-
contract={contract}
35-
detectedState={
36-
isContractMetadataSupported ? "enabled" : "disabled"
37-
}
38-
isLoggedIn={isLoggedIn}
39-
/>
40-
</GridItem>
41-
)}
42-
{contract && (
43-
<GridItem order={isPrimarySaleSupported ? 2 : 101}>
44-
<SettingsPrimarySale
45-
contract={contract}
46-
detectedState={isPrimarySaleSupported ? "enabled" : "disabled"}
47-
isLoggedIn={isLoggedIn}
48-
/>
49-
</GridItem>
50-
)}
19+
<div className="flex flex-col gap-8">
20+
<div
21+
className={cn(
22+
props.isContractMetadataSupported ? "order-1" : "order-2",
23+
)}
24+
>
25+
<SettingsMetadata
26+
contract={props.contract}
27+
detectedState={
28+
props.isContractMetadataSupported ? "enabled" : "disabled"
29+
}
30+
isLoggedIn={props.isLoggedIn}
31+
/>
32+
</div>
5133

52-
{contract && (
53-
<GridItem order={isRoyaltiesSupported ? 3 : 102}>
54-
<SettingsRoyalties
55-
contract={contract}
56-
detectedState={isRoyaltiesSupported ? "enabled" : "disabled"}
57-
isLoggedIn={isLoggedIn}
58-
/>
59-
</GridItem>
60-
)}
34+
<div className={cn(props.isPrimarySaleSupported ? "order-1" : "order-2")}>
35+
<SettingsPrimarySale
36+
contract={props.contract}
37+
detectedState={props.isPrimarySaleSupported ? "enabled" : "disabled"}
38+
isLoggedIn={props.isLoggedIn}
39+
/>
40+
</div>
6141

62-
{contract && (
63-
<GridItem order={isPlatformFeesSupported ? 4 : 103}>
64-
<SettingsPlatformFees
65-
contract={contract}
66-
detectedState={isPlatformFeesSupported ? "enabled" : "disabled"}
67-
isLoggedIn={isLoggedIn}
68-
/>
69-
</GridItem>
70-
)}
71-
</SimpleGrid>
72-
</Flex>
73-
</Flex>
42+
<div className={cn(props.isRoyaltiesSupported ? "order-1" : "order-2")}>
43+
<SettingsRoyalties
44+
contract={props.contract}
45+
detectedState={props.isRoyaltiesSupported ? "enabled" : "disabled"}
46+
isLoggedIn={props.isLoggedIn}
47+
/>
48+
</div>
49+
50+
<div
51+
className={cn(props.isPlatformFeesSupported ? "order-1" : "order-2")}
52+
>
53+
<SettingsPlatformFees
54+
contract={props.contract}
55+
detectedState={props.isPlatformFeesSupported ? "enabled" : "disabled"}
56+
isLoggedIn={props.isLoggedIn}
57+
/>
58+
</div>
59+
</div>
7460
);
7561
};
7662

@@ -83,28 +69,35 @@ export function ContractSettingsPage(props: {
8369
const { functionSelectors, contract, isLoggedIn, hasDefaultFeeConfig } =
8470
props;
8571
return (
86-
<ContractSettingsPageInner
87-
contract={contract}
88-
isContractMetadataSupported={[
89-
CommonExt.isGetContractMetadataSupported(functionSelectors),
90-
CommonExt.isSetContractMetadataSupported(functionSelectors),
91-
].every(Boolean)}
92-
isLoggedIn={isLoggedIn}
93-
isPlatformFeesSupported={
94-
!hasDefaultFeeConfig &&
95-
[
96-
CommonExt.isGetPlatformFeeInfoSupported(functionSelectors),
97-
CommonExt.isSetPlatformFeeInfoSupported(functionSelectors),
98-
].every(Boolean)
99-
}
100-
isPrimarySaleSupported={[
101-
CommonExt.isPrimarySaleRecipientSupported(functionSelectors),
102-
CommonExt.isSetPrimarySaleRecipientSupported(functionSelectors),
103-
].every(Boolean)}
104-
isRoyaltiesSupported={[
105-
CommonExt.isGetDefaultRoyaltyInfoSupported(functionSelectors),
106-
CommonExt.isSetDefaultRoyaltyInfoSupported(functionSelectors),
107-
].every(Boolean)}
108-
/>
72+
<div>
73+
<h2 className="text-2xl font-semibold tracking-tight mb-0.5">Settings</h2>
74+
<p className="text-muted-foreground mb-5">
75+
Configure the settings for your contract
76+
</p>
77+
78+
<ContractSettingsPageInner
79+
contract={contract}
80+
isContractMetadataSupported={[
81+
CommonExt.isGetContractMetadataSupported(functionSelectors),
82+
CommonExt.isSetContractMetadataSupported(functionSelectors),
83+
].every(Boolean)}
84+
isLoggedIn={isLoggedIn}
85+
isPlatformFeesSupported={
86+
!hasDefaultFeeConfig &&
87+
[
88+
CommonExt.isGetPlatformFeeInfoSupported(functionSelectors),
89+
CommonExt.isSetPlatformFeeInfoSupported(functionSelectors),
90+
].every(Boolean)
91+
}
92+
isPrimarySaleSupported={[
93+
CommonExt.isPrimarySaleRecipientSupported(functionSelectors),
94+
CommonExt.isSetPrimarySaleRecipientSupported(functionSelectors),
95+
].every(Boolean)}
96+
isRoyaltiesSupported={[
97+
CommonExt.isGetDefaultRoyaltyInfoSupported(functionSelectors),
98+
CommonExt.isSetDefaultRoyaltyInfoSupported(functionSelectors),
99+
].every(Boolean)}
100+
/>
101+
</div>
109102
);
110103
}

0 commit comments

Comments
 (0)