diff --git a/apps/core/src/components/Inputs/AddressInput.tsx b/apps/core/src/components/Inputs/AddressInput.tsx index 3b91350ebed..bcfe125eaac 100644 --- a/apps/core/src/components/Inputs/AddressInput.tsx +++ b/apps/core/src/components/Inputs/AddressInput.tsx @@ -5,24 +5,23 @@ import { Input, InputType } from '@iota/apps-ui-kit'; import { Close } from '@iota/ui-icons'; import { useIotaAddressValidation } from '../../hooks'; -import React, { ComponentProps, useCallback } from 'react'; -import type { Field, FieldInputProps } from 'formik'; +import React, { useCallback } from 'react'; +import { useField } from 'formik'; export interface AddressInputProps { - field: FieldInputProps; - form: ComponentProps; + name: string, disabled?: boolean; placeholder?: string; label?: string; } export function AddressInput({ - field, - form, + name, disabled, placeholder = '0x...', label = 'Enter Recipient Address', }: AddressInputProps) { + const [field, meta, helpers] = useField(name) const iotaAddressValidation = useIotaAddressValidation(); const formattedValue = iotaAddressValidation.cast(field.value); @@ -31,18 +30,16 @@ export function AddressInput({ (e: React.ChangeEvent) => { const address = e.currentTarget.value; iotaAddressValidation.cast(address); - form.setFieldValue(field.name, iotaAddressValidation.cast(address)).then(() => { - form.validateField(field.name); - }); + helpers.setValue(iotaAddressValidation.cast(address)); }, - [form, field.name, iotaAddressValidation], + [name, iotaAddressValidation], ); const clearAddress = () => { - form.setFieldValue(field.name, ''); + helpers.setValue(''); }; - const errorMessage = form.touched[field.name] && form.errors[field.name]; + const errorMessage = meta.touched && meta.error; return ( ); -} +} \ No newline at end of file diff --git a/apps/core/src/components/Inputs/SendTokenFormInput.tsx b/apps/core/src/components/Inputs/SendTokenFormInput.tsx index 43acef9d909..3956c18f573 100644 --- a/apps/core/src/components/Inputs/SendTokenFormInput.tsx +++ b/apps/core/src/components/Inputs/SendTokenFormInput.tsx @@ -4,10 +4,10 @@ import { ButtonPill, Input, InputType, NumericFormatInputProps } from '@iota/apps-ui-kit'; import { CoinStruct } from '@iota/iota-sdk/client'; import { useGasBudgetEstimation } from '../../hooks'; -import React, { ComponentProps, useEffect } from 'react'; -import { Field, FieldInputProps } from 'formik'; +import { useEffect } from 'react'; +import { FormikProps, useField } from 'formik'; -export interface SendTokenInputProps { +export interface SendTokenInputProps { coins: CoinStruct[]; symbol: string; coinDecimals: number; @@ -19,12 +19,11 @@ export interface SendTokenInputProps { }; onActionClick: () => Promise; isMaxActionDisabled?: boolean; - field: FieldInputProps; - form: ComponentProps; - errorMessage?: string; + name: string; + form: FormikProps; } -export function SendTokenFormInput({ +export function SendTokenFormInput({ coins, values, symbol, @@ -32,10 +31,9 @@ export function SendTokenFormInput({ activeAddress, onActionClick, isMaxActionDisabled, - field, + name, form, - errorMessage, -}: SendTokenInputProps) { +}: SendTokenInputProps) { const gasBudgetEstimation = useGasBudgetEstimation({ coinDecimals, coins: coins ?? [], @@ -45,6 +43,8 @@ export function SendTokenFormInput({ isPayAllIota: values.isPayAllIota, }); + const [field, meta] = useField(name); + const numericPropsOnly: Partial = { decimalScale: coinDecimals ? undefined : 0, thousandSeparator: true, @@ -55,6 +55,7 @@ export function SendTokenFormInput({ }, }; + const errorMessage = meta?.error ? meta.error : undefined; const isActionButtonDisabled = form.isSubmitting || !!errorMessage || isMaxActionDisabled; const renderAction = () => ( diff --git a/apps/wallet-dashboard/components/Dialogs/SendToken/views/EnterValuesFormView.tsx b/apps/wallet-dashboard/components/Dialogs/SendToken/views/EnterValuesFormView.tsx index a77f81a36a9..91021dfd2e2 100644 --- a/apps/wallet-dashboard/components/Dialogs/SendToken/views/EnterValuesFormView.tsx +++ b/apps/wallet-dashboard/components/Dialogs/SendToken/views/EnterValuesFormView.tsx @@ -31,7 +31,6 @@ import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils'; import { Field, FieldInputProps, Form, Formik, FormikProps } from 'formik'; import { Exclamation } from '@iota/ui-icons'; import { UseQueryResult } from '@tanstack/react-query'; -import { ComponentProps } from 'react'; interface EnterValuesFormProps { coin: CoinBalance; @@ -118,12 +117,12 @@ function FormInputs({ form, }: { field: FieldInputProps; - form: ComponentProps; + form: FormikProps; }) => { return ( ); }} - + @@ -267,8 +258,8 @@ function EnterValuesFormView({ }} validationSchema={validationSchemaStepOne} enableReinitialize - validateOnChange={false} - validateOnBlur={false} + validateOnChange={true} + validateOnBlur={true} onSubmit={handleFormSubmit} > {(props: FormikProps) => ( diff --git a/apps/wallet/src/ui/app/pages/home/transfer-coin/SendTokenForm.tsx b/apps/wallet/src/ui/app/pages/home/transfer-coin/SendTokenForm.tsx index 2c75f497387..edc5fda3a04 100644 --- a/apps/wallet/src/ui/app/pages/home/transfer-coin/SendTokenForm.tsx +++ b/apps/wallet/src/ui/app/pages/home/transfer-coin/SendTokenForm.tsx @@ -16,8 +16,8 @@ import { } from '@iota/core'; import { type CoinStruct } from '@iota/iota-sdk/client'; import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils'; -import { Field, type FieldInputProps, Form, Formik } from 'formik'; -import { ComponentProps, useMemo } from 'react'; +import { Field, type FieldInputProps, Form, Formik, FormikProps } from 'formik'; +import { useMemo } from 'react'; import { InfoBox, @@ -174,11 +174,6 @@ export function SendTokenForm({ await setFieldValue('amount', formattedTokenBalance); } - function handleOnChangeAmountInput(value: string, symbol: string) { - const valueWithoutSuffix = value.replace(symbol, ''); - setFieldValue('amount', valueWithoutSuffix); - } - const isMaxActionDisabled = parseAmount(values?.amount, coinDecimals) === coinBalance || queryResult.isPending || @@ -203,12 +198,12 @@ export function SendTokenForm({ form, }: { field: FieldInputProps; - form: ComponentProps; + form: FormikProps; }) => { return ( ); }} - +