Improvements for forms

dapp/src/components/Modals/Staking/StakeForm.tsx

@@ -3,33 +3,21 @@ import { FormikErrors, withFormik } from "formik"
 import { ModalStep } from "../../../contexts"
 import FormBase, { FormBaseProps, FormValues } from "../../shared/FormBase"
 import { useTransactionContext, useWalletContext } from "../../../hooks"
-import { formatSatoshiAmount } from "../../../utils"
-import { BITCOIN_MIN_AMOUNT, ERRORS } from "../../../constants"
+import { getErrorsObj, validateTokenAmount } from "../../../utils"
 
 const StakeFormik = withFormik<
   { onSubmitForm: (values: FormValues) => void } & FormBaseProps,
   FormValues
 >({
-  validate: ({ amount: value }, { tokenBalance }) => {
+  mapPropsToValues: () => ({
+    amount: "",
+  }),
+  validate: async ({ amount }, { tokenBalance }) => {
     const errors: FormikErrors<FormValues> = {}
 
-    if (!value) errors.amount = ERRORS.REQUIRED
-    else {
-      const valueInBI = BigInt(value)
-      const maxValueInBI = BigInt(tokenBalance)
-      const minValueInBI = BigInt(BITCOIN_MIN_AMOUNT)
+    errors.amount = validateTokenAmount(amount, tokenBalance)
 
-      const isMaximumValueExceeded = valueInBI > maxValueInBI
-      const isMinimumValueFulfilled = valueInBI > minValueInBI
-
-      if (isMaximumValueExceeded) errors.amount = ERRORS.EXCEEDED_VALUE
-      else if (!isMinimumValueFulfilled)
-        errors.amount = ERRORS.INSUFFICIENT_VALUE(
-          formatSatoshiAmount(BITCOIN_MIN_AMOUNT),
-        )
-    }
-
-    return errors
+    return getErrorsObj(errors)
   },
   handleSubmit: (values, { props }) => {
     props.onSubmitForm(values)

dapp/src/constants/staking.ts

@@ -1,8 +1 @@
 export const BITCOIN_MIN_AMOUNT = "1000000" // 0.01 BTC
-
-export const ERRORS = {
-  REQUIRED: "Required.",
-  EXCEEDED_VALUE: "The amount exceeds your current balance.",
-  INSUFFICIENT_VALUE: (minValue: string) =>
-    `The minimum amount must be at least ${minValue} BTC.`,
-}

dapp/src/utils/forms.ts

@@ -0,0 +1,35 @@
+import { BITCOIN_MIN_AMOUNT } from "../constants"
+import { formatSatoshiAmount } from "./numbers"
+
+const ERRORS = {
+  REQUIRED: "Required.",
+  EXCEEDED_VALUE: "The amount exceeds your current balance.",
+  INSUFFICIENT_VALUE: (minValue: string) =>
+    `The minimum amount must be at least ${minValue} BTC.`,
+}
+
+export function getErrorsObj<T>(errors: { [key in keyof T]: string }) {
+  return (Object.keys(errors) as Array<keyof T>).every((name) => !errors[name])
+    ? {}
+    : errors
+}
+
+export function validateTokenAmount(
+  value: string,
+  tokenBalance: string,
+): string | undefined {
+  if (!value) return ERRORS.REQUIRED
+
+  const valueInBI = BigInt(value)
+  const maxValueInBI = BigInt(tokenBalance)
+  const minValueInBI = BigInt(BITCOIN_MIN_AMOUNT)
+
+  const isMaximumValueExceeded = valueInBI > maxValueInBI
+  const isMinimumValueFulfilled = valueInBI >= minValueInBI
+
+  if (isMaximumValueExceeded) return ERRORS.EXCEEDED_VALUE
+  if (!isMinimumValueFulfilled)
+    return ERRORS.INSUFFICIENT_VALUE(formatSatoshiAmount(BITCOIN_MIN_AMOUNT))
+
+  return undefined
+}

dapp/src/utils/index.ts

@@ -1,2 +1,3 @@
 export * from "./numbers"
 export * from "./address"
+export * from "./forms"