[Dashboard] migrate op credits form to shadcn

Author: jnsdls

apps/dashboard/src/components/onboarding/ApplyForOpCreditsForm.tsx

@@ -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";
 
@@ -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,
@@ -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",
@@ -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"
@@ -238,6 +253,6 @@ export const ApplyForOpCreditsForm: React.FC<ApplyForOpCreditsFormProps> = ({
           {form.formState.isSubmitting ? "Applying..." : "Apply now"}
         </Button>
       </div>
-    </Flex>
+    </form>
   );
 };