Add field address

components/forms/CreateTxForm/Fields/FieldAddress.tsx

@@ -0,0 +1,39 @@
+import { FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { useChains } from "@/context/ChainsContext";
+import { exampleAddress } from "@/lib/displayHelpers";
+import { prettyFieldName } from "@/lib/form";
+import * as z from "zod";
+import type { FieldProps, FieldSchemaInput } from "./types";
+
+export const getFieldAddressSchema = ({ chain }: FieldSchemaInput) => {
+  if (!chain) {
+    throw new Error("Could not get field address schema because of missing chain parameter");
+  }
+
+  return z
+    .string({ invalid_type_error: "Must be a string", required_error: "Required" })
+    .trim()
+    .min(1, "Required")
+    .startsWith(chain.addressPrefix, `Invalid prefix for ${chain.chainDisplayName}`);
+};
+
+export default function FieldAddress({ form, fieldFormName }: FieldProps) {
+  const { chain } = useChains();
+
+  return (
+    <FormField
+      control={form.control}
+      name={fieldFormName}
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel>{prettyFieldName(fieldFormName)}</FormLabel>
+          <FormControl>
+            <Input placeholder={`E.g. "${exampleAddress(0, chain.addressPrefix)}"`} {...field} />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+}

lib/form.ts

@@ -1,3 +1,6 @@
+import FieldAddress, {
+  getFieldAddressSchema,
+} from "@/components/forms/CreateTxForm/Fields/FieldAddress";
 import { FieldSchemaInput } from "@/components/forms/CreateTxForm/Fields/types";
 import { z } from "zod";
 
@@ -8,14 +11,28 @@ export const prettyFieldName = (fieldName: string) => {
   return capitalizedName;
 };
 
-export const getField = (_fieldName: string) => {
-  /* Will return a FormField component per fieldName */
-  return () => null;
+export const getField = (fieldName: string) => {
+  switch (fieldName) {
+    case "fromAddress":
+    case "toAddress":
+    case "delegatorAddress":
+    case "validatorAddress":
+      return FieldAddress;
+    default:
+      return () => null;
+  }
 };
 
-const getFieldSchema = (_fieldName: string) => {
-  /* Will return a zod schema getter per fieldName */
-  return (_schemaInput: unknown) => null;
+const getFieldSchema = (fieldName: string) => {
+  switch (fieldName) {
+    case "fromAddress":
+    case "toAddress":
+    case "delegatorAddress":
+    case "validatorAddress":
+      return getFieldAddressSchema;
+    default:
+      throw new Error(`No schema found for ${fieldName} field`);
+  }
 };
 
 export const getMsgSchema = (fieldNames: readonly string[], schemaInput: FieldSchemaInput) => {