fix merge conflicts

3 files changed, 179 insertions, 40 deletions

diff --git a/ui/app/components/pages/settings/settings-tab/index.scss b/ui/app/components/pages/settings/settings-tab/index.scss
index 3bf840c8..ef32b0e4 100644
--- a/ui/app/components/pages/settings/settings-tab/index.scss
+++ b/ui/app/components/pages/settings/settings-tab/index.scss
@@ -5,12 +5,9 @@
     color: $crimson;
   }
 
-  &__rpc-save-button {
-    align-self: flex-end;
-    padding: 5px;
-    text-transform: uppercase;
-    color: $dusty-gray;
-    cursor: pointer;
+  &__advanced-link {
+    color: $curious-blue;
+    padding-left: 5px;
   }
 
   &__rpc-save-button {
@@ -19,6 +16,9 @@
     text-transform: uppercase;
     color: $dusty-gray;
     cursor: pointer;
+    width: 25%;
+    min-width: 80px;
+    height: 33px;
   }
 
   &__button--red {
diff --git a/ui/app/components/pages/settings/settings-tab/settings-tab.component.js b/ui/app/components/pages/settings/settings-tab/settings-tab.component.js
index a9e2a723..a0a8ed47 100644
--- a/ui/app/components/pages/settings/settings-tab/settings-tab.component.js
+++ b/ui/app/components/pages/settings/settings-tab/settings-tab.component.js
@@ -39,12 +39,15 @@ export default class SettingsTab extends PureComponent {
     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,
@@ -55,12 +58,17 @@ export default class SettingsTab extends PureComponent {
     sendHexData: PropTypes.bool,
     currentCurrency: PropTypes.string,
     conversionDate: PropTypes.number,
-    useETHAsPrimaryCurrency: PropTypes.bool,
-    setUseETHAsPrimaryCurrencyPreference: PropTypes.func,
+    nativeCurrency: PropTypes.string,
+    useNativeCurrencyAsPrimaryCurrency: PropTypes.bool,
+    setUseNativeCurrencyAsPrimaryCurrencyPreference: PropTypes.func,
   }
 
   state = {
     newRpc: '',
+    chainId: '',
+    showOptions: false,
+    ticker: '',
+    nickname: '',
   }
 
   renderCurrentConversion () {
@@ -121,37 +129,98 @@ export default class SettingsTab extends PureComponent {
 
   renderNewRpcUrl () {
     const { t } = this.context
-    const { newRpc } = this.state
+    const { newRpc, chainId, ticker, nickname } = this.state
 
     return (
       <div className="settings-page__content-row">
         <div className="settings-page__content-item">
-          <span>{ t('newRPC') }</span>
+          <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('newRPC')}
+              placeholder={t('rpcURL')}
               value={newRpc}
               onChange={e => this.setState({ newRpc: e.target.value })}
               onKeyPress={e => {
                 if (e.key === 'Enter') {
-                  this.validateRpc(newRpc)
+                  this.validateRpc(newRpc, chainId, ticker, nickname)
                 }
               }}
               fullWidth
-              margin="none"
+              margin="dense"
             />
-            <div
-              className="settings-tab__rpc-save-button"
-              onClick={e => {
-                e.preventDefault()
-                this.validateRpc(newRpc)
+            <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)
+                }
               }}
-            >
-              { t('save') }
+              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>
@@ -159,11 +228,11 @@ export default class SettingsTab extends PureComponent {
     )
   }
 
-  validateRpc (newRpc) {
+  validateRpc (newRpc, chainId, ticker = 'ETH', nickname) {
     const { setRpcTarget, displayWarning } = this.props
 
     if (validUrl.isWebUri(newRpc)) {
-      setRpcTarget(newRpc)
+      setRpcTarget(newRpc, chainId, ticker, nickname)
     } else {
       const appendedRpc = `http://${newRpc}`
 
@@ -210,6 +279,36 @@ export default class SettingsTab extends PureComponent {
     )
   }
 
+  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
@@ -341,9 +440,13 @@ export default class SettingsTab extends PureComponent {
     )
   }
 
-  renderUseEthAsPrimaryCurrency () {
+  renderUsePrimaryCurrencyOptions () {
     const { t } = this.context
-    const { useETHAsPrimaryCurrency, setUseETHAsPrimaryCurrencyPreference } = this.props
+    const {
+      nativeCurrency,
+      setUseNativeCurrencyAsPrimaryCurrencyPreference,
+      useNativeCurrencyAsPrimaryCurrency,
+    } = this.props
 
     return (
       <div className="settings-page__content-row">
@@ -359,23 +462,23 @@ export default class SettingsTab extends PureComponent {
               <div className="settings-tab__radio-button">
                 <input
                   type="radio"
-                  id="eth-primary-currency"
-                  onChange={() => setUseETHAsPrimaryCurrencyPreference(true)}
-                  checked={Boolean(useETHAsPrimaryCurrency)}
+                  id="native-primary-currency"
+                  onChange={() => setUseNativeCurrencyAsPrimaryCurrencyPreference(true)}
+                  checked={Boolean(useNativeCurrencyAsPrimaryCurrency)}
                 />
                 <label
-                  htmlFor="eth-primary-currency"
+                  htmlFor="native-primary-currency"
                   className="settings-tab__radio-label"
                 >
-                  { t('eth') }
+                  { nativeCurrency }
                 </label>
               </div>
               <div className="settings-tab__radio-button">
                 <input
                   type="radio"
                   id="fiat-primary-currency"
-                  onChange={() => setUseETHAsPrimaryCurrencyPreference(false)}
-                  checked={!useETHAsPrimaryCurrency}
+                  onChange={() => setUseNativeCurrencyAsPrimaryCurrencyPreference(false)}
+                  checked={!useNativeCurrencyAsPrimaryCurrency}
                 />
                 <label
                   htmlFor="fiat-primary-currency"
@@ -391,6 +494,32 @@ export default class SettingsTab extends PureComponent {
     )
   }
 
+  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>
+    )
+  }
+
   render () {
     const { warning, isMascara } = this.props
 
@@ -398,15 +527,17 @@ export default class SettingsTab extends PureComponent {
       <div className="settings-page__content">
         { warning && <div className="settings-tab__error">{ warning }</div> }
         { this.renderCurrentConversion() }
-        { this.renderUseEthAsPrimaryCurrency() }
+        { this.renderUsePrimaryCurrencyOptions() }
         { this.renderCurrentLocale() }
         { this.renderNewRpcUrl() }
         { this.renderStateLogs() }
         { this.renderSeedWords() }
         { !isMascara && this.renderOldUI() }
         { this.renderResetAccount() }
-        { this.renderBlockieOptIn() }
+        { this.renderClearApproval() }
+        { this.renderPrivacyOptIn() }
         { this.renderHexDataOptIn() }
+        { this.renderBlockieOptIn() }
       </div>
     )
   }
diff --git a/ui/app/components/pages/settings/settings-tab/settings-tab.container.js b/ui/app/components/pages/settings/settings-tab/settings-tab.container.js
index de30f309..b6c33a5b 100644
--- a/ui/app/components/pages/settings/settings-tab/settings-tab.container.js
+++ b/ui/app/components/pages/settings/settings-tab/settings-tab.container.js
@@ -11,7 +11,7 @@ import {
   updateCurrentLocale,
   setFeatureFlag,
   showModal,
-  setUseETHAsPrimaryCurrencyPreference,
+  setUseNativeCurrencyAsPrimaryCurrencyPreference,
 } from '../../../../actions'
 import { preferencesSelector } from '../../../../selectors'
 
@@ -20,13 +20,17 @@ const mapStateToProps = state => {
   const {
     currentCurrency,
     conversionDate,
+    nativeCurrency,
     useBlockie,
-    featureFlags: { sendHexData } = {},
+    featureFlags: {
+      sendHexData,
+      privacyMode,
+    } = {},
     provider = {},
     isMascara,
     currentLocale,
   } = metamask
-  const { useETHAsPrimaryCurrency } = preferencesSelector(state)
+  const { useNativeCurrencyAsPrimaryCurrency } = preferencesSelector(state)
 
   return {
     warning,
@@ -34,17 +38,19 @@ const mapStateToProps = state => {
     currentLocale,
     currentCurrency,
     conversionDate,
+    nativeCurrency,
     useBlockie,
     sendHexData,
+    privacyMode,
     provider,
-    useETHAsPrimaryCurrency,
+    useNativeCurrencyAsPrimaryCurrency,
   }
 }
 
 const mapDispatchToProps = dispatch => {
   return {
     setCurrentCurrency: currency => dispatch(setCurrentCurrency(currency)),
-    setRpcTarget: newRpc => dispatch(setRpcTarget(newRpc)),
+    setRpcTarget: (newRpc, chainId, ticker, nickname) => dispatch(setRpcTarget(newRpc, chainId, ticker, nickname)),
     displayWarning: warning => dispatch(displayWarning(warning)),
     revealSeedConfirmation: () => dispatch(revealSeedConfirmation()),
     setUseBlockie: value => dispatch(setUseBlockie(value)),
@@ -53,10 +59,12 @@ const mapDispatchToProps = dispatch => {
       return dispatch(setFeatureFlag('betaUI', false, 'OLD_UI_NOTIFICATION_MODAL'))
     },
     setHexDataFeatureFlag: shouldShow => dispatch(setFeatureFlag('sendHexData', shouldShow)),
+    setPrivacyMode: enabled => dispatch(setFeatureFlag('privacyMode', enabled)),
     showResetAccountConfirmationModal: () => dispatch(showModal({ name: 'CONFIRM_RESET_ACCOUNT' })),
-    setUseETHAsPrimaryCurrencyPreference: value => {
-      return dispatch(setUseETHAsPrimaryCurrencyPreference(value))
+    setUseNativeCurrencyAsPrimaryCurrencyPreference: value => {
+      return dispatch(setUseNativeCurrencyAsPrimaryCurrencyPreference(value))
     },
+    showClearApprovalModal: () => dispatch(showModal({ name: 'CLEAR_APPROVED_ORIGINS' })),
   }
 }