Display correct titles and subtitles on send token and editing send transaction screens.

9 files changed, 112 insertions, 14 deletions

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index fa01fea24..d820739c8 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -253,6 +253,9 @@
   "editAccountName": {
     "message": "Edit Account Name"
   },
+  "editingTransaction": {
+    "message": "Make changes to your transaction"
+  },
   "emailUs": {
     "message": "Email us!"
   },
@@ -756,6 +759,10 @@
   "onlySendToEtherAddress": {
     "message": "Only send ETH to an Ethereum address."
   },
+  "onlySendTokensToAccountAddress": {
+    "message": "Only send $1 to an Ethereum account address.",
+    "description": "displays token symbol"
+  },
   "searchTokens": {
     "message": "Search Tokens"
   },
diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js
index 5b5149058..b21e1473e 100644
--- a/ui/app/components/pending-tx/confirm-send-token.js
+++ b/ui/app/components/pending-tx/confirm-send-token.js
@@ -107,7 +107,7 @@ function mapDispatchToProps (dispatch, ownProps) {
         to,
         amount: tokenAmountInHex,
         errors: { to: null, amount: null },
-        editingTransactionId: id,
+        editingTransactionId: id && id.toString(),
         token: ownProps.token,
       }))
       dispatch(actions.showSendTokenPage())
diff --git a/ui/app/components/send_/send-header/send-header.component.js b/ui/app/components/send_/send-header/send-header.component.js
index 0d75dbdae..5f6617fce 100644
--- a/ui/app/components/send_/send-header/send-header.component.js
+++ b/ui/app/components/send_/send-header/send-header.component.js
@@ -8,7 +8,8 @@ export default class SendHeader extends Component {
   static propTypes = {
     clearSend: PropTypes.func,
     history: PropTypes.object,
-    isToken: PropTypes.bool,
+    titleKey: PropTypes.string,
+    subtitleParams: PropTypes.array,
   };
 
   onClose () {
@@ -20,8 +21,8 @@ export default class SendHeader extends Component {
     return (
       <PageContainerHeader
         onClose={() => this.onClose()}
-        subtitle={this.context.t('onlySendToEtherAddress')}
-        title={this.props.isToken ? this.context.t('sendTokens') : this.context.t('sendETH')}
+        subtitle={this.context.t(...this.props.subtitleParams)}
+        title={this.context.t(this.props.titleKey)}
       />
     )
   }
diff --git a/ui/app/components/send_/send-header/send-header.container.js b/ui/app/components/send_/send-header/send-header.container.js
index 0c92da3a6..4bcd0d1b6 100644
--- a/ui/app/components/send_/send-header/send-header.container.js
+++ b/ui/app/components/send_/send-header/send-header.container.js
@@ -1,13 +1,14 @@
 import { connect } from 'react-redux'
 import { clearSend } from '../../../actions'
 import SendHeader from './send-header.component'
-import { getSelectedToken } from '../../../selectors'
+import { getSubtitleParams, getTitleKey } from './send-header.selectors'
 
 export default connect(mapStateToProps, mapDispatchToProps)(SendHeader)
 
 function mapStateToProps (state) {
   return {
-    isToken: Boolean(getSelectedToken(state)),
+    titleKey: getTitleKey(state),
+    subtitleParams: getSubtitleParams(state),
   }
 }
 
diff --git a/ui/app/components/send_/send-header/send-header.selectors.js b/ui/app/components/send_/send-header/send-header.selectors.js
new file mode 100644
index 000000000..d7c9d3766
--- /dev/null
+++ b/ui/app/components/send_/send-header/send-header.selectors.js
@@ -0,0 +1,37 @@
+const {
+  getSelectedToken,
+  getSendEditingTransactionId,
+} = require('../send.selectors.js')
+
+const selectors = {
+  getTitleKey,
+  getSubtitleParams,
+}
+
+module.exports = selectors
+
+function getTitleKey (state) {
+  const isEditing = Boolean(getSendEditingTransactionId(state))
+  const isToken = Boolean(getSelectedToken(state))
+
+  if (isEditing) {
+    return 'edit'
+  } else if (isToken) {
+    return 'sendTokens'
+  } else {
+    return 'sendETH'
+  }
+}
+
+function getSubtitleParams (state) {
+    const isEditing = Boolean(getSendEditingTransactionId(state))
+    const token = getSelectedToken(state)
+
+    if (isEditing) {
+      return [ 'editingTransaction' ]
+    } else if (token) {
+      return [ 'onlySendTokensToAccountAddress', [ token.symbol ] ]
+    } else {
+      return [ 'onlySendToEtherAddress' ]
+    }
+}
diff --git a/ui/app/components/send_/send-header/tests/send-header-component.test.js b/ui/app/components/send_/send-header/tests/send-header-component.test.js
index c9d6d8023..930bfa387 100644
--- a/ui/app/components/send_/send-header/tests/send-header-component.test.js
+++ b/ui/app/components/send_/send-header/tests/send-header-component.test.js
@@ -23,8 +23,9 @@ describe('SendHeader Component', function () {
     wrapper = shallow(<SendHeader
       clearSend={propsMethodSpies.clearSend}
       history={historySpies}
-      isToken={false}
-    />, { context: { t: str => str } })
+      titleKey={'mockTitleKey'}
+      subtitleParams={[ 'mockSubtitleKey', 'mockVal']}
+    />, { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } })
   })
 
   afterEach(() => {
@@ -59,8 +60,8 @@ describe('SendHeader Component', function () {
         subtitle,
         title,
       } = wrapper.find(PageContainerHeader).props()
-      assert.equal(subtitle, 'onlySendToEtherAddress')
-      assert.equal(title, 'sendETH')
+      assert.equal(subtitle, 'mockSubtitleKeymockVal')
+      assert.equal(title, 'mockTitleKey')
       assert.equal(SendHeader.prototype.onClose.callCount, 0)
       onClose()
       assert.equal(SendHeader.prototype.onClose.callCount, 1)
diff --git a/ui/app/components/send_/send-header/tests/send-header-container.test.js b/ui/app/components/send_/send-header/tests/send-header-container.test.js
index abce9af6b..41a7e8a89 100644
--- a/ui/app/components/send_/send-header/tests/send-header-container.test.js
+++ b/ui/app/components/send_/send-header/tests/send-header-container.test.js
@@ -18,7 +18,10 @@ proxyquire('../send-header.container.js', {
     },
   },
   '../../../actions': actionSpies,
-  '../../../selectors': { getSelectedToken: (s) => `mockSelectedToken:${s}` },
+  './send-header.selectors': {
+    getTitleKey: (s) => `mockTitleKey:${s}`,
+    getSubtitleParams: (s) => `mockSubtitleParams:${s}`,
+  },
 })
 
 describe('send-header container', () => {
@@ -27,7 +30,8 @@ describe('send-header container', () => {
 
     it('should map the correct properties to props', () => {
       assert.deepEqual(mapStateToProps('mockState'), {
-        isToken: true,
+        titleKey: 'mockTitleKey:mockState',
+        subtitleParams: 'mockSubtitleParams:mockState',
       })
     })
 
diff --git a/ui/app/components/send_/send-header/tests/send-header-selectors.test.js b/ui/app/components/send_/send-header/tests/send-header-selectors.test.js
new file mode 100644
index 000000000..e0c6a3ab3
--- /dev/null
+++ b/ui/app/components/send_/send-header/tests/send-header-selectors.test.js
@@ -0,0 +1,47 @@
+import assert from 'assert'
+import proxyquire from 'proxyquire'
+
+const {
+  getTitleKey,
+  getSubtitleParams,
+} = proxyquire('../send-header.selectors', {
+  '../send.selectors': {
+    getSelectedToken: (mockState) => mockState.t,
+    getSendEditingTransactionId: (mockState) => mockState.e,
+  },
+})
+
+describe('send-header selectors', () => {
+
+  describe('getTitleKey()', () => {
+    it('should return the correct key when getSendEditingTransactionId is truthy', () => {
+      assert.equal(getTitleKey({ e: 1, t: true }), 'edit')
+    })
+
+    it('should return the correct key when getSendEditingTransactionId is falsy and getSelectedToken is truthy', () => {
+      assert.equal(getTitleKey({ e: null, t: 'abc' }), 'sendTokens')
+    })
+
+    it('should return the correct key when getSendEditingTransactionId is falsy and getSelectedToken is falsy', () => {
+      assert.equal(getTitleKey({ e: null }), 'sendETH')
+    })
+  })
+
+  describe('getSubtitleParams()', () => {
+    it('should return the correct params when getSendEditingTransactionId is truthy', () => {
+      assert.deepEqual(getSubtitleParams({ e: 1, t: true }), [ 'editingTransaction' ])
+    })
+
+    it('should return the correct params when getSendEditingTransactionId is falsy and getSelectedToken is truthy', () => {
+      assert.deepEqual(
+        getSubtitleParams({ e: null, t: { symbol: 'ABC' } }),
+        [ 'onlySendTokensToAccountAddress', [ 'ABC' ] ]
+      )
+    })
+
+    it('should return the correct params when getSendEditingTransactionId is falsy and getSelectedToken is falsy', () => {
+      assert.deepEqual(getSubtitleParams({ e: null }), [ 'onlySendToEtherAddress' ])
+    })
+  })
+
+})
diff --git a/ui/app/components/send_/send.component.js b/ui/app/components/send_/send.component.js
index 49731ff6a..8b0a41f9e 100644
--- a/ui/app/components/send_/send.component.js
+++ b/ui/app/components/send_/send.component.js
@@ -82,7 +82,7 @@ export default class SendTransactionScreen extends PersistentForm {
     } = prevProps
 
     const uninitialized = [prevBalance, prevGasTotal].every(n => n === null)
-    console.log(`@#@# uninitialized`, uninitialized);
+
     if (!uninitialized) {
       const amountErrorRequiresUpdate = doesAmountErrorRequireUpdate({
         balance,
@@ -121,7 +121,7 @@ export default class SendTransactionScreen extends PersistentForm {
 
   componentWillMount () {
     const {
-      from: { address, balance },
+      from: { address },
       selectedToken,
       tokenContract,
       updateSendTokenBalance,