Use InputNumber for params Amount (#3715)

* Use InputNumber for params Amount

* withLabel

* ? BN

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<Props> {
-  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 (
     <Bare className={className}>
-      <Input
-        className='full'
-        defaultValue={defaultValue}
-        isDisabled={isDisabled}
-        isError={isError}
-        label={label}
-        min={0}
-        onChange={_onChange}
-        onEnter={onEnter}
-        type={
-          isDisabled
-            ? 'text'
-            : 'number'
-        }
-        withEllipsis
-        withLabel={withLabel}
-      />
+      {isDisabled
+        ? (
+          <Input
+            className='full'
+            defaultValue={defaultValue}
+            isDisabled
+            label={label}
+            withEllipsis
+            withLabel={withLabel}
+          />
+        )
+        : (
+          <InputNumber
+            className='full'
+            defaultValue={defaultValue}
+            isError={isError}
+            isZeroable
+            label={label}
+            onChange={_onChange}
+            onEnter={onEnter}
+            withLabel={withLabel}
+          />
+        )
+      }
     </Bare>
   );
 }