From 610b7bbd5dab4f1f4e9b5f6703f5766129f01524 Mon Sep 17 00:00:00 2001 From: Jaco Greeff Date: Wed, 13 May 2020 22:13:48 +0200 Subject: [PATCH] Additional params validity checks (#2744) --- packages/react-params/src/Param/Balance.tsx | 16 +++++++++++----- packages/react-params/src/Param/BaseBytes.tsx | 14 +------------- packages/react-params/src/Param/Bytes.tsx | 12 +++++++++--- packages/react-params/src/Param/Code.tsx | 18 ++++++++++++------ packages/react-params/src/Param/KeyValue.tsx | 6 +++++- packages/react-params/src/Param/Raw.tsx | 7 +++++-- packages/react-params/src/Param/Text.tsx | 16 +++++++++++----- 7 files changed, 54 insertions(+), 35 deletions(-) diff --git a/packages/react-params/src/Param/Balance.tsx b/packages/react-params/src/Param/Balance.tsx index 5081456c6b..fae959f40a 100644 --- a/packages/react-params/src/Param/Balance.tsx +++ b/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 { + 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} diff --git a/packages/react-params/src/Param/BaseBytes.tsx b/packages/react-params/src/Param/BaseBytes.tsx index 530446636a..a07c71d655 100644 --- a/packages/react-params/src/Param/BaseBytes.tsx +++ b/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); diff --git a/packages/react-params/src/Param/Bytes.tsx b/packages/react-params/src/Param/Bytes.tsx index 565f4135ca..e35e7fab56 100644 --- a/packages/react-params/src/Param/Bytes.tsx +++ b/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 { + 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 { + 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, { + const [, setIsValid] = useState(false); const [key, setKey] = useState({ isValid: false, u8a: new Uint8Array([]) }); const [value, setValue] = useState({ 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( diff --git a/packages/react-params/src/Param/Raw.tsx b/packages/react-params/src/Param/Raw.tsx index 20b21623cb..4bf602be98 100644 --- a/packages/react-params/src/Param/Raw.tsx +++ b/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 { + 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} diff --git a/packages/react-params/src/Param/Text.tsx b/packages/react-params/src/Param/Text.tsx index 8b182090b2..4206662852 100644 --- a/packages/react-params/src/Param/Text.tsx +++ b/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 { + 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}