Skip to content

[Dashboard] replace chakra form with shadcn #7216

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

Closed
wants to merge 1 commit into from
Closed

[Dashboard] replace chakra form with shadcn #7216

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
161 changes: 88 additions & 73 deletions apps/dashboard/src/components/onboarding/ApplyForOpCreditsForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,22 @@
import type { Team } from "@/api/team";
import { MultiSelect } from "@/components/blocks/multi-select";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { Textarea } from "@/components/ui/textarea";
import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
import { Flex, FormControl } from "@chakra-ui/react";
import { Select as ChakraSelect } from "chakra-react-select";
import { useTrack } from "hooks/analytics/useTrack";
import { useLocalStorage } from "hooks/useLocalStorage";
import { useTxNotifications } from "hooks/useTxNotifications";
import { useMemo } from "react";
import { useForm } from "react-hook-form";
import { FormHelperText, FormLabel } from "tw-components";
import { PlanToCreditsRecord } from "./ApplyForOpCreditsModal";
import { applyOpSponsorship } from "./applyOpSponsorship";

Expand Down Expand Up @@ -73,10 +79,8 @@ export const ApplyForOpCreditsForm: React.FC<ApplyForOpCreditsFormProps> = ({
);

return (
<Flex
direction="column"
gap={4}
as="form"
<form
className="flex flex-col gap-4"
onSubmit={form.handleSubmit(async (data) => {
const fields = Object.keys(data).map((key) => ({
name: key,
Expand Down Expand Up @@ -127,67 +131,84 @@ export const ApplyForOpCreditsForm: React.FC<ApplyForOpCreditsFormProps> = ({
}
})}
>
<Flex flexDir="column" gap={4}>
<Flex gap={4}>
<FormControl gap={6} isRequired>
<FormLabel>First Name</FormLabel>
<div className="flex flex-col gap-4">
<div className="flex flex-col gap-4 md:flex-row">
<div className="flex flex-1 flex-col gap-2">
<Label>First Name</Label>
<Input {...form.register("firstname", { required: true })} />
</FormControl>
<FormControl gap={6} isRequired>
<FormLabel>Last Name</FormLabel>
</div>
<div className="flex flex-1 flex-col gap-2">
<Label>Last Name</Label>
<Input {...form.register("lastname", { required: true })} />
</FormControl>
</Flex>
</div>
</div>

<FormControl gap={6} isRequired>
<FormLabel>Company Name</FormLabel>
<div className="flex flex-col gap-2">
<Label>Company Name</Label>
<Input {...form.register("company", { required: true })} />
</FormControl>
</div>

<FormControl gap={6} isRequired>
<FormLabel>Company Website</FormLabel>
<div className="flex flex-col gap-2">
<Label>Company Website</Label>
<Input type="url" {...form.register("website", { required: true })} />
<FormHelperText>URL should start with https://</FormHelperText>
</FormControl>
<FormControl gap={6} isRequired>
<FormLabel>Company Social Account</FormLabel>
<p className="text-muted-foreground text-sm">
URL should start with https://
</p>
</div>
<div className="flex flex-col gap-2">
<Label>Company Social Account</Label>
<Input
type="url"
{...form.register("twitterhandle", { required: true })}
/>
<FormHelperText>URL should start with https://</FormHelperText>
</FormControl>
<FormControl gap={6} isRequired>
<FormLabel>Industry</FormLabel>
<ChakraSelect
options={[
"DAOs",
"Education & Community",
"Fandom & Rewards",
"Gaming & Metaverse",
"Infra & Dev Tools",
"NFTs",
"Payments & Finance (DeFi)",
"Security & Identity",
"Social",
"Other",
].map((vertical) => ({
label: vertical,
value:
vertical === "Payments & Finance (DeFi)" ? "DeFi" : vertical,
}))}
placeholder="Select industry"
isRequired
onChange={(value) => {
if (value?.value) {
form.setValue("superchain_verticals", value.value);
}
<p className="text-muted-foreground text-sm">
URL should start with https://
</p>
</div>
<div className="flex flex-col gap-2">
<Label>Industry</Label>
<Select
onValueChange={(value) => {
form.setValue("superchain_verticals", value);
}}
/>
</FormControl>
<FormControl gap={6} isRequired>
<FormLabel>Chain</FormLabel>
<ChakraSelect
>
<SelectTrigger>
<SelectValue placeholder="Select industry" />
</SelectTrigger>
<SelectContent>
{[
"DAOs",
"Education & Community",
"Fandom & Rewards",
"Gaming & Metaverse",
"Infra & Dev Tools",
"NFTs",
"Payments & Finance (DeFi)",
"Security & Identity",
"Social",
"Other",
].map((vertical) => (
<SelectItem
key={vertical}
value={
vertical === "Payments & Finance (DeFi)" ? "DeFi" : vertical
}
>
{vertical}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
<div className="flex flex-col gap-2">
<Label>Chain</Label>
<MultiSelect
selectedValues={(form.watch("superchain_chain") || "")
.split(";")
.filter(Boolean)}
onSelectedValuesChange={(values) =>
form.setValue("superchain_chain", values.join(";"))
}
options={[
"Optimism",
"Base",
Expand All @@ -208,27 +229,21 @@ export const ApplyForOpCreditsForm: React.FC<ApplyForOpCreditsFormProps> = ({
label: chain === "Optimism" ? "OP Mainnet" : chain,
value: chain,
}))}
onChange={(values) => {
form.setValue(
"superchain_chain",
values.map(({ value }) => value).join(";"),
);
}}
isMulti
selectedOptionStyle="check"
placeholder="Select chains"
isRequired
className="w-full"
/>
</FormControl>
<FormControl gap={6}>
<FormLabel>Tell us more about your project</FormLabel>
</div>
<div className="flex flex-col gap-2">
<Label>Tell us more about your project</Label>
<Textarea
{...form.register("what_would_you_like_to_meet_about_")}
placeholder="Tell us more about your project -- the more you share, the easier you make the approval process."
/>
<FormHelperText>Minimum 150 characters recommended.</FormHelperText>
</FormControl>
</Flex>
<p className="text-muted-foreground text-sm">
Minimum 150 characters recommended.
</p>
</div>
</div>
<div className="flex flex-row">
<Button
className="w-full"
Expand All @@ -238,6 +253,6 @@ export const ApplyForOpCreditsForm: React.FC<ApplyForOpCreditsFormProps> = ({
{form.formState.isSubmitting ? "Applying..." : "Apply now"}
</Button>
</div>
</Flex>
</form>
);
};
Loading