Merge pull request #243 from cosmos/formfield-number

Add field number

components/forms/CreateTxForm/Fields/FieldNumber.tsx

@@ -0,0 +1,68 @@
+import { FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { prettyFieldName } from "@/lib/form";
+import * as z from "zod";
+import type { FieldProps } from "./types";
+
+const isFieldNumberBigInt = (fieldName: string) =>
+  ["proposalId", "creationHeight", "endTime", "timeoutTimestamp", "codeId"].includes(fieldName);
+
+const isFieldNumberString = (fieldName: string) =>
+  ["minSelfDelegation", "commissionRate"].includes(fieldName);
+
+export const getFieldNumber = (fieldName: string) =>
+  isFieldNumberBigInt(fieldName) || isFieldNumberString(fieldName) ? FieldNumber : null;
+
+export const getFieldNumberSchema = (fieldName: string) => {
+  if (isFieldNumberBigInt(fieldName)) {
+    return z
+      .any()
+      .transform((value) => {
+        try {
+          return BigInt(value);
+        } catch (error) {
+          return value;
+        }
+      })
+      .pipe(
+        z
+          .bigint({ invalid_type_error: "Must be an integer", required_error: "Required" })
+          .positive("Must be positive"),
+      );
+  }
+
+  if (isFieldNumberString(fieldName)) {
+    return z.coerce
+      .number({ invalid_type_error: "Must be a number", required_error: "Required" })
+      .positive("Must be positive")
+      .transform((value) => {
+        try {
+          return String(value);
+        } catch (error) {
+          return value;
+        }
+      });
+  }
+
+  return null;
+};
+
+export default function FieldNumber({ form, fieldFormName }: FieldProps) {
+  const prettyLabel = prettyFieldName(fieldFormName);
+
+  return (
+    <FormField
+      control={form.control}
+      name={fieldFormName}
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel>{prettyLabel}</FormLabel>
+          <FormControl>
+            <Input placeholder={`Enter ${prettyLabel.toLowerCase()}`} {...field} />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+}

components/forms/CreateTxForm/Fields/index.ts

@@ -1,3 +1,4 @@
 export * from "./FieldAddress";
 export * from "./FieldAmount";
+export * from "./FieldNumber";
 export * from "./FieldString";

lib/form.ts

@@ -3,6 +3,8 @@ import {
   getFieldAddressSchema,
   getFieldAmount,
   getFieldAmountSchema,
+  getFieldNumber,
+  getFieldNumberSchema,
   getFieldString,
   getFieldStringSchema,
 } from "@/components/forms/CreateTxForm/Fields";
@@ -18,12 +20,17 @@ export const prettyFieldName = (fieldName: string) => {
 };
 
 export const getField = (fieldName: string) =>
-  getFieldAddress(fieldName) || getFieldAmount(fieldName) || getFieldString(fieldName) || null;
+  getFieldAddress(fieldName) ||
+  getFieldAmount(fieldName) ||
+  getFieldString(fieldName) ||
+  getFieldNumber(fieldName) ||
+  null;
 
 const getFieldSchema = (fieldName: string, schemaInput: FieldSchemaInput) =>
   getFieldAddressSchema(fieldName, schemaInput) ||
   getFieldAmountSchema(fieldName) ||
   getFieldStringSchema(fieldName) ||
+  getFieldNumberSchema(fieldName) ||
   null;
 
 export const getMsgSchema = (fieldNames: readonly string[], schemaInput: FieldSchemaInput) => {