Skip to content

Commit

Permalink
fix(wallet-dashboard): improve formik props
Browse files Browse the repository at this point in the history
  • Loading branch information
@cpl121
cpl121 committed Nov 14, 2024
1 parent 1fe1d05 commit 94bcca1
Show file tree
Hide file tree
Showing 4 changed files with 31 additions and 57 deletions.
23 changes: 10 additions & 13 deletions apps/core/src/components/Inputs/AddressInput.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<string>;
form: ComponentProps<typeof Field>;
name: string,

Check failure on line 12 in apps/core/src/components/Inputs/AddressInput.tsx

View workflow job for this annotation

GitHub Actions / turborepo / Lint, Build, and Test 

Replace `,` with `;`
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<string>(name)

Check failure on line 24 in apps/core/src/components/Inputs/AddressInput.tsx

View workflow job for this annotation

GitHub Actions / turborepo / Lint, Build, and Test 

Insert `;`
const iotaAddressValidation = useIotaAddressValidation();

const formattedValue = iotaAddressValidation.cast(field.value);
Expand All @@ -31,18 +30,16 @@ export function AddressInput({
(e: React.ChangeEvent<HTMLInputElement>) => {
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 (
<Input
Expand All @@ -68,4 +65,4 @@ export function AddressInput({
}
/>
);
}
}

Check failure on line 68 in apps/core/src/components/Inputs/AddressInput.tsx

View workflow job for this annotation

GitHub Actions / turborepo / Lint, Build, and Test 

Insert `⏎`
21 changes: 11 additions & 10 deletions apps/core/src/components/Inputs/SendTokenFormInput.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<FormValues> {
coins: CoinStruct[];
symbol: string;
coinDecimals: number;
Expand All @@ -19,23 +19,21 @@ export interface SendTokenInputProps {
};
onActionClick: () => Promise<void>;
isMaxActionDisabled?: boolean;
field: FieldInputProps<string>;
form: ComponentProps<typeof Field>;
errorMessage?: string;
name: string;
form: FormikProps<FormValues>;
}

export function SendTokenFormInput({
export function SendTokenFormInput<FormValues>({
coins,
values,
symbol,
coinDecimals,
activeAddress,
onActionClick,
isMaxActionDisabled,
field,
name,
form,
errorMessage,
}: SendTokenInputProps) {
}: SendTokenInputProps<FormValues>) {
const gasBudgetEstimation = useGasBudgetEstimation({
coinDecimals,
coins: coins ?? [],
Expand All @@ -45,6 +43,8 @@ export function SendTokenFormInput({
isPayAllIota: values.isPayAllIota,
});

const [field, meta] = useField<string>(name);

const numericPropsOnly: Partial<NumericFormatInputProps> = {
decimalScale: coinDecimals ? undefined : 0,
thousandSeparator: true,
Expand All @@ -55,6 +55,7 @@ export function SendTokenFormInput({
},
};

const errorMessage = meta?.error ? meta.error : undefined;
const isActionButtonDisabled = form.isSubmitting || !!errorMessage || isMaxActionDisabled;

const renderAction = () => (
Expand Down
19 changes: 5 additions & 14 deletions apps/wallet-dashboard/components/Dialogs/SendToken/views/EnterValuesFormView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -118,33 +117,25 @@ function FormInputs({
form,
}: {
field: FieldInputProps<string>;
form: ComponentProps<typeof Field>;
form: FormikProps<FormDataValues>;
}) => {
return (
<SendTokenFormInput
form={form}
field={field}
name={field.name}
symbol={symbol}
coins={coins}
coinDecimals={coinDecimals}
activeAddress={activeAddress}
values={values}
onActionClick={onMaxTokenButtonClick}
isMaxActionDisabled={isMaxActionDisabled}
errorMessage={
touched.amount && errors.amount ? errors.amount : undefined
}
/>
);
}}
</Field>

<Field
component={AddressInput}
name="to"
placeholder="Enter Address"
errorMessage={touched.to && errors.to ? errors.to : undefined}
/>
<AddressInput name="to" placeholder="Enter Address" />
</div>
</Form>

Expand Down Expand Up @@ -267,8 +258,8 @@ function EnterValuesFormView({
}}
validationSchema={validationSchemaStepOne}
enableReinitialize
validateOnChange={false}
validateOnBlur={false}
validateOnChange={true}
validateOnBlur={true}
onSubmit={handleFormSubmit}
>
{(props: FormikProps<FormDataValues>) => (
Expand Down
25 changes: 5 additions & 20 deletions apps/wallet/src/ui/app/pages/home/transfer-coin/SendTokenForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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 ||
Expand All @@ -203,34 +198,24 @@ export function SendTokenForm({
form,
}: {
field: FieldInputProps<string>;
form: ComponentProps<typeof Field>;
form: FormikProps<FormValues>;
}) => {
return (
<SendTokenFormInput
form={form}
field={field}
name={field.name}
symbol={symbol}
coinDecimals={coinDecimals}
activeAddress={activeAddress ?? ''}
coins={coins ?? []}
values={values}
onActionClick={onMaxTokenButtonClick}
isMaxActionDisabled={isMaxActionDisabled}
errorMessage={
touched.amount && errors.amount
? errors.amount
: undefined
}
/>
);
}}
</Field>
<Field
component={AddressInput}
allowNegative={false}
name="to"
placeholder="Enter Address"
/>
<AddressInput name="to" placeholder="Enter Address" />
</div>
</Form>

Expand Down

0 comments on commit 94bcca1

Please sign in to comment.