From cd1d1b6a2926eb6b6c6f340f450a746b941eb64b Mon Sep 17 00:00:00 2001 From: abefernan <44572727+abefernan@users.noreply.github.com> Date: Fri, 26 Jul 2024 13:14:06 +0200 Subject: [PATCH 1/8] Add all fieldnames for Address and Amount --- lib/form.ts | 71 ++++++++++++++++++++++++++++++++++++++--------------- 1 file changed, 51 insertions(+), 20 deletions(-) diff --git a/lib/form.ts b/lib/form.ts index 5bb43878..b156d1b8 100644 --- a/lib/form.ts +++ b/lib/form.ts @@ -15,31 +15,62 @@ export const prettyFieldName = (fieldName: string) => { }; export const getField = (fieldName: string) => { - switch (fieldName) { - case "fromAddress": - case "toAddress": - case "delegatorAddress": - case "validatorAddress": - return FieldAddress; - case "amount": - return FieldAmount; - default: - return () => null; + if ( + fieldName.toLowerCase().includes("address") || + fieldName === "depositor" || + fieldName === "proposer" || + fieldName === "voter" || + fieldName === "sender" || + fieldName === "receiver" || + fieldName === "admin" || + fieldName === "contract" || + fieldName === "newAdmin" + ) { + return FieldAddress; } + + if ( + fieldName === "amount" || + fieldName === "initialDeposit" || + fieldName === "value" || + fieldName === "token" || + fieldName === "funds" + ) { + return FieldAmount; + } + + return () => null; }; const getFieldSchema = (fieldName: string) => { - switch (fieldName) { - case "fromAddress": - case "toAddress": - case "delegatorAddress": - case "validatorAddress": - return getFieldAddressSchema; - case "amount": - return getFieldAmountSchema; - default: - throw new Error(`No schema found for ${fieldName} field`); + if (fieldName === "admin") { + return (schemaInput: FieldSchemaInput) => z.optional(getFieldAddressSchema(schemaInput)); + } + + if ( + fieldName.toLowerCase().includes("address") || + fieldName === "depositor" || + fieldName === "proposer" || + fieldName === "voter" || + fieldName === "sender" || + fieldName === "receiver" || + fieldName === "contract" || + fieldName === "newAdmin" + ) { + return getFieldAddressSchema; + } + + if ( + fieldName === "amount" || + fieldName === "initialDeposit" || + fieldName === "value" || + fieldName === "token" || + fieldName === "funds" + ) { + return getFieldAmountSchema; } + + throw new Error(`No schema found for ${fieldName} field`); }; export const getMsgSchema = (fieldNames: readonly string[], schemaInput: FieldSchemaInput) => { From 897855e10a5e184a64ea70e5cfd381b021b5788a Mon Sep 17 00:00:00 2001 From: abefernan <44572727+abefernan@users.noreply.github.com> Date: Fri, 26 Jul 2024 13:14:39 +0200 Subject: [PATCH 2/8] Improve prettyFieldName --- lib/form.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/lib/form.ts b/lib/form.ts index b156d1b8..9982863e 100644 --- a/lib/form.ts +++ b/lib/form.ts @@ -8,7 +8,8 @@ import { FieldSchemaInput } from "@/components/forms/CreateTxForm/Fields/types"; import { z } from "zod"; export const prettyFieldName = (fieldName: string) => { - const splitName = fieldName.split(/(?=[A-Z])/).join(" "); + const truncatedName = fieldName.slice(fieldName.indexOf(".", "msgs.".length) + 1); + const splitName = truncatedName.split(/(?=[A-Z])/).join(" "); const capitalizedName = splitName.charAt(0).toUpperCase() + splitName.slice(1); return capitalizedName; From 1adf5adf1de0456d8efe5ce51fbd2b0f132df59f Mon Sep 17 00:00:00 2001 From: abefernan <44572727+abefernan@users.noreply.github.com> Date: Fri, 26 Jul 2024 13:14:59 +0200 Subject: [PATCH 3/8] Tweak Amount labels --- components/forms/CreateTxForm/Fields/FieldAmount.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/components/forms/CreateTxForm/Fields/FieldAmount.tsx b/components/forms/CreateTxForm/Fields/FieldAmount.tsx index f6e12feb..57db85fc 100644 --- a/components/forms/CreateTxForm/Fields/FieldAmount.tsx +++ b/components/forms/CreateTxForm/Fields/FieldAmount.tsx @@ -16,6 +16,8 @@ export const getFieldAmountSchema = () => }); export default function FieldAmount({ form, fieldFormName }: FieldProps) { + const prettyLabel = prettyFieldName(fieldFormName); + return ( <> ( - {"Denom" + prettyFieldName(fieldFormName)} + {`${prettyLabel} denom`} @@ -36,7 +38,9 @@ export default function FieldAmount({ form, fieldFormName }: FieldProps) { name={`${fieldFormName}.amount`} render={({ field }) => ( - {prettyFieldName(fieldFormName)} + + {prettyLabel === "Amount" ? "Amount quantity" : `${prettyLabel} amount`} + From d8c98788155ae13ab1548bad656d1b74983cb172 Mon Sep 17 00:00:00 2001 From: abefernan <44572727+abefernan@users.noreply.github.com> Date: Fri, 26 Jul 2024 16:10:37 +0200 Subject: [PATCH 4/8] Add specific helpers to FieldAddress --- .../CreateTxForm/Fields/FieldAddress.tsx | 32 ++++++++++++++++--- 1 file changed, 28 insertions(+), 4 deletions(-) diff --git a/components/forms/CreateTxForm/Fields/FieldAddress.tsx b/components/forms/CreateTxForm/Fields/FieldAddress.tsx index a6fe54f8..af70d39f 100644 --- a/components/forms/CreateTxForm/Fields/FieldAddress.tsx +++ b/components/forms/CreateTxForm/Fields/FieldAddress.tsx @@ -3,19 +3,43 @@ import { Input } from "@/components/ui/input"; import { useChains } from "@/context/ChainsContext"; import { exampleAddress } from "@/lib/displayHelpers"; import { prettyFieldName } from "@/lib/form"; +import { assert } from "@cosmjs/utils"; 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"); +const isFieldAddress = (fieldName: string) => + fieldName.toLowerCase().includes("address") || + ["depositor", "proposer", "voter", "sender", "receiver", "contract", "newAdmin"].includes( + fieldName, + ); + +const isOptionalFieldAddress = (fieldName: string) => fieldName === "admin"; + +export const getFieldAddress = (fieldName: string) => + isFieldAddress(fieldName) || isOptionalFieldAddress(fieldName) ? FieldAddress : null; + +export const getFieldAddressSchema = (fieldName: string, { chain }: FieldSchemaInput) => { + assert(chain, "Could not get field address schema because of missing chain parameter"); + + if (!isFieldAddress(fieldName) && !isOptionalFieldAddress(fieldName)) { + return null; } - return z + const zodString = z .string({ invalid_type_error: "Must be a string", required_error: "Required" }) .trim() .min(1, "Required") .startsWith(chain.addressPrefix, `Invalid prefix for ${chain.chainDisplayName}`); + + if (isFieldAddress(fieldName)) { + return zodString; + } + + if (isOptionalFieldAddress(fieldName)) { + return z.optional(zodString); + } + + return null; }; export default function FieldAddress({ form, fieldFormName }: FieldProps) { From 94e5b99cd46a3ef9a5cb7dd1c9cc6acb6c3bc213 Mon Sep 17 00:00:00 2001 From: abefernan <44572727+abefernan@users.noreply.github.com> Date: Fri, 26 Jul 2024 16:10:44 +0200 Subject: [PATCH 5/8] Add specific helpers to FieldAmount --- .../forms/CreateTxForm/Fields/FieldAmount.tsx | 28 ++++++++++++------- 1 file changed, 18 insertions(+), 10 deletions(-) diff --git a/components/forms/CreateTxForm/Fields/FieldAmount.tsx b/components/forms/CreateTxForm/Fields/FieldAmount.tsx index 57db85fc..8149f5a4 100644 --- a/components/forms/CreateTxForm/Fields/FieldAmount.tsx +++ b/components/forms/CreateTxForm/Fields/FieldAmount.tsx @@ -4,16 +4,24 @@ import { prettyFieldName } from "@/lib/form"; import * as z from "zod"; import type { FieldProps } from "./types"; -export const getFieldAmountSchema = () => - z.object({ - denom: z - .string({ invalid_type_error: "Must be a string", required_error: "Required" }) - .trim() - .min(1, "Required"), - amount: z - .number({ invalid_type_error: "Must be a number", required_error: "Required" }) - .positive("Must be positive"), - }); +const isFieldAmount = (fieldName: string) => + ["amount", "initialDeposit", "value", "token", "funds"].includes(fieldName); + +export const getFieldAmount = (fieldName: string) => + isFieldAmount(fieldName) ? FieldAmount : null; + +export const getFieldAmountSchema = (fieldName: string) => + isFieldAmount(fieldName) + ? z.object({ + denom: z + .string({ invalid_type_error: "Must be a string", required_error: "Required" }) + .trim() + .min(1, "Required"), + amount: z.coerce + .number({ invalid_type_error: "Must be a number", required_error: "Required" }) + .positive("Must be positive"), + }) + : null; export default function FieldAmount({ form, fieldFormName }: FieldProps) { const prettyLabel = prettyFieldName(fieldFormName); From a91d7293f381259b76bdb451d4a94f22cb5cf947 Mon Sep 17 00:00:00 2001 From: abefernan <44572727+abefernan@users.noreply.github.com> Date: Fri, 26 Jul 2024 16:11:17 +0200 Subject: [PATCH 6/8] Use specific helpers in form helpers --- components/forms/CreateTxForm/index.tsx | 2 +- lib/form.ts | 69 ++++--------------------- 2 files changed, 10 insertions(+), 61 deletions(-) diff --git a/components/forms/CreateTxForm/index.tsx b/components/forms/CreateTxForm/index.tsx index 3a05b03b..3f36bbf9 100644 --- a/components/forms/CreateTxForm/index.tsx +++ b/components/forms/CreateTxForm/index.tsx @@ -83,7 +83,7 @@ export default function CreateTxForm() {

{msg.name}

{msg.fields.map((fieldName: string) => { - const Field = getField(fieldName); + const Field = getField(fieldName) || (() => null); return ( { return capitalizedName; }; -export const getField = (fieldName: string) => { - if ( - fieldName.toLowerCase().includes("address") || - fieldName === "depositor" || - fieldName === "proposer" || - fieldName === "voter" || - fieldName === "sender" || - fieldName === "receiver" || - fieldName === "admin" || - fieldName === "contract" || - fieldName === "newAdmin" - ) { - return FieldAddress; - } +export const getField = (fieldName: string) => + getFieldAddress(fieldName) || getFieldAmount(fieldName) || null; - if ( - fieldName === "amount" || - fieldName === "initialDeposit" || - fieldName === "value" || - fieldName === "token" || - fieldName === "funds" - ) { - return FieldAmount; - } - - return () => null; -}; - -const getFieldSchema = (fieldName: string) => { - if (fieldName === "admin") { - return (schemaInput: FieldSchemaInput) => z.optional(getFieldAddressSchema(schemaInput)); - } - - if ( - fieldName.toLowerCase().includes("address") || - fieldName === "depositor" || - fieldName === "proposer" || - fieldName === "voter" || - fieldName === "sender" || - fieldName === "receiver" || - fieldName === "contract" || - fieldName === "newAdmin" - ) { - return getFieldAddressSchema; - } - - if ( - fieldName === "amount" || - fieldName === "initialDeposit" || - fieldName === "value" || - fieldName === "token" || - fieldName === "funds" - ) { - return getFieldAmountSchema; - } - - throw new Error(`No schema found for ${fieldName} field`); -}; +const getFieldSchema = (fieldName: string, schemaInput: FieldSchemaInput) => + getFieldAddressSchema(fieldName, schemaInput) || getFieldAmountSchema(fieldName) || null; export const getMsgSchema = (fieldNames: readonly string[], schemaInput: FieldSchemaInput) => { const fieldEntries = fieldNames.map((fieldName) => [ fieldName, - getFieldSchema(fieldName)(schemaInput), + getFieldSchema(fieldName, schemaInput), ]); return z.object(Object.fromEntries(fieldEntries)); From 8f61b38bbf1ba572d9dcd28e323ff1aa497befca Mon Sep 17 00:00:00 2001 From: abefernan <44572727+abefernan@users.noreply.github.com> Date: Fri, 26 Jul 2024 16:12:24 +0200 Subject: [PATCH 7/8] Disable buttons for non-implemented msgs --- components/forms/CreateTxForm/index.tsx | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/components/forms/CreateTxForm/index.tsx b/components/forms/CreateTxForm/index.tsx index 3f36bbf9..4eb8f92b 100644 --- a/components/forms/CreateTxForm/index.tsx +++ b/components/forms/CreateTxForm/index.tsx @@ -68,7 +68,16 @@ export default function CreateTxForm() { {Object.values(msgRegistry) .filter((msg) => msg.category === category) .map((msg) => ( - ))} From ab34f979f52918917b19c07f2d24fd5ebd4177c0 Mon Sep 17 00:00:00 2001 From: abefernan <44572727+abefernan@users.noreply.github.com> Date: Fri, 26 Jul 2024 16:23:11 +0200 Subject: [PATCH 8/8] Add index export for fields --- components/forms/CreateTxForm/Fields/index.ts | 2 ++ lib/form.ts | 4 +--- 2 files changed, 3 insertions(+), 3 deletions(-) create mode 100644 components/forms/CreateTxForm/Fields/index.ts diff --git a/components/forms/CreateTxForm/Fields/index.ts b/components/forms/CreateTxForm/Fields/index.ts new file mode 100644 index 00000000..65c8cff4 --- /dev/null +++ b/components/forms/CreateTxForm/Fields/index.ts @@ -0,0 +1,2 @@ +export * from "./FieldAddress"; +export * from "./FieldAmount"; diff --git a/lib/form.ts b/lib/form.ts index 75ea6520..18daebe7 100644 --- a/lib/form.ts +++ b/lib/form.ts @@ -1,11 +1,9 @@ import { getFieldAddress, getFieldAddressSchema, -} from "@/components/forms/CreateTxForm/Fields/FieldAddress"; -import { getFieldAmount, getFieldAmountSchema, -} from "@/components/forms/CreateTxForm/Fields/FieldAmount"; +} from "@/components/forms/CreateTxForm/Fields"; import { FieldSchemaInput } from "@/components/forms/CreateTxForm/Fields/types"; import { z } from "zod";