From ef3859ff775e9f36869fcce80eee388039adb2af Mon Sep 17 00:00:00 2001
From: Whymarrh Whitby <whymarrh.whitby@gmail.com>
Date: Wed, 21 Aug 2019 16:12:14 -0230
Subject: Add toggle for incoming transactions (#7049)

---
 .../security-tab/security-tab.component.js         | 29 ++++++++++++++++++++++
 .../security-tab/security-tab.container.js         |  6 +++++
 ui/app/selectors/transactions.js                   |  5 ++++
 3 files changed, 40 insertions(+)

(limited to 'ui')

diff --git a/ui/app/pages/settings/security-tab/security-tab.component.js b/ui/app/pages/settings/security-tab/security-tab.component.js
index 600ec7069..117010d0f 100644
--- a/ui/app/pages/settings/security-tab/security-tab.component.js
+++ b/ui/app/pages/settings/security-tab/security-tab.component.js
@@ -18,6 +18,8 @@ export default class SecurityTab extends PureComponent {
     mobileSync: PropTypes.bool,
     participateInMetaMetrics: PropTypes.bool,
     setParticipateInMetaMetrics: PropTypes.func,
+    showIncomingTransactions: PropTypes.bool,
+    setShowIncomingTransactionsFeatureFlag: PropTypes.func,
   }
 
   renderSeedWords () {
@@ -80,6 +82,32 @@ export default class SecurityTab extends PureComponent {
     )
   }
 
+  renderIncomingTransactionsOptIn () {
+    const { t } = this.context
+    const { showIncomingTransactions, setShowIncomingTransactionsFeatureFlag } = this.props
+
+    return (
+      <div className="settings-page__content-row">
+        <div className="settings-page__content-item">
+          <span>{ t('showIncomingTransactions') }</span>
+          <div className="settings-page__content-description">
+            { t('showIncomingTransactionsDescription') }
+          </div>
+        </div>
+        <div className="settings-page__content-item">
+          <div className="settings-page__content-item-col">
+            <ToggleButton
+              value={showIncomingTransactions}
+              onToggle={value => setShowIncomingTransactionsFeatureFlag(!value)}
+              offLabel={t('off')}
+              onLabel={t('on')}
+            />
+          </div>
+        </div>
+      </div>
+    )
+  }
+
   renderContent () {
     const { warning } = this.props
 
@@ -87,6 +115,7 @@ export default class SecurityTab extends PureComponent {
       <div className="settings-page__body">
         { warning && <div className="settings-tab__error">{ warning }</div> }
         { this.renderSeedWords() }
+        { this.renderIncomingTransactionsOptIn() }
         { this.renderMetaMetricsOptIn() }
       </div>
     )
diff --git a/ui/app/pages/settings/security-tab/security-tab.container.js b/ui/app/pages/settings/security-tab/security-tab.container.js
index fe79d86af..35375ebf5 100644
--- a/ui/app/pages/settings/security-tab/security-tab.container.js
+++ b/ui/app/pages/settings/security-tab/security-tab.container.js
@@ -5,17 +5,22 @@ import { withRouter } from 'react-router-dom'
 import {
   displayWarning,
   revealSeedConfirmation,
+  setFeatureFlag,
   setParticipateInMetaMetrics,
 } from '../../../store/actions'
 
 const mapStateToProps = state => {
   const { appState: { warning }, metamask } = state
   const {
+    featureFlags: {
+      showIncomingTransactions,
+    } = {},
     participateInMetaMetrics,
   } = metamask
 
   return {
     warning,
+    showIncomingTransactions,
     participateInMetaMetrics,
   }
 }
@@ -25,6 +30,7 @@ const mapDispatchToProps = dispatch => {
     displayWarning: warning => dispatch(displayWarning(warning)),
     revealSeedConfirmation: () => dispatch(revealSeedConfirmation()),
     setParticipateInMetaMetrics: (val) => dispatch(setParticipateInMetaMetrics(val)),
+    setShowIncomingTransactionsFeatureFlag: shouldShow => dispatch(setFeatureFlag('showIncomingTransactions', shouldShow)),
   }
 }
 
diff --git a/ui/app/selectors/transactions.js b/ui/app/selectors/transactions.js
index d52170c34..2a6a92ddf 100644
--- a/ui/app/selectors/transactions.js
+++ b/ui/app/selectors/transactions.js
@@ -16,6 +16,11 @@ import txHelper from '../../lib/tx-helper'
 export const shapeShiftTxListSelector = state => state.metamask.shapeShiftTxList
 
 export const incomingTxListSelector = state => {
+  const { showIncomingTransactions } = state.metamask.featureFlags
+  if (!showIncomingTransactions) {
+    return []
+  }
+
   const network = state.metamask.network
   const selectedAddress = state.metamask.selectedAddress
   return Object.values(state.metamask.incomingTransactions)
-- 
cgit