Skip to content

Commit f9b609e

Browse files
committed
[Dashboard] replace Chakra fieldset with shadcn (#7143)
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 -->
1 parent 916ecf4 commit f9b609e

File tree

1 file changed

+26
-17
lines changed

1 file changed

+26
-17
lines changed
Lines changed: 26 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
11
import { MultiNetworkSelector } from "@/components/blocks/NetworkSelectors";
2-
import { Flex, FormControl, Select } from "@chakra-ui/react";
2+
import {
3+
Select,
4+
SelectContent,
5+
SelectItem,
6+
SelectTrigger,
7+
SelectValue,
8+
} from "@/components/ui/select";
9+
import { cn } from "@/lib/utils";
310
import { useFormContext } from "react-hook-form";
411
import type { ThirdwebClient } from "thirdweb";
512
import { Heading, Text } from "tw-components";
@@ -16,30 +23,32 @@ export const NetworksFieldset: React.FC<NetworksFieldsetProps> = ({
1623
const form = useFormContext();
1724

1825
return (
19-
<Flex flexDir="column" gap={fromStandard ? 6 : 4}>
20-
<Flex flexDir="column" gap={2}>
26+
<div className={cn("flex flex-col", fromStandard ? "gap-6" : "gap-4")}>
27+
<div className="flex flex-col gap-2">
2128
<Heading size={fromStandard ? "title.lg" : "title.md"}>
2229
Networks that your contract can be deployed to
2330
</Heading>
24-
</Flex>
25-
<FormControl isRequired>
31+
</div>
32+
<div className="flex flex-col gap-2" data-required>
2633
<Select
27-
onChange={(e) =>
28-
form.setValue(
29-
"networksForDeployment.allNetworks",
30-
e.target.value === "all",
31-
)
32-
}
3334
value={
3435
form.watch("networksForDeployment.allNetworks") ? "all" : "specific"
3536
}
37+
onValueChange={(value) =>
38+
form.setValue("networksForDeployment.allNetworks", value === "all")
39+
}
3640
>
37-
<option value="all">All networks</option>
38-
<option value="specific">Specific networks</option>
41+
<SelectTrigger className="w-full">
42+
<SelectValue />
43+
</SelectTrigger>
44+
<SelectContent>
45+
<SelectItem value="all">All networks</SelectItem>
46+
<SelectItem value="specific">Specific networks</SelectItem>
47+
</SelectContent>
3948
</Select>
40-
</FormControl>
49+
</div>
4150
{!form.watch("networksForDeployment.allNetworks") && (
42-
<Flex flexDir="column" gap={2}>
51+
<div className="flex flex-col gap-2">
4352
<Text>Please select the networks you want to enable:</Text>
4453
<MultiNetworkSelector
4554
client={client}
@@ -50,8 +59,8 @@ export const NetworksFieldset: React.FC<NetworksFieldsetProps> = ({
5059
form.watch("networksForDeployment.networksEnabled") || []
5160
}
5261
/>
53-
</Flex>
62+
</div>
5463
)}
55-
</Flex>
64+
</div>
5665
);
5766
};

0 commit comments

Comments
 (0)