Allow editing transaction amount after clicking max (#10278)

test/e2e/metamask-ui.spec.js

@@ -308,8 +308,6 @@ describe('MetaMask', function () {
       )
       await amountMax.click()
 
-      assert.equal(await inputAmount.isEnabled(), false)
-
       let inputValue = await inputAmount.getAttribute('value')
 
       assert(Number(inputValue) > 99)

ui/app/components/ui/currency-input/currency-input.component.js

@@ -21,7 +21,6 @@ export default class CurrencyInput extends PureComponent {
   static propTypes = {
     conversionRate: PropTypes.number,
     currentCurrency: PropTypes.string,
-    maxModeOn: PropTypes.bool,
     nativeCurrency: PropTypes.string,
     onChange: PropTypes.func,
     useFiat: PropTypes.bool,
@@ -153,7 +152,7 @@ export default class CurrencyInput extends PureComponent {
   }
 
   render() {
-    const { fiatSuffix, nativeSuffix, maxModeOn, ...restProps } = this.props
+    const { fiatSuffix, nativeSuffix, ...restProps } = this.props
     const { decimalValue } = this.state
 
     return (
@@ -162,7 +161,6 @@ export default class CurrencyInput extends PureComponent {
         suffix={this.shouldUseFiat() ? fiatSuffix : nativeSuffix}
         onChange={this.handleChange}
         value={decimalValue}
-        maxModeOn={maxModeOn}
         actionComponent={
           <div className="currency-input__swap-component" onClick={this.swap} />
         }

ui/app/components/ui/currency-input/currency-input.container.js

@@ -1,10 +1,6 @@
 import { connect } from 'react-redux'
 import { ETH } from '../../../helpers/constants/common'
-import {
+import { getIsMainnet, getPreferences } from '../../../selectors'
-  getSendMaxModeState,
-  getIsMainnet,
-  getPreferences,
-} from '../../../selectors'
 import CurrencyInput from './currency-input.component'
 
 const mapStateToProps = (state) => {
@@ -13,14 +9,12 @@ const mapStateToProps = (state) => {
   } = state
   const { showFiatInTestnets } = getPreferences(state)
   const isMainnet = getIsMainnet(state)
-  const maxModeOn = getSendMaxModeState(state)
 
   return {
     nativeCurrency,
     currentCurrency,
     conversionRate,
     hideFiat: !isMainnet && !showFiatInTestnets,
-    maxModeOn,
   }
 }
 

ui/app/components/ui/currency-input/tests/currency-input.container.test.js

@@ -30,9 +30,6 @@ describe('CurrencyInput container', function () {
             provider: {
               type: 'mainnet',
             },
-            send: {
-              maxModeOn: false,
-            },
           },
         },
         expected: {
@@ -40,7 +37,6 @@ describe('CurrencyInput container', function () {
           currentCurrency: 'usd',
           nativeCurrency: 'ETH',
           hideFiat: false,
-          maxModeOn: false,
         },
       },
       // Test # 2
@@ -58,9 +54,6 @@ describe('CurrencyInput container', function () {
             provider: {
               type: 'rinkeby',
             },
-            send: {
-              maxModeOn: false,
-            },
           },
         },
         expected: {
@@ -68,7 +61,6 @@ describe('CurrencyInput container', function () {
           currentCurrency: 'usd',
           nativeCurrency: 'ETH',
           hideFiat: true,
-          maxModeOn: false,
         },
       },
       // Test # 3
@@ -86,9 +78,6 @@ describe('CurrencyInput container', function () {
             provider: {
               type: 'rinkeby',
             },
-            send: {
-              maxModeOn: false,
-            },
           },
         },
         expected: {
@@ -96,7 +85,6 @@ describe('CurrencyInput container', function () {
           currentCurrency: 'usd',
           nativeCurrency: 'ETH',
           hideFiat: false,
-          maxModeOn: false,
         },
       },
       // Test # 4
@@ -114,9 +102,6 @@ describe('CurrencyInput container', function () {
             provider: {
               type: 'mainnet',
             },
-            send: {
-              maxModeOn: false,
-            },
           },
         },
         expected: {
@@ -124,7 +109,6 @@ describe('CurrencyInput container', function () {
           currentCurrency: 'usd',
           nativeCurrency: 'ETH',
           hideFiat: false,
-          maxModeOn: false,
         },
       },
     ]

ui/app/components/ui/unit-input/unit-input.component.js

@@ -13,7 +13,6 @@ export default class UnitInput extends PureComponent {
     children: PropTypes.node,
     actionComponent: PropTypes.node,
     error: PropTypes.bool,
-    maxModeOn: PropTypes.bool,
     onChange: PropTypes.func,
     placeholder: PropTypes.string,
     suffix: PropTypes.string,
@@ -63,33 +62,20 @@ export default class UnitInput extends PureComponent {
   }
 
   render() {
-    const {
+    const { error, placeholder, suffix, actionComponent, children } = this.props
-      error,
-      placeholder,
-      suffix,
-      actionComponent,
-      children,
-      maxModeOn,
-    } = this.props
     const { value } = this.state
 
     return (
       <div
-        className={classnames(
+        className={classnames('unit-input', { 'unit-input--error': error })}
-          'unit-input',
+        onClick={this.handleFocus}
-          { 'unit-input--error': error },
-          { 'unit-input__disabled': maxModeOn },
-        )}
-        onClick={maxModeOn ? null : this.handleFocus}
       >
         <div className="unit-input__inputs">
           <div className="unit-input__input-container">
             <input
               type="number"
               dir="ltr"
-              className={classnames('unit-input__input', {
+              className={classnames('unit-input__input')}
-                'unit-input__disabled': maxModeOn,
-              })}
               value={value}
               placeholder={placeholder}
               onChange={this.handleChange}
@@ -97,7 +83,6 @@ export default class UnitInput extends PureComponent {
               ref={(ref) => {
                 this.unitInput = ref
               }}
-              disabled={maxModeOn}
             />
             {suffix && <div className="unit-input__suffix">{suffix}</div>}
           </div>