dApp: Deposit/Withdrawal form improvements - visuals (#687)

Closes: #629
Closes: #652
Closes: #637
Closes: #570 
Closes: #630

### Changes:
- Adjusted styles: spacings, button styles, input
- Form input is automatically focused as the form appears
- Added stake form input placeholder
- Added withdrawal form input placeholder
- Disabled submit button when amount is invalid
- Removed fiat-converted amount displayed below the input
- Displayed validation errors as `Alert` component
- Adjusted validation strategy
- Updated input displayed value formatting function to use
`bigIntToUserAmount` instead of `fixedPointNumberToString`:
- The `fixedPointNumberToString` aggressively trims trailing zero values
conflicting with the way `NumericFormat` component does it. The
`bigIntToUserAmount` seems to fit better here
- Updated copies
- Conditionally styled balance amount for invalid state
- Added suffix currency symbol value


https://github.com/user-attachments/assets/17c203ae-0b6d-45e6-a47b-f506609d24b9

dapp/src/components/TransactionModal/ActionFormModal.tsx

@@ -107,7 +107,7 @@ function ActionFormModal({ type }: { type: ActionFlowType }) {
     <>
       {!isLoading && <ModalCloseButton />}
       <ModalHeader>{heading}</ModalHeader>
-      <ModalBody>
+      <ModalBody px={10}>
         <Box w="100%">
           <FormComponent onSubmitForm={handleSubmitFormWrapper} />
         </Box>

dapp/src/components/TransactionModal/ActiveStakingStep/StakeFormModal/index.tsx

@@ -3,7 +3,8 @@ import TokenAmountForm from "#/components/shared/TokenAmountForm"
 import { TokenAmountFormValues } from "#/components/shared/TokenAmountForm/TokenAmountFormBase"
 import { useMinDepositAmount, useWallet } from "#/hooks"
 import { FormSubmitButton } from "#/components/shared/Form"
-import { BaseFormProps } from "#/types"
+import { ACTION_FLOW_TYPES, BaseFormProps } from "#/types"
+import { fixedPointNumberToString, getCurrencyByType } from "#/utils"
 import StakeDetails from "./StakeDetails"
 
 function StakeFormModal({
@@ -12,11 +13,16 @@ function StakeFormModal({
   const minDepositAmount = useMinDepositAmount()
   const { balance: tokenBalance } = useWallet()
 
+  const { decimals } = getCurrencyByType("bitcoin")
+  const inputPlaceholder = `Minimum ${fixedPointNumberToString(minDepositAmount, decimals)} BTC`
+  const tokenAmountLabel = "Wallet balance"
+
   return (
     <TokenAmountForm
-      tokenBalanceInputPlaceholder="BTC"
+      actionType={ACTION_FLOW_TYPES.STAKE}
+      tokenBalanceInputPlaceholder={inputPlaceholder}
+      tokenAmountLabel={tokenAmountLabel}
       currency="bitcoin"
-      fiatCurrency="usd"
       tokenBalance={tokenBalance ?? 0n}
       minTokenAmount={minDepositAmount}
       onSubmitForm={onSubmitForm}

dapp/src/components/TransactionModal/ActiveUnstakingStep/UnstakeFormModal/index.tsx

@@ -2,12 +2,13 @@ import React from "react"
 import TokenAmountForm from "#/components/shared/TokenAmountForm"
 import { TokenAmountFormValues } from "#/components/shared/TokenAmountForm/TokenAmountFormBase"
 import { FormSubmitButton } from "#/components/shared/Form"
-import { BaseFormProps, PROCESS_STATUSES } from "#/types"
+import { ACTION_FLOW_TYPES, BaseFormProps, PROCESS_STATUSES } from "#/types"
 import {
   useActionFlowStatus,
   useBitcoinPosition,
   useMinWithdrawAmount,
 } from "#/hooks"
+import { fixedPointNumberToString, getCurrencyByType } from "#/utils"
 import UnstakeDetails from "./UnstakeDetails"
 
 function UnstakeFormModal({
@@ -18,11 +19,16 @@ function UnstakeFormModal({
   const minTokenAmount = useMinWithdrawAmount()
   const status = useActionFlowStatus()
 
+  const { decimals } = getCurrencyByType("bitcoin")
+  const inputPlaceholder = `Minimum ${fixedPointNumberToString(minTokenAmount, decimals)} BTC`
+  const tokenAmountLabel = "Acre balance"
+
   return (
     <TokenAmountForm
-      tokenBalanceInputPlaceholder="BTC"
+      actionType={ACTION_FLOW_TYPES.UNSTAKE}
+      tokenBalanceInputPlaceholder={inputPlaceholder}
+      tokenAmountLabel={tokenAmountLabel}
       currency="bitcoin"
-      fiatCurrency="usd"
       tokenBalance={balance}
       minTokenAmount={minTokenAmount}
       onSubmitForm={onSubmitForm}

dapp/src/components/shared/Form/FormSubmitButton.tsx

@@ -4,14 +4,15 @@ import { ButtonProps } from "@chakra-ui/react"
 import { LoadingButton } from "../LoadingButton"
 
 export function FormSubmitButton({ children, ...props }: ButtonProps) {
-  const { isSubmitting } = useFormikContext()
+  const { isSubmitting, isValid } = useFormikContext()
 
   return (
     <LoadingButton
       type="submit"
       size="lg"
       width="100%"
       isLoading={isSubmitting}
+      isDisabled={!isValid}
       {...props}
     >
       {children}

dapp/src/components/shared/Form/FormTokenBalanceInput.tsx

@@ -7,6 +7,7 @@ export type FormTokenBalanceInputProps = {
   name: string
   defaultValue?: bigint
 } & Omit<TokenBalanceInputProps, "setAmount" | "defaultValue">
+
 export function FormTokenBalanceInput({
   name,
   defaultValue,
@@ -17,9 +18,11 @@ export function FormTokenBalanceInput({
   const setAmount = useCallback(
     (value?: bigint) => {
       if (!meta.touched) logPromiseFailure(helpers.setTouched(true))
+      if (meta.error) helpers.setError(undefined)
+
       logPromiseFailure(helpers.setValue(value))
     },
-    [helpers, meta.touched],
+    [helpers, meta.touched, meta.error],
   )
 
   useEffect(() => {
@@ -34,7 +37,7 @@ export function FormTokenBalanceInput({
       {...field}
       amount={defaultValue ?? (meta.value as bigint)}
       setAmount={setAmount}
-      hasError={Boolean(meta.touched && meta.error)}
+      hasError={Boolean(meta.error)}
       errorMsgText={meta.error}
     />
   )

dapp/src/components/shared/NumberFormatInput/index.tsx

@@ -1,8 +1,12 @@
 import React from "react"
-import { NumericFormat, NumericFormatProps } from "react-number-format"
+import {
+  NumberFormatValues,
+  NumericFormat,
+  NumericFormatProps,
+} from "react-number-format"
 import { InputProps, chakra, useMultiStyleConfig } from "@chakra-ui/react"
 
-const ChakraWrapper = chakra(NumericFormat)
+const ChakraNumericFormat = chakra(NumericFormat)
 
 export type NumberFormatInputValues = {
   formattedValue: string
@@ -12,8 +16,9 @@ export type NumberFormatInputValues = {
 
 export type NumberFormatInputProps = {
   onValueChange: (values: NumberFormatInputValues) => void
+  integerScale?: number
 } & InputProps &
-  Pick<NumericFormatProps, "decimalScale" | "allowNegative">
+  Pick<NumericFormatProps, "decimalScale" | "allowNegative" | "suffix">
 
 /**
  * Component is from the Threshold Network React Components repository.
@@ -29,17 +34,31 @@ const NumberFormatInput = React.forwardRef<
 >((props, ref) => {
   const { field: css } = useMultiStyleConfig("Input", props)
 
-  const { decimalScale, isDisabled, isInvalid, ...restProps } = props
+  const { decimalScale, isDisabled, isInvalid, integerScale, ...restProps } =
+    props
+
+  const handleLengthValidation = (values: NumberFormatValues) => {
+    const { value, floatValue } = values
+    if (
+      floatValue === undefined ||
+      value === undefined ||
+      integerScale === undefined
+    )
+      return true
+
+    const [integerPart] = value.split(".")
+    return integerPart.length <= integerScale
+  }
 
   return (
-    <ChakraWrapper
-      allowLeadingZeros={false}
+    <ChakraNumericFormat
       thousandSeparator
       decimalScale={decimalScale}
       __css={css}
       disabled={isDisabled}
       aria-invalid={isInvalid}
       getInputRef={ref}
+      isAllowed={handleLengthValidation}
       {...restProps}
     />
   )

dapp/src/components/shared/TokenAmountForm/TokenAmountFormBase.tsx

@@ -24,9 +24,9 @@ export type TokenAmountFormBaseProps = {
   formId?: string
   tokenBalance: bigint
   tokenBalanceInputPlaceholder: string
+  tokenAmountLabel?: string
   currency: CurrencyType
   withMaxButton: boolean
-  fiatCurrency?: CurrencyType
   children?: React.ReactNode
   defaultAmount?: bigint
 }
@@ -35,8 +35,8 @@ export default function TokenAmountFormBase({
   formId,
   tokenBalance,
   currency,
-  fiatCurrency,
   tokenBalanceInputPlaceholder,
+  tokenAmountLabel,
   withMaxButton,
   children,
   defaultAmount,
@@ -48,10 +48,11 @@ export default function TokenAmountFormBase({
         name={TOKEN_AMOUNT_FIELD_NAME}
         tokenBalance={tokenBalance}
         placeholder={tokenBalanceInputPlaceholder}
+        tokenAmountLabel={tokenAmountLabel}
         currency={currency}
-        fiatCurrency={fiatCurrency}
         withMaxButton={withMaxButton}
         defaultValue={defaultAmount}
+        autoFocus
       />
       {children}
     </Form>

dapp/src/components/shared/TokenAmountForm/index.tsx

@@ -1,12 +1,13 @@
 import { FormikErrors, withFormik } from "formik"
 import { getErrorsObj, validateTokenAmount } from "#/utils"
-import { BaseFormProps } from "#/types"
+import { ActionFlowType, BaseFormProps } from "#/types"
 import TokenAmountFormBase, {
   TokenAmountFormBaseProps,
   TokenAmountFormValues,
 } from "./TokenAmountFormBase"
 
 type TokenAmountFormProps = {
+  actionType: ActionFlowType
   minTokenAmount: bigint
 } & TokenAmountFormBaseProps &
   BaseFormProps<TokenAmountFormValues>
@@ -16,10 +17,14 @@ const TokenAmountForm = withFormik<TokenAmountFormProps, TokenAmountFormValues>(
     mapPropsToValues: () => ({
       amount: undefined,
     }),
-    validate: ({ amount }, { tokenBalance, currency, minTokenAmount }) => {
+    validate: (
+      { amount },
+      { tokenBalance, currency, minTokenAmount, actionType },
+    ) => {
       const errors: FormikErrors<TokenAmountFormValues> = {}
 
       errors.amount = validateTokenAmount(
+        actionType,
         amount,
         tokenBalance,
         minTokenAmount,
@@ -31,6 +36,8 @@ const TokenAmountForm = withFormik<TokenAmountFormProps, TokenAmountFormValues>(
     handleSubmit: (values, { props }) => {
       props.onSubmitForm(values)
     },
+    validateOnBlur: false,
+    validateOnChange: false,
   },
 )(TokenAmountFormBase)
 

dapp/src/components/shared/TokenBalanceInput/index.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from "react"
+import React, { ChangeEventHandler, useRef } from "react"
 import {
   Box,
   Button,
@@ -15,6 +15,7 @@ import {
 import {
   fixedPointNumberToString,
   getCurrencyByType,
+  isFormError,
   userAmountToBigInt,
 } from "#/utils"
 import { CurrencyType } from "#/types"
@@ -25,6 +26,7 @@ import NumberFormatInput, {
   NumberFormatInputProps,
 } from "../NumberFormatInput"
 import { CurrencyBalance } from "../CurrencyBalance"
+import { Alert, AlertIcon, AlertDescription } from "../Alert"
 
 const VARIANT = "balance"
 
@@ -42,7 +44,12 @@ function HelperErrorText({
   if (hasError) {
     return (
       <FormErrorMessage>
-        {errorMsgText || "Please enter a valid value"}
+        <Alert status="error">
+          <AlertIcon status="error" />
+          <AlertDescription>
+            {errorMsgText || "Please enter a valid value"}
+          </AlertDescription>
+        </Alert>
       </FormErrorMessage>
     )
   }
@@ -102,6 +109,7 @@ export type TokenBalanceInputProps = {
   fiatCurrency?: CurrencyType
   setAmount: (value?: bigint) => void
   withMaxButton?: boolean
+  tokenAmountLabel?: string
 } & InputProps &
   HelperErrorTextProps &
   Pick<NumberFormatInputProps, "decimalScale">
@@ -118,27 +126,37 @@ export default function TokenBalanceInput({
   hasError = false,
   fiatCurrency,
   withMaxButton = false,
+  tokenAmountLabel = "Amount",
   ...inputProps
 }: TokenBalanceInputProps) {
   const valueRef = useRef<bigint | undefined>(amount)
   const styles = useMultiStyleConfig("TokenBalanceInput", { size })
 
-  const { decimals } = getCurrencyByType(currency)
+  const { decimals, symbol } = getCurrencyByType(currency)
 
   const handleValueChange = (value: string) => {
     valueRef.current = value ? userAmountToBigInt(value, decimals) : undefined
   }
 
+  const handleChange: ChangeEventHandler = () => {
+    setAmount(valueRef?.current)
+  }
+
+  const isBalanceExceeded =
+    typeof errorMsgText === "string" &&
+    isFormError("EXCEEDED_VALUE", errorMsgText)
+
   return (
     <FormControl isInvalid={hasError} isDisabled={inputProps.isDisabled}>
-      <FormLabel htmlFor={inputProps.name} size={size}>
+      <FormLabel htmlFor={inputProps.name} size={size} mr={0}>
         <Box __css={styles.labelContainer}>
           Amount
           <Box __css={styles.balanceContainer}>
             <Box as="span" __css={styles.balance}>
-              Balance
+              {tokenAmountLabel}
             </Box>
             <CurrencyBalance
+              color={isBalanceExceeded ? "red.400" : "gray.700"}
               size={size === "lg" ? "md" : "sm"}
               amount={tokenBalance}
               currency={currency}
@@ -152,18 +170,18 @@ export default function TokenBalanceInput({
           variant={VARIANT}
           isInvalid={hasError}
           placeholder={placeholder}
+          suffix={` ${symbol}`}
           {...inputProps}
           value={
             amount ? fixedPointNumberToString(amount, decimals) : undefined
           }
           onValueChange={(values: NumberFormatInputValues) =>
             handleValueChange(values.value)
           }
-          onChange={() => {
-            setAmount(valueRef?.current)
-          }}
+          onChange={handleChange}
           decimalScale={decimals}
           allowNegative={false}
+          integerScale={10}
         />
 
         {withMaxButton && (

dapp/src/constants/errors.ts

@@ -1,4 +1,4 @@
-import { ConnectionErrorData } from "#/types"
+import { ACTION_FLOW_TYPES, ConnectionErrorData } from "#/types"
 
 export const CONNECTION_ERRORS: Record<string, ConnectionErrorData> = {
   REJECTED: {
@@ -24,3 +24,19 @@ export const CONNECTION_ERRORS: Record<string, ConnectionErrorData> = {
     description: "We encountered an error. Please try again.",
   },
 }
+
+export const TOKEN_FORM_ERRORS = {
+  REQUIRED: "Please enter an amount.",
+  EXCEEDED_VALUE:
+    "The amount exceeds your current wallet balance. Add more funds to your wallet or lower the deposit amount.",
+  INSUFFICIENT_VALUE: (minValue: string) =>
+    `The amount is below the minimum required deposit of ${minValue} BTC.`,
+}
+
+export const ACTION_FORM_ERRORS = {
+  [ACTION_FLOW_TYPES.STAKE]: TOKEN_FORM_ERRORS,
+  [ACTION_FLOW_TYPES.UNSTAKE]: {
+    ...TOKEN_FORM_ERRORS,
+    EXCEEDED_VALUE: "Your Acre balance is insufficient.",
+  },
+}