Add buttons; handle back; add yarn.lock

package.json

@@ -58,6 +58,7 @@
     "boron": "^0.2.3",
     "browser-passworder": "^2.0.3",
     "browserify-derequire": "^0.9.4",
+    "classnames": "^2.2.5",
     "client-sw-ready-event": "^3.3.0",
     "clone": "^2.1.1",
     "copy-to-clipboard": "^3.0.8",

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,6 +209,7 @@ SendTokenScreen.prototype.render = function () {
   } = this.props
 
   return h('div.send-token', [
+    h('div.send-token__content', [
       h(Identicon, {
         diameter: 75,
         address: selectedTokenAddress,
@@ -209,5 +225,7 @@ SendTokenScreen.prototype.render = function () {
       this.renderAmountInput(),
       this.renderGasInput(),
       this.renderMemoInput(),
+    ]),
+    this.renderButtons(),
   ])
 }

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
 }

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' ])]
 }
 

ui/app/css/itcss/components/buttons.scss

@@ -82,3 +82,21 @@ button.btn-thin {
   padding: 6px;
   font-size: 13px;
 }
+
+.btn-secondary {
+  border: 1px solid #979797;
+  border-radius: 2px;
+  background-color: $white;
+  font-size: 16px;
+  line-height: 24px;
+  padding: 16px 42px;
+}
+
+.btn-tertiary {
+  border: 1px solid transparent;
+  border-radius: 2px;
+  background-color: transparent;
+  font-size: 16px;
+  line-height: 24px;
+  padding: 16px 42px;
+}

ui/app/css/itcss/components/send.scss

@@ -80,12 +80,16 @@
   justify-content: space-between;
 }
 
-.selected-currency {
+.currency-toggle {
+  &__item {
     color: $curious-blue;
-}
-
-.unselected-currency {
     cursor: pointer;
+
+    &--selected {
+      color: $black;
+      cursor: default;
+    }
+  }
 }
 
 .send-screen-gas-input-customize {
@@ -115,7 +119,7 @@
   padding: 13px 19px;
   font-size: 16px;
   border-radius: 4px;
-  font-family: 'Lato';
+  font-family: "Lato";
   font-weight: 500;
 }
 
@@ -205,18 +209,23 @@
 }
 
 .send-token {
+  display: flex;
+  flex-flow: column nowrap;
+  z-index: 25;
+  font-family: "Montserrat Light";
+
+  &__content {
     width: 498px;
     height: 605px;
     background-color: #fff;
-  display: flex;
-  flex-flow: column nowrap;
     box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .08);
     padding: 46px 40.5px 26px;
     position: relative;
     top: -26px;
-  z-index: 25;
     align-items: center;
-  font-family: "Montserrat Light";
+    display: flex;
+    flex-flow: column nowrap;
+  }
 
   .identicon {
     position: absolute;
@@ -244,6 +253,16 @@
     margin-top: 13px;
   }
 
+  &__button-group {
+    display: flex;
+    flex-flow: column nowrap;
+    align-items: center;
+
+    button {
+      width: 163px;
+    }
+  }
+
   .send-screen-input-wrapper {
     .fa-bolt {
       padding-right: 4px;

ui/app/css/itcss/generic/reset.scss

@@ -141,6 +141,7 @@ table {
 
 button {
   border-style: none;
+  cursor: pointer;
 }
 
 /* stylelint-enable */

ui/app/send.js

@@ -674,7 +674,7 @@ SendTransactionScreen.prototype.onSubmit = function () {
 
     // New: gas will now be specified on this step
     gas: this.state.newTx.gas,
-    gasPrice: this.state.newTx.gasPrice
+    gasPrice: this.state.newTx.gasPrice,
   }
 
   if (recipient) txParams.to = addHexPrefix(recipient)