diff --git a/packages/react-params/src/Param/Amount.tsx b/packages/react-params/src/Param/Amount.tsx index 326dca5180..6aff81c461 100644 --- a/packages/react-params/src/Param/Amount.tsx +++ b/packages/react-params/src/Param/Amount.tsx @@ -4,53 +4,58 @@ import { Props } from '../types'; import BN from 'bn.js'; -import React, { useCallback, useState } from 'react'; +import React, { useCallback, useMemo } from 'react'; import { registry } from '@polkadot/react-api'; -import { Input } from '@polkadot/react-components'; +import { Input, InputNumber } from '@polkadot/react-components'; import { ClassOf } from '@polkadot/types'; -import { bnToBn, formatNumber } from '@polkadot/util'; +import { bnToBn, formatNumber, isUndefined } from '@polkadot/util'; import Bare from './Bare'; function Amount ({ className = '', defaultValue: { value }, isDisabled, isError, label, onChange, onEnter, withLabel }: Props): React.ReactElement { - const [defaultValue] = useState( - isDisabled - ? ( - value instanceof ClassOf(registry, 'AccountIndex') - ? value.toString() - : formatNumber(value as number) - ) - : bnToBn((value as number) || 0).toString() + const defaultValue = useMemo( + () => isDisabled + ? value instanceof ClassOf(registry, 'AccountIndex') + ? value.toString() + : formatNumber(value as number) + : bnToBn((value as number) || 0).toString(), + [isDisabled, value] ); const _onChange = useCallback( - (value: string) => - onChange && onChange({ - isValid: true, - value: new BN(value || 0) - }), + (value?: BN) => onChange && onChange({ + isValid: !isUndefined(value), + value + }), [onChange] ); return ( - + {isDisabled + ? ( + + ) + : ( + + ) + } ); }