diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index f5b4af299..6f696eab7 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -73,6 +73,14 @@ .send-screen-bolt-icon {} +.selected-currency { + color: $curious-blue; +} + +.unselected-currency { + cursor: pointer; +} + .send-screen-gas-input-customize { position: absolute; top: 30px; diff --git a/ui/app/send.js b/ui/app/send.js index 2e7f38cd9..34c6df9f7 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -177,7 +177,17 @@ SendTransactionScreen.prototype.render = function () { h('div.send-screen-amount-labels', {}, [ h('span', {}, ['Amount']), - h('span', {}, ['ETH <> USD']), //holding on icon from design + h('span', {}, [ + h('span', { + className: currentCurrency === 'ETH' ? 'selected-currency' : 'unselected-currency', + onClick: this.setCurrentCurrency.bind(this, 'ETH') + }, ['ETH']), + '<>', + h('span', { + className: currentCurrency === 'USD' ? 'selected-currency' : 'unselected-currency', + onClick: this.setCurrentCurrency.bind(this, 'USD'), + }, ['USD']), + ]), //holding on icon from design ]), h('input.large-input.send-screen-input', { @@ -537,6 +547,10 @@ SendTransactionScreen.prototype.setTooltipOpen = function (isOpen) { this.setState({ tooltipIsOpen: isOpen }) } +SendTransactionScreen.prototype.setCurrentCurrency = function (newCurrency) { + this.props.dispatch(actions.setCurrentCurrency(newCurrency)) +} + SendTransactionScreen.prototype.navigateToAccounts = function (event) { event.stopPropagation() this.props.dispatch(actions.showAccountsPage())