Merge pull request #5919 from MetaMask/gas-customization-fixes

Fix some styling and translations in the gas customization modal

app/_locales/en/messages.json

@@ -44,6 +44,9 @@
   "accept": {
     "message": "Accept"
   },
+  "acceleratingATransaction": {
+    "message": "* Accelerating a transaction by using a higher gas price increases its chances of getting processed by the network faster, but it is not always guaranteed."
+  },
   "accessingYourCamera": {
     "message": "Accessing your camera..."
   },
@@ -212,6 +215,9 @@
   "confirm": {
     "message": "Confirm"
   },
+  "confirmationTime": {
+    "message": "Confirmation time (sec)"
+  },
   "confirmed": {
     "message": "Confirmed"
   },
@@ -436,6 +442,9 @@
   "etherscanView": {
     "message": "View account on Etherscan"
   },
+  "estimatedProcessingTimes": {
+    "message": "Estimated Processing Times"
+  },
   "exchangeRate": {
     "message": "Exchange Rate"
   },
@@ -454,6 +463,9 @@
   "fast": {
     "message": "Fast"
   },
+  "faster": {
+    "message": "Faster"
+  },
   "fastest": {
     "message": "Fastest"
   },
@@ -514,6 +526,9 @@
   "gasPrice": {
     "message": "Gas Price (GWEI)"
   },
+  "gasPriceExtremelyLow": {
+    "message": "Gas Price Extremely Low"
+  },
   "gasPriceNoDenom": {
     "message": "Gas Price"
   },
@@ -615,6 +630,9 @@
   "initialTransactionConfirmed": {
     "message": "Your initial transaction was confirmed by the network. Click OK to go back."
   },
+  "insufficientBalance": {
+    "message": "Insufficient balance."
+  },
   "insufficientFunds": {
     "message": "Insufficient funds."
   },
@@ -680,6 +698,9 @@
   "limit": {
     "message": "Limit"
   },
+  "liveGasPricePredictions": {
+    "message": "Live Gas Price Predictions"
+  },
   "loading": {
     "message": "Loading..."
   },
@@ -1044,6 +1065,9 @@
   "slow": {
     "message": "Slow"
   },
+  "slower": {
+    "message": "Slower"
+  },
   "saveAsCsvFile": {
     "message": "Save as CSV File"
   },
@@ -1123,6 +1147,9 @@
   "selectAnAccountHelp": {
     "message": "Select the account to view in MetaMask"
   },
+  "selectAHigherGasFee": {
+    "message": "Select a higher gas fee to accelerate the processing of your transaction.*"
+  },
   "selectHdPath": {
     "message": "Select HD Path"
   },
@@ -1452,5 +1479,8 @@
   },
   "yourPrivateSeedPhrase": {
     "message": "Your private seed phrase"
+  },
+  "zeroGasPriceOnSpeedUpError": {
+    "message":"Zero gas price on speed up"
   }
 }

ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js

@@ -17,7 +17,7 @@ export default class AdvancedTabContent extends Component {
     customGasLimit: PropTypes.number,
     gasEstimatesLoading: PropTypes.bool,
     millisecondsRemaining: PropTypes.number,
-    totalFee: PropTypes.string,
+    transactionFee: PropTypes.string,
     timeRemaining: PropTypes.string,
     gasChartProps: PropTypes.object,
     insufficientBalance: PropTypes.bool,
@@ -40,19 +40,20 @@ export default class AdvancedTabContent extends Component {
   }
 
   gasInputError ({ labelKey, insufficientBalance, customPriceIsSafe, isSpeedUp, value }) {
+    const { t } = this.context
     let errorText
     let errorType
     let isInError = true
 
 
     if (insufficientBalance) {
-      errorText = 'Insufficient Balance'
+      errorText = t('insufficientBalance')
       errorType = 'error'
     } else if (labelKey === 'gasPrice' && isSpeedUp && value === 0) {
-      errorText = 'Zero gas price on speed up'
+      errorText = t('zeroGasPriceOnSpeedUpError')
       errorType = 'error'
     } else if (labelKey === 'gasPrice' && !customPriceIsSafe) {
-      errorText = 'Gas Price Extremely Low'
+      errorText = t('gasPriceExtremelyLow')
       errorType = 'warning'
     } else {
       isInError = false
@@ -103,7 +104,7 @@ export default class AdvancedTabContent extends Component {
     return <i className="fa fa-info-circle" onClick={onClick} />
   }
 
-  renderDataSummary (totalFee, timeRemaining) {
+  renderDataSummary (transactionFee, timeRemaining) {
     return (
       <div className="advanced-tab__transaction-data-summary">
         <div className="advanced-tab__transaction-data-summary__titles">
@@ -112,7 +113,7 @@ export default class AdvancedTabContent extends Component {
         </div>
         <div className="advanced-tab__transaction-data-summary__container">
           <div className="advanced-tab__transaction-data-summary__fee">
-            {totalFee}
+            {transactionFee}
           </div>
           <div className="time-remaining">{timeRemaining}</div>
         </div>
@@ -164,6 +165,7 @@ export default class AdvancedTabContent extends Component {
   }
 
   render () {
+    const { t } = this.context
     const {
       updateCustomGasPrice,
       updateCustomGasLimit,
@@ -171,16 +173,16 @@ export default class AdvancedTabContent extends Component {
       customGasPrice,
       customGasLimit,
       insufficientBalance,
-      totalFee,
       gasChartProps,
       gasEstimatesLoading,
       customPriceIsSafe,
       isSpeedUp,
+      transactionFee,
     } = this.props
 
     return (
       <div className="advanced-tab">
-        { this.renderDataSummary(totalFee, timeRemaining) }
+        { this.renderDataSummary(transactionFee, timeRemaining) }
         <div className="advanced-tab__fee-chart">
           { this.renderGasEditRows({
             customGasPrice,
@@ -191,14 +193,14 @@ export default class AdvancedTabContent extends Component {
             customPriceIsSafe,
             isSpeedUp,
           }) }
-          <div className="advanced-tab__fee-chart__title">Live Gas Price Predictions</div>
+          <div className="advanced-tab__fee-chart__title">{ t('liveGasPricePredictions') }</div>
           {!gasEstimatesLoading
             ? <GasPriceChart {...gasChartProps} updateCustomGasPrice={updateCustomGasPrice} />
             : <Loading />
           }
           <div className="advanced-tab__fee-chart__speed-buttons">
-            <span>Slower</span>
-            <span>Faster</span>
+            <span>{ t('slower') }</span>
+            <span>{ t('faster') }</span>
           </div>
         </div>
       </div>

ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js

@@ -28,7 +28,7 @@ describe('AdvancedTabContent Component', function () {
       customGasPrice={11}
       customGasLimit={23456}
       timeRemaining={21500}
-      totalFee={'$0.25'}
+      transactionFee={'$0.25'}
       insufficientBalance={false}
       customPriceIsSafe={true}
       isSpeedUp={false}
@@ -315,7 +315,7 @@ describe('AdvancedTabContent Component', function () {
       })
       assert.deepEqual(gasInputError, {
         isInError: true,
-        errorText: 'Insufficient Balance',
+        errorText: 'insufficientBalance',
         errorType: 'error',
       })
     })
@@ -330,7 +330,7 @@ describe('AdvancedTabContent Component', function () {
       })
       assert.deepEqual(gasInputError, {
         isInError: true,
-        errorText: 'Zero gas price on speed up',
+        errorText: 'zeroGasPriceOnSpeedUpError',
         errorType: 'error',
       })
     })
@@ -345,7 +345,7 @@ describe('AdvancedTabContent Component', function () {
       })
       assert.deepEqual(gasInputError, {
         isInError: true,
-        errorText: 'Gas Price Extremely Low',
+        errorText: 'gasPriceExtremelyLow',
         errorType: 'warning',
       })
     })

ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/basic-tab-content.component.js

@@ -13,12 +13,13 @@ export default class BasicTabContent extends Component {
   }
 
   render () {
+    const { t } = this.context
     const { gasPriceButtonGroupProps } = this.props
 
     return (
       <div className="basic-tab-content">
-        <div className="basic-tab-content__title">Estimated Processing Times</div>
-        <div className="basic-tab-content__blurb">Select a higher gas fee to accelerate the processing of your transaction.*</div>
+        <div className="basic-tab-content__title">{ t('estimatedProcessingTimes') }</div>
+        <div className="basic-tab-content__blurb">{ t('selectAHigherGasFee') }</div>
         {!gasPriceButtonGroupProps.loading
             ? <GasPriceButtonGroup
               className="gas-price-button-group--alt"
@@ -27,7 +28,7 @@ export default class BasicTabContent extends Component {
             />
             : <Loading />
         }
-        <div className="basic-tab-content__footer-blurb">* Accelerating a transaction by using a higher gas price increases its chances of getting processed by the network faster, but it is not always guaranteed.</div>
+        <div className="basic-tab-content__footer-blurb">{ t('acceleratingATransaction') }</div>
       </div>
     )
   }

ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/tests/basic-tab-content-component.test.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import assert from 'assert'
-import { shallow } from 'enzyme'
+import shallow from '../../../../../../lib/shallow-with-context'
 import BasicTabContent from '../basic-tab-content.component'
 
 import GasPriceButtonGroup from '../../../gas-price-button-group/'

ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.component.js

@@ -74,8 +74,8 @@ export default class GasModalPageContainer extends Component {
     gasEstimatesLoading,
     customPriceIsSafe,
     isSpeedUp,
+    transactionFee,
   }) {
-    const { transactionFee } = this.props
     return (
       <AdvancedTabContent
         updateCustomGasPrice={convertThenUpdateCustomGasPrice}
@@ -133,7 +133,7 @@ export default class GasModalPageContainer extends Component {
   }) {
     let tabsToRender = [
       { name: 'basic', content: this.renderBasicTabContent(gasPriceButtonGroupProps) },
-      { name: 'advanced', content: this.renderAdvancedTabContent(advancedTabProps) },
+      { name: 'advanced', content: this.renderAdvancedTabContent({ transactionFee, ...advancedTabProps }) },
     ]
 
     if (hideBasic) {

ui/app/components/gas-customization/gas-modal-page-container/index.scss

@@ -8,8 +8,6 @@
     overflow-y: initial;
 
     @media screen and (max-width: $break-small) {
-      max-width: 344px;
-
       &__content {
         display: flex;
         overflow-y: initial;

ui/app/components/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-component.test.js

@@ -185,7 +185,7 @@ describe('GasModalPageContainer Component', function () {
       assert.equal(GP.renderAdvancedTabContent.callCount, 1)
 
       assert.deepEqual(GP.renderBasicTabContent.getCall(0).args[0], mockGasPriceButtonGroupProps)
-      assert.deepEqual(GP.renderAdvancedTabContent.getCall(0).args[0], { otherProps: 'mockAdvancedTabProps' })
+      assert.deepEqual(GP.renderAdvancedTabContent.getCall(0).args[0], { transactionFee: 'mockTransactionFee', otherProps: 'mockAdvancedTabProps' })
     })
 
     it('should call renderInfoRows with the expected props', () => {

ui/app/components/gas-customization/gas-price-button-group/index.scss

@@ -65,7 +65,10 @@
 .gas-price-button-group--small {
   display: flex;
   justify-content: stretch;
-  max-width: 260px;
+
+  @media screen and (max-width: $break-small) {
+    max-width: 260px;
+  }
 
   &__button-fiat-price {
     font-size: 13px;

ui/app/components/gas-customization/gas-price-chart/gas-price-chart.component.js

@@ -32,7 +32,7 @@ export default class GasPriceChart extends Component {
     estimatedTimesMax,
     updateCustomGasPrice,
   }) {
-    const chart = generateChart(gasPrices, estimatedTimes, gasPricesMax, estimatedTimesMax)
+    const chart = generateChart(gasPrices, estimatedTimes, gasPricesMax, estimatedTimesMax, this.context.t)
     setTimeout(function () {
       setTickPosition('y', 0, -5, 8)
       setTickPosition('y', 1, -3, -5)