From 1485ec7392a03a9b3a63262e0ecf0d90f0713251 Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 29 Aug 2017 11:25:11 -0230 Subject: Move currency toggle to its own component. --- ui/app/components/send/currency-toggle.js | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) create mode 100644 ui/app/components/send/currency-toggle.js (limited to 'ui/app/components/send/currency-toggle.js') diff --git a/ui/app/components/send/currency-toggle.js b/ui/app/components/send/currency-toggle.js new file mode 100644 index 000000000..37c026542 --- /dev/null +++ b/ui/app/components/send/currency-toggle.js @@ -0,0 +1,26 @@ +const Component = require('react').Component +const h = require('react-hyperscript') +const inherits = require('util').inherits +module.exports = CurrencyToggle + +inherits(CurrencyToggle, Component) +function CurrencyToggle () { + Component.call(this) +} + +CurrencyToggle.prototype.render = function () { + const { onClick, currentCurrency } = this.props + + return h('span', {}, [ + h('span', { + className: currentCurrency === 'ETH' ? 'selected-currency' : 'unselected-currency', + onClick: () => onClick('ETH') + }, ['ETH']), + '<>', + h('span', { + className: currentCurrency === 'USD' ? 'selected-currency' : 'unselected-currency', + onClick: () => onClick('USD'), + }, ['USD']), + ]) //holding on icon from design +} + -- cgit From e7b3ef0708290a81dad5c469adaa6fab3f1c45b5 Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 29 Aug 2017 12:20:48 -0230 Subject: Lint fixes --- ui/app/components/send/currency-toggle.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'ui/app/components/send/currency-toggle.js') diff --git a/ui/app/components/send/currency-toggle.js b/ui/app/components/send/currency-toggle.js index 37c026542..d3c2222a4 100644 --- a/ui/app/components/send/currency-toggle.js +++ b/ui/app/components/send/currency-toggle.js @@ -14,13 +14,13 @@ CurrencyToggle.prototype.render = function () { return h('span', {}, [ h('span', { className: currentCurrency === 'ETH' ? 'selected-currency' : 'unselected-currency', - onClick: () => onClick('ETH') + onClick: () => onClick('ETH'), }, ['ETH']), '<>', h('span', { className: currentCurrency === 'USD' ? 'selected-currency' : 'unselected-currency', - onClick: () => onClick('USD'), + onClick: () => onClick('USD'), }, ['USD']), - ]) //holding on icon from design + ]) // holding on icon from design } -- cgit From 062e67bff83fd79647231be6e2448d35b5f312f9 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Mon, 11 Sep 2017 22:14:09 -0700 Subject: Add buttons; handle back; add yarn.lock --- ui/app/components/send/currency-toggle.js | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) (limited to 'ui/app/components/send/currency-toggle.js') diff --git a/ui/app/components/send/currency-toggle.js b/ui/app/components/send/currency-toggle.js index d3c2222a4..adaade301 100644 --- a/ui/app/components/send/currency-toggle.js +++ b/ui/app/components/send/currency-toggle.js @@ -1,6 +1,8 @@ const Component = require('react').Component const h = require('react-hyperscript') const inherits = require('util').inherits +const classnames = require('classnames') + module.exports = CurrencyToggle inherits(CurrencyToggle, Component) @@ -8,18 +10,25 @@ function CurrencyToggle () { Component.call(this) } +const defaultCurrencies = [ 'ETH', 'USD' ] + CurrencyToggle.prototype.render = function () { const { onClick, currentCurrency } = this.props + const [currencyA, currencyB] = this.props.currencies || defaultCurrencies - return h('span', {}, [ + return h('span.currency-toggle', {}, [ h('span', { - className: currentCurrency === 'ETH' ? 'selected-currency' : 'unselected-currency', - onClick: () => onClick('ETH'), + className: classnames('currency-toggle__item', { + 'currency-toggle__item--selected': currencyA === currentCurrency, + }), + onClick: () => onClick(currencyA), }, ['ETH']), '<>', h('span', { - className: currentCurrency === 'USD' ? 'selected-currency' : 'unselected-currency', - onClick: () => onClick('USD'), + className: classnames('currency-toggle__item', { + 'currency-toggle__item--selected': currencyB === currentCurrency, + }), + onClick: () => onClick(currencyB), }, ['USD']), ]) // holding on icon from design } -- cgit From 836bf2e1a38bb6917f1b7fe9db0604c8143c7adf Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Mon, 11 Sep 2017 23:18:54 -0700 Subject: Add frontend validation to send-token --- ui/app/components/send/currency-toggle.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'ui/app/components/send/currency-toggle.js') diff --git a/ui/app/components/send/currency-toggle.js b/ui/app/components/send/currency-toggle.js index adaade301..2b59ace4a 100644 --- a/ui/app/components/send/currency-toggle.js +++ b/ui/app/components/send/currency-toggle.js @@ -22,14 +22,14 @@ CurrencyToggle.prototype.render = function () { 'currency-toggle__item--selected': currencyA === currentCurrency, }), onClick: () => onClick(currencyA), - }, ['ETH']), + }, [ currencyA ]), '<>', h('span', { className: classnames('currency-toggle__item', { 'currency-toggle__item--selected': currencyB === currentCurrency, }), onClick: () => onClick(currencyB), - }, ['USD']), + }, [ currencyB ]), ]) // holding on icon from design } -- cgit From 8f31b05ac5b7d8383c720b8b0c9f7f3cecc937f5 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Wed, 13 Sep 2017 01:25:39 -0700 Subject: Add token exchange rates --- ui/app/components/send/currency-toggle.js | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) (limited to 'ui/app/components/send/currency-toggle.js') diff --git a/ui/app/components/send/currency-toggle.js b/ui/app/components/send/currency-toggle.js index 2b59ace4a..d777f0aea 100644 --- a/ui/app/components/send/currency-toggle.js +++ b/ui/app/components/send/currency-toggle.js @@ -12,11 +12,11 @@ function CurrencyToggle () { const defaultCurrencies = [ 'ETH', 'USD' ] -CurrencyToggle.prototype.render = function () { +CurrencyToggle.prototype.renderToggles = function () { const { onClick, currentCurrency } = this.props const [currencyA, currencyB] = this.props.currencies || defaultCurrencies - return h('span.currency-toggle', {}, [ + return [ h('span', { className: classnames('currency-toggle__item', { 'currency-toggle__item--selected': currencyA === currentCurrency, @@ -30,6 +30,15 @@ CurrencyToggle.prototype.render = function () { }), onClick: () => onClick(currencyB), }, [ currencyB ]), - ]) // holding on icon from design + ] +} + +CurrencyToggle.prototype.render = function () { + const currencies = this.props.currencies || defaultCurrencies + + return h('span.currency-toggle', currencies.length + ? this.renderToggles() + : [] + ) } -- cgit From ca46bd200b24456d692cf1ede47506be5fdcc76d Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 13 Sep 2017 15:27:15 -0230 Subject: Stop setting 'currentCurrency' and use local state for active currency in send.js --- ui/app/components/send/currency-toggle.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'ui/app/components/send/currency-toggle.js') diff --git a/ui/app/components/send/currency-toggle.js b/ui/app/components/send/currency-toggle.js index d777f0aea..7aaccd490 100644 --- a/ui/app/components/send/currency-toggle.js +++ b/ui/app/components/send/currency-toggle.js @@ -13,20 +13,20 @@ function CurrencyToggle () { const defaultCurrencies = [ 'ETH', 'USD' ] CurrencyToggle.prototype.renderToggles = function () { - const { onClick, currentCurrency } = this.props + const { onClick, activeCurrency } = this.props const [currencyA, currencyB] = this.props.currencies || defaultCurrencies return [ h('span', { className: classnames('currency-toggle__item', { - 'currency-toggle__item--selected': currencyA === currentCurrency, + 'currency-toggle__item--selected': currencyA === activeCurrency, }), onClick: () => onClick(currencyA), }, [ currencyA ]), '<>', h('span', { className: classnames('currency-toggle__item', { - 'currency-toggle__item--selected': currencyB === currentCurrency, + 'currency-toggle__item--selected': currencyB === activeCurrency, }), onClick: () => onClick(currencyB), }, [ currencyB ]), -- cgit