Additional params validity checks (#2744)

packages/react-params/src/Param/Balance.tsx

@@ -11,13 +11,19 @@ import { InputBalance } from '@polkadot/react-components';
 import Bare from './Bare';
 
 function Balance ({ className, defaultValue: { value }, isDisabled, isError, label, onChange, onEnter, onEscape, style, withLabel }: Props): React.ReactElement<Props> {
+  const [isValid, setIsValid] = useState(false);
   const [defaultValue] = useState(new BN((value as BN || '0').toString()).toString(10));
 
   const _onChange = useCallback(
-    (value?: BN) => onChange && onChange({
-      isValid: !isError && !!value,
-      value
-    }),
+    (value?: BN): void => {
+      const isValid = !isError && !!value;
+
+      onChange && onChange({
+        isValid,
+        value
+      });
+      setIsValid(isValid);
+    },
     [isError, onChange]
   );
 
@@ -30,7 +36,7 @@ function Balance ({ className, defaultValue: { value }, isDisabled, isError, lab
         className='full'
         defaultValue={defaultValue}
         isDisabled={isDisabled}
-        isError={isError}
+        isError={isError || !isValid}
         label={label}
         onChange={_onChange}
         onEnter={onEnter}

packages/react-params/src/Param/BaseBytes.tsx

@@ -4,7 +4,7 @@
 
 import { Props as BaseProps, Size } from '../types';
 
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { Compact } from '@polkadot/types';
 import { Input } from '@polkadot/react-components';
 import { hexToU8a, isHex, u8aToHex } from '@polkadot/util';
@@ -52,18 +52,6 @@ function BaseBytes ({ asHex, children, className, defaultValue: { value }, isDis
   );
   const [isValid, setIsValid] = useState(false);
 
-  useEffect((): void => {
-    const [isValid, converted] = convertInput(value);
-
-    setIsValid(
-      isValid && validate(converted) && (
-        length !== -1
-          ? converted.length === length
-          : true
-      )
-    );
-  }, [length, validate, value]);
-
   const _onChange = useCallback(
     (hex: string): void => {
       let [isValid, value] = convertInput(hex);

packages/react-params/src/Param/Bytes.tsx

@@ -12,18 +12,24 @@ import BaseBytes from './BaseBytes';
 import File from './File';
 
 function Bytes ({ className, defaultValue, isDisabled, isError, label, name, onChange, onEnter, onEscape, style, type, withLabel }: Props): React.ReactElement<Props> {
+  const [isValid, setIsValid] = useState(false);
   const [isFileDrop, setIsFileDrop] = useState(false);
 
   const _toggleFile = useCallback(
     (): void => setIsFileDrop(true),
     []
   );
+
   const _onChangeFile = useCallback(
     (value: Uint8Array): void => {
+      const isValid = value.length !== 0;
+
       onChange && onChange({
-        isValid: value.length !== 0,
+        isValid,
         value: Compact.addLengthPrefix(value)
       });
+
+      setIsValid(isValid);
     },
     [onChange]
   );
@@ -33,7 +39,7 @@ function Bytes ({ className, defaultValue, isDisabled, isError, label, name, onC
       <File
         className={className}
         isDisabled={isDisabled}
-        isError={isError}
+        isError={isError || !isValid}
         label={label}
         onChange={_onChangeFile}
         style={style}
@@ -45,7 +51,7 @@ function Bytes ({ className, defaultValue, isDisabled, isError, label, name, onC
         className={className}
         defaultValue={defaultValue}
         isDisabled={isDisabled}
-        isError={isError}
+        isError={isError || !isValid}
         label={label}
         length={-1}
         name={name}

packages/react-params/src/Param/Code.tsx

@@ -4,19 +4,25 @@
 
 import { Props } from '../types';
 
-import React, { useCallback } from 'react';
+import React, { useCallback, useState } from 'react';
 
 import Bytes from './Bytes';
 import BytesFile from './File';
 
 function Code ({ className, defaultValue, isDisabled, isError, label, onChange, onEnter, onEscape, style, type, withLabel }: Props): React.ReactElement<Props> {
+  const [isValid, setIsValid] = useState(false);
+
   // TODO: Validate that we have actual proper WASM code
   const _onChange = useCallback(
-    (value: Uint8Array) =>
+    (value: Uint8Array): void => {
+      const isValid = value.length !== 0;
+
       onChange && onChange({
-        isValid: value.length !== 0,
+        isValid,
         value
-      }),
+      });
+      setIsValid(isValid);
+    },
     [onChange]
   );
 
@@ -25,7 +31,7 @@ function Code ({ className, defaultValue, isDisabled, isError, label, onChange,
       <Bytes
         className={className}
         defaultValue={defaultValue}
-        isError={isError}
+        isError={isError || !isValid}
         label={label}
         onEnter={onEnter}
         onEscape={onEscape}
@@ -40,7 +46,7 @@ function Code ({ className, defaultValue, isDisabled, isError, label, onChange,
     <BytesFile
       className={className}
       defaultValue={defaultValue}
-      isError={isError}
+      isError={isError || !isValid}
       label={label}
       onChange={_onChange}
       style={style}

packages/react-params/src/Param/KeyValue.tsx

@@ -37,17 +37,21 @@ export function createParam (hex: string | String, length = -1): StateParam {
 }
 
 function KeyValue ({ className, isDisabled, label, onChange, onEnter, style, withLabel }: Props): React.ReactElement<Props> {
+  const [, setIsValid] = useState(false);
   const [key, setKey] = useState<StateParam>({ isValid: false, u8a: new Uint8Array([]) });
   const [value, setValue] = useState<StateParam>({ isValid: false, u8a: new Uint8Array([]) });
 
   useEffect((): void => {
+    const isValid = key.isValid && value.isValid;
+
     onChange && onChange({
-      isValid: key.isValid && value.isValid,
+      isValid,
       value: u8aConcat(
         key.u8a,
         value.u8a
       )
     });
+    setIsValid(isValid);
   }, [key, onChange, value]);
 
   const _onChangeKey = useCallback(

packages/react-params/src/Param/Raw.tsx

@@ -4,12 +4,14 @@
 
 import { Props } from '../types';
 
-import React, { useCallback } from 'react';
+import React, { useCallback, useState } from 'react';
 import { Input } from '@polkadot/react-components';
 
 import Bare from './Bare';
 
 function Raw ({ className, defaultValue: { value }, isDisabled, isError, label, onChange, onEnter, onEscape, style, withLabel }: Props): React.ReactElement<Props> {
+  const [isValid, setIsValid] = useState(false);
+
   const _onChange = useCallback(
     (value: string): void => {
       const isValid = value.length !== 0;
@@ -18,6 +20,7 @@ function Raw ({ className, defaultValue: { value }, isDisabled, isError, label,
         isValid,
         value
       });
+      setIsValid(isValid);
     },
     [onChange]
   );
@@ -35,7 +38,7 @@ function Raw ({ className, defaultValue: { value }, isDisabled, isError, label,
         className='full'
         defaultValue={defaultValue}
         isDisabled={isDisabled}
-        isError={isError}
+        isError={isError || !isValid}
         label={label}
         onChange={_onChange}
         onEnter={onEnter}

packages/react-params/src/Param/Text.tsx

@@ -4,18 +4,24 @@
 
 import { Props } from '../types';
 
-import React, { useCallback } from 'react';
+import React, { useCallback, useState } from 'react';
 import { Input } from '@polkadot/react-components';
 
 import Bare from './Bare';
 
 function Text ({ className, defaultValue: { value }, isDisabled, isError, label, onChange, onEnter, onEscape, style, withLabel }: Props): React.ReactElement<Props> {
+  const [isValid, setIsValid] = useState(false);
+
   const _onChange = useCallback(
-    (value: string) =>
+    (value: string): void => {
+      const isValid = value.length !== 0;
+
       onChange && onChange({
-        isValid: value.length !== 0,
+        isValid,
         value
-      }),
+      });
+      setIsValid(isValid);
+    },
     [onChange]
   );
 
@@ -30,7 +36,7 @@ function Text ({ className, defaultValue: { value }, isDisabled, isError, label,
         className='full'
         defaultValue={defaultValue}
         isDisabled={isDisabled}
-        isError={isError}
+        isError={isError || !isValid}
         label={label}
         onChange={_onChange}
         onEnter={onEnter}