Add additional validation to Amount input field (#1982)

* Adjust the validator and update validity class logic on AmountField

* Improve readability and add a condition to invalidity for Input

* Undo changes to Input and pass down showInvalidWithoutValue

* Fix prop ordering issue

* Add removed validator

* Adjust logic for NoneField

common/components/AmountField.tsx

@@ -9,6 +9,7 @@ interface Props {
   hasUnitDropdown?: boolean;
   hasSendEverything?: boolean;
   showAllTokens?: boolean;
+  showInvalidWithoutValue?: boolean;
   customValidator?(rawAmount: string): boolean;
 }
 
@@ -16,7 +17,8 @@ export const AmountField: React.SFC<Props> = ({
   hasUnitDropdown,
   hasSendEverything,
   showAllTokens,
-  customValidator
+  customValidator,
+  showInvalidWithoutValue
 }) => (
   <AmountFieldFactory
     withProps={({ currentValue: { raw }, isValid, onChange, readOnly }) => (
@@ -30,6 +32,7 @@ export const AmountField: React.SFC<Props> = ({
             value={raw}
             readOnly={!!readOnly}
             onChange={onChange}
+            showInvalidWithoutValue={showInvalidWithoutValue}
           />
           {hasSendEverything && <SendEverything />}
           {hasUnitDropdown && <UnitDropDown showAllTokens={showAllTokens} />}

common/components/NonceField.tsx

@@ -12,6 +12,7 @@ import './NonceField.scss';
 
 interface OwnProps {
   alwaysDisplay: boolean;
+  showInvalidBeforeBlur?: boolean;
 }
 
 interface StateProps {
@@ -27,7 +28,13 @@ type Props = OwnProps & DispatchProps & StateProps;
 
 class NonceField extends React.Component<Props> {
   public render() {
-    const { alwaysDisplay, requestNonce, noncePending, isOffline } = this.props;
+    const {
+      alwaysDisplay,
+      showInvalidBeforeBlur,
+      requestNonce,
+      noncePending,
+      isOffline
+    } = this.props;
     return (
       <NonceFieldFactory
         withProps={({ nonce: { raw, value }, onChange, readOnly, shouldDisplay }) => {
@@ -51,6 +58,7 @@ class NonceField extends React.Component<Props> {
                   onChange={onChange}
                   disabled={noncePending}
                   showInvalidWithoutValue={true}
+                  showInvalidBeforeBlur={showInvalidBeforeBlur}
                 />
                 {noncePending ? (
                   <div className="Nonce-spinner">

common/components/TXMetaDataPanel/components/AdvancedGas.tsx

@@ -106,7 +106,7 @@ class AdvancedGas extends React.Component<Props, State> {
           )}
           {nonceField && (
             <div className="AdvancedGas-nonce">
-              <NonceField alwaysDisplay={true} />
+              <NonceField alwaysDisplay={true} showInvalidBeforeBlur={true} />
             </div>
           )}
         </div>

common/components/ui/Input.tsx

@@ -49,7 +49,7 @@ class Input extends React.Component<Props, State> {
     } else if (!hasBlurred && !showInvalidBeforeBlur) {
       validClass = '';
     }
-    if (!hasValue && showInvalidWithoutValue) {
+    if ((!isStateless || showInvalidBeforeBlur) && !hasValue && showInvalidWithoutValue) {
       validClass = 'invalid';
     }
 

common/containers/Tabs/SendTransaction/components/Fields/Fields.tsx

@@ -54,7 +54,11 @@ class FieldsClass extends Component<StateProps> {
                   <div
                     className={schedulingAvailable ? 'col-sm-9 col-md-10' : 'col-sm-12 col-md-12'}
                   >
-                    <AmountField hasUnitDropdown={true} hasSendEverything={true} />
+                    <AmountField
+                      hasUnitDropdown={true}
+                      hasSendEverything={true}
+                      showInvalidWithoutValue={true}
+                    />
                   </div>
                   {schedulingAvailable && (
                     <div className="col-sm-3 col-md-2">

common/containers/Tabs/SendTransaction/components/RequestPayment.tsx

@@ -102,6 +102,7 @@ class RequestPayment extends React.Component<Props, {}> {
                 hasUnitDropdown={true}
                 showAllTokens={true}
                 customValidator={isValidAmount(decimal)}
+                showInvalidWithoutValue={true}
               />
             </div>
           </div>

common/libs/validators.ts

@@ -133,11 +133,20 @@ export const validPositiveNumber = (num: number) => validNumber(num) && num !==
 
 export const validDecimal = (input: string, decimal: number) => {
   const arr = input.split('.');
+
+  // Only a single decimal can exist.
+  if (arr.length > 2) {
+    return false;
+  }
+
   const fractionPortion = arr[1];
+
   if (!fractionPortion || fractionPortion.length === 0) {
     return true;
   }
+
   const decimalLength = fractionPortion.length;
+
   return decimalLength <= decimal;
 };