Merge pull request #5091 from MetaMask/i4945-feature-flag-hex-data

Adds feature flag toggle for the hex data row on the send screen.

app/_locales/en/messages.json

@@ -882,6 +882,12 @@
   "secretPhrase": {
     "message": "Enter your secret twelve word phrase here to restore your vault."
   },
+  "showHexData": {
+    "message": "Show Hex Data"
+  },
+  "showHexDataDescription": {
+    "message": "Select this to show the hex data field on the send screen"
+  },
   "newPassword8Chars": {
     "message": "New Password (min 8 chars)"
   },

ui/app/components/pages/settings/settings.js

@@ -66,6 +66,30 @@ class Settings extends Component {
     ])
   }
 
+  renderHexDataOptIn () {
+    const { metamask: { featureFlags: { sendHexData } }, setHexDataFeatureFlag } = this.props
+
+    return h('div.settings__content-row', [
+      h('div.settings__content-item', [
+        h('span', this.context.t('showHexData')),
+        h(
+          'div.settings__content-description',
+          this.context.t('showHexDataDescription')
+        ),
+      ]),
+      h('div.settings__content-item', [
+        h('div.settings__content-item-col', [
+          h(ToggleButton, {
+            value: sendHexData,
+            onToggle: (value) => setHexDataFeatureFlag(!value),
+            activeLabel: '',
+            inactiveLabel: '',
+          }),
+        ]),
+      ]),
+    ])
+  }
+
   renderCurrentConversion () {
     const { metamask: { currentCurrency, conversionDate }, setCurrentCurrency } = this.props
 
@@ -307,6 +331,7 @@ class Settings extends Component {
         !isMascara && this.renderOldUI(),
         this.renderResetAccount(),
         this.renderBlockieOptIn(),
+        this.renderHexDataOptIn(),
       ])
     )
   }
@@ -315,6 +340,7 @@ class Settings extends Component {
 Settings.propTypes = {
   metamask: PropTypes.object,
   setUseBlockie: PropTypes.func,
+  setHexDataFeatureFlag: PropTypes.func,
   setCurrentCurrency: PropTypes.func,
   setRpcTarget: PropTypes.func,
   displayWarning: PropTypes.func,
@@ -349,6 +375,9 @@ const mapDispatchToProps = dispatch => {
     setFeatureFlagToBeta: () => {
       return dispatch(actions.setFeatureFlag('betaUI', false, 'OLD_UI_NOTIFICATION_MODAL'))
     },
+    setHexDataFeatureFlag: (featureFlagShowState) => {
+      return dispatch(actions.setFeatureFlag('sendHexData', featureFlagShowState))
+    },
     showResetAccountConfirmationModal: () => {
       return dispatch(actions.showModal({ name: 'CONFIRM_RESET_ACCOUNT' }))
     },

ui/app/components/send/send-content/send-content.component.js

@@ -12,6 +12,7 @@ export default class SendContent extends Component {
   static propTypes = {
     updateGas: PropTypes.func,
     scanQrCode: PropTypes.func,
+    showHexData: PropTypes.bool,
   };
 
   render () {
@@ -25,7 +26,7 @@ export default class SendContent extends Component {
           />
           <SendAmountRow updateGas={(updateData) => this.props.updateGas(updateData)} />
           <SendGasRow />
-          <SendHexDataRow />
+          { this.props.showHexData ? <SendHexDataRow /> : null }
         </div>
       </PageContainerContent>
     )

ui/app/components/send/send-content/tests/send-content-component.test.js

@@ -8,12 +8,13 @@ import SendAmountRow from '../send-amount-row/send-amount-row.container'
 import SendFromRow from '../send-from-row/send-from-row.container'
 import SendGasRow from '../send-gas-row/send-gas-row.container'
 import SendToRow from '../send-to-row/send-to-row.container'
+import SendHexDataRow from '../send-hex-data-row/send-hex-data-row.container'
 
 describe('SendContent Component', function () {
   let wrapper
 
   beforeEach(() => {
-    wrapper = shallow(<SendContent />)
+    wrapper = shallow(<SendContent showHexData={true} />)
   })
 
   describe('render', () => {
@@ -33,6 +34,17 @@ describe('SendContent Component', function () {
       assert(PageContainerContentChild.childAt(1).is(SendToRow))
       assert(PageContainerContentChild.childAt(2).is(SendAmountRow))
       assert(PageContainerContentChild.childAt(3).is(SendGasRow))
+      assert(PageContainerContentChild.childAt(4).is(SendHexDataRow))
+    })
+
+    it('should not render the SendHexDataRow if props.showHexData is false', () => {
+      wrapper.setProps({ showHexData: false })
+      const PageContainerContentChild = wrapper.find(PageContainerContent).children()
+      assert(PageContainerContentChild.childAt(0).is(SendFromRow))
+      assert(PageContainerContentChild.childAt(1).is(SendToRow))
+      assert(PageContainerContentChild.childAt(2).is(SendAmountRow))
+      assert(PageContainerContentChild.childAt(3).is(SendGasRow))
+      assert.equal(PageContainerContentChild.childAt(4).html(), null)
     })
   })
 })

ui/app/components/send/send.component.js

@@ -193,7 +193,7 @@ export default class SendTransactionScreen extends PersistentForm {
   }
 
   render () {
-    const { history } = this.props
+    const { history, showHexData } = this.props
 
     return (
       <div className="page-container">
@@ -201,6 +201,7 @@ export default class SendTransactionScreen extends PersistentForm {
         <SendContent
           updateGas={(updateData) => this.updateGas(updateData)}
           scanQrCode={_ => this.props.scanQrCode()}
+          showHexData={showHexData}
         />
         <SendFooter history={history}/>
       </div>

ui/app/components/send/send.container.js

@@ -18,6 +18,7 @@ import {
   getSelectedTokenToFiatRate,
   getSendAmount,
   getSendEditingTransactionId,
+  getSendHexDataFeatureFlagState,
   getSendFromObject,
   getSendTo,
   getTokenBalance,
@@ -64,6 +65,7 @@ function mapStateToProps (state) {
     recentBlocks: getRecentBlocks(state),
     selectedAddress: getSelectedAddress(state),
     selectedToken: getSelectedToken(state),
+    showHexData: getSendHexDataFeatureFlagState(state),
     to: getSendTo(state),
     tokenBalance: getTokenBalance(state),
     tokenContract: getSelectedTokenContract(state),

ui/app/components/send/send.selectors.js

@@ -34,6 +34,7 @@ const selectors = {
   getSelectedTokenToFiatRate,
   getSendAmount,
   getSendHexData,
+  getSendHexDataFeatureFlagState,
   getSendEditingTransactionId,
   getSendErrors,
   getSendFrom,
@@ -216,6 +217,10 @@ function getSendHexData (state) {
   return state.metamask.send.data
 }
 
+function getSendHexDataFeatureFlagState (state) {
+  return state.metamask.featureFlags.sendHexData
+}
+
 function getSendEditingTransactionId (state) {
   return state.metamask.send.editingTransactionId
 }

ui/app/components/send/tests/send-component.test.js

@@ -47,6 +47,7 @@ describe('Send Component', function () {
       recentBlocks={['mockBlock']}
       selectedAddress={'mockSelectedAddress'}
       selectedToken={'mockSelectedToken'}
+      showHexData={true}
       tokenBalance={'mockTokenBalance'}
       tokenContract={'mockTokenContract'}
       updateAndSetGasTotal={propsMethodSpies.updateAndSetGasTotal}
@@ -328,5 +329,9 @@ describe('Send Component', function () {
         }
       )
     })
+
+    it('should pass showHexData to SendContent', () => {
+      assert.equal(wrapper.find(SendContent).props().showHexData, true)
+    })
   })
 })

ui/app/components/send/tests/send-container.test.js

@@ -39,6 +39,7 @@ proxyquire('../send.container.js', {
     getSelectedToken: (s) => `mockSelectedToken:${s}`,
     getSelectedTokenContract: (s) => `mockTokenContract:${s}`,
     getSelectedTokenToFiatRate: (s) => `mockTokenToFiatRate:${s}`,
+    getSendHexDataFeatureFlagState: (s) => `mockSendHexDataFeatureFlagState:${s}`,
     getSendAmount: (s) => `mockAmount:${s}`,
     getSendTo: (s) => `mockTo:${s}`,
     getSendEditingTransactionId: (s) => `mockEditingTransactionId:${s}`,
@@ -73,6 +74,7 @@ describe('send container', () => {
         recentBlocks: 'mockRecentBlocks:mockState',
         selectedAddress: 'mockSelectedAddress:mockState',
         selectedToken: 'mockSelectedToken:mockState',
+        showHexData: 'mockSendHexDataFeatureFlagState:mockState',
         to: 'mockTo:mockState',
         tokenBalance: 'mockTokenBalance:mockState',
         tokenContract: 'mockTokenContract:mockState',

ui/app/components/send/tests/send-selectors-test-data.js

@@ -2,7 +2,7 @@ module.exports = {
   'metamask': {
     'isInitialized': true,
     'isUnlocked': true,
-    'featureFlags': {'betaUI': true},
+    'featureFlags': {'betaUI': true, 'sendHexData': true},
     'rpcTarget': 'https://rawtestrpc.metamask.io/',
     'identities': {
       '0xfdea65c8e26263f6d9a1b5de9555d2931a33b825': {

ui/app/components/send/tests/send-selectors.test.js

@@ -31,6 +31,7 @@ const {
   getSendFrom,
   getSendFromBalance,
   getSendFromObject,
+  getSendHexDataFeatureFlagState,
   getSendMaxModeState,
   getSendTo,
   getSendToAccounts,
@@ -379,6 +380,15 @@ describe('send selectors', () => {
     })
   })
 
+  describe('getSendHexDataFeatureFlagState()', () => {
+    it('should return the sendHexData feature flag state', () => {
+      assert.deepEqual(
+        getSendHexDataFeatureFlagState(mockState),
+        true
+      )
+    })
+  })
+
   describe('getSendFrom()', () => {
     it('should return the send.from', () => {
       assert.deepEqual(