Hide gas price chart and prevent api call when not on ethereum networks. (#6300)

Add missing translations in gas customization modal

app/_locales/en/messages.json

@@ -11,6 +11,9 @@
   "exposeDescription": {
     "message": "Expose accounts to the current website. Useful for legacy dapps."
   },
+  "chartOnlyAvailableEth": {
+    "message": "Chart only available on Ethereum networks."
+  },
   "confirmExpose": {
     "message": "Are you sure you want to expose your accounts to the current website?"
   },

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

@@ -23,6 +23,7 @@ export default class AdvancedTabContent extends Component {
     insufficientBalance: PropTypes.bool,
     customPriceIsSafe: PropTypes.bool,
     isSpeedUp: PropTypes.bool,
+    isEthereumNetwork: PropTypes.bool,
   }
 
   constructor (props) {
@@ -188,6 +189,7 @@ export default class AdvancedTabContent extends Component {
       customPriceIsSafe,
       isSpeedUp,
       transactionFee,
+      isEthereumNetwork,
     } = this.props
 
     return (
@@ -203,15 +205,20 @@ export default class AdvancedTabContent extends Component {
             customPriceIsSafe,
             isSpeedUp,
           }) }
-          <div className="advanced-tab__fee-chart__title">{ t('liveGasPricePredictions') }</div>
-          {!gasEstimatesLoading
-            ? <GasPriceChart {...gasChartProps} updateCustomGasPrice={updateCustomGasPrice} />
-            : <Loading />
+          { isEthereumNetwork
+            ? <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>{ t('slower') }</span>
+                <span>{ t('faster') }</span>
+              </div>
+            </div>
+            : <div className="advanced-tab__fee-chart__title">{ t('chartOnlyAvailableEth') }</div>
           }
-          <div className="advanced-tab__fee-chart__speed-buttons">
-            <span>{ t('slower') }</span>
-            <span>{ t('faster') }</span>
-          </div>
         </div>
       </div>
     )

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

@@ -32,6 +32,7 @@ describe('AdvancedTabContent Component', function () {
       insufficientBalance={false}
       customPriceIsSafe={true}
       isSpeedUp={false}
+      isEthereumNetwork={true}
     />, { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } })
   })
 
@@ -59,9 +60,9 @@ describe('AdvancedTabContent Component', function () {
       const feeChartDiv = advancedTabChildren.at(1)
 
       assert(feeChartDiv.childAt(0).hasClass('advanced-tab__gas-edit-rows'))
-      assert(feeChartDiv.childAt(1).hasClass('advanced-tab__fee-chart__title'))
-      assert(feeChartDiv.childAt(2).is(GasPriceChart))
-      assert(feeChartDiv.childAt(3).hasClass('advanced-tab__fee-chart__speed-buttons'))
+      assert(feeChartDiv.childAt(1).childAt(0).hasClass('advanced-tab__fee-chart__title'))
+      assert(feeChartDiv.childAt(1).childAt(1).is(GasPriceChart))
+      assert(feeChartDiv.childAt(1).childAt(2).hasClass('advanced-tab__fee-chart__speed-buttons'))
     })
 
     it('should render a loading component instead of the chart if gasEstimatesLoading is true', () => {
@@ -75,9 +76,9 @@ describe('AdvancedTabContent Component', function () {
       const feeChartDiv = advancedTabChildren.at(1)
 
       assert(feeChartDiv.childAt(0).hasClass('advanced-tab__gas-edit-rows'))
-      assert(feeChartDiv.childAt(1).hasClass('advanced-tab__fee-chart__title'))
-      assert(feeChartDiv.childAt(2).is(Loading))
-      assert(feeChartDiv.childAt(3).hasClass('advanced-tab__fee-chart__speed-buttons'))
+      assert(feeChartDiv.childAt(1).childAt(0).hasClass('advanced-tab__fee-chart__title'))
+      assert(feeChartDiv.childAt(1).childAt(1).is(Loading))
+      assert(feeChartDiv.childAt(1).childAt(2).hasClass('advanced-tab__fee-chart__speed-buttons'))
     })
 
     it('should call renderDataSummary with the expected params', () => {

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

@@ -177,7 +177,7 @@ export default class GasModalPageContainer extends Component {
             onSubmit(customModalGasLimitInHex, customModalGasPriceInHex)
           }}
           submitText={this.context.t('save')}
-          headerCloseText={'Close'}
+          headerCloseText={this.context.t('close')}
           hideCancel={true}
         />
       </div>

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

@@ -23,10 +23,13 @@ import {
   updateGasAndCalculate,
 } from '../../../../ducks/confirm-transaction/confirm-transaction.duck'
 import {
-  getCurrentCurrency,
   conversionRateSelector as getConversionRate,
-  getSelectedToken,
+  getCurrentCurrency,
   getCurrentEthBalance,
+  getIsMainnet,
+  getSelectedToken,
+  isEthereumNetwork,
+  preferencesSelector,
 } from '../../../../selectors/selectors.js'
 import {
   formatTimeEstimate,
@@ -63,7 +66,6 @@ import {
 } from '../../send/send.utils'
 import { addHexPrefix } from 'ethereumjs-util'
 import { getAdjacentGasPrices, extrapolateY } from '../gas-price-chart/gas-price-chart.utils'
-import {getIsMainnet, preferencesSelector} from '../../../../selectors/selectors'
 
 const mapStateToProps = (state, ownProps) => {
   const { transaction = {} } = ownProps
@@ -138,6 +140,8 @@ const mapStateToProps = (state, ownProps) => {
     txId: transaction.id,
     insufficientBalance,
     gasEstimatesLoading,
+    isMainnet,
+    isEthereumNetwork: isEthereumNetwork(state),
   }
 }
 

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

@@ -118,7 +118,7 @@ describe('gas-modal-page-container container', () => {
         gasChartProps: {
           'currentPrice': 4.294967295,
           estimatedTimes: [31, 62, 93, 124],
-          estimatedTimesMax: '31',
+          estimatedTimesMax: 31,
           gasPrices: [3, 4, 5, 6],
           gasPricesMax: 6,
         },
@@ -140,6 +140,8 @@ describe('gas-modal-page-container container', () => {
         insufficientBalance: true,
         isSpeedUp: false,
         txId: 34,
+        isEthereumNetwork: false,
+        isMainnet: true,
       }
       const baseMockOwnProps = { transaction: { id: 34 } }
       const tests = [
@@ -179,6 +181,7 @@ describe('gas-modal-page-container container', () => {
               ...baseExpectedResult.infoRowProps,
               newTotalFiat: '',
             },
+            isMainnet: false,
           },
         },
         {
@@ -196,7 +199,10 @@ describe('gas-modal-page-container container', () => {
             },
           }),
           mockOwnProps: baseMockOwnProps,
-          expectedResult: baseExpectedResult,
+          expectedResult: {
+            ...baseExpectedResult,
+            isMainnet: false,
+          },
         },
         {
           mockState: Object.assign({}, baseMockState, {

ui/app/ducks/gas/gas-duck.test.js

@@ -364,7 +364,9 @@ describe('Gas Duck', () => {
         {},
         initState,
         { basicPriceAndTimeEstimatesLastRetrieved: 1000000 }
-      ) }))
+      ),
+        metamask: { provider: { type: 'ropsten' } },
+      }))
       assert.deepEqual(
         mockDistpatch.getCall(0).args,
         [{ type: BASIC_GAS_ESTIMATE_LOADING_STARTED} ]
@@ -428,7 +430,9 @@ describe('Gas Duck', () => {
         {},
         initState,
         { priceAndTimeEstimatesLastRetrieved: 1000000 }
-      ) }))
+      ),
+        metamask: { provider: { type: 'ropsten' } },
+      }))
       assert.deepEqual(
         mockDistpatch.getCall(0).args,
         [{ type: GAS_ESTIMATE_LOADING_STARTED} ]
@@ -479,7 +483,9 @@ describe('Gas Duck', () => {
             gasprice: 50,
           }],
         }
-      ) }))
+      ),
+        metamask: { provider: { type: 'ropsten' } },
+      }))
       assert.deepEqual(
         mockDistpatch.getCall(0).args,
         [{ type: GAS_ESTIMATE_LOADING_STARTED} ]

ui/app/ducks/gas/gas.duck.js

@@ -7,6 +7,9 @@ import {
 import {
   decGWEIToHexWEI,
 } from '../../helpers/utils/conversions.util'
+import {
+  isEthereumNetwork,
+} from '../../selectors/selectors'
 
 // Actions
 const BASIC_GAS_ESTIMATE_LOADING_FINISHED = 'metamask/gas/BASIC_GAS_ESTIMATE_LOADING_FINISHED'
@@ -356,10 +359,16 @@ function inliersByIQR (data, prop) {
 
 export function fetchGasEstimates (blockTime) {
   return (dispatch, getState) => {
+    const state = getState()
+
+    if (isEthereumNetwork(state)) {
+      return Promise.resolve(null)
+    }
+
     const {
       priceAndTimeEstimatesLastRetrieved,
       priceAndTimeEstimates,
-    } = getState().gas
+    } = state.gas
     const timeLastRetrieved = priceAndTimeEstimatesLastRetrieved || loadLocalStorageData('GAS_API_ESTIMATES_LAST_RETRIEVED') || 0
 
     dispatch(gasEstimatesLoadingStarted())

ui/app/helpers/constants/common.js

@@ -6,5 +6,8 @@ export const PRIMARY = 'PRIMARY'
 export const SECONDARY = 'SECONDARY'
 
 export const NETWORK_TYPES = {
+  KOVAN: 'kovan',
   MAINNET: 'mainnet',
+  RINKEBY: 'rinkeby',
+  ROPSTEN: 'ropsten',
 }

ui/app/selectors/selectors.js

@@ -1,4 +1,4 @@
-import {NETWORK_TYPES} from '../helpers/constants/common'
+import { NETWORK_TYPES } from '../helpers/constants/common'
 import { stripHexPrefix } from 'ethereumjs-util'
 
 const abi = require('human-standard-token-abi')
@@ -47,6 +47,7 @@ const selectors = {
   getAccountType,
   getNumberOfAccounts,
   getNumberOfTokens,
+  isEthereumNetwork,
 }
 
 module.exports = selectors
@@ -292,6 +293,17 @@ function getIsMainnet (state) {
   return networkType === NETWORK_TYPES.MAINNET
 }
 
+function isEthereumNetwork (state) {
+  const networkType = getNetworkIdentifier(state)
+  const {
+    KOVAN,
+    MAINNET,
+    RINKEBY,
+    ROPSTEN,
+  } = NETWORK_TYPES
+  return [ KOVAN, MAINNET, RINKEBY, ROPSTEN].includes(type => type === networkType)
+}
+
 function preferencesSelector ({ metamask }) {
   return metamask.preferences
 }