New settings page rebased (#6333)

* New setting tab

* Add InfoTab

* Add Advanced tab

* Add Security Tab

* Finish mobile view

* Make new setting page responsive

* Fix linter

* Fix y scrolling

* Update link in network dropdown

* Fix e2e tests

* Remove duplicate translation key

* Resolve merge conflict

* Only change settings header in popup view.

* Place mobile-sync button in advanced-tab of settings

2 files changed, 7 insertions, 509 deletions

diff --git a/ui/app/pages/settings/settings-tab/settings-tab.component.js b/ui/app/pages/settings/settings-tab/settings-tab.component.js
index f69c21e82..57e80be0d 100644
--- a/ui/app/pages/settings/settings-tab/settings-tab.component.js
+++ b/ui/app/pages/settings/settings-tab/settings-tab.component.js
@@ -1,14 +1,9 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import infuraCurrencies from '../../../helpers/constants/infura-conversion.json'
-import validUrl from 'valid-url'
-import { exportAsFile } from '../../../helpers/utils/util'
 import SimpleDropdown from '../../../components/app/dropdowns/simple-dropdown'
 import ToggleButton from 'react-toggle-button'
-import { REVEAL_SEED_ROUTE, MOBILE_SYNC_ROUTE } from '../../../helpers/constants/routes'
 import locales from '../../../../../app/_locales/index.json'
-import TextField from '../../../components/ui/text-field'
-import Button from '../../../components/ui/button'
 
 const sortedCurrencies = infuraCurrencies.objects.sort((a, b) => {
   return a.quote.name.toLocaleLowerCase().localeCompare(b.quote.name.toLocaleLowerCase())
@@ -37,44 +32,19 @@ export default class SettingsTab extends PureComponent {
   }
 
   static propTypes = {
-    metamask: PropTypes.object,
     setUseBlockie: PropTypes.func,
-    setHexDataFeatureFlag: PropTypes.func,
-    setPrivacyMode: PropTypes.func,
-    privacyMode: PropTypes.bool,
     setCurrentCurrency: PropTypes.func,
-    setRpcTarget: PropTypes.func,
-    delRpcTarget: PropTypes.func,
     displayWarning: PropTypes.func,
-    revealSeedConfirmation: PropTypes.func,
-    setFeatureFlagToBeta: PropTypes.func,
-    showClearApprovalModal: PropTypes.func,
-    showResetAccountConfirmationModal: PropTypes.func,
     warning: PropTypes.string,
     history: PropTypes.object,
     updateCurrentLocale: PropTypes.func,
     currentLocale: PropTypes.string,
     useBlockie: PropTypes.bool,
-    sendHexData: PropTypes.bool,
     currentCurrency: PropTypes.string,
     conversionDate: PropTypes.number,
     nativeCurrency: PropTypes.string,
     useNativeCurrencyAsPrimaryCurrency: PropTypes.bool,
     setUseNativeCurrencyAsPrimaryCurrencyPreference: PropTypes.func,
-    setAdvancedInlineGasFeatureFlag: PropTypes.func,
-    advancedInlineGas: PropTypes.bool,
-    showFiatInTestnets: PropTypes.bool,
-    setShowFiatConversionOnTestnetsPreference: PropTypes.func.isRequired,
-    participateInMetaMetrics: PropTypes.bool,
-    setParticipateInMetaMetrics: PropTypes.func,
-  }
-
-  state = {
-    newRpc: '',
-    chainId: '',
-    showOptions: false,
-    ticker: '',
-    nickname: '',
   }
 
   renderCurrentConversion () {
@@ -133,310 +103,6 @@ export default class SettingsTab extends PureComponent {
     )
   }
 
-  renderNewRpcUrl () {
-    const { t } = this.context
-    const { newRpc, chainId, ticker, nickname } = this.state
-
-    return (
-      <div className="settings-page__content-row">
-        <div className="settings-page__content-item">
-          <span>{ t('newNetwork') }</span>
-        </div>
-        <div className="settings-page__content-item">
-          <div className="settings-page__content-item-col">
-            <TextField
-              type="text"
-              id="new-rpc"
-              placeholder={t('rpcURL')}
-              value={newRpc}
-              onChange={e => this.setState({ newRpc: e.target.value })}
-              onKeyPress={e => {
-                if (e.key === 'Enter') {
-                  this.validateRpc(newRpc, chainId, ticker, nickname)
-                }
-              }}
-              fullWidth
-              margin="dense"
-            />
-            <TextField
-              type="text"
-              id="chainid"
-              placeholder={t('optionalChainId')}
-              value={chainId}
-              onChange={e => this.setState({ chainId: e.target.value })}
-              onKeyPress={e => {
-                if (e.key === 'Enter') {
-                  this.validateRpc(newRpc, chainId, ticker, nickname)
-                }
-              }}
-              style={{
-                display: this.state.showOptions ? null : 'none',
-              }}
-              fullWidth
-              margin="dense"
-            />
-            <TextField
-              type="text"
-              id="ticker"
-              placeholder={t('optionalSymbol')}
-              value={ticker}
-              onChange={e => this.setState({ ticker: e.target.value })}
-              onKeyPress={e => {
-                if (e.key === 'Enter') {
-                  this.validateRpc(newRpc, chainId, ticker, nickname)
-                }
-              }}
-              style={{
-                display: this.state.showOptions ? null : 'none',
-              }}
-              fullWidth
-              margin="dense"
-            />
-            <TextField
-              type="text"
-              id="nickname"
-              placeholder={t('optionalNickname')}
-              value={nickname}
-              onChange={e => this.setState({ nickname: e.target.value })}
-              onKeyPress={e => {
-                if (e.key === 'Enter') {
-                  this.validateRpc(newRpc, chainId, ticker, nickname)
-                }
-              }}
-              style={{
-                display: this.state.showOptions ? null : 'none',
-              }}
-              fullWidth
-              margin="dense"
-            />
-            <div className="flex-row flex-align-center space-between">
-              <span className="settings-tab__advanced-link"
-                onClick={e => {
-                  e.preventDefault()
-                  this.setState({ showOptions: !this.state.showOptions })
-                }}
-              >
-                { t(this.state.showOptions ? 'hideAdvancedOptions' : 'showAdvancedOptions') }
-              </span>
-              <button
-                className="button btn-primary settings-tab__rpc-save-button"
-                onClick={e => {
-                  e.preventDefault()
-                  this.validateRpc(newRpc, chainId, ticker, nickname)
-                }}
-              >
-                { t('save') }
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    )
-  }
-
-  validateRpc (newRpc, chainId, ticker = 'ETH', nickname) {
-    const { setRpcTarget, displayWarning } = this.props
-    if (validUrl.isWebUri(newRpc)) {
-      this.context.metricsEvent({
-        eventOpts: {
-          category: 'Settings',
-          action: 'Custom RPC',
-          name: 'Success',
-        },
-        customVariables: {
-          networkId: newRpc,
-          chainId,
-        },
-      })
-      if (!!chainId && Number.isNaN(parseInt(chainId))) {
-        return displayWarning(`${this.context.t('invalidInput')} chainId`)
-      }
-
-      setRpcTarget(newRpc, chainId, ticker, nickname)
-    } else {
-      this.context.metricsEvent({
-        eventOpts: {
-          category: 'Settings',
-          action: 'Custom RPC',
-          name: 'Error',
-        },
-        customVariables: {
-          networkId: newRpc,
-          chainId,
-        },
-      })
-      const appendedRpc = `http://${newRpc}`
-
-      if (validUrl.isWebUri(appendedRpc)) {
-        displayWarning(this.context.t('uriErrorMsg'))
-      } else {
-        displayWarning(this.context.t('invalidRPC'))
-      }
-    }
-  }
-
-  renderStateLogs () {
-    const { t } = this.context
-    const { displayWarning } = this.props
-
-    return (
-      <div className="settings-page__content-row">
-        <div className="settings-page__content-item">
-          <span>{ t('stateLogs') }</span>
-          <span className="settings-page__content-description">
-            { t('stateLogsDescription') }
-          </span>
-        </div>
-        <div className="settings-page__content-item">
-          <div className="settings-page__content-item-col">
-            <Button
-              type="primary"
-              large
-              onClick={() => {
-                window.logStateString((err, result) => {
-                  if (err) {
-                    displayWarning(t('stateLogError'))
-                  } else {
-                    exportAsFile('MetaMask State Logs.json', result)
-                  }
-                })
-              }}
-            >
-              { t('downloadStateLogs') }
-            </Button>
-          </div>
-        </div>
-      </div>
-    )
-  }
-
-  renderClearApproval () {
-    const { t } = this.context
-    const { showClearApprovalModal } = this.props
-    return (
-      <div className="settings-page__content-row">
-        <div className="settings-page__content-item">
-          <span>{ t('approvalData') }</span>
-          <span className="settings-page__content-description">
-            { t('approvalDataDescription') }
-          </span>
-        </div>
-        <div className="settings-page__content-item">
-          <div className="settings-page__content-item-col">
-            <Button
-              type="secondary"
-              large
-              className="settings-tab__button--orange"
-              onClick={event => {
-                event.preventDefault()
-                showClearApprovalModal()
-              }}
-            >
-              { t('clearApprovalData') }
-            </Button>
-          </div>
-        </div>
-      </div>
-    )
-  }
-
-  renderSeedWords () {
-    const { t } = this.context
-    const { history } = this.props
-
-    return (
-      <div className="settings-page__content-row">
-        <div className="settings-page__content-item">
-          <span>{ t('revealSeedWords') }</span>
-        </div>
-        <div className="settings-page__content-item">
-          <div className="settings-page__content-item-col">
-            <Button
-              type="secondary"
-              large
-              onClick={event => {
-                event.preventDefault()
-                this.context.metricsEvent({
-                  eventOpts: {
-                    category: 'Settings',
-                    action: 'Reveal Seed Phrase',
-                    name: 'Reveal Seed Phrase',
-                  },
-                })
-                history.push(REVEAL_SEED_ROUTE)
-              }}
-            >
-              { t('revealSeedWords') }
-            </Button>
-          </div>
-        </div>
-      </div>
-    )
-  }
-
-
-  renderMobileSync () {
-    const { t } = this.context
-    const { history } = this.props
-
-    return (
-      <div className="settings-page__content-row">
-        <div className="settings-page__content-item">
-          <span>{ t('syncWithMobile') }</span>
-        </div>
-        <div className="settings-page__content-item">
-          <div className="settings-page__content-item-col">
-            <Button
-              type="primary"
-              large
-              onClick={event => {
-                event.preventDefault()
-                history.push(MOBILE_SYNC_ROUTE)
-              }}
-            >
-              { t('syncWithMobile') }
-            </Button>
-          </div>
-        </div>
-      </div>
-    )
-  }
-
-
-  renderResetAccount () {
-    const { t } = this.context
-    const { showResetAccountConfirmationModal } = this.props
-
-    return (
-      <div className="settings-page__content-row">
-        <div className="settings-page__content-item">
-          <span>{ t('resetAccount') }</span>
-        </div>
-        <div className="settings-page__content-item">
-          <div className="settings-page__content-item-col">
-            <Button
-              type="secondary"
-              large
-              className="settings-tab__button--orange"
-              onClick={event => {
-                event.preventDefault()
-                this.context.metricsEvent({
-                  eventOpts: {
-                    category: 'Settings',
-                    action: 'Reset Account',
-                    name: 'Reset Account',
-                  },
-                })
-                showResetAccountConfirmationModal()
-              }}
-            >
-              { t('resetAccount') }
-            </Button>
-          </div>
-        </div>
-      </div>
-    )
-  }
 
   renderBlockieOptIn () {
     const { useBlockie, setUseBlockie } = this.props
@@ -460,58 +126,6 @@ export default class SettingsTab extends PureComponent {
     )
   }
 
-  renderHexDataOptIn () {
-    const { t } = this.context
-    const { sendHexData, setHexDataFeatureFlag } = this.props
-
-    return (
-      <div className="settings-page__content-row">
-        <div className="settings-page__content-item">
-          <span>{ t('showHexData') }</span>
-          <div className="settings-page__content-description">
-            { t('showHexDataDescription') }
-          </div>
-        </div>
-        <div className="settings-page__content-item">
-          <div className="settings-page__content-item-col">
-            <ToggleButton
-              value={sendHexData}
-              onToggle={value => setHexDataFeatureFlag(!value)}
-              activeLabel=""
-              inactiveLabel=""
-            />
-          </div>
-        </div>
-      </div>
-    )
-  }
-
-  renderAdvancedGasInputInline () {
-    const { t } = this.context
-    const { advancedInlineGas, setAdvancedInlineGasFeatureFlag } = this.props
-
-    return (
-      <div className="settings-page__content-row">
-        <div className="settings-page__content-item">
-          <span>{ t('showAdvancedGasInline') }</span>
-          <div className="settings-page__content-description">
-            { t('showAdvancedGasInlineDescription') }
-          </div>
-        </div>
-        <div className="settings-page__content-item">
-          <div className="settings-page__content-item-col">
-            <ToggleButton
-              value={advancedInlineGas}
-              onToggle={value => setAdvancedInlineGasFeatureFlag(!value)}
-              activeLabel=""
-              inactiveLabel=""
-            />
-          </div>
-        </div>
-      </div>
-    )
-  }
-
   renderUsePrimaryCurrencyOptions () {
     const { t } = this.context
     const {
@@ -566,109 +180,21 @@ export default class SettingsTab extends PureComponent {
     )
   }
 
-  renderShowConversionInTestnets () {
-    const { t } = this.context
-    const {
-      showFiatInTestnets,
-      setShowFiatConversionOnTestnetsPreference,
-    } = this.props
-
-    return (
-      <div className="settings-page__content-row">
-        <div className="settings-page__content-item">
-          <span>{ t('showFiatConversionInTestnets') }</span>
-          <div className="settings-page__content-description">
-            { t('showFiatConversionInTestnetsDescription') }
-          </div>
-        </div>
-        <div className="settings-page__content-item">
-          <div className="settings-page__content-item-col">
-            <ToggleButton
-              value={showFiatInTestnets}
-              onToggle={value => setShowFiatConversionOnTestnetsPreference(!value)}
-              activeLabel=""
-              inactiveLabel=""
-            />
-          </div>
-        </div>
-      </div>
-    )
-  }
-
-  renderPrivacyOptIn () {
-    const { t } = this.context
-    const { privacyMode, setPrivacyMode } = this.props
-
-    return (
-      <div className="settings-page__content-row">
-        <div className="settings-page__content-item">
-          <span>{ t('privacyMode') }</span>
-          <div className="settings-page__content-description">
-            { t('privacyModeDescription') }
-          </div>
-        </div>
-        <div className="settings-page__content-item">
-          <div className="settings-page__content-item-col">
-            <ToggleButton
-              value={privacyMode}
-              onToggle={value => setPrivacyMode(!value)}
-              activeLabel=""
-              inactiveLabel=""
-            />
-          </div>
-        </div>
-      </div>
-    )
-  }
-
-  renderMetaMetricsOptIn () {
-    const { t } = this.context
-    const { participateInMetaMetrics, setParticipateInMetaMetrics } = this.props
-
-    return (
-      <div className="settings-page__content-row">
-        <div className="settings-page__content-item">
-          <span>{ t('participateInMetaMetrics') }</span>
-          <div className="settings-page__content-description">
-            <span>{ t('participateInMetaMetricsDescription') }</span>
-          </div>
-        </div>
-        <div className="settings-page__content-item">
-          <div className="settings-page__content-item-col">
-            <ToggleButton
-              value={participateInMetaMetrics}
-              onToggle={value => setParticipateInMetaMetrics(!value)}
-              activeLabel=""
-              inactiveLabel=""
-            />
-          </div>
-        </div>
-      </div>
-    )
-  }
-
-  render () {
+  renderContent () {
     const { warning } = this.props
 
     return (
-      <div className="settings-page__content">
+      <div className="settings-page__body">
         { warning && <div className="settings-tab__error">{ warning }</div> }
         { this.renderCurrentConversion() }
         { this.renderUsePrimaryCurrencyOptions() }
-        { this.renderShowConversionInTestnets() }
         { this.renderCurrentLocale() }
-        { this.renderNewRpcUrl() }
-        { this.renderStateLogs() }
-        { this.renderSeedWords() }
-        { this.renderResetAccount() }
-        { this.renderClearApproval() }
-        { this.renderPrivacyOptIn() }
-        { this.renderHexDataOptIn() }
-        { this.renderAdvancedGasInputInline() }
         { this.renderBlockieOptIn() }
-        { this.renderMobileSync() }
-        { this.renderMetaMetricsOptIn() }
       </div>
     )
   }
+
+  render () {
+    return this.renderContent()
+  }
 }
diff --git a/ui/app/pages/settings/settings-tab/settings-tab.container.js b/ui/app/pages/settings/settings-tab/settings-tab.container.js
index 3ae4985d7..d3d8457f0 100644
--- a/ui/app/pages/settings/settings-tab/settings-tab.container.js
+++ b/ui/app/pages/settings/settings-tab/settings-tab.container.js
@@ -4,15 +4,10 @@ import { connect } from 'react-redux'
 import { withRouter } from 'react-router-dom'
 import {
   setCurrentCurrency,
-  updateAndSetCustomRpc,
   displayWarning,
-  revealSeedConfirmation,
   setUseBlockie,
   updateCurrentLocale,
-  setFeatureFlag,
-  showModal,
   setUseNativeCurrencyAsPrimaryCurrencyPreference,
-  setShowFiatConversionOnTestnetsPreference,
   setParticipateInMetaMetrics,
 } from '../../../store/actions'
 import { preferencesSelector } from '../../../selectors/selectors'
@@ -24,16 +19,9 @@ const mapStateToProps = state => {
     conversionDate,
     nativeCurrency,
     useBlockie,
-    featureFlags: {
-      sendHexData,
-      privacyMode,
-      advancedInlineGas,
-    } = {},
-    provider = {},
     currentLocale,
-    participateInMetaMetrics,
   } = metamask
-  const { useNativeCurrencyAsPrimaryCurrency, showFiatInTestnets } = preferencesSelector(state)
+  const { useNativeCurrencyAsPrimaryCurrency } = preferencesSelector(state)
 
   return {
     warning,
@@ -42,35 +30,19 @@ const mapStateToProps = state => {
     conversionDate,
     nativeCurrency,
     useBlockie,
-    sendHexData,
-    advancedInlineGas,
-    privacyMode,
-    provider,
     useNativeCurrencyAsPrimaryCurrency,
-    showFiatInTestnets,
-    participateInMetaMetrics,
   }
 }
 
 const mapDispatchToProps = dispatch => {
   return {
     setCurrentCurrency: currency => dispatch(setCurrentCurrency(currency)),
-    setRpcTarget: (newRpc, chainId, ticker, nickname) => dispatch(updateAndSetCustomRpc(newRpc, chainId, ticker, nickname)),
     displayWarning: warning => dispatch(displayWarning(warning)),
-    revealSeedConfirmation: () => dispatch(revealSeedConfirmation()),
     setUseBlockie: value => dispatch(setUseBlockie(value)),
     updateCurrentLocale: key => dispatch(updateCurrentLocale(key)),
-    setHexDataFeatureFlag: shouldShow => dispatch(setFeatureFlag('sendHexData', shouldShow)),
-    setAdvancedInlineGasFeatureFlag: shouldShow => dispatch(setFeatureFlag('advancedInlineGas', shouldShow)),
-    setPrivacyMode: enabled => dispatch(setFeatureFlag('privacyMode', enabled)),
-    showResetAccountConfirmationModal: () => dispatch(showModal({ name: 'CONFIRM_RESET_ACCOUNT' })),
     setUseNativeCurrencyAsPrimaryCurrencyPreference: value => {
       return dispatch(setUseNativeCurrencyAsPrimaryCurrencyPreference(value))
     },
-    setShowFiatConversionOnTestnetsPreference: value => {
-      return dispatch(setShowFiatConversionOnTestnetsPreference(value))
-    },
-    showClearApprovalModal: () => dispatch(showModal({ name: 'CLEAR_APPROVED_ORIGINS' })),
     setParticipateInMetaMetrics: (val) => dispatch(setParticipateInMetaMetrics(val)),
   }
 }