refactor: improve provide data input effects

Author: evandrosaturnino

src/components/Forms/FormikInput.tsx

@@ -1,4 +1,4 @@
-import { FC } from "react"
+import { ChangeEvent, FC, FocusEvent } from "react"
 import {
   FormControl,
   FormControlProps,
@@ -20,6 +20,8 @@ export const FormikInput: FC<
     helperText?: string | JSX.Element
     placeholder?: string
     tooltip?: string
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void
+    onBlur?: (e: FocusEvent<HTMLInputElement>) => void
   }
 > = ({
   name,
@@ -28,6 +30,8 @@ export const FormikInput: FC<
   helperText,
   placeholder,
   tooltip,
+  onChange,
+  onBlur,
   ...restProps
 }) => {
   const [field, meta] = useField(name)
@@ -75,8 +79,16 @@ export const FormikInput: FC<
         errorBorderColor="red.300"
         placeholder={placeholder}
         _placeholder={{ color: useColorModeValue("gray.400", "gray.500") }}
-        {...field}
-        value={meta.value}
+        name={field.name}
+        value={field.value}
+        onChange={(e) => {
+          field.onChange(e)
+          onChange?.(e)
+        }}
+        onBlur={(e) => {
+          field.onBlur(e)
+          onBlur?.(e)
+        }}
       />
       <HelperErrorText
         helperText={helperText}

src/pages/tBTC/Bridge/Minting/ProvideData.tsx

@@ -12,6 +12,7 @@ import {
   useState,
   useEffect,
   FocusEvent,
+  ChangeEvent,
 } from "react"
 import { Form, FormikInput } from "../../../../components/Forms"
 import withOnlyConnectedWallet from "../../../../components/withOnlyConnectedWallet"
@@ -68,7 +69,6 @@ type ComponentProps = {
 const MintingProcessFormBase: FC<ComponentProps & FormikProps<FormValues>> = ({
   formId,
   values,
-  setFieldTouched,
 }) => {
   const dispatch = useAppDispatch()
   const threshold = useThreshold()
@@ -80,9 +80,8 @@ const MintingProcessFormBase: FC<ComponentProps & FormikProps<FormValues>> = ({
       : BitcoinNetwork.Mainnet
   )
 
-  const handleBtcAddressChange = (event: FocusEvent<HTMLInputElement>) => {
+  const handleBtcAddressChange = (event: ChangeEvent<HTMLInputElement>) => {
     const btcAddress = event.target.value
-    setFieldTouched("btcRecoveryAddress", true)
 
     const isValidFormat =
       validateBTCAddress(btcAddress, threshold.tbtc.bitcoinNetwork) ===
@@ -95,10 +94,6 @@ const MintingProcessFormBase: FC<ComponentProps & FormikProps<FormValues>> = ({
           ethChainId: SupportedChainIds.Ethereum,
         })
       )
-    } else if (btcAddress) {
-      console.log(
-        "BTC Address format validation failed (onBlur) or address is empty."
-      )
     }
   }
 
@@ -156,6 +151,7 @@ const MintingProcessForm = withFormik<MintingProcessFormProps, FormValues>({
   },
   displayName: "MintingProcessForm",
   enableReinitialize: true,
+  validateOnChange: false,
 })(MintingProcessFormBase)
 
 export const ProvideDataComponent: FC<{