Skip to content

[Dashboard] replace Chakra fieldset with shadcn #7143

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
May 23, 2025
Merged

[Dashboard] replace Chakra fieldset with shadcn #7143

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 26 additions & 17 deletions .../dashboard/src/components/contract-components/contract-publish-form/networks-fieldset.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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>
Comment on lines +31 to +32
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Verification agent

🧩 Analysis chain

Verify form validation behavior

The replacement of Chakra's FormControl with a div that has a data-required attribute may affect form validation behavior.

🏁 Script executed:

#!/bin/bash
# Check if there are custom styles or handlers for data-required attribute
rg "data-required" --type css
rg "data-required" --type ts --type tsx -A 5 -B 5

Length of output: 107

🏁 Script executed:

#!/bin/bash
# Search for CSS targeting [data-required] in CSS/SCSS/SASS files
rg "\[data-required\]" -g '*.{css,scss,sass}' -A5 -B5

# Search for any occurrences of data-required in TypeScript/TSX files
rg "data-required" -g '*.{ts,tsx}' -A5 -B5

Length of output: 1550

Fix required: restore form validation semantics

Replacing Chakra’s FormControl with a plain <div data-required> removes built-in handling of required fields (ARIA attributes, label/error associations, styling). Please update networks-fieldset.tsx to re-introduce proper form control semantics:

• Wrap the select in Chakra’s FormControl isRequired instead of a <div data-required>
• Ensure you import FormControl from @chakra-ui/react
• Alternatively, at minimum add aria-required to the actual input/select component

Suggested diff:

--- 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
@@
-     </div>
-     <div className="flex flex-col gap-2" data-required>
+     </div>
+     <FormControl isRequired className="flex flex-col gap-2">

And at the top of the file:

+ import { FormControl } from "@chakra-ui/react";

This will preserve ARIA semantics and Chakra’s error/required styling.

Committable suggestion skipped: line range outside the PR's diff.

🤖 Prompt for AI Agents 
In
apps/dashboard/src/components/contract-components/contract-publish-form/networks-fieldset.tsx
around lines 31 to 32, replace the plain div with data-required attribute by
wrapping the select element inside Chakra UI's FormControl component with the
isRequired prop. Import FormControl from @chakra-ui/react at the top of the
file. This will restore proper form validation semantics, including ARIA
attributes and styling. Alternatively, if not using FormControl, add
aria-required to the select element to maintain accessibility.

<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}
Expand All @@ -50,8 +59,8 @@ export const NetworksFieldset: React.FC<NetworksFieldsetProps> = ({
form.watch("networksForDeployment.networksEnabled") || []
}
/>
</Flex>
</div>
)}
</Flex>
</div>
);
};
Loading