Improve staking form user experience

src/components/Forms/TokenAmountForm.tsx

@@ -1,16 +1,16 @@
+import { BodySm, Box, ButtonProps, Icon } from "@threshold-network/components"
+import { FormikErrors, FormikProps, withFormik } from "formik"
 import { FC, Ref } from "react"
-import { Icon, Box, ButtonProps, BodySm } from "@threshold-network/components"
-import { withFormik, FormikProps, FormikErrors } from "formik"
 import ThresholdCircleBrand from "../../static/icons/ThresholdCircleBrand"
-import { FormikTokenBalanceInput } from "./FormikTokenBalanceInput"
-import SubmitTxButton from "../SubmitTxButton"
-import { Form } from "./Form"
+import { formatTokenAmount } from "../../utils/formatAmount"
 import {
   DEFAULT_MIN_VALUE,
   getErrorsObj,
   validateAmountInRange,
 } from "../../utils/forms"
-import { formatTokenAmount } from "../../utils/formatAmount"
+import SubmitTxButton from "../SubmitTxButton"
+import { Form } from "./Form"
+import { FormikTokenBalanceInput } from "./FormikTokenBalanceInput"
 
 export type FormValues = {
   tokenAmount: string
@@ -71,7 +71,7 @@ export const TokenAmountFormBase: FC<
         max={maxTokenAmount}
         helperText={helperText}
         isDisabled={isDisabled}
-        _disabled={{ bg: "gray.50", border: "none" }}
+        _disabled={{ bg: "gray.50", border: "none", cursor: "not-allowed" }}
       />
       <SubmitTxButton
         type="submit"

src/components/StakingApplicationForms/index.tsx

@@ -1,20 +1,20 @@
-import { FC, Ref, useEffect, useState } from "react"
+import { BodyMd, BodySm } from "@threshold-network/components"
 import { BigNumber } from "ethers"
 import { FormikErrors, FormikProps, withFormik } from "formik"
-import { BodyMd, BodySm } from "@threshold-network/components"
-import {
-  TokenAmountFormBase,
-  TokenAmountFormBaseProps,
-  FormValues,
-} from "../Forms"
+import { FC, Ref, useEffect, useState } from "react"
+import { formatTokenAmount } from "../../utils/formatAmount"
 import {
-  defaultLessThanMsg,
-  defaultValidationOptions,
+  defaultLessThanMessage,
+  defaultAmountValidationOptions,
   DEFAULT_MIN_VALUE,
   getErrorsObj,
   validateAmountInRange,
 } from "../../utils/forms"
-import { formatTokenAmount } from "../../utils/formatAmount"
+import {
+  FormValues,
+  TokenAmountFormBase,
+  TokenAmountFormBaseProps,
+} from "../Forms"
 
 type ComponentProps = {
   totalStake: string
@@ -148,11 +148,11 @@ const deauthorizationValidation = (
       max.toString(),
       DEFAULT_MIN_VALUE,
       {
-        ...defaultValidationOptions,
-        lessThanValidationMsg(amount) {
-          return `${defaultLessThanMsg(amount)} or equal to ${formatTokenAmount(
-            authorizedAmount.toString()
-          )} T`
+        ...defaultAmountValidationOptions,
+        lessThanValidationMessage(amount) {
+          return `${defaultLessThanMessage(
+            amount
+          )} or equal to ${formatTokenAmount(authorizedAmount.toString())} T`
         },
       }
     )

src/components/SubmitTxButton.tsx

@@ -34,6 +34,7 @@ const SubmitTxButton: FC<Props> = ({
       onClick={() => openModal(ModalType.SelectWallet)}
       {...buttonProps}
       type="button"
+      isDisabled={false}
     >
       Connect Wallet
     </Button>

src/pages/Staking/NewStakeCard.tsx

@@ -7,11 +7,13 @@ import { useMinStakeAmount } from "../../hooks/useMinStakeAmount"
 import { useModal } from "../../hooks/useModal"
 import { useTokenBalance } from "../../hooks/useTokenBalance"
 import { formatTokenAmount } from "../../utils/formatAmount"
+import { useWeb3React } from "@web3-react/core"
 
 const NewStakeCard: FC<ComponentProps<typeof Card>> = () => {
   const { openModal } = useModal()
   const tBalance = useTokenBalance(Token.T)
   const { minStakeAmount, isLoading, hasError } = useMinStakeAmount()
+  const { active } = useWeb3React()
 
   const openStakingModal = async (stakeAmount: string) => {
     openModal(ModalType.StakingChecklist, { stakeAmount })
@@ -39,6 +41,7 @@ const NewStakeCard: FC<ComponentProps<typeof Card>> = () => {
         maxTokenAmount={tBalance}
         placeholder={placeholder}
         minTokenAmount={minStakeAmount}
+        isDisabled={!active}
       />
       <StakingContractLearnMore mt="3" />
     </Card>

src/utils/forms.ts

@@ -10,57 +10,79 @@ import { isAddress, isAddressZero } from "../web3/utils"
 import { formatTokenAmount } from "./formatAmount"
 import { getBridgeBTCSupportedAddressPrefixesText } from "./tBTC"
 
-type ValidationMsg = string | ((amount: string) => string)
-type ValidationOptions = {
-  greaterThanValidationMsg: ValidationMsg
-  lessThanValidationMsg: ValidationMsg
-  requiredMsg: string
+type AmountValidationMessage = string | ((amount: string) => string)
+type AmountValidationOptions = {
+  greaterThanValidationMessage: AmountValidationMessage
+  lessThanValidationMessage: AmountValidationMessage
+  requiredMessage: string
+  insufficientBalanceMessage: string
 }
 export const DEFAULT_MIN_VALUE = WeiPerEther.toString()
 
-export const defaultLessThanMsg: (minAmount: string) => string = (
-  minAmount
+export const defaultLessThanMessage: (maxAmount: string) => string = (
+  maxAmount
 ) => {
   return `The value should be less than or equal ${formatTokenAmount(
-    minAmount
+    maxAmount
   )}`
 }
 
-export const defaultGreaterThanMsg: (minAmount: string) => string = (
-  maxAmount
+export const defaultGreaterThanMessage: (minAmount: string) => string = (
+  minAmount
 ) => {
   return `The value should be greater than or equal ${formatTokenAmount(
-    maxAmount
+    minAmount
   )}`
 }
-export const defaultValidationOptions: ValidationOptions = {
-  greaterThanValidationMsg: defaultGreaterThanMsg,
-  lessThanValidationMsg: defaultLessThanMsg,
-  requiredMsg: "Required",
+export const defaultAmountValidationOptions: AmountValidationOptions = {
+  greaterThanValidationMessage: defaultGreaterThanMessage,
+  lessThanValidationMessage: defaultLessThanMessage,
+  requiredMessage: "Required.",
+  insufficientBalanceMessage: "Your wallet balance is insufficient.",
+}
+
+const getAmountInRangeValidationMessage = (
+  validationMessage: AmountValidationMessage,
+  value: string
+) => {
+  return typeof validationMessage === "function"
+    ? validationMessage(value)
+    : validationMessage
 }
 
 export const validateAmountInRange = (
   value: string,
   maxValue: string,
   minValue = DEFAULT_MIN_VALUE,
-  options: ValidationOptions = defaultValidationOptions
+  options: AmountValidationOptions = defaultAmountValidationOptions
 ) => {
   if (!value) {
-    return options.requiredMsg
+    return options.requiredMessage
   }
 
   const valueInBN = BigNumber.from(value)
   const maxValueInBN = BigNumber.from(maxValue)
   const minValueInBN = BigNumber.from(minValue)
 
-  if (valueInBN.gt(maxValueInBN)) {
-    return typeof options.lessThanValidationMsg === "function"
-      ? options.lessThanValidationMsg(maxValue)
-      : options.lessThanValidationMsg
-  } else if (valueInBN.lt(minValueInBN)) {
-    return typeof options.greaterThanValidationMsg === "function"
-      ? options.greaterThanValidationMsg(minValue)
-      : options.greaterThanValidationMsg
+  const isBalanceInsufficient = maxValueInBN.isZero()
+  const isMaximumValueExceeded = valueInBN.gt(maxValueInBN)
+  const isMinimumValueFulfilled = valueInBN.gte(minValueInBN)
+
+  if (!isMinimumValueFulfilled) {
+    return getAmountInRangeValidationMessage(
+      options.greaterThanValidationMessage,
+      minValue
+    )
+  }
+  if (isBalanceInsufficient) {
+    return options.insufficientBalanceMessage
+  }
+
+  if (isMaximumValueExceeded) {
+    return getAmountInRangeValidationMessage(
+      options.lessThanValidationMessage,
+      maxValue
+    )
   }
 }