Dashboard: Migrate contract/settings page from chakra to tailwind

Author: MananTank

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

@@ -1,76 +1,62 @@
 "use client";
-import { Flex, GridItem, SimpleGrid } from "@chakra-ui/react";
 import type { ThirdwebContract } from "thirdweb";
 import * as CommonExt from "thirdweb/extensions/common";
+import { cn } from "@/lib/utils";
 import { SettingsMetadata } from "./components/metadata";
 import { SettingsPlatformFees } from "./components/platform-fees";
 import { SettingsPrimarySale } from "./components/primary-sale";
 import { SettingsRoyalties } from "./components/royalties";
 
-interface ContractSettingsPageProps {
+const ContractSettingsPageInner = (props: {
   contract: ThirdwebContract;
   isContractMetadataSupported: boolean;
   isPrimarySaleSupported: boolean;
   isRoyaltiesSupported: boolean;
   isPlatformFeesSupported: boolean;
   isLoggedIn: boolean;
-}
-
-const ContractSettingsPageInner: React.FC<ContractSettingsPageProps> = ({
-  contract,
-  isContractMetadataSupported,
-  isPrimarySaleSupported,
-  isRoyaltiesSupported,
-  isPlatformFeesSupported,
-  isLoggedIn,
 }) => {
   return (
-    <Flex direction="column" gap={4}>
-      <Flex gap={8} w="100%">
-        <SimpleGrid columns={1} gap={8} w="100%">
-          {contract && (
-            <GridItem order={isContractMetadataSupported ? 0 : 100}>
-              <SettingsMetadata
-                contract={contract}
-                detectedState={
-                  isContractMetadataSupported ? "enabled" : "disabled"
-                }
-                isLoggedIn={isLoggedIn}
-              />
-            </GridItem>
-          )}
-          {contract && (
-            <GridItem order={isPrimarySaleSupported ? 2 : 101}>
-              <SettingsPrimarySale
-                contract={contract}
-                detectedState={isPrimarySaleSupported ? "enabled" : "disabled"}
-                isLoggedIn={isLoggedIn}
-              />
-            </GridItem>
-          )}
+    <div className="flex flex-col gap-8">
+      <div
+        className={cn(
+          props.isContractMetadataSupported ? "order-1" : "order-2",
+        )}
+      >
+        <SettingsMetadata
+          contract={props.contract}
+          detectedState={
+            props.isContractMetadataSupported ? "enabled" : "disabled"
+          }
+          isLoggedIn={props.isLoggedIn}
+        />
+      </div>
 
-          {contract && (
-            <GridItem order={isRoyaltiesSupported ? 3 : 102}>
-              <SettingsRoyalties
-                contract={contract}
-                detectedState={isRoyaltiesSupported ? "enabled" : "disabled"}
-                isLoggedIn={isLoggedIn}
-              />
-            </GridItem>
-          )}
+      <div className={cn(props.isPrimarySaleSupported ? "order-1" : "order-2")}>
+        <SettingsPrimarySale
+          contract={props.contract}
+          detectedState={props.isPrimarySaleSupported ? "enabled" : "disabled"}
+          isLoggedIn={props.isLoggedIn}
+        />
+      </div>
 
-          {contract && (
-            <GridItem order={isPlatformFeesSupported ? 4 : 103}>
-              <SettingsPlatformFees
-                contract={contract}
-                detectedState={isPlatformFeesSupported ? "enabled" : "disabled"}
-                isLoggedIn={isLoggedIn}
-              />
-            </GridItem>
-          )}
-        </SimpleGrid>
-      </Flex>
-    </Flex>
+      <div className={cn(props.isRoyaltiesSupported ? "order-1" : "order-2")}>
+        <SettingsRoyalties
+          contract={props.contract}
+          detectedState={props.isRoyaltiesSupported ? "enabled" : "disabled"}
+          isLoggedIn={props.isLoggedIn}
+        />
+      </div>
+
+      <div
+        className={cn(props.isPlatformFeesSupported ? "order-1" : "order-2")}
+      >
+        <SettingsPlatformFees
+          contract={props.contract}
+          detectedState={props.isPlatformFeesSupported ? "enabled" : "disabled"}
+          isLoggedIn={props.isLoggedIn}
+        />
+      </div>
+    </div>
   );
 };
 
@@ -83,28 +69,35 @@ export function ContractSettingsPage(props: {
   const { functionSelectors, contract, isLoggedIn, hasDefaultFeeConfig } =
     props;
   return (
-    <ContractSettingsPageInner
-      contract={contract}
-      isContractMetadataSupported={[
-        CommonExt.isGetContractMetadataSupported(functionSelectors),
-        CommonExt.isSetContractMetadataSupported(functionSelectors),
-      ].every(Boolean)}
-      isLoggedIn={isLoggedIn}
-      isPlatformFeesSupported={
-        !hasDefaultFeeConfig &&
-        [
-          CommonExt.isGetPlatformFeeInfoSupported(functionSelectors),
-          CommonExt.isSetPlatformFeeInfoSupported(functionSelectors),
-        ].every(Boolean)
-      }
-      isPrimarySaleSupported={[
-        CommonExt.isPrimarySaleRecipientSupported(functionSelectors),
-        CommonExt.isSetPrimarySaleRecipientSupported(functionSelectors),
-      ].every(Boolean)}
-      isRoyaltiesSupported={[
-        CommonExt.isGetDefaultRoyaltyInfoSupported(functionSelectors),
-        CommonExt.isSetDefaultRoyaltyInfoSupported(functionSelectors),
-      ].every(Boolean)}
-    />
+    <div>
+      <h2 className="text-2xl font-semibold tracking-tight mb-0.5">Settings</h2>
+      <p className="text-muted-foreground mb-5">
+        Configure the settings for your contract
+      </p>
+
+      <ContractSettingsPageInner
+        contract={contract}
+        isContractMetadataSupported={[
+          CommonExt.isGetContractMetadataSupported(functionSelectors),
+          CommonExt.isSetContractMetadataSupported(functionSelectors),
+        ].every(Boolean)}
+        isLoggedIn={isLoggedIn}
+        isPlatformFeesSupported={
+          !hasDefaultFeeConfig &&
+          [
+            CommonExt.isGetPlatformFeeInfoSupported(functionSelectors),
+            CommonExt.isSetPlatformFeeInfoSupported(functionSelectors),
+          ].every(Boolean)
+        }
+        isPrimarySaleSupported={[
+          CommonExt.isPrimarySaleRecipientSupported(functionSelectors),
+          CommonExt.isSetPrimarySaleRecipientSupported(functionSelectors),
+        ].every(Boolean)}
+        isRoyaltiesSupported={[
+          CommonExt.isGetDefaultRoyaltyInfoSupported(functionSelectors),
+          CommonExt.isSetDefaultRoyaltyInfoSupported(functionSelectors),
+        ].every(Boolean)}
+      />
+    </div>
   );
 }