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 ( 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(, { 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,