Add buttons; handle back; add yarn.lock

3 files changed, 51 insertions, 26 deletions

diff --git a/ui/app/components/send-token/index.js b/ui/app/components/send-token/index.js
index a49e559dc..985116409 100644
--- a/ui/app/components/send-token/index.js
+++ b/ui/app/components/send-token/index.js
@@ -23,16 +23,16 @@ function mapStateToProps (state) {
   const addressBook = state.metamask.addressBook
   const conversionRate = state.metamask.conversionRate
   const currentBlockGasLimit = state.metamask.currentBlockGasLimit
-  // const accounts = state.metamask.accounts
+  const accounts = state.metamask.accounts
   // const network = state.metamask.network
   const selectedTokenAddress = state.metamask.selectedTokenAddress
-  // const selectedAddress = state.metamask.selectedAddress || Object.keys(accounts)[0]
+  const selectedAddress = state.metamask.selectedAddress || Object.keys(accounts)[0]
   // const checksumAddress = selectedAddress && ethUtil.toChecksumAddress(selectedAddress)
   // const identity = identities[selectedAddress]
 
   return {
     // sidebarOpen,
-    // selectedAddress,
+    selectedAddress,
     // checksumAddress,
     selectedTokenAddress,
     identities,
@@ -48,6 +48,7 @@ function mapStateToProps (state) {
 
 function mapDispatchToProps (dispatch) {
   return {
+    backToAccountDetail: address => dispatch(actions.backToAccountDetail(address)),
     // showSidebar: () => { dispatch(actions.showSidebar()) },
     // hideSidebar: () => { dispatch(actions.hideSidebar()) },
     // showModal: (payload) => { dispatch(actions.showModal(payload)) },
@@ -121,6 +122,7 @@ SendTokenScreen.prototype.renderAmountInput = function () {
       h('span', ['Amount']),
       h(CurrencyToggle, {
         selectedCurrency,
+        currencies: [ symbol, 'USD' ],
         onClick: currency => this.setState({ selectedCurrency: currency }),
       }),
     ]),
@@ -178,7 +180,7 @@ SendTokenScreen.prototype.renderGasInput = function () {
 }
 
 SendTokenScreen.prototype.renderMemoInput = function () {
-  return h('div.send-screen-input-wrapper', {}, [
+  return h('div.send-screen-input-wrapper', [
     h('div', {}, ['Transaction memo (optional)']),
     h(
       'input.large-input.send-screen-input',
@@ -187,6 +189,19 @@ SendTokenScreen.prototype.renderMemoInput = function () {
   ])
 }
 
+SendTokenScreen.prototype.renderButtons = function () {
+  const { selectedAddress, backToAccountDetail } = this.props
+
+  return h('div.send-token__button-group', [
+    h('button.send-token__button-next.btn-secondary', {
+
+    }, ['Next']),
+    h('button.send-token__button-cancel.btn-tertiary', {
+      onClick: () => backToAccountDetail(selectedAddress),
+    }, ['Cancel']),
+  ])
+}
+
 SendTokenScreen.prototype.render = function () {
   const {
     selectedTokenAddress,
@@ -194,20 +209,23 @@ SendTokenScreen.prototype.render = function () {
   } = this.props
 
   return h('div.send-token', [
-    h(Identicon, {
-      diameter: 75,
-      address: selectedTokenAddress,
-    }),
-    h('div.send-token__title', ['Send Tokens']),
-    h('div.send-token__description', ['Send Tokens to anyone with an Ethereum account']),
-    h('div.send-token__balance-text', ['Your Token Balance is:']),
-    h('div.send-token__token-balance', [
-      h(TokenBalance, { token: selectedToken, balanceOnly: true }),
+    h('div.send-token__content', [
+      h(Identicon, {
+        diameter: 75,
+        address: selectedTokenAddress,
+      }),
+      h('div.send-token__title', ['Send Tokens']),
+      h('div.send-token__description', ['Send Tokens to anyone with an Ethereum account']),
+      h('div.send-token__balance-text', ['Your Token Balance is:']),
+      h('div.send-token__token-balance', [
+        h(TokenBalance, { token: selectedToken, balanceOnly: true }),
+      ]),
+      h('div.send-token__token-symbol', [selectedToken.symbol]),
+      this.renderToAddressInput(),
+      this.renderAmountInput(),
+      this.renderGasInput(),
+      this.renderMemoInput(),
     ]),
-    h('div.send-token__token-symbol', [selectedToken.symbol]),
-    this.renderToAddressInput(),
-    this.renderAmountInput(),
-    this.renderGasInput(),
-    this.renderMemoInput(),
+    this.renderButtons(),
   ])
 }
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
 }
diff --git a/ui/app/components/tx-list.js b/ui/app/components/tx-list.js
index 26782900c..a7d11203d 100644
--- a/ui/app/components/tx-list.js
+++ b/ui/app/components/tx-list.js
@@ -49,9 +49,7 @@ TxList.prototype.renderTranstions = function () {
   const { txsToRender } = this.props
 
   return txsToRender.length
-    ? txsToRender.map((transaction) => {
-      return this.renderTransactionListItem(transaction)
-    })
+    ? txsToRender.map((transaction) => this.renderTransactionListItem(transaction))
     : [h('div.tx-list-item.tx-list-item--empty', [ 'No Transactions' ])]
 }