Merge pull request #248 from cosmos/formgen-field-voteoption

Add field vote option

components/forms/CreateTxForm/Fields/FieldVoteOption.tsx

@@ -0,0 +1,69 @@
+import { FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { prettyFieldName } from "@/lib/form";
+import { printVoteOption, voteOptions } from "@/lib/gov";
+import { voteOptionFromJSON } from "cosmjs-types/cosmos/gov/v1beta1/gov";
+import * as z from "zod";
+import type { FieldProps } from "./types";
+
+const selectVoteOptions = voteOptions.map((opt) => {
+  const voteOptionObj = voteOptionFromJSON(opt);
+
+  return {
+    label: printVoteOption(voteOptionObj),
+    value: voteOptionObj,
+  };
+});
+
+const isFieldVoteOption = (fieldName: string) => fieldName === "option";
+
+export const getFieldVoteOption = (fieldName: string) =>
+  isFieldVoteOption(fieldName) ? FieldVoteOption : null;
+
+export const getFieldVoteOptionSchema = (fieldName: string) =>
+  isFieldVoteOption(fieldName)
+    ? z.coerce
+        .number({
+          invalid_type_error: "Invalid vote option",
+          required_error: "Invalid vote option",
+        })
+        .nonnegative("Invalid vote option")
+    : null;
+
+export default function FieldVoteOption({ form, fieldFormName }: FieldProps) {
+  return (
+    <FormField
+      control={form.control}
+      name={fieldFormName}
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel>{prettyFieldName(fieldFormName)}</FormLabel>
+          <Select
+            onValueChange={field.onChange}
+            defaultValue={selectVoteOptions[0].value.toString(10)}
+          >
+            <FormControl>
+              <SelectTrigger>
+                <SelectValue placeholder="Select a vote option" />
+              </SelectTrigger>
+            </FormControl>
+            <SelectContent>
+              {selectVoteOptions.map(({ value, label }) => (
+                <SelectItem key={value} value={value.toString(10)}>
+                  {label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+}

components/forms/CreateTxForm/Fields/index.ts

@@ -6,3 +6,4 @@ export * from "./FieldDescription";
 export * from "./FieldNumber";
 export * from "./FieldString";
 export * from "./FieldTimeoutHeight";
+export * from "./FieldVoteOption";

lib/form.ts

@@ -15,6 +15,8 @@ import {
   getFieldStringSchema,
   getFieldTimeoutHeight,
   getFieldTimeoutHeightSchema,
+  getFieldVoteOption,
+  getFieldVoteOptionSchema,
 } from "@/components/forms/CreateTxForm/Fields";
 import { FieldSchemaInput } from "@/components/forms/CreateTxForm/Fields/types";
 import { z } from "zod";
@@ -36,6 +38,7 @@ export const getField = (fieldName: string) =>
   getFieldTimeoutHeight(fieldName) ||
   getFieldDescription(fieldName) ||
   getFieldCommission(fieldName) ||
+  getFieldVoteOption(fieldName) ||
   null;
 
 const getFieldSchema = (fieldName: string, schemaInput: FieldSchemaInput) =>
@@ -47,6 +50,7 @@ const getFieldSchema = (fieldName: string, schemaInput: FieldSchemaInput) =>
   getFieldTimeoutHeightSchema(fieldName) ||
   getFieldDescriptionSchema(fieldName) ||
   getFieldCommissionSchema(fieldName) ||
+  getFieldVoteOptionSchema(fieldName) ||
   null;
 
 export const getMsgSchema = (fieldNames: readonly string[], schemaInput: FieldSchemaInput) => {