From f9b609e7a2e2820f7f2742e905e8b6a64036b4cb Mon Sep 17 00:00:00 2001
From: jnsdls <jonas.daniels@outlook.com>
Date: Fri, 23 May 2025 18:00:04 +0000
Subject: [PATCH] [Dashboard] replace Chakra fieldset with shadcn (#7143)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Migrates the NetworksFieldset component from Chakra UI to shadcn/ui and Tailwind.

- Drop Chakra Flex, FormControl and Select
- Use shadcn Select primitives with tailwind classes
- Adjust layout with Tailwind via `cn`

Fixes #0

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on refactoring the `NetworksFieldset` component in `networks-fieldset.tsx` to use a new `Select` component from the UI library, improving styling and functionality while maintaining the same overall behavior.

### Detailed summary
- Replaced `Flex` and `FormControl` components with a new `div` structure and `Select` component.
- Updated the `Select` component to use `SelectTrigger`, `SelectContent`, and `SelectItem`.
- Changed event handlers from `onChange` to `onValueChange` for better state management.
- Maintained layout and functionality with updated class names for styling.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

- **Refactor**
  - Updated the network selection field to use a custom select component and Tailwind-based layout for a more consistent user interface.
- **Style**
  - Improved the visual appearance and spacing of the network selection field.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../networks-fieldset.tsx                     | 43 +++++++++++--------
 1 file changed, 26 insertions(+), 17 deletions(-)

diff --git a/apps/dashboard/src/components/contract-components/contract-publish-form/networks-fieldset.tsx b/apps/dashboard/src/components/contract-components/contract-publish-form/networks-fieldset.tsx
index 9a6e9f567d1..88ae10af080 100644
--- a/apps/dashboard/src/components/contract-components/contract-publish-form/networks-fieldset.tsx
+++ b/apps/dashboard/src/components/contract-components/contract-publish-form/networks-fieldset.tsx
@@ -1,5 +1,12 @@
 import { MultiNetworkSelector } from "@/components/blocks/NetworkSelectors";
-import { Flex, FormControl, Select } from "@chakra-ui/react";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { cn } from "@/lib/utils";
 import { useFormContext } from "react-hook-form";
 import type { ThirdwebClient } from "thirdweb";
 import { Heading, Text } from "tw-components";
@@ -16,30 +23,32 @@ export const NetworksFieldset: React.FC<NetworksFieldsetProps> = ({
   const form = useFormContext();
 
   return (
-    <Flex flexDir="column" gap={fromStandard ? 6 : 4}>
-      <Flex flexDir="column" gap={2}>
+    <div className={cn("flex flex-col", fromStandard ? "gap-6" : "gap-4")}>
+      <div className="flex flex-col gap-2">
         <Heading size={fromStandard ? "title.lg" : "title.md"}>
           Networks that your contract can be deployed to
         </Heading>
-      </Flex>
-      <FormControl isRequired>
+      </div>
+      <div className="flex flex-col gap-2" data-required>
         <Select
-          onChange={(e) =>
-            form.setValue(
-              "networksForDeployment.allNetworks",
-              e.target.value === "all",
-            )
-          }
           value={
             form.watch("networksForDeployment.allNetworks") ? "all" : "specific"
           }
+          onValueChange={(value) =>
+            form.setValue("networksForDeployment.allNetworks", value === "all")
+          }
         >
-          <option value="all">All networks</option>
-          <option value="specific">Specific networks</option>
+          <SelectTrigger className="w-full">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">All networks</SelectItem>
+            <SelectItem value="specific">Specific networks</SelectItem>
+          </SelectContent>
         </Select>
-      </FormControl>
+      </div>
       {!form.watch("networksForDeployment.allNetworks") && (
-        <Flex flexDir="column" gap={2}>
+        <div className="flex flex-col gap-2">
           <Text>Please select the networks you want to enable:</Text>
           <MultiNetworkSelector
             client={client}
@@ -50,8 +59,8 @@ export const NetworksFieldset: React.FC<NetworksFieldsetProps> = ({
               form.watch("networksForDeployment.networksEnabled") || []
             }
           />
-        </Flex>
+        </div>
       )}
-    </Flex>
+    </div>
   );
 };