Merge branch 'NewUI-flat' into merge

64 files changed, 6200 insertions, 721 deletions

diff --git a/ui/app/components/account-menu/index.js b/ui/app/components/account-menu/index.js
new file mode 100644
index 000000000..2ebdba24a
--- /dev/null
+++ b/ui/app/components/account-menu/index.js
@@ -0,0 +1,154 @@
+const inherits = require('util').inherits
+const Component = require('react').Component
+const connect = require('react-redux').connect
+const h = require('react-hyperscript')
+const actions = require('../../actions')
+const { Menu, Item, Divider, CloseArea } = require('../dropdowns/components/menu')
+const Identicon = require('../identicon')
+const { formatBalance } = require('../../util')
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountMenu)
+
+inherits(AccountMenu, Component)
+function AccountMenu () { Component.call(this) }
+
+function mapStateToProps (state) {
+  return {
+    selectedAddress: state.metamask.selectedAddress,
+    isAccountMenuOpen: state.metamask.isAccountMenuOpen,
+    keyrings: state.metamask.keyrings,
+    identities: state.metamask.identities,
+    accounts: state.metamask.accounts,
+
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    toggleAccountMenu: () => dispatch(actions.toggleAccountMenu()),
+    showAccountDetail: address => {
+      dispatch(actions.showAccountDetail(address))
+      dispatch(actions.toggleAccountMenu())
+    },
+    lockMetamask: () => {
+      dispatch(actions.lockMetamask())
+      dispatch(actions.toggleAccountMenu())
+    },
+    showConfigPage: () => {
+      console.log('hihihih')
+      dispatch(actions.showConfigPage())
+      dispatch(actions.toggleAccountMenu())
+    },
+    showNewAccountModal: () => {
+      dispatch(actions.showModal({ name: 'NEW_ACCOUNT' }))
+      dispatch(actions.toggleAccountMenu())
+    },
+    showImportPage: () => {
+      dispatch(actions.showImportPage())
+      dispatch(actions.toggleAccountMenu())
+    },
+  }
+}
+
+AccountMenu.prototype.render = function () {
+  const {
+    isAccountMenuOpen,
+    toggleAccountMenu,
+    showNewAccountModal,
+    showImportPage,
+    lockMetamask,
+    showConfigPage,
+  } = this.props
+
+  console.log(showConfigPage)
+  return h(Menu, { className: 'account-menu', isShowing: isAccountMenuOpen }, [
+    h(CloseArea, { onClick: toggleAccountMenu }),
+    h(Item, {
+      className: 'account-menu__header',
+      onClick: lockMetamask,
+    }, [
+      'My Accounts',
+      h('button.account-menu__logout-button', 'Log out'),
+    ]),
+    h(Divider),
+    h('div.account-menu__accounts', this.renderAccounts()),
+    h(Divider),
+    h(Item, {
+      onClick: showNewAccountModal,
+      icon: h('img', { src: 'images/plus-btn-white.svg' }),
+      text: 'Create Account',
+    }),
+    h(Item, {
+      onClick: showImportPage,
+      icon: h('img', { src: 'images/import-account.svg' }),
+      text: 'Import Account',
+    }),
+    h(Divider),
+    h(Item, {
+      icon: h('img', { src: 'images/mm-info-icon.svg' }),
+      text: 'Info & Help',
+    }),
+    h(Item, {
+      onClick: showConfigPage,
+      icon: h('img', { src: 'images/settings.svg' }),
+      text: 'Settings',
+    }),
+  ])
+}
+
+AccountMenu.prototype.renderAccounts = function () {
+  const {
+    identities,
+    accounts,
+    selected,
+    keyrings,
+    showAccountDetail,
+  } = this.props
+
+  return Object.keys(identities).map((key, index) => {
+    const identity = identities[key]
+    const isSelected = identity.address === selected
+
+    const balanceValue = accounts[key].balance
+    const formattedBalance = balanceValue ? formatBalance(balanceValue, 6) : '...'
+    const simpleAddress = identity.address.substring(2).toLowerCase()
+
+    const keyring = keyrings.find((kr) => {
+      return kr.accounts.includes(simpleAddress) ||
+        kr.accounts.includes(identity.address)
+    })
+
+    return h(
+      'div.account-menu__account.menu__item--clickable',
+      { onClick: () => showAccountDetail(identity.address) },
+      [
+        h('div.account-menu__check-mark', [
+          isSelected ? h('i.fa.fa-check') : null,
+        ]),
+
+        h(
+          Identicon,
+          {
+            address: identity.address,
+            diameter: 24,
+          },
+        ),
+
+        h('div.account-menu__account-info', [
+          h('div.account-menu__name', identity.name || ''),
+          h('div.account-menu__balance', formattedBalance),
+        ]),
+
+        this.indicateIfLoose(keyring),
+      ],
+    )
+  })
+}
+
+AccountMenu.prototype.indicateIfLoose = function (keyring) {
+  try { // Sometimes keyrings aren't loaded yet:
+    const type = keyring.type
+    const isLoose = type !== 'HD Key Tree'
+    return isLoose ? h('.keyring-label', 'LOOSE') : null
+  } catch (e) { return }
+}
diff --git a/ui/app/components/balance-component.js b/ui/app/components/balance-component.js
new file mode 100644
index 000000000..d14aa675f
--- /dev/null
+++ b/ui/app/components/balance-component.js
@@ -0,0 +1,120 @@
+const Component = require('react').Component
+const connect = require('react-redux').connect
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const TokenBalance = require('./token-balance')
+const Identicon = require('./identicon')
+
+const { formatBalance, generateBalanceObject } = require('../util')
+
+module.exports = connect(mapStateToProps)(BalanceComponent)
+
+function mapStateToProps (state) {
+  const accounts = state.metamask.accounts
+  const network = state.metamask.network
+  const selectedAddress = state.metamask.selectedAddress || Object.keys(accounts)[0]
+  const account = accounts[selectedAddress]
+
+  return {
+    account,
+    network,
+    conversionRate: state.metamask.conversionRate,
+    currentCurrency: state.metamask.currentCurrency,
+  }
+}
+
+inherits(BalanceComponent, Component)
+function BalanceComponent () {
+  Component.call(this)
+}
+
+BalanceComponent.prototype.render = function () {
+  const props = this.props
+  const { token, network } = props
+
+  return h('div.balance-container', {}, [
+
+    // TODO: balance icon needs to be passed in
+    // h('img.balance-icon', {
+    //   src: '../images/eth_logo.svg',
+    //   style: {},
+    // }),
+    h(Identicon, {
+      diameter: 45,
+      address: token && token.address,
+      network,
+    }),
+
+    token ? this.renderTokenBalance() : this.renderBalance(),
+  ])
+}
+
+BalanceComponent.prototype.renderTokenBalance = function () {
+  const { token } = this.props
+
+  return h('div.flex-column.balance-display', [
+    h('div.token-amount', [ h(TokenBalance, { token }) ]),
+  ])
+}
+
+BalanceComponent.prototype.renderBalance = function () {
+  const props = this.props
+  const { shorten, account } = props
+  const balanceValue = account && account.balance
+  const needsParse = 'needsParse' in props ? props.needsParse : true
+  const formattedBalance = balanceValue ? formatBalance(balanceValue, 6, needsParse) : '...'
+  const showFiat = 'showFiat' in props ? props.showFiat : true
+
+  if (formattedBalance === 'None' || formattedBalance === '...') {
+    return h('div.flex-column.balance-display', {}, [
+      h('div.token-amount', {
+        style: {},
+      }, formattedBalance),
+    ])
+  }
+
+  return h('div.flex-column.balance-display', {}, [
+    h('div.token-amount', {
+      style: {},
+    }, this.getTokenBalance(formattedBalance, shorten)),
+
+    showFiat ? this.renderFiatValue(formattedBalance) : null,
+  ])
+}
+
+BalanceComponent.prototype.renderFiatValue = function (formattedBalance) {
+
+  const { conversionRate, currentCurrency } = this.props
+
+  const fiatDisplayNumber = this.getFiatDisplayNumber(formattedBalance, conversionRate)
+
+  const fiatPrefix = currentCurrency === 'USD' ? '$' : ''
+
+  return this.renderFiatAmount(fiatDisplayNumber, currentCurrency, fiatPrefix)
+}
+
+BalanceComponent.prototype.renderFiatAmount = function (fiatDisplayNumber, fiatSuffix, fiatPrefix) {
+  if (fiatDisplayNumber === 'N/A') return null
+
+  return h('div.fiat-amount', {
+    style: {},
+  }, `${fiatPrefix}${fiatDisplayNumber} ${fiatSuffix}`)
+}
+
+BalanceComponent.prototype.getTokenBalance = function (formattedBalance, shorten) {
+  const balanceObj = generateBalanceObject(formattedBalance, shorten ? 1 : 3)
+
+  const balanceValue = shorten ? balanceObj.shortBalance : balanceObj.balance
+  const label = balanceObj.label
+
+  return `${balanceValue} ${label}`
+}
+
+BalanceComponent.prototype.getFiatDisplayNumber = function (formattedBalance, conversionRate) {
+  if (formattedBalance === 'None') return formattedBalance
+  if (conversionRate === 0) return 'N/A'
+
+  const splitBalance = formattedBalance.split(' ')
+
+  return (Number(splitBalance[0]) * conversionRate).toFixed(2)
+}
diff --git a/ui/app/components/buy-button-subview.js b/ui/app/components/buy-button-subview.js
index 15281171c..6cf6e9eb9 100644
--- a/ui/app/components/buy-button-subview.js
+++ b/ui/app/components/buy-button-subview.js
@@ -245,7 +245,7 @@ BuyButtonSubview.prototype.navigateTo = function (url) {
 
 BuyButtonSubview.prototype.backButtonContext = function () {
   if (this.props.context === 'confTx') {
-    this.props.dispatch(actions.showConfTxPage(false))
+    this.props.dispatch(actions.showConfTxPage({transForward: false}))
   } else {
     this.props.dispatch(actions.goHome())
   }
diff --git a/ui/app/components/customize-gas-modal/gas-modal-card.js b/ui/app/components/customize-gas-modal/gas-modal-card.js
new file mode 100644
index 000000000..8e739ee40
--- /dev/null
+++ b/ui/app/components/customize-gas-modal/gas-modal-card.js
@@ -0,0 +1,55 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const InputNumber = require('../input-number.js')
+const GasSlider = require('./gas-slider.js')
+
+module.exports = GasModalCard
+
+inherits(GasModalCard, Component)
+function GasModalCard () {
+  Component.call(this)
+}
+
+GasModalCard.prototype.render = function () {
+  const {
+    memo,
+    identities,
+    onChange,
+    unitLabel,
+    value,
+    min,
+    max,
+    step,
+    title,
+    copy
+  } = this.props
+
+  return h('div.send-v2__gas-modal-card', [
+
+    h('div.send-v2__gas-modal-card__title', {}, title),
+
+    h('div.send-v2__gas-modal-card__copy', {}, copy),
+
+    h(InputNumber, {
+      unitLabel,
+      step,
+      max,
+      min,
+      placeholder: '0',
+      value,
+      onChange,
+    }),
+
+    h(GasSlider, {
+      value,
+      step,
+      max,
+      min,
+      onChange,
+    }),
+    
+  ])
+    
+}
+
diff --git a/ui/app/components/customize-gas-modal/gas-slider.js b/ui/app/components/customize-gas-modal/gas-slider.js
new file mode 100644
index 000000000..e76e96545
--- /dev/null
+++ b/ui/app/components/customize-gas-modal/gas-slider.js
@@ -0,0 +1,50 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+
+module.exports = GasSlider
+
+inherits(GasSlider, Component)
+function GasSlider () {
+  Component.call(this)
+}
+
+GasSlider.prototype.render = function () {
+  const {
+    memo,
+    identities,
+    onChange,
+    unitLabel,
+    value,
+    id,
+    step,
+    max,
+    min,
+  } = this.props
+
+  return h('div.gas-slider', [
+
+    h('input.gas-slider__input', {
+      type: 'range',
+      step,
+      max,
+      min,
+      value,
+      id: 'gasSlider',
+      onChange: event => onChange(event.target.value),
+    }, []),
+
+    h('div.gas-slider__bar', [
+
+      h('div.gas-slider__low'),
+
+      h('div.gas-slider__mid'),
+
+      h('div.gas-slider__high'),
+
+    ]),
+    
+  ])
+    
+}
+
diff --git a/ui/app/components/customize-gas-modal/index.js b/ui/app/components/customize-gas-modal/index.js
new file mode 100644
index 000000000..0ba768893
--- /dev/null
+++ b/ui/app/components/customize-gas-modal/index.js
@@ -0,0 +1,158 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const connect = require('react-redux').connect
+const actions = require('../../actions')
+const GasModalCard = require('./gas-modal-card')
+
+const { conversionUtil, multiplyCurrencies } = require('../../conversion-util')
+
+const {
+  getGasPrice,
+  getGasLimit,
+  conversionRateSelector,
+} = require('../../selectors')
+
+function mapStateToProps (state) {
+  return {
+    gasPrice: getGasPrice(state),
+    gasLimit: getGasLimit(state),
+    conversionRate: conversionRateSelector(state),
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    hideModal: () => dispatch(actions.hideModal()),
+    updateGasPrice: newGasPrice => dispatch(actions.updateGasPrice(newGasPrice)),
+    updateGasLimit: newGasLimit => dispatch(actions.updateGasLimit(newGasLimit)),
+    updateGasTotal: newGasTotal => dispatch(actions.updateGasTotal(newGasTotal)),
+  }
+}
+
+inherits(CustomizeGasModal, Component)
+function CustomizeGasModal (props) {
+  Component.call(this)
+
+  this.state = {
+    gasPrice: props.gasPrice,
+    gasLimit: props.gasLimit,
+  }
+}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(CustomizeGasModal)
+
+CustomizeGasModal.prototype.save = function (gasPrice, gasLimit) {
+  const {
+    updateGasPrice,
+    updateGasLimit,
+    hideModal,
+    updateGasTotal
+  } = this.props
+
+  const newGasTotal = multiplyCurrencies(gasLimit, gasPrice, {
+    toNumericBase: 'hex',
+    multiplicandBase: 16,
+    multiplierBase: 16,
+  })
+
+  updateGasPrice(gasPrice)
+  updateGasLimit(gasLimit)
+  updateGasTotal(newGasTotal)
+  hideModal()
+}
+
+CustomizeGasModal.prototype.convertAndSetGasLimit = function (newGasLimit) {
+  const convertedGasLimit = conversionUtil(newGasLimit, {
+    fromNumericBase: 'dec',
+    toNumericBase: 'hex',
+  })
+
+  this.setState({ gasLimit: convertedGasLimit })
+}
+
+CustomizeGasModal.prototype.convertAndSetGasPrice = function (newGasPrice) {
+  const convertedGasPrice = conversionUtil(newGasPrice, {
+    fromNumericBase: 'dec',
+    toNumericBase: 'hex',
+    fromDenomination: 'GWEI',
+    toDenomination: 'WEI',
+  })
+
+  this.setState({ gasPrice: convertedGasPrice })
+}
+
+CustomizeGasModal.prototype.render = function () {
+  const { hideModal, conversionRate } = this.props
+  const { gasPrice, gasLimit } = this.state
+
+  const convertedGasPrice = conversionUtil(gasPrice, {
+    fromNumericBase: 'hex',
+    toNumericBase: 'dec',
+    fromDenomination: 'WEI',
+    toDenomination: 'GWEI',
+  })
+
+  const convertedGasLimit = conversionUtil(gasLimit, {
+    fromNumericBase: 'hex',
+    toNumericBase: 'dec',
+  })
+
+  return h('div.send-v2__customize-gas', {}, [
+    h('div', {
+    }, [
+      h('div.send-v2__customize-gas__header', {}, [
+
+        h('div.send-v2__customize-gas__title', 'Customize Gas'),
+
+        h('div.send-v2__customize-gas__close', {
+          onClick: hideModal,
+        }),
+
+      ]),
+
+      h('div.send-v2__customize-gas__body', {}, [
+        
+        h(GasModalCard, {
+          value: convertedGasPrice,
+          min: 0,
+          max: 1000,
+          step: 1,
+          onChange: value => this.convertAndSetGasPrice(value),
+          title: 'Gas Price',
+          copy: 'We calculate the suggested gas prices based on network success rates.',
+        }),
+
+        h(GasModalCard, {
+          value: convertedGasLimit,
+          min: 20000,
+          max: 100000,
+          step: 1,
+          onChange: value => this.convertAndSetGasLimit(value),
+          title: 'Gas Limit',
+          copy: 'We calculate the suggested gas limit based on network success rates.',
+        }),
+
+      ]),
+
+      h('div.send-v2__customize-gas__footer', {}, [
+        
+        h('div.send-v2__customize-gas__revert', {
+          onClick: () => console.log('Revert'),
+        }, ['Revert']),
+
+        h('div.send-v2__customize-gas__buttons', [
+          h('div.send-v2__customize-gas__cancel', {
+            onClick: this.props.hideModal,
+          }, ['CANCEL']),
+
+          h('div.send-v2__customize-gas__save', {
+            onClick: () => this.save(gasPrice, gasLimit),
+          }, ['SAVE']),
+        ])
+
+      ]),
+
+    ]),
+  ])
+}
diff --git a/ui/app/components/dropdowns/account-options-dropdown.js b/ui/app/components/dropdowns/account-options-dropdown.js
new file mode 100644
index 000000000..50e793d87
--- /dev/null
+++ b/ui/app/components/dropdowns/account-options-dropdown.js
@@ -0,0 +1,29 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const AccountDropdowns = require('./components/account-dropdowns')
+
+inherits(AccountOptionsDropdown, Component)
+function AccountOptionsDropdown () {
+  Component.call(this)
+}
+
+module.exports = AccountOptionsDropdown
+
+// TODO: specify default props and proptypes
+// TODO: hook up to state, connect to redux to clean up API
+// TODO: selectedAddress is not defined... should we use selected?
+AccountOptionsDropdown.prototype.render = function () {
+  const { selected, network, identities, style, dropdownWrapperStyle, menuItemStyles } = this.props
+
+  return h(AccountDropdowns, {
+    enableAccountOptions: true,
+    enableAccountsSelector: false,
+    selected: selectedAddress,
+    network,
+    identities,
+    style: style || {},
+    dropdownWrapperStyle: dropdownWrapperStyle || {},
+    menuItemStyles: menuItemStyles || {},
+  }, [])
+}
diff --git a/ui/app/components/dropdowns/account-selection-dropdown.js b/ui/app/components/dropdowns/account-selection-dropdown.js
new file mode 100644
index 000000000..7a8502d18
--- /dev/null
+++ b/ui/app/components/dropdowns/account-selection-dropdown.js
@@ -0,0 +1,29 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const AccountDropdowns = require('./components/account-dropdowns')
+
+inherits(AccountSelectionDropdown, Component)
+function AccountSelectionDropdown () {
+  Component.call(this)
+}
+
+module.exports = AccountSelectionDropdown
+
+// TODO: specify default props and proptypes
+// TODO: hook up to state, connect to redux to clean up API
+// TODO: selectedAddress is not defined... should we use selected?
+AccountSelectionDropdown.prototype.render = function () {
+  const { selected, network, identities, style, dropdownWrapperStyle, menuItemStyles } = this.props
+
+  return h(AccountDropdowns, {
+    enableAccountOptions: false,
+    enableAccountsSelector: true,
+    selected: selectedAddress,
+    network,
+    identities,
+    style: style || {},
+    dropdownWrapperStyle: dropdownWrapperStyle || {},
+    menuItemStyles: menuItemStyles || {},
+  }, [])
+}
diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js
new file mode 100644
index 000000000..e2eed1e4b
--- /dev/null
+++ b/ui/app/components/dropdowns/components/account-dropdowns.js
@@ -0,0 +1,469 @@
+const Component = require('react').Component
+const PropTypes = require('react').PropTypes
+const h = require('react-hyperscript')
+const actions = require('../../../actions')
+const genAccountLink = require('../../../../lib/account-link.js')
+const connect = require('react-redux').connect
+const Dropdown = require('./dropdown').Dropdown
+const DropdownMenuItem = require('./dropdown').DropdownMenuItem
+const Identicon = require('../../identicon')
+const ethUtil = require('ethereumjs-util')
+const copyToClipboard = require('copy-to-clipboard')
+const { formatBalance } = require('../../../util')
+
+class AccountDropdowns extends Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      accountSelectorActive: false,
+      optionsMenuActive: false,
+    }
+    // Used for orangeaccount selector icon
+    // this.accountSelectorToggleClassName = 'accounts-selector'
+    this.accountSelectorToggleClassName = 'fa-angle-down'
+    this.optionsMenuToggleClassName = 'fa-ellipsis-h'
+  }
+
+  renderAccounts () {
+    const { identities, accounts, selected, menuItemStyles, actions, keyrings } = this.props
+
+    return Object.keys(identities).map((key, index) => {
+      const identity = identities[key]
+      const isSelected = identity.address === selected
+
+      const balanceValue = accounts[key].balance
+      const formattedBalance = balanceValue ? formatBalance(balanceValue, 6) : '...'
+      const simpleAddress = identity.address.substring(2).toLowerCase()
+
+      const keyring = keyrings.find((kr) => {
+        return kr.accounts.includes(simpleAddress) ||
+          kr.accounts.includes(identity.address)
+      })
+
+      return h(
+        DropdownMenuItem,
+        {
+          closeMenu: () => {},
+          onClick: () => {
+            this.props.actions.showAccountDetail(identity.address)
+          },
+          style: Object.assign(
+            {
+              marginTop: index === 0 ? '5px' : '',
+              fontSize: '24px',
+              width: '260px',
+            },
+            menuItemStyles,
+          ),
+        },
+        [
+          h('div.flex-row.flex-center', {}, [
+
+            h('span', {
+              style: {
+                flex: '1 1 0',
+                minWidth: '20px',
+                minHeight: '30px',
+              },
+            }, [
+              h('span', {
+                style: {
+                  flex: '1 1 auto',
+                  fontSize: '14px',
+                },
+              }, isSelected ? h('i.fa.fa-check') : null),
+            ]),
+
+            h(
+              Identicon,
+              {
+                address: identity.address,
+                diameter: 24,
+                style: {
+                  flex: '1 1 auto',
+                  marginLeft: '10px',
+                },
+              },
+            ),
+
+            h('span.flex-column', {
+              style: {
+                flex: '10 10 auto',
+                width: '175px',
+                alignItems: 'flex-start',
+                justifyContent: 'center',
+                marginLeft: '10px',
+                position: 'relative',
+              },
+            }, [
+              this.indicateIfLoose(keyring),
+              h('span.account-dropdown-name', {
+                style: {
+                  fontSize: '18px',
+                  maxWidth: '145px',
+                  whiteSpace: 'nowrap',
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                },
+              }, identity.name || ''),
+
+              h('span.account-dropdown-balance', {
+                style: {
+                  fontSize: '14px',
+                  fontFamily: 'Avenir',
+                  fontWeight: 500,
+                },
+              }, formattedBalance),
+            ]),
+
+            h('span', {
+              style: {
+                flex: '3 3 auto',
+              },
+            }, [
+              h('span.account-dropdown-edit-button', {
+                style: {
+                  fontSize: '16px',
+                },
+                onClick: () => {
+                  actions.showEditAccountModal(identity)
+                },
+              }, [
+                'Edit',
+              ]),
+            ]),
+
+          ]),
+// =======
+//             },
+//           ),
+//           this.indicateIfLoose(keyring),
+//           h('span', {
+//             style: {
+//               marginLeft: '20px',
+//               fontSize: '24px',
+//               maxWidth: '145px',
+//               whiteSpace: 'nowrap',
+//               overflow: 'hidden',
+//               textOverflow: 'ellipsis',
+//             },
+//           }, identity.name || ''),
+//           h('span', { style: { marginLeft: '20px', fontSize: '24px' } }, isSelected ? h('.check', '✓') : null),
+// >>>>>>> master:ui/app/components/account-dropdowns.js
+        ]
+      )
+    })
+  }
+
+  indicateIfLoose (keyring) {
+    try { // Sometimes keyrings aren't loaded yet:
+      const type = keyring.type
+      const isLoose = type !== 'HD Key Tree'
+      return isLoose ? h('.keyring-label', 'LOOSE') : null
+    } catch (e) { return }
+  }
+
+  renderAccountSelector () {
+    const { actions, useCssTransition, innerStyle, sidebarOpen } = this.props
+    const { accountSelectorActive, menuItemStyles } = this.state
+
+    return h(
+      Dropdown,
+      {
+        useCssTransition,
+        style: {
+          marginLeft: '-185px',
+          marginTop: '50px',
+          minWidth: '180px',
+          overflowY: 'auto',
+          maxHeight: '300px',
+          width: '300px',
+        },
+        innerStyle,
+        isOpen: accountSelectorActive,
+        onClickOutside: (event) => {
+          const { classList } = event.target
+          const isNotToggleElement = !classList.contains(this.accountSelectorToggleClassName)
+          if (accountSelectorActive && isNotToggleElement) {
+            this.setState({ accountSelectorActive: false })
+          }
+        },
+      },
+      [
+        ...this.renderAccounts(),
+        h(
+          DropdownMenuItem,
+          {
+            closeMenu: () => {},
+            style: Object.assign(
+              {},
+              menuItemStyles,
+            ),
+            onClick: () => actions.showNewAccountModal(),
+          },
+          [
+            h(
+              'i.fa.fa-plus.fa-lg',
+              {
+                style: {
+                  marginLeft: '8px',
+                },
+              }
+            ),
+            h('span', {
+              style: {
+                marginLeft: '14px',
+                fontFamily: 'DIN OT',
+                fontSize: '16px',
+                lineHeight: '23px',
+              },
+            }, 'Create Account'),
+          ],
+        ),
+        h(
+          DropdownMenuItem,
+          {
+            closeMenu: () => {
+              if (sidebarOpen) {
+                actions.hideSidebar()
+              }
+            },
+            onClick: () => actions.showImportPage(),
+            style: Object.assign(
+              {},
+              menuItemStyles,
+            ),
+          },
+          [
+            h(
+              'i.fa.fa-download.fa-lg',
+              {
+                style: {
+                  marginLeft: '8px',
+                },
+              }
+            ),
+            h('span', {
+              style: {
+                marginLeft: '20px',
+                marginBottom: '5px',
+                fontFamily: 'DIN OT',
+                fontSize: '16px',
+                lineHeight: '23px',
+              },
+            }, 'Import Account'),
+          ]
+        ),
+      ]
+    )
+  }
+
+  renderAccountOptions () {
+    const { actions, dropdownWrapperStyle, useCssTransition } = this.props
+    const { optionsMenuActive, menuItemStyles } = this.state
+    const dropdownMenuItemStyle = {
+      fontFamily: 'DIN OT',
+      fontSize: 16,
+      lineHeight: '24px',
+      padding: '8px',
+    }
+
+    return h(
+      Dropdown,
+      {
+        useCssTransition,
+        style: Object.assign(
+          {
+            marginLeft: '-10px',
+            position: 'absolute',
+            width: '29vh', // affects both mobile and laptop views
+          },
+          dropdownWrapperStyle,
+        ),
+        isOpen: optionsMenuActive,
+        onClickOutside: () => {
+          const { classList } = event.target
+          const isNotToggleElement = !classList.contains(this.optionsMenuToggleClassName)
+          if (optionsMenuActive && isNotToggleElement) {
+            this.setState({ optionsMenuActive: false })
+          }
+        },
+      },
+      [
+        h(
+          DropdownMenuItem,
+          {
+            closeMenu: () => {},
+            onClick: () => {
+              this.props.actions.showAccountDetailModal()
+            },
+            style: Object.assign(
+              dropdownMenuItemStyle,
+              menuItemStyles,
+            ),
+          },
+          'Account Details',
+        ),
+        h(
+          DropdownMenuItem,
+          {
+            closeMenu: () => {},
+            onClick: () => {
+              const { selected, network } = this.props
+              const url = genAccountLink(selected, network)
+              global.platform.openWindow({ url })
+            },
+            style: Object.assign(
+              dropdownMenuItemStyle,
+              menuItemStyles,
+            ),
+          },
+          'View account on Etherscan',
+        ),
+        h(
+          DropdownMenuItem,
+          {
+            closeMenu: () => {},
+            onClick: () => {
+              const { selected } = this.props
+              const checkSumAddress = selected && ethUtil.toChecksumAddress(selected)
+              copyToClipboard(checkSumAddress)
+            },
+            style: Object.assign(
+              dropdownMenuItemStyle,
+              menuItemStyles,
+            ),
+          },
+          'Copy Address to clipboard',
+        ),
+        h(
+          DropdownMenuItem,
+          {
+            closeMenu: () => {},
+            onClick: () => this.props.actions.showExportPrivateKeyModal(),
+            style: Object.assign(
+              dropdownMenuItemStyle,
+              menuItemStyles,
+            ),
+          },
+          'Export Private Key',
+        ),
+        h(
+          DropdownMenuItem,
+          {
+            closeMenu: () => {},
+            onClick: () => {
+              actions.hideSidebar()
+              actions.showAddTokenPage()
+            },
+            style: Object.assign(
+              dropdownMenuItemStyle,
+              menuItemStyles,
+            ),
+          },
+          'Add Token',
+        ),
+
+      ]
+    )
+  }
+
+  render () {
+    const { style, enableAccountsSelector, enableAccountOptions } = this.props
+    const { optionsMenuActive, accountSelectorActive } = this.state
+
+    return h(
+      'span',
+      {
+        style: style,
+      },
+      [
+        enableAccountsSelector && h(
+          'i.fa.fa-angle-down',
+          {
+            style: {
+              cursor: 'pointer',
+            },
+            onClick: (event) => {
+              event.stopPropagation()
+              this.setState({
+                accountSelectorActive: !accountSelectorActive,
+                optionsMenuActive: false,
+              })
+            },
+          },
+          this.renderAccountSelector(),
+        ),
+        enableAccountOptions && h(
+          'i.fa.fa-ellipsis-h',
+          {
+            style: {
+              fontSize: '135%',
+              cursor: 'pointer',
+            },
+            onClick: (event) => {
+              event.stopPropagation()
+              this.setState({
+                accountSelectorActive: false,
+                optionsMenuActive: !optionsMenuActive,
+              })
+            },
+          },
+          this.renderAccountOptions()
+        ),
+      ]
+    )
+  }
+}
+
+AccountDropdowns.defaultProps = {
+  enableAccountsSelector: false,
+  enableAccountOptions: false,
+}
+
+AccountDropdowns.propTypes = {
+  identities: PropTypes.objectOf(PropTypes.object),
+  selected: PropTypes.string,
+  keyrings: PropTypes.array,
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    actions: {
+      hideSidebar: () => dispatch(actions.hideSidebar()),
+      showConfigPage: () => dispatch(actions.showConfigPage()),
+      showAccountDetail: (address) => dispatch(actions.showAccountDetail(address)),
+      showAccountDetailModal: () => {
+        dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' }))
+      },
+      showEditAccountModal: (identity) => {
+        dispatch(actions.showModal({
+          name: 'EDIT_ACCOUNT_NAME',
+          identity,
+        }))
+      },
+      showNewAccountModal: () => {
+        dispatch(actions.showModal({ name: 'NEW_ACCOUNT' }))
+      },
+      showExportPrivateKeyModal: () => {
+        dispatch(actions.showModal({ name: 'EXPORT_PRIVATE_KEY' }))
+      },
+      showAddTokenPage: () => {
+        dispatch(actions.showAddTokenPage())
+      },
+      addNewAccount: () => dispatch(actions.addNewAccount()),
+      showImportPage: () => dispatch(actions.showImportPage()),
+      showQrView: (selected, identity) => dispatch(actions.showQrView(selected, identity)),
+    },
+  }
+}
+
+function mapStateToProps (state) {
+  return {
+    keyrings: state.metamask.keyrings,
+    sidebarOpen: state.appState.sidebarOpen,
+  }
+}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountDropdowns)
+
diff --git a/ui/app/components/dropdown.js b/ui/app/components/dropdowns/components/dropdown.js
index 73710acc2..991c89cb8 100644
--- a/ui/app/components/dropdown.js
+++ b/ui/app/components/dropdowns/components/dropdown.js
@@ -1,14 +1,22 @@
 const Component = require('react').Component
 const PropTypes = require('react').PropTypes
 const h = require('react-hyperscript')
-const MenuDroppo = require('./menu-droppo')
+const MenuDroppo = require('../../menu-droppo')
 const extend = require('xtend')
 
 const noop = () => {}
 
 class Dropdown extends Component {
   render () {
-    const { isOpen, onClickOutside, style, innerStyle, children, useCssTransition } = this.props
+    const {
+      containerClassName,
+      isOpen,
+      onClickOutside,
+      style,
+      innerStyle,
+      children,
+      useCssTransition,
+    } = this.props
 
     const innerStyleDefaults = extend({
       borderRadius: '4px',
@@ -20,9 +28,10 @@ class Dropdown extends Component {
     return h(
       MenuDroppo,
       {
+        containerClassName,
         useCssTransition,
         isOpen,
-        zIndex: 11,
+        zIndex: 30,
         onClickOutside,
         style,
         innerStyle: innerStyleDefaults,
@@ -31,8 +40,12 @@ class Dropdown extends Component {
         h(
           'style',
           `
-          li.dropdown-menu-item:hover { color:rgb(225, 225, 225); }
-          li.dropdown-menu-item { color: rgb(185, 185, 185); position: relative }
+          li.dropdown-menu-item:hover {
+            color:rgb(225, 225, 225);
+            background-color: rgba(255, 255, 255, 0.05);
+            border-radius: 4px;
+          }
+          li.dropdown-menu-item { color: rgb(185, 185, 185); }
           `
         ),
         ...children,
@@ -67,7 +80,7 @@ class DropdownMenuItem extends Component {
         },
         style: Object.assign({
           listStyle: 'none',
-          padding: '8px 0px 8px 0px',
+          padding: '8px 0px',
           fontSize: '18px',
           fontStyle: 'normal',
           fontFamily: 'Montserrat Regular',
@@ -75,6 +88,7 @@ class DropdownMenuItem extends Component {
           display: 'flex',
           justifyContent: 'flex-start',
           alignItems: 'center',
+          color: 'white',
         }, style),
       },
       children
diff --git a/ui/app/components/dropdowns/components/menu.js b/ui/app/components/dropdowns/components/menu.js
new file mode 100644
index 000000000..f6d8a139e
--- /dev/null
+++ b/ui/app/components/dropdowns/components/menu.js
@@ -0,0 +1,51 @@
+const inherits = require('util').inherits
+const Component = require('react').Component
+const h = require('react-hyperscript')
+
+inherits(Menu, Component)
+function Menu () { Component.call(this) }
+
+Menu.prototype.render = function () {
+  const { className = '', children, isShowing } = this.props
+  return isShowing
+    ? h('div', { className: `menu ${className}` }, children)
+    : h('noscript')
+}
+
+inherits(Item, Component)
+function Item () { Component.call(this) }
+
+Item.prototype.render = function () {
+  const {
+    icon,
+    children,
+    text,
+    className = '',
+    onClick,
+  } = this.props
+  const itemClassName = `menu__item ${className} ${onClick ? 'menu__item--clickable' : ''}`
+  const iconComponent = icon ? h('div.menu__item__icon', [icon]) : null
+  const textComponent = text ? h('div.menu__item__text', text) : null
+
+  return children
+    ? h('div', { className: itemClassName, onClick }, children)
+    : h('div.menu__item', { className: itemClassName, onClick }, [ iconComponent, textComponent ]
+      .filter(d => Boolean(d))
+    )
+}
+
+inherits(Divider, Component)
+function Divider () { Component.call(this) }
+
+Divider.prototype.render = function () {
+  return h('div.menu__divider')
+}
+
+inherits(CloseArea, Component)
+function CloseArea () { Component.call(this) }
+
+CloseArea.prototype.render = function () {
+  return h('div.menu__close-area', { onClick: this.props.onClick })
+}
+
+module.exports = { Menu, Item, Divider, CloseArea }
diff --git a/ui/app/components/dropdowns/components/network-dropdown-icon.js b/ui/app/components/dropdowns/components/network-dropdown-icon.js
new file mode 100644
index 000000000..7e94e0af5
--- /dev/null
+++ b/ui/app/components/dropdowns/components/network-dropdown-icon.js
@@ -0,0 +1,28 @@
+const inherits = require('util').inherits
+const Component = require('react').Component
+const h = require('react-hyperscript')
+
+
+inherits(NetworkDropdownIcon, Component)
+module.exports = NetworkDropdownIcon
+
+function NetworkDropdownIcon () {
+  Component.call(this)
+}
+
+NetworkDropdownIcon.prototype.render = function () {
+  const {
+    backgroundColor,
+    isSelected,
+    innerBorder = 'none',
+  } = this.props
+
+  return h(`.menu-icon-circle${isSelected ? '--active' : ''}`, {},
+    h('div', {
+      style: {
+        background: backgroundColor,
+        border: innerBorder,
+      },
+    })
+  )
+}
diff --git a/ui/app/components/dropdowns/index.js b/ui/app/components/dropdowns/index.js
new file mode 100644
index 000000000..fa66f5000
--- /dev/null
+++ b/ui/app/components/dropdowns/index.js
@@ -0,0 +1,17 @@
+// Reusable Dropdown Components
+// TODO: Refactor into separate components
+const Dropdown = require('./components/dropdown').Dropdown
+const AccountDropdowns = require('./components/account-dropdowns')
+
+// App-Specific Instances
+const AccountSelectionDropdown = require('./account-selection-dropdown')
+const AccountOptionsDropdown = require('./account-options-dropdown')
+const NetworkDropdown = require('./network-dropdown').default
+
+module.exports = {
+  AccountSelectionDropdown,
+  AccountOptionsDropdown,
+  NetworkDropdown,
+  Dropdown,
+  AccountDropdowns,
+}
diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js
new file mode 100644
index 000000000..736019c39
--- /dev/null
+++ b/ui/app/components/dropdowns/network-dropdown.js
@@ -0,0 +1,316 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const connect = require('react-redux').connect
+const actions = require('../../actions')
+const Dropdown = require('./components/dropdown').Dropdown
+const DropdownMenuItem = require('./components/dropdown').DropdownMenuItem
+const NetworkDropdownIcon = require('./components/network-dropdown-icon')
+
+function mapStateToProps (state) {
+  return {
+    provider: state.metamask.provider,
+    frequentRpcList: state.metamask.frequentRpcList || [],
+    networkDropdownOpen: state.appState.networkDropdownOpen,
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    hideModal: () => {
+      dispatch(actions.hideModal())
+    },
+    setProviderType: (type) => {
+      dispatch(actions.setProviderType(type))
+    },
+    setDefaultRpcTarget: type => {
+      dispatch(actions.setDefaultRpcTarget(type))
+    },
+    setRpcTarget: (target) => {
+      dispatch(actions.setRpcTarget(target))
+    },
+    showConfigPage: () => {
+      dispatch(actions.showConfigPage())
+    },
+    showNetworkDropdown: () => { dispatch(actions.showNetworkDropdown()) },
+    hideNetworkDropdown: () => { dispatch(actions.hideNetworkDropdown()) },
+  }
+}
+
+
+inherits(NetworkDropdown, Component)
+function NetworkDropdown () {
+  Component.call(this)
+}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(NetworkDropdown)
+
+// TODO: specify default props and proptypes
+NetworkDropdown.prototype.render = function () {
+  const props = this.props
+  const { provider: { type: providerType, rpcTarget: activeNetwork } } = props
+  const rpcList = props.frequentRpcList
+  const isOpen = this.props.networkDropdownOpen
+  const dropdownMenuItemStyle = {
+    fontFamily: 'DIN OT',
+    fontSize: '16px',
+    lineHeight: '20px',
+    padding: '12px 0',
+  }
+
+  return h(Dropdown, {
+    useCssTransition: true,
+    isOpen,
+    onClickOutside: (event) => {
+      const { classList } = event.target
+      const isNotToggleElement = [
+        classList.contains('menu-icon'),
+        classList.contains('network-name'),
+        classList.contains('network-indicator'),
+      ].filter(bool => bool).length === 0
+      // classes from three constituent nodes of the toggle element
+
+      if (isNotToggleElement) {
+        this.props.hideNetworkDropdown()
+      }
+    },
+    containerClassName: 'network-droppo',
+    zIndex: 11,
+    style: {
+      position: 'absolute',
+      top: '38px',
+      minWidth: '309px',
+    },
+    innerStyle: {
+      padding: '18px 8px',
+    },
+  }, [
+
+    h('div.network-dropdown-header', {}, [
+      h('div.network-dropdown-title', {}, 'Networks'),
+
+      h('div.network-dropdown-divider'),
+
+      h('div.network-dropdown-content',
+        {},
+        'The default network for Ether transactions is Main Net.'
+      ),
+    ]),
+
+    h(
+      DropdownMenuItem,
+      {
+        key: 'main',
+        closeMenu: () => this.props.hideNetworkDropdown(),
+        onClick: () => props.setProviderType('mainnet'),
+        style: { ...dropdownMenuItemStyle, borderColor: '#038789' },
+      },
+      [
+        providerType === 'mainnet' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
+        h(NetworkDropdownIcon, {
+          backgroundColor: '#038789', // $blue-lagoon
+          isSelected: providerType === 'mainnet',
+        }),
+        h('span.network-name-item', {
+          style: {
+            color: providerType === 'mainnet' ? '#ffffff' : '#9b9b9b',
+          },
+        }, 'Main Ethereum Network'),
+      ]
+    ),
+
+    h(
+      DropdownMenuItem,
+      {
+        key: 'ropsten',
+        closeMenu: () => this.props.hideNetworkDropdown(),
+        onClick: () => props.setProviderType('ropsten'),
+        style: dropdownMenuItemStyle,
+      },
+      [
+        providerType === 'ropsten' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
+        h(NetworkDropdownIcon, {
+          backgroundColor: '#e91550', // $crimson
+          isSelected: providerType === 'ropsten',
+        }),
+        h('span.network-name-item', {
+          style: {
+            color: providerType === 'ropsten' ? '#ffffff' : '#9b9b9b',
+          },
+        }, 'Ropsten Test Network'),
+      ]
+    ),
+
+    h(
+      DropdownMenuItem,
+      {
+        key: 'kovan',
+        closeMenu: () => this.props.hideNetworkDropdown(),
+        onClick: () => props.setProviderType('kovan'),
+        style: dropdownMenuItemStyle,
+      },
+      [
+        providerType === 'kovan' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
+        h(NetworkDropdownIcon, {
+          backgroundColor: '#690496', // $purple
+          isSelected: providerType === 'kovan',
+        }),
+        h('span.network-name-item', {
+          style: {
+            color: providerType === 'kovan' ? '#ffffff' : '#9b9b9b',
+          },
+        }, 'Kovan Test Network'),
+      ]
+    ),
+
+    h(
+      DropdownMenuItem,
+      {
+        key: 'rinkeby',
+        closeMenu: () => this.props.hideNetworkDropdown(),
+        onClick: () => props.setProviderType('rinkeby'),
+        style: dropdownMenuItemStyle,
+      },
+      [
+        providerType === 'rinkeby' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
+        h(NetworkDropdownIcon, {
+          backgroundColor: '#ebb33f', // $tulip-tree
+          isSelected: providerType === 'rinkeby',
+        }),
+        h('span.network-name-item', {
+          style: {
+            color: providerType === 'rinkeby' ? '#ffffff' : '#9b9b9b',
+          },
+        }, 'Rinkeby Test Network'),
+      ]
+    ),
+
+    h(
+      DropdownMenuItem,
+      {
+        key: 'default',
+        closeMenu: () => this.props.hideNetworkDropdown(),
+        onClick: () => props.setRpcTarget('http://localhost:8545'),
+        style: dropdownMenuItemStyle,
+      },
+      [
+        activeNetwork === 'http://localhost:8545' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
+        h(NetworkDropdownIcon, {
+          isSelected: activeNetwork === 'http://localhost:8545',
+          innerBorder: '1px solid #9b9b9b',
+        }),
+        h('span.network-name-item', {
+          style: {
+            color: activeNetwork === 'http://localhost:8545' ? '#ffffff' : '#9b9b9b',
+          },
+        }, 'Localhost 8545'),
+      ]
+    ),
+
+    this.renderCustomOption(props.provider),
+    this.renderCommonRpc(rpcList, props.provider),
+
+    h(
+      DropdownMenuItem,
+      {
+        closeMenu: () => this.props.hideNetworkDropdown(),
+        onClick: () => this.props.showConfigPage(),
+        style: dropdownMenuItemStyle,
+      },
+      [
+        activeNetwork === 'custom' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
+        h(NetworkDropdownIcon, {
+          isSelected: activeNetwork === 'custom',
+          innerBorder: '1px solid #9b9b9b',
+        }),
+        h('span.network-name-item', {
+          style: {
+            color: activeNetwork === 'custom' ? '#ffffff' : '#9b9b9b',
+          },
+        }, 'Custom RPC'),
+      ]
+    ),
+
+  ])
+}
+
+
+NetworkDropdown.prototype.getNetworkName = function () {
+  const { provider } = this.props
+  const providerName = provider.type
+
+  let name
+
+  if (providerName === 'mainnet') {
+    name = 'Main Ethereum Network'
+  } else if (providerName === 'ropsten') {
+    name = 'Ropsten Test Network'
+  } else if (providerName === 'kovan') {
+    name = 'Kovan Test Network'
+  } else if (providerName === 'rinkeby') {
+    name = 'Rinkeby Test Network'
+  } else {
+    name = 'Unknown Private Network'
+  }
+
+  return name
+}
+
+NetworkDropdown.prototype.renderCommonRpc = function (rpcList, provider) {
+  const props = this.props
+  const rpcTarget = provider.rpcTarget
+
+  return rpcList.map((rpc) => {
+    if ((rpc === 'http://localhost:8545') || (rpc === rpcTarget)) {
+      return null
+    } else {
+      return h(
+        DropdownMenuItem,
+        {
+          key: `common${rpc}`,
+          closeMenu: () => this.props.hideNetworkDropdown(),
+          onClick: () => props.setRpcTarget(rpc),
+        },
+        [
+          h('i.fa.fa-question-circle.fa-lg.menu-icon'),
+          rpc,
+          rpcTarget === rpc ? h('.check', '✓') : null,
+        ]
+      )
+    }
+  })
+}
+
+NetworkDropdown.prototype.renderCustomOption = function (provider) {
+  const { rpcTarget, type } = provider
+  const props = this.props
+
+  if (type !== 'rpc') return null
+
+  // Concatenate long URLs
+  let label = rpcTarget
+  if (rpcTarget.length > 31) {
+    label = label.substr(0, 34) + '...'
+  }
+
+  switch (rpcTarget) {
+
+    case 'http://localhost:8545':
+      return null
+
+    default:
+      return h(
+        DropdownMenuItem,
+        {
+          key: rpcTarget,
+          onClick: () => props.setRpcTarget(rpcTarget),
+          closeMenu: () => this.props.hideNetworkDropdown(),
+        },
+        [
+          h('i.fa.fa-question-circle.fa-lg.menu-icon'),
+          label,
+          h('.check', '✓'),
+        ]
+      )
+  }
+}
diff --git a/ui/app/components/dropdowns/token-menu-dropdown.js b/ui/app/components/dropdowns/token-menu-dropdown.js
new file mode 100644
index 000000000..7234a9b21
--- /dev/null
+++ b/ui/app/components/dropdowns/token-menu-dropdown.js
@@ -0,0 +1,51 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const connect = require('react-redux').connect
+const actions = require('../../actions')
+
+module.exports = connect(null, mapDispatchToProps)(TokenMenuDropdown)
+
+function mapDispatchToProps (dispatch) {
+  return {
+    showHideTokenConfirmationModal: (token) => {
+      dispatch(actions.showModal({ name: 'HIDE_TOKEN_CONFIRMATION', token }))
+    }
+  }
+}
+
+
+inherits(TokenMenuDropdown, Component)
+function TokenMenuDropdown () {
+  Component.call(this)
+
+  this.onClose = this.onClose.bind(this)
+}
+
+TokenMenuDropdown.prototype.onClose = function (e) {
+  e.stopPropagation()
+  this.props.onClose()
+}
+
+TokenMenuDropdown.prototype.render = function () {
+  const { showHideTokenConfirmationModal } = this.props
+
+  return h('div.token-menu-dropdown', {}, [
+    h('div.token-menu-dropdown__close-area', {
+      onClick: this.onClose,
+    }),
+    h('div.token-menu-dropdown__container', {}, [
+      h('div.token-menu-dropdown__options', {}, [
+        
+        h('div.token-menu-dropdown__option', {
+          onClick: (e) => {
+            e.stopPropagation()
+            showHideTokenConfirmationModal(this.props.token)
+            this.props.onClose()
+          },
+        }, 'Hide Token')
+
+      ]),
+    ]),
+  ])
+}
diff --git a/ui/app/components/ens-input.js b/ui/app/components/ens-input.js
index 3a33ebf74..fb8c8e579 100644
--- a/ui/app/components/ens-input.js
+++ b/ui/app/components/ens-input.js
@@ -44,7 +44,7 @@ EnsInput.prototype.render = function () {
   return h('div', {
     style: { width: '100%' },
   }, [
-    h('input.large-input', opts),
+    h('input.large-input.send-screen-input', opts),
     // The address book functionality.
     h('datalist#addresses',
       [
@@ -125,7 +125,7 @@ EnsInput.prototype.componentDidUpdate = function (prevProps, prevState) {
 
 EnsInput.prototype.ensIcon = function (recipient) {
   const { hoverText } = this.state || {}
-  return h('span', {
+  return h('span.#ensIcon', {
     title: hoverText,
     style: {
       position: 'absolute',
diff --git a/ui/app/components/eth-balance.js b/ui/app/components/eth-balance.js
index 4f538fd31..1be8c9731 100644
--- a/ui/app/components/eth-balance.js
+++ b/ui/app/components/eth-balance.js
@@ -1,8 +1,10 @@
-const Component = require('react').Component
+const { Component } = require('react')
 const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const formatBalance = require('../util').formatBalance
-const generateBalanceObject = require('../util').generateBalanceObject
+const { inherits } = require('util')
+const {
+  formatBalance,
+  generateBalanceObject,
+} = require('../util')
 const Tooltip = require('./tooltip.js')
 const FiatValue = require('./fiat-value.js')
 
@@ -14,11 +16,10 @@ function EthBalanceComponent () {
 }
 
 EthBalanceComponent.prototype.render = function () {
-  var props = this.props
-  let { value } = props
-  const { style, width } = props
-  var needsParse = this.props.needsParse !== undefined ? this.props.needsParse : true
-  value = value ? formatBalance(value, 6, needsParse) : '...'
+  const props = this.props
+  const { value, style, width, needsParse = true } = props
+
+  const formattedValue = value ? formatBalance(value, 6, needsParse) : '...'
 
   return (
 
@@ -30,60 +31,66 @@ EthBalanceComponent.prototype.render = function () {
           display: 'inline',
           width,
         },
-      }, this.renderBalance(value)),
+      }, this.renderBalance(formattedValue)),
     ])
 
   )
 }
 EthBalanceComponent.prototype.renderBalance = function (value) {
-  var props = this.props
-  const { conversionRate, shorten, incoming, currentCurrency } = props
   if (value === 'None') return value
   if (value === '...') return value
-  var balanceObj = generateBalanceObject(value, shorten ? 1 : 3)
-  var balance
-  var splitBalance = value.split(' ')
-  var ethNumber = splitBalance[0]
-  var ethSuffix = splitBalance[1]
-  const showFiat = 'showFiat' in props ? props.showFiat : true
 
-  if (shorten) {
-    balance = balanceObj.shortBalance
-  } else {
-    balance = balanceObj.balance
-  }
+  const {
+    conversionRate,
+    shorten,
+    incoming,
+    currentCurrency,
+    hideTooltip,
+    styleOveride,
+    showFiat = true,
+  } = this.props
+  const { fontSize, color, fontFamily, lineHeight } = styleOveride
 
-  var label = balanceObj.label
+  const { shortBalance, balance, label } = generateBalanceObject(value, shorten ? 1 : 3)
+  const balanceToRender = shorten ? shortBalance : balance
+
+  const [ethNumber, ethSuffix] = value.split(' ')
+  const containerProps = hideTooltip ? {} : {
+    position: 'bottom',
+    title: `${ethNumber} ${ethSuffix}`,
+  }
 
   return (
-    h(Tooltip, {
-      position: 'bottom',
-      title: `${ethNumber} ${ethSuffix}`,
-    }, h('div.flex-column', [
-      h('.flex-row', {
-        style: {
-          alignItems: 'flex-end',
-          lineHeight: '13px',
-          fontFamily: 'Montserrat Light',
-          textRendering: 'geometricPrecision',
-        },
-      }, [
-        h('div', {
-          style: {
-            width: '100%',
-            textAlign: 'right',
-          },
-        }, incoming ? `+${balance}` : balance),
-        h('div', {
+    h(hideTooltip ? 'div' : Tooltip,
+      containerProps,
+      h('div.flex-column', [
+        h('.flex-row', {
           style: {
-            color: ' #AEAEAE',
-            fontSize: '12px',
-            marginLeft: '5px',
+            alignItems: 'flex-end',
+            lineHeight: lineHeight || '13px',
+            fontFamily: fontFamily || 'Montserrat Light',
+            textRendering: 'geometricPrecision',
           },
-        }, label),
-      ]),
+        }, [
+          h('div', {
+            style: {
+              width: '100%',
+              textAlign: 'right',
+              fontSize: fontSize || 'inherit',
+              color: color || 'inherit',
+            },
+          }, incoming ? `+${balanceToRender}` : balanceToRender),
+          h('div', {
+            style: {
+              color: color || '#AEAEAE',
+              fontSize: fontSize || '12px',
+              marginLeft: '5px',
+            },
+          }, label),
+        ]),
 
-      showFiat ? h(FiatValue, { value: props.value, conversionRate, currentCurrency }) : null,
-    ]))
+        showFiat ? h(FiatValue, { value: this.props.value, conversionRate, currentCurrency }) : null,
+      ])
+    )
   )
 }
diff --git a/ui/app/components/fiat-value.js b/ui/app/components/fiat-value.js
index d69f41d11..56465fc9d 100644
--- a/ui/app/components/fiat-value.js
+++ b/ui/app/components/fiat-value.js
@@ -12,7 +12,7 @@ function FiatValue () {
 
 FiatValue.prototype.render = function () {
   const props = this.props
-  const { conversionRate, currentCurrency } = props
+  const { conversionRate, currentCurrency, style } = props
   const renderedCurrency = currentCurrency || ''
 
   const value = formatBalance(props.value, 6)
@@ -29,16 +29,18 @@ FiatValue.prototype.render = function () {
     fiatTooltipNumber = 'Unknown'
   }
 
-  return fiatDisplay(fiatDisplayNumber, renderedCurrency.toUpperCase())
+  return fiatDisplay(fiatDisplayNumber, renderedCurrency.toUpperCase(), style)
 }
 
-function fiatDisplay (fiatDisplayNumber, fiatSuffix) {
+function fiatDisplay (fiatDisplayNumber, fiatSuffix, styleOveride = {}) {
+  const { fontSize, color, fontFamily, lineHeight } = styleOveride
+
   if (fiatDisplayNumber !== 'N/A') {
     return h('.flex-row', {
       style: {
         alignItems: 'flex-end',
-        lineHeight: '13px',
-        fontFamily: 'Montserrat Light',
+        lineHeight: lineHeight || '13px',
+        fontFamily: fontFamily || 'Montserrat Light',
         textRendering: 'geometricPrecision',
       },
     }, [
@@ -46,15 +48,15 @@ function fiatDisplay (fiatDisplayNumber, fiatSuffix) {
         style: {
           width: '100%',
           textAlign: 'right',
-          fontSize: '12px',
-          color: '#333333',
+          fontSize: fontSize || '12px',
+          color: color || '#333333',
         },
       }, fiatDisplayNumber),
       h('div', {
         style: {
-          color: '#AEAEAE',
+          color: color || '#AEAEAE',
           marginLeft: '5px',
-          fontSize: '12px',
+          fontSize: fontSize || '12px',
         },
       }, fiatSuffix),
     ])
diff --git a/ui/app/components/identicon.js b/ui/app/components/identicon.js
index c754bc6ba..259fa4d73 100644
--- a/ui/app/components/identicon.js
+++ b/ui/app/components/identicon.js
@@ -18,21 +18,35 @@ function IdenticonComponent () {
 
 IdenticonComponent.prototype.render = function () {
   var props = this.props
+  const { className = '', address } = props
   var diameter = props.diameter || this.defaultDiameter
-  return (
-    h('div', {
-      key: 'identicon-' + this.props.address,
-      style: {
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        height: diameter,
-        width: diameter,
-        borderRadius: diameter / 2,
-        overflow: 'hidden',
-      },
-    })
-  )
+
+  return address
+    ? (
+      h('div', {
+        className: `${className} identicon`,
+        key: 'identicon-' + address,
+        style: {
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          height: diameter,
+          width: diameter,
+          borderRadius: diameter / 2,
+          overflow: 'hidden',
+        },
+      })
+    )
+    : (
+      h('img.balance-icon', {
+        src: '../images/eth_logo.svg',
+        style: {
+          height: diameter,
+          width: diameter,
+          borderRadius: diameter / 2,
+        },
+      })
+    )
 }
 
 IdenticonComponent.prototype.componentDidMount = function () {
diff --git a/ui/app/components/input-number.js b/ui/app/components/input-number.js
new file mode 100644
index 000000000..16347fd5e
--- /dev/null
+++ b/ui/app/components/input-number.js
@@ -0,0 +1,46 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const { addCurrencies } = require('../conversion-util')
+
+module.exports = InputNumber
+
+inherits(InputNumber, Component)
+function InputNumber () {
+  Component.call(this)
+
+  this.setValue = this.setValue.bind(this)
+}
+
+InputNumber.prototype.setValue = function (newValue) {
+  const { fixed, min = -1, max = Infinity, onChange } = this.props
+
+  newValue = Number(fixed ? newValue.toFixed(4) : newValue)
+
+  if (newValue >= min && newValue <= max) {
+    onChange(newValue)
+  }
+}
+
+InputNumber.prototype.render = function () {
+  const { unitLabel, step = 1, placeholder, value = 0 } = this.props
+
+  return h('div.customize-gas-input-wrapper', {}, [
+    h('input.customize-gas-input', {
+      placeholder,
+      type: 'number',
+      value: value,
+      onChange: (e) => this.setValue(e.target.value),
+    }),
+    h('span.gas-tooltip-input-detail', {}, [unitLabel]),
+    h('div.gas-tooltip-input-arrows', {}, [
+      h('i.fa.fa-angle-up', {
+        onClick: () => this.setValue(addCurrencies(value, step)),
+      }),
+      h('i.fa.fa-angle-down', {
+        style: { cursor: 'pointer' },
+        onClick: () => this.setValue(addCurrencies(value, step * -1)),
+      }),
+    ]),
+  ])
+}
diff --git a/ui/app/components/menu-droppo.js b/ui/app/components/menu-droppo.js
index 66ab18954..95b75f54c 100644
--- a/ui/app/components/menu-droppo.js
+++ b/ui/app/components/menu-droppo.js
@@ -13,21 +13,23 @@ function MenuDroppoComponent () {
 }
 
 MenuDroppoComponent.prototype.render = function () {
+  const { containerClassName = '' } = this.props
   const speed = this.props.speed || '300ms'
   const useCssTransition = this.props.useCssTransition
   const zIndex = ('zIndex' in this.props) ? this.props.zIndex : 0
 
   this.manageListeners()
 
-  let style = this.props.style || {}
+  const style = this.props.style || {}
   if (!('position' in style)) {
     style.position = 'fixed'
   }
   style.zIndex = zIndex
 
   return (
-    h('.menu-droppo-container', {
+    h('div', {
       style,
+      className: `.menu-droppo-container ${containerClassName}`,
     }, [
       h('style', `
         .menu-droppo-enter {
diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js
new file mode 100644
index 000000000..37a62e1c0
--- /dev/null
+++ b/ui/app/components/modals/account-details-modal.js
@@ -0,0 +1,70 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const connect = require('react-redux').connect
+const actions = require('../../actions')
+const AccountModalContainer = require('./account-modal-container')
+const { getSelectedIdentity, getSelectedAddress } = require('../../selectors')
+const genAccountLink = require('../../../lib/account-link.js')
+const QrView = require('../qr-code')
+
+function mapStateToProps (state) {
+  return {
+    network: state.metamask.network,
+    selectedIdentity: getSelectedIdentity(state),
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    // Is this supposed to be used somewhere?
+    showQrView: (selected, identity) => dispatch(actions.showQrView(selected, identity)),
+    showExportPrivateKeyModal: () => {
+      dispatch(actions.showModal({ name: 'EXPORT_PRIVATE_KEY' }))
+    },
+    hideModal: () => dispatch(actions.hideModal()),
+  }
+}
+
+inherits(AccountDetailsModal, Component)
+function AccountDetailsModal () {
+  Component.call(this)
+}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountDetailsModal)
+
+// Not yet pixel perfect todos:
+  // fonts of qr-header
+
+AccountDetailsModal.prototype.render = function () {
+  const {
+    selectedIdentity,
+    network,
+    showExportPrivateKeyModal,
+    hideModal,
+  } = this.props
+  const { name, address } = selectedIdentity
+
+  return h(AccountModalContainer, {}, [
+      h(QrView, {
+        Qr: {
+          message: name,
+          data: address,
+        },
+      }),
+
+      h('div.account-modal-divider'),
+
+      h('button.btn-clear', {
+        onClick: () => global.platform.openWindow({ url: genAccountLink(address, network) }),
+      }, [ 'View account on Etherscan' ]),
+
+      // Holding on redesign for Export Private Key functionality
+      h('button.btn-clear', {
+        onClick: () => {
+          showExportPrivateKeyModal()
+        },
+      }, [ 'Export private key' ]),
+      
+  ])
+}
diff --git a/ui/app/components/modals/account-modal-container.js b/ui/app/components/modals/account-modal-container.js
new file mode 100644
index 000000000..c548fb7b3
--- /dev/null
+++ b/ui/app/components/modals/account-modal-container.js
@@ -0,0 +1,74 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const connect = require('react-redux').connect
+const actions = require('../../actions')
+const { getSelectedIdentity } = require('../../selectors')
+const Identicon = require('../identicon')
+
+function mapStateToProps (state) {
+  return {
+    selectedIdentity: getSelectedIdentity(state),
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    hideModal: () => {
+      dispatch(actions.hideModal())
+    },
+  }
+}
+
+inherits(AccountModalContainer, Component)
+function AccountModalContainer () {
+  Component.call(this)
+}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountModalContainer)
+
+AccountModalContainer.prototype.render = function () {
+  const {
+    selectedIdentity,
+    showBackButton = false,
+    backButtonAction,
+  } = this.props
+  let { children } = this.props
+
+  if (children.constructor !== Array) {
+    children = [children]
+  }
+
+  return h('div', { style: { borderRadius: '4px' }}, [
+    h('div.account-modal-container', [
+
+      h('div', [
+
+        // Needs a border; requires changes to svg
+        h(Identicon, {
+          address: selectedIdentity.address,
+          diameter: 64,
+          style: {},
+        }),
+
+      ]),
+
+      showBackButton && h('div.account-modal-back', {
+        onClick: backButtonAction,
+      }, [
+
+        h('i.fa.fa-angle-left.fa-lg'),
+
+        h('span.account-modal-back__text', ' Back'),
+
+      ]),
+
+      h('div.account-modal-close', {
+        onClick: this.props.hideModal,
+      }),
+
+      ...children,
+
+    ]),
+  ])
+}
diff --git a/ui/app/components/modals/buy-options-modal.js b/ui/app/components/modals/buy-options-modal.js
new file mode 100644
index 000000000..f1a5aa9fd
--- /dev/null
+++ b/ui/app/components/modals/buy-options-modal.js
@@ -0,0 +1,87 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const connect = require('react-redux').connect
+const actions = require('../../actions')
+
+function mapStateToProps (state) {
+  return {
+    network: state.metamask.network,
+    address: state.metamask.selectedAddress,
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    toCoinbase: (address) => {
+      dispatch(actions.buyEth({ network: '1', address, amount: 0 }))
+    },
+    hideModal: () => {
+      dispatch(actions.hideModal())
+    },
+    showAccountDetailModal: () => {
+      dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' }))
+    },
+  }
+}
+
+inherits(BuyOptions, Component)
+function BuyOptions () {
+  Component.call(this)
+}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(BuyOptions)
+
+BuyOptions.prototype.render = function () {
+  return h('div', {}, [
+    h('div.buy-modal-content.transfers-subview', {
+    }, [
+      h('div.buy-modal-content-title-wrapper.flex-column.flex-center', {
+        style: {},
+      }, [
+        h('div.buy-modal-content-title', {
+          style: {},
+        }, 'Transfers'),
+        h('div', {}, 'How would you like to buy Ether?'),
+      ]),
+
+      h('div.buy-modal-content-options.flex-column.flex-center', {}, [
+
+        h('div.buy-modal-content-option', {
+          onClick: () => {
+            const { toCoinbase, address } = this.props
+            toCoinbase(address)
+          },
+        }, [
+          h('div.buy-modal-content-option-title', {}, 'Coinbase'),
+          h('div.buy-modal-content-option-subtitle', {}, 'Buy with Fiat'),
+        ]),
+
+        // h('div.buy-modal-content-option', {}, [
+        //   h('div.buy-modal-content-option-title', {}, 'Shapeshift'),
+        //   h('div.buy-modal-content-option-subtitle', {}, 'Trade any digital asset for any other'),
+        // ]),
+
+        h('div.buy-modal-content-option', {
+          onClick: () => this.goToAccountDetailsModal(),
+        }, [
+          h('div.buy-modal-content-option-title', {}, 'Direct Deposit'),
+          h('div.buy-modal-content-option-subtitle', {}, 'Deposit from another account'),
+        ]),
+
+      ]),
+
+      h('button', {
+        style: {
+          background: 'white',
+        },
+        onClick: () => { this.props.hideModal() },
+      }, h('div.buy-modal-content-footer#buy-modal-content-footer-text', {}, 'Cancel')),
+    ]),
+  ])
+}
+
+BuyOptions.prototype.goToAccountDetailsModal = function () {
+  this.props.hideModal()
+  this.props.showAccountDetailModal()
+}
diff --git a/ui/app/components/modals/edit-account-name-modal.js b/ui/app/components/modals/edit-account-name-modal.js
new file mode 100644
index 000000000..e2361140d
--- /dev/null
+++ b/ui/app/components/modals/edit-account-name-modal.js
@@ -0,0 +1,77 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const connect = require('react-redux').connect
+const actions = require('../../actions')
+const { getSelectedAccount } = require('../../selectors')
+
+function mapStateToProps (state) {
+  return {
+    selectedAccount: getSelectedAccount(state),
+    identity: state.appState.modal.modalState.identity,
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    hideModal: () => {
+      dispatch(actions.hideModal())
+    },
+    saveAccountLabel: (account, label) => {
+      dispatch(actions.saveAccountLabel(account, label))
+    },
+  }
+}
+
+inherits(EditAccountNameModal, Component)
+function EditAccountNameModal (props) {
+  Component.call(this)
+
+  this.state = {
+    inputText: props.identity.name,
+  }
+}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(EditAccountNameModal)
+
+EditAccountNameModal.prototype.render = function () {
+  const { hideModal, saveAccountLabel, identity } = this.props
+
+  return h('div', {}, [
+    h('div.flex-column.edit-account-name-modal-content', {
+    }, [
+
+      h('div.edit-account-name-modal-cancel', {
+        onClick: () => {
+          hideModal()
+        },
+      }, [
+        h('i.fa.fa-times'),
+      ]),
+
+      h('div.edit-account-name-modal-title', {
+      }, ['Edit Account Name']),
+
+      h('input.edit-account-name-modal-input', {
+        placeholder: identity.name,
+        onChange: (event) => {
+          this.setState({ inputText: event.target.value })
+        },
+        value: this.state.inputText,
+      }, []),
+
+      h('button.btn-clear.edit-account-name-modal-save-button', {
+        onClick: () => {
+          if (this.state.inputText.length !== 0) {
+            saveAccountLabel(identity.address, this.state.inputText)
+            hideModal()
+          }
+        },
+        disabled: this.state.inputText.length === 0,
+      }, [
+        'SAVE',
+      ]),
+
+    ]),
+  ])
+}
diff --git a/ui/app/components/modals/export-private-key-modal.js b/ui/app/components/modals/export-private-key-modal.js
new file mode 100644
index 000000000..302596eda
--- /dev/null
+++ b/ui/app/components/modals/export-private-key-modal.js
@@ -0,0 +1,139 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const connect = require('react-redux').connect
+const ethUtil = require('ethereumjs-util')
+const actions = require('../../actions')
+const AccountModalContainer = require('./account-modal-container')
+const { getSelectedIdentity } = require('../../selectors')
+const ReadOnlyInput = require('../readonly-input')
+const copyToClipboard = require('copy-to-clipboard')
+
+function mapStateToProps (state) {
+  return {
+    warning: state.appState.warning,
+    privateKey: state.appState.accountDetail.privateKey,
+    network: state.metamask.network,
+    selectedIdentity: getSelectedIdentity(state),
+    previousModalState: state.appState.modal.previousModalState.name,
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    exportAccount: (password, address) => dispatch(actions.exportAccount(password, address)),
+    showAccountDetailModal: () => dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' })),
+    hideModal: () => dispatch(actions.hideModal()),
+  }
+}
+
+inherits(ExportPrivateKeyModal, Component)
+function ExportPrivateKeyModal () {
+  Component.call(this)
+
+  this.state = {
+    password: '',
+    privateKey: null,
+  }
+}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(ExportPrivateKeyModal)
+
+ExportPrivateKeyModal.prototype.exportAccountAndGetPrivateKey = function (password, address) {
+  const { exportAccount } = this.props
+
+  exportAccount(password, address)
+    .then(privateKey => this.setState({ privateKey }))
+}
+
+ExportPrivateKeyModal.prototype.renderPasswordLabel = function (privateKey) {
+  return h('span.private-key-password-label', privateKey
+    ? 'This is your private key (click to copy)'
+    : 'Type Your Password'
+  )
+}
+
+ExportPrivateKeyModal.prototype.renderPasswordInput = function (privateKey) {
+  const plainKey = privateKey && ethUtil.stripHexPrefix(privateKey)
+
+  return privateKey
+    ? h(ReadOnlyInput, {
+        wrapperClass: 'private-key-password-display-wrapper',
+        inputClass: 'private-key-password-display-textarea',
+        textarea: true,
+        value: plainKey,
+        onClick: () => copyToClipboard(plainKey),
+      })
+    : h('input.private-key-password-input', {
+      type: 'password',
+      placeholder: 'Type password',
+      onChange: event => this.setState({ password: event.target.value }),
+    })
+}
+
+ExportPrivateKeyModal.prototype.renderButton = function (className, onClick, label) {
+  return h('button', {
+    className,
+    onClick,
+  }, label)
+}
+
+ExportPrivateKeyModal.prototype.renderButtons = function (privateKey, password, address, hideModal) {
+  return h('div.export-private-key-buttons', {}, [
+    !privateKey && this.renderButton('btn-clear btn-cancel', () => hideModal(), 'Cancel'),
+
+    (privateKey
+      ? this.renderButton('btn-clear', () => hideModal(), 'Done')
+      : this.renderButton('btn-clear', () => this.exportAccountAndGetPrivateKey(this.state.password, address), 'Download')
+    ),
+
+  ])
+}
+
+ExportPrivateKeyModal.prototype.render = function () {
+  const {
+    selectedIdentity,
+    network,
+    warning,
+    showAccountDetailModal,
+    hideModal,
+    previousModalState,
+  } = this.props
+  const { name, address } = selectedIdentity
+
+  const { privateKey } = this.state
+
+  return h(AccountModalContainer, {
+    showBackButton: previousModalState === 'ACCOUNT_DETAILS',
+    backButtonAction: () => showAccountDetailModal(),
+  }, [
+
+      h('span.account-name', name),
+
+      h(ReadOnlyInput, {
+        wrapperClass: 'ellip-address-wrapper',
+        inputClass: 'qr-ellip-address ellip-address',
+        value: address,
+      }),
+
+      h('div.account-modal-divider'),
+
+      h('span.modal-body-title', 'Download Private Keys'),
+
+      h('div.private-key-password', {}, [
+        this.renderPasswordLabel(privateKey),
+
+        this.renderPasswordInput(privateKey),
+
+        !warning ? null : h('span.private-key-password-error', warning),
+      ]),
+
+      h('div.private-key-password-warning', `Warning: Never disclose this key.
+        Anyone with your private keys can take steal any assets held in your
+        account.`
+      ),
+
+      this.renderButtons(privateKey, this.state.password, address, hideModal),
+
+  ])
+}
diff --git a/ui/app/components/modals/hide-token-confirmation-modal.js b/ui/app/components/modals/hide-token-confirmation-modal.js
new file mode 100644
index 000000000..fa3ad0b1e
--- /dev/null
+++ b/ui/app/components/modals/hide-token-confirmation-modal.js
@@ -0,0 +1,74 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const connect = require('react-redux').connect
+const actions = require('../../actions')
+const Identicon = require('../identicon')
+
+function mapStateToProps (state) {
+  return {
+    network: state.metamask.network,
+    token: state.appState.modal.modalState.token,
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    hideModal: () => dispatch(actions.hideModal()),
+    hideToken: address => {
+      dispatch(actions.removeToken(address))
+        .then(() => {
+          dispatch(actions.hideModal())
+        })
+    },
+  }
+}
+
+inherits(HideTokenConfirmationModal, Component)
+function HideTokenConfirmationModal () {
+  Component.call(this)
+
+  this.state = {}
+}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(HideTokenConfirmationModal)
+
+HideTokenConfirmationModal.prototype.render = function () {
+  const { token, network, hideToken, hideModal } = this.props
+  const { symbol, address } = token
+
+  return h('div.hide-token-confirmation', {}, [
+    h('div.hide-token-confirmation__container', {
+    }, [
+      h('div.hide-token-confirmation__title', {}, [
+        'Hide Token?',
+      ]),
+
+      h(Identicon, {
+        className: 'hide-token-confirmation__identicon',
+        diameter: 45,
+        address,
+        network,
+      }),
+
+      h('div.hide-token-confirmation__symbol', {}, symbol),
+
+      h('div.hide-token-confirmation__copy', {}, [
+        'You can add this token back in the future by going go to “Add token” in your accounts options menu.',
+      ]),
+
+      h('div.hide-token-confirmation__buttons', {}, [
+        h('button.btn-clear', {
+          onClick: () => hideModal(),
+        }, [
+          'CANCEL',
+        ]),
+        h('button.btn-clear', {
+          onClick: () => hideToken(address),
+        }, [
+          'HIDE',
+        ]),
+      ]),
+    ]),
+  ])
+}
diff --git a/ui/app/components/modals/index.js b/ui/app/components/modals/index.js
new file mode 100644
index 000000000..1db1d33d4
--- /dev/null
+++ b/ui/app/components/modals/index.js
@@ -0,0 +1,5 @@
+const Modal = require('./modal')
+
+module.exports = {
+  Modal,
+}
diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js
new file mode 100644
index 000000000..88deb2bb0
--- /dev/null
+++ b/ui/app/components/modals/modal.js
@@ -0,0 +1,263 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const connect = require('react-redux').connect
+const FadeModal = require('boron').FadeModal
+const actions = require('../../actions')
+const isMobileView = require('../../../lib/is-mobile-view')
+const isPopupOrNotification = require('../../../../app/scripts/lib/is-popup-or-notification')
+
+// Modal Components
+const BuyOptions = require('./buy-options-modal')
+const AccountDetailsModal = require('./account-details-modal')
+const EditAccountNameModal = require('./edit-account-name-modal')
+const ExportPrivateKeyModal = require('./export-private-key-modal')
+const NewAccountModal = require('./new-account-modal')
+const ShapeshiftDepositTxModal = require('./shapeshift-deposit-tx-modal.js')
+const HideTokenConfirmationModal = require('./hide-token-confirmation-modal')
+const CustomizeGasModal = require('../customize-gas-modal')
+
+const accountModalStyle = {
+  mobileModalStyle: {
+    width: '95%',
+    // top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh',
+    boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
+    borderRadius: '4px',
+    top: '10%',
+    transform: 'none',
+    left: '0',
+    right: '0',
+    margin: '0 auto',
+  },
+  laptopModalStyle: {
+    width: '360px',
+    // top: 'calc(33% + 45px)',
+    boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
+    borderRadius: '4px',
+    top: '10%',
+    transform: 'none',
+    left: '0',
+    right: '0',
+    margin: '0 auto',
+  },
+  contentStyle: {
+    borderRadius: '4px',
+  },
+}
+
+const MODALS = {
+  BUY: {
+    contents: [
+      h(BuyOptions, {}, []),
+    ],
+    mobileModalStyle: {
+      width: '95%',
+      // top: isPopupOrNotification() === 'popup' ? '48vh' : '36.5vh',
+      transform: 'none',
+      left: '0',
+      right: '0',
+      margin: '0 auto',
+      boxShadow: '0 0 7px 0 rgba(0,0,0,0.08)',
+      top: '10%',
+    },
+    laptopModalStyle: {
+      width: '66%',
+      maxWidth: '550px',
+      top: 'calc(10% + 10px)',
+      left: '0',
+      right: '0',
+      margin: '0 auto',
+      boxShadow: '0 0 7px 0 rgba(0,0,0,0.08)',
+      transform: 'none',
+    },
+  },
+
+  EDIT_ACCOUNT_NAME: {
+    contents: [
+      h(EditAccountNameModal, {}, []),
+    ],
+    mobileModalStyle: {
+      width: '95%',
+      // top: isPopupOrNotification() === 'popup' ? '48vh' : '36.5vh',
+      top: '10%',
+      boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
+      transform: 'none',
+      left: '0',
+      right: '0',
+      margin: '0 auto',
+    },
+    laptopModalStyle: {
+      width: '375px',
+      // top: 'calc(30% + 10px)',
+      top: '10%',
+      boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
+      transform: 'none',
+      left: '0',
+      right: '0',
+      margin: '0 auto',
+    },
+  },
+
+  ACCOUNT_DETAILS: {
+    contents: [
+      h(AccountDetailsModal, {}, []),
+    ],
+    ...accountModalStyle,
+  },
+
+  EXPORT_PRIVATE_KEY: {
+    contents: [
+      h(ExportPrivateKeyModal, {}, []),
+    ],
+    ...accountModalStyle,
+  },
+
+  SHAPESHIFT_DEPOSIT_TX: {
+    contents: [
+      h(ShapeshiftDepositTxModal),
+    ],
+    ...accountModalStyle,
+  },
+
+  HIDE_TOKEN_CONFIRMATION: {
+    contents: [
+      h(HideTokenConfirmationModal, {}, []),
+    ],
+    mobileModalStyle: {
+      width: '95%',
+      top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh',
+    },
+    laptopModalStyle: {
+      width: '449px',
+      top: 'calc(33% + 45px)',
+    },
+  },
+
+  NEW_ACCOUNT: {
+    contents: [
+      h(NewAccountModal, {}, []),
+    ],
+    mobileModalStyle: {
+      width: '95%',
+      // top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh',
+      top: '10%',
+      transform: 'none',
+      left: '0',
+      right: '0',
+      margin: '0 auto',
+    },
+    laptopModalStyle: {
+      width: '449px',
+      // top: 'calc(33% + 45px)',
+      top: '10%',
+      transform: 'none',
+      left: '0',
+      right: '0',
+      margin: '0 auto',
+    },
+  },
+
+  CUSTOMIZE_GAS: {
+    contents: [
+      h(CustomizeGasModal, {}, []),
+    ],
+    mobileModalStyle: {
+      width: '355px',
+      height: '598px',
+      // top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh',
+      top: '5%',
+      transform: 'none',
+      left: '0',
+      right: '0',
+      margin: '0 auto',
+    },
+    laptopModalStyle: {
+      width: '720px',
+      height: '377px',
+      top: '80px',
+      transform: 'none',
+      left: '0',
+      right: '0',
+      margin: '0 auto',
+    },
+  },
+
+  DEFAULT: {
+    contents: [],
+    mobileModalStyle: {},
+    laptopModalStyle: {},
+  },
+}
+
+const BACKDROPSTYLE = {
+  backgroundColor: 'rgba(245, 245, 245, 0.85)',
+}
+
+function mapStateToProps (state) {
+  return {
+    active: state.appState.modal.open,
+    modalState: state.appState.modal.modalState,
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    hideModal: () => {
+      dispatch(actions.hideModal())
+    },
+  }
+}
+
+// Global Modal Component
+inherits(Modal, Component)
+function Modal () {
+  Component.call(this)
+}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(Modal)
+
+Modal.prototype.render = function () {
+  const modal = MODALS[this.props.modalState.name || 'DEFAULT']
+
+  const children = modal.contents
+  const modalStyle = modal[isMobileView() ? 'mobileModalStyle' : 'laptopModalStyle']
+  const contentStyle = modal.contentStyle || {};
+
+  return h(FadeModal,
+    {
+      className: 'modal',
+      keyboard: false,
+      onHide: () => { this.onHide() },
+      ref: (ref) => {
+        this.modalRef = ref
+      },
+      modalStyle,
+      contentStyle,
+      backdropStyle: BACKDROPSTYLE,
+    },
+    children,
+  )
+}
+
+Modal.prototype.componentWillReceiveProps = function (nextProps) {
+  if (nextProps.active) {
+    this.show()
+  } else if (this.props.active) {
+    this.hide()
+  }
+}
+
+Modal.prototype.onHide = function () {
+  if (this.props.onHideCallback) {
+    this.props.onHideCallback()
+  }
+  this.props.hideModal()
+}
+
+Modal.prototype.hide = function () {
+  this.modalRef.hide()
+}
+
+Modal.prototype.show = function () {
+  this.modalRef.show()
+}
diff --git a/ui/app/components/modals/new-account-modal.js b/ui/app/components/modals/new-account-modal.js
new file mode 100644
index 000000000..25beb6745
--- /dev/null
+++ b/ui/app/components/modals/new-account-modal.js
@@ -0,0 +1,87 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const connect = require('react-redux').connect
+const actions = require('../../actions')
+
+function mapStateToProps (state) {
+  return {
+    network: state.metamask.network,
+    address: state.metamask.selectedAddress,
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    toCoinbase: (address) => {
+      dispatch(actions.buyEth({ network: '1', address, amount: 0 }))
+    },
+    hideModal: () => {
+      dispatch(actions.hideModal())
+    },
+    createAccount: (newAccountName) => {
+      dispatch(actions.addNewAccount())
+        .then((newAccountAddress) => {
+          if (newAccountName) {
+            dispatch(actions.saveAccountLabel(newAccountAddress, newAccountName))
+          }
+          dispatch(actions.hideModal())
+        })
+    },
+  }
+}
+
+inherits(NewAccountModal, Component)
+function NewAccountModal () {
+  Component.call(this)
+
+  this.state = {
+    newAccountName: ''
+  }
+}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(NewAccountModal)
+
+NewAccountModal.prototype.render = function () {
+  const { newAccountName } = this.state
+
+  return h('div', {}, [
+    h('div.new-account-modal-wrapper', {
+    }, [
+      h('div.new-account-modal-header', {}, [
+        'New Account',
+      ]),
+
+      h('div.modal-close-x', {
+        onClick: this.props.hideModal,
+      }),
+
+      h('div.new-account-modal-content', {}, [
+        'Account Name',
+      ]),
+
+      h('div.new-account-input-wrapper', {}, [
+        h('input.new-account-input', {
+          placeholder: 'E.g. My new account',
+          onChange: (event) => this.setState({ newAccountName: event.target.value })
+        }, []),
+      ]),
+
+      h('div.new-account-modal-content.after-input', {}, [
+        'or',
+      ]),
+
+      h('div.new-account-modal-content.after-input', {}, [
+        'Import an account',
+      ]),
+
+      h('div.new-account-modal-content.button', {}, [
+        h('button.btn-clear', {
+          onClick: () => this.props.createAccount(newAccountName)
+        }, [
+          'SAVE',
+        ]),
+      ]),
+    ]),
+  ])
+}
diff --git a/ui/app/components/modals/shapeshift-deposit-tx-modal.js b/ui/app/components/modals/shapeshift-deposit-tx-modal.js
new file mode 100644
index 000000000..1fd1ade00
--- /dev/null
+++ b/ui/app/components/modals/shapeshift-deposit-tx-modal.js
@@ -0,0 +1,40 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const connect = require('react-redux').connect
+const actions = require('../../actions')
+const QrView = require('../qr-code')
+const AccountModalContainer = require('./account-modal-container')
+
+function mapStateToProps (state) {
+  return {
+    Qr: state.appState.modal.modalState.Qr,
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    hideModal: () => {
+      dispatch(actions.hideModal())
+    },
+  }
+}
+
+inherits(ShapeshiftDepositTxModal, Component)
+function ShapeshiftDepositTxModal () {
+  Component.call(this)
+
+}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(ShapeshiftDepositTxModal)
+
+ShapeshiftDepositTxModal.prototype.render = function () {
+  const { Qr } = this.props
+
+  return h(AccountModalContainer, {
+  }, [
+    h('div', {}, [
+      h(QrView, {key: 'qr', Qr}),
+    ])
+  ])
+}
diff --git a/ui/app/components/network.js b/ui/app/components/network.js
index 0dbe37cdd..b24505750 100644
--- a/ui/app/components/network.js
+++ b/ui/app/components/network.js
@@ -1,6 +1,8 @@
 const Component = require('react').Component
 const h = require('react-hyperscript')
+const classnames = require('classnames');
 const inherits = require('util').inherits
+const NetworkDropdownIcon = require('./dropdowns/components/network-dropdown-icon')
 
 module.exports = Network
 
@@ -60,7 +62,13 @@ Network.prototype.render = function () {
   }
 
   return (
-    h('#network_component.pointer', {
+    h('div.network-component.pointer', {
+      className: classnames('network-component pointer', {
+        'ethereum-network': providerName === 'mainnet',
+        'ropsten-test-network': providerName === 'ropsten' || parseInt(networkNumber) === 3,
+        'kovan-test-network': providerName === 'kovan',
+        'rinkeby-test-network': providerName === 'rinkeby',
+      }),
       title: hoverText,
       onClick: (event) => this.props.onClick(event),
     }, [
@@ -68,7 +76,10 @@ Network.prototype.render = function () {
         switch (iconName) {
           case 'ethereum-network':
             return h('.network-indicator', [
-              h('.menu-icon.diamond'),
+              h(NetworkDropdownIcon, {
+                backgroundColor: '#038789', // $blue-lagoon
+                nonSelectBackgroundColor: '#15afb2',
+              }),
               h('.network-name', {
                 style: {
                   color: '#039396',
@@ -78,7 +89,10 @@ Network.prototype.render = function () {
             ])
           case 'ropsten-test-network':
             return h('.network-indicator', [
-              h('.menu-icon.red-dot'),
+              h(NetworkDropdownIcon, {
+                backgroundColor: '#e91550', // $crimson
+                nonSelectBackgroundColor: '#ec2c50',
+              }),
               h('.network-name', {
                 style: {
                   color: '#ff6666',
@@ -88,7 +102,10 @@ Network.prototype.render = function () {
             ])
           case 'kovan-test-network':
             return h('.network-indicator', [
-              h('.menu-icon.hollow-diamond'),
+              h(NetworkDropdownIcon, {
+                backgroundColor: '#690496', // $purple
+                nonSelectBackgroundColor: '#b039f3',
+              }),
               h('.network-name', {
                 style: {
                   color: '#690496',
@@ -98,7 +115,10 @@ Network.prototype.render = function () {
             ])
           case 'rinkeby-test-network':
             return h('.network-indicator', [
-              h('.menu-icon.golden-square'),
+              h(NetworkDropdownIcon, {
+                backgroundColor: '#ebb33f', // $tulip-tree
+                nonSelectBackgroundColor: '#ecb23e',
+              }),
               h('.network-name', {
                 style: {
                   color: '#e7a218',
diff --git a/ui/app/components/notice.js b/ui/app/components/notice.js
index c26505193..abfff1f5c 100644
--- a/ui/app/components/notice.js
+++ b/ui/app/components/notice.js
@@ -102,7 +102,7 @@ Notice.prototype.render = function () {
         }),
       ]),
 
-      h('button', {
+      h('button.primary', {
         disabled,
         onClick: () => {
           this.setState({disclaimerDisabled: true})
diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js
deleted file mode 100644
index c3350fcc1..000000000
--- a/ui/app/components/pending-tx.js
+++ /dev/null
@@ -1,501 +0,0 @@
-const Component = require('react').Component
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const actions = require('../actions')
-const clone = require('clone')
-
-const ethUtil = require('ethereumjs-util')
-const BN = ethUtil.BN
-const hexToBn = require('../../../app/scripts/lib/hex-to-bn')
-const util = require('../util')
-const MiniAccountPanel = require('./mini-account-panel')
-const Copyable = require('./copyable')
-const EthBalance = require('./eth-balance')
-const addressSummary = util.addressSummary
-const nameForAddress = require('../../lib/contract-namer')
-const BNInput = require('./bn-as-decimal-input')
-
-const MIN_GAS_PRICE_GWEI_BN = new BN(1)
-const GWEI_FACTOR = new BN(1e9)
-const MIN_GAS_PRICE_BN = MIN_GAS_PRICE_GWEI_BN.mul(GWEI_FACTOR)
-const MIN_GAS_LIMIT_BN = new BN(21000)
-
-module.exports = PendingTx
-inherits(PendingTx, Component)
-function PendingTx () {
-  Component.call(this)
-  this.state = {
-    valid: true,
-    txData: null,
-    submitting: false,
-  }
-}
-
-PendingTx.prototype.render = function () {
-  const props = this.props
-  const { currentCurrency, blockGasLimit } = props
-
-  const conversionRate = props.conversionRate
-  const txMeta = this.gatherTxMeta()
-  const txParams = txMeta.txParams || {}
-
-  // Account Details
-  const address = txParams.from || props.selectedAddress
-  const identity = props.identities[address] || { address: address }
-  const account = props.accounts[address]
-  const balance = account ? account.balance : '0x0'
-
-  // recipient check
-  const isValidAddress = !txParams.to || util.isValidAddress(txParams.to)
-
-  // Gas
-  const gas = txParams.gas
-  const gasBn = hexToBn(gas)
-  const gasLimit = new BN(parseInt(blockGasLimit))
-  const safeGasLimitBN = this.bnMultiplyByFraction(gasLimit, 19, 20)
-  const saferGasLimitBN = this.bnMultiplyByFraction(gasLimit, 18, 20)
-  const safeGasLimit = safeGasLimitBN.toString(10)
-
-  // Gas Price
-  const gasPrice = txParams.gasPrice || MIN_GAS_PRICE_BN.toString(16)
-  const gasPriceBn = hexToBn(gasPrice)
-
-  const txFeeBn = gasBn.mul(gasPriceBn)
-  const valueBn = hexToBn(txParams.value)
-  const maxCost = txFeeBn.add(valueBn)
-
-  const dataLength = txParams.data ? (txParams.data.length - 2) / 2 : 0
-
-  const balanceBn = hexToBn(balance)
-  const insufficientBalance = balanceBn.lt(maxCost)
-  const dangerousGasLimit = gasBn.gte(saferGasLimitBN)
-  const gasLimitSpecified = txMeta.gasLimitSpecified
-  const buyDisabled = insufficientBalance || !this.state.valid || !isValidAddress || this.state.submitting
-  const showRejectAll = props.unconfTxListLength > 1
-
-  this.inputs = []
-
-  return (
-
-    h('div', {
-      key: txMeta.id,
-    }, [
-
-      h('form#pending-tx-form', {
-        onSubmit: this.onSubmit.bind(this),
-
-      }, [
-
-        // tx info
-        h('div', [
-
-          h('.flex-row.flex-center', {
-            style: {
-              maxWidth: '100%',
-            },
-          }, [
-
-            h(MiniAccountPanel, {
-              imageSeed: address,
-              picOrder: 'right',
-            }, [
-              h('span.font-small', {
-                style: {
-                  fontFamily: 'Montserrat Bold, Montserrat, sans-serif',
-                },
-              }, identity.name),
-
-              h(Copyable, {
-                value: ethUtil.toChecksumAddress(address),
-              }, [
-                h('span.font-small', {
-                  style: {
-                    fontFamily: 'Montserrat Light, Montserrat, sans-serif',
-                  },
-                }, addressSummary(address, 6, 4, false)),
-              ]),
-
-              h('span.font-small', {
-                style: {
-                  fontFamily: 'Montserrat Light, Montserrat, sans-serif',
-                },
-              }, [
-                h(EthBalance, {
-                  value: balance,
-                  conversionRate,
-                  currentCurrency,
-                  inline: true,
-                  labelColor: '#F7861C',
-                }),
-              ]),
-            ]),
-
-            forwardCarrat(),
-
-            this.miniAccountPanelForRecipient(),
-          ]),
-
-          h('style', `
-            .table-box {
-              margin: 7px 0px 0px 0px;
-              width: 100%;
-            }
-            .table-box .row {
-              margin: 0px;
-              background: rgb(236,236,236);
-              display: flex;
-              justify-content: space-between;
-              font-family: Montserrat Light, sans-serif;
-              font-size: 13px;
-              padding: 5px 25px;
-            }
-            .table-box .row .value {
-              font-family: Montserrat Regular;
-            }
-          `),
-
-          h('.table-box', [
-
-            // Ether Value
-            // Currently not customizable, but easily modified
-            // in the way that gas and gasLimit currently are.
-            h('.row', [
-              h('.cell.label', 'Amount'),
-              h(EthBalance, { value: txParams.value, currentCurrency, conversionRate }),
-            ]),
-
-            // Gas Limit (customizable)
-            h('.cell.row', [
-              h('.cell.label', 'Gas Limit'),
-              h('.cell.value', {
-              }, [
-                h(BNInput, {
-                  name: 'Gas Limit',
-                  value: gasBn,
-                  precision: 0,
-                  scale: 0,
-                  // The hard lower limit for gas.
-                  min: MIN_GAS_LIMIT_BN.toString(10),
-                  max: safeGasLimit,
-                  suffix: 'UNITS',
-                  style: {
-                    position: 'relative',
-                    top: '5px',
-                  },
-                  onChange: this.gasLimitChanged.bind(this),
-
-                  ref: (hexInput) => { this.inputs.push(hexInput) },
-                }),
-              ]),
-            ]),
-
-            // Gas Price (customizable)
-            h('.cell.row', [
-              h('.cell.label', 'Gas Price'),
-              h('.cell.value', {
-              }, [
-                h(BNInput, {
-                  name: 'Gas Price',
-                  value: gasPriceBn,
-                  precision: 9,
-                  scale: 9,
-                  suffix: 'GWEI',
-                  min: MIN_GAS_PRICE_GWEI_BN.toString(10),
-                  style: {
-                    position: 'relative',
-                    top: '5px',
-                  },
-                  onChange: this.gasPriceChanged.bind(this),
-                  ref: (hexInput) => { this.inputs.push(hexInput) },
-                }),
-              ]),
-            ]),
-
-            // Max Transaction Fee (calculated)
-            h('.cell.row', [
-              h('.cell.label', 'Max Transaction Fee'),
-              h(EthBalance, { value: txFeeBn.toString(16), currentCurrency, conversionRate }),
-            ]),
-
-            h('.cell.row', {
-              style: {
-                fontFamily: 'Montserrat Regular',
-                background: 'white',
-                padding: '10px 25px',
-              },
-            }, [
-              h('.cell.label', 'Max Total'),
-              h('.cell.value', {
-                style: {
-                  display: 'flex',
-                  alignItems: 'center',
-                },
-              }, [
-                h(EthBalance, {
-                  value: maxCost.toString(16),
-                  currentCurrency,
-                  conversionRate,
-                  inline: true,
-                  labelColor: 'black',
-                  fontSize: '16px',
-                }),
-              ]),
-            ]),
-
-            // Data size row:
-            h('.cell.row', {
-              style: {
-                background: '#f7f7f7',
-                paddingBottom: '0px',
-              },
-            }, [
-              h('.cell.label'),
-              h('.cell.value', {
-                style: {
-                  fontFamily: 'Montserrat Light',
-                  fontSize: '11px',
-                },
-              }, `Data included: ${dataLength} bytes`),
-            ]),
-          ]), // End of Table
-
-        ]),
-
-        h('style', `
-          .conf-buttons button {
-            margin-left: 10px;
-            text-transform: uppercase;
-          }
-        `),
-        h('.cell.row', {
-          style: {
-            textAlign: 'center',
-          },
-        }, [
-          txMeta.simulationFails ?
-            h('.error', {
-              style: {
-                fontSize: '0.9em',
-              },
-            }, 'Transaction Error. Exception thrown in contract code.')
-          : null,
-
-          !isValidAddress ?
-            h('.error', {
-              style: {
-                fontSize: '0.9em',
-              },
-            }, 'Recipient address is invalid. Sending this transaction will result in a loss of ETH.')
-          : null,
-
-          insufficientBalance ?
-            h('span.error', {
-              style: {
-                fontSize: '0.9em',
-              },
-            }, 'Insufficient balance for transaction')
-          : null,
-
-          (dangerousGasLimit && !gasLimitSpecified) ?
-            h('span.error', {
-              style: {
-                fontSize: '0.9em',
-              },
-            }, 'Gas limit set dangerously high. Approving this transaction is likely to fail.')
-          : null,
-        ]),
-
-
-        // send + cancel
-        h('.flex-row.flex-space-around.conf-buttons', {
-          style: {
-            display: 'flex',
-            justifyContent: 'flex-end',
-            margin: '14px 25px',
-          },
-        }, [
-          h('button', {
-            onClick: (event) => {
-              this.resetGasFields()
-              event.preventDefault()
-            },
-          }, 'Reset'),
-
-          // Accept Button or Buy Button
-          insufficientBalance ? h('button.btn-green', { onClick: props.buyEth }, 'Buy Ether') :
-            h('input.confirm.btn-green', {
-              type: 'submit',
-              value: 'SUBMIT',
-              style: { marginLeft: '10px' },
-              disabled: buyDisabled,
-            }),
-
-          h('button.cancel.btn-red', {
-            onClick: props.cancelTransaction,
-          }, 'Reject'),
-        ]),
-        showRejectAll ? h('.flex-row.flex-space-around.conf-buttons', {
-          style: {
-            display: 'flex',
-            justifyContent: 'flex-end',
-            margin: '14px 25px',
-          },
-        }, [
-          h('button.cancel.btn-red', {
-            onClick: props.cancelAllTransactions,
-          }, 'Reject All'),
-        ]) : null,
-      ]),
-    ])
-  )
-}
-
-PendingTx.prototype.miniAccountPanelForRecipient = function () {
-  const props = this.props
-  const txData = props.txData
-  const txParams = txData.txParams || {}
-  const isContractDeploy = !('to' in txParams)
-
-  // If it's not a contract deploy, send to the account
-  if (!isContractDeploy) {
-    return h(MiniAccountPanel, {
-      imageSeed: txParams.to,
-      picOrder: 'left',
-    }, [
-
-      h('span.font-small', {
-        style: {
-          fontFamily: 'Montserrat Bold, Montserrat, sans-serif',
-        },
-      }, nameForAddress(txParams.to, props.identities)),
-
-      h(Copyable, {
-        value: ethUtil.toChecksumAddress(txParams.to),
-      }, [
-        h('span.font-small', {
-          style: {
-            fontFamily: 'Montserrat Light, Montserrat, sans-serif',
-          },
-        }, addressSummary(txParams.to, 6, 4, false)),
-      ]),
-
-    ])
-  } else {
-    return h(MiniAccountPanel, {
-      picOrder: 'left',
-    }, [
-
-      h('span.font-small', {
-        style: {
-          fontFamily: 'Montserrat Bold, Montserrat, sans-serif',
-        },
-      }, 'New Contract'),
-
-    ])
-  }
-}
-
-PendingTx.prototype.gasPriceChanged = function (newBN, valid) {
-  log.info(`Gas price changed to: ${newBN.toString(10)}`)
-  const txMeta = this.gatherTxMeta()
-  txMeta.txParams.gasPrice = '0x' + newBN.toString('hex')
-  this.setState({
-    txData: clone(txMeta),
-    valid,
-  })
-}
-
-PendingTx.prototype.gasLimitChanged = function (newBN, valid) {
-  log.info(`Gas limit changed to ${newBN.toString(10)}`)
-  const txMeta = this.gatherTxMeta()
-  txMeta.txParams.gas = '0x' + newBN.toString('hex')
-  this.setState({
-    txData: clone(txMeta),
-    valid,
-  })
-}
-
-PendingTx.prototype.resetGasFields = function () {
-  log.debug(`pending-tx resetGasFields`)
-
-  this.inputs.forEach((hexInput) => {
-    if (hexInput) {
-      hexInput.setValid()
-    }
-  })
-
-  this.setState({
-    txData: null,
-    valid: true,
-  })
-}
-
-PendingTx.prototype.onSubmit = function (event) {
-  event.preventDefault()
-  const txMeta = this.gatherTxMeta()
-  const valid = this.checkValidity()
-  this.setState({ valid, submitting: true })
-  if (valid && this.verifyGasParams()) {
-    this.props.sendTransaction(txMeta, event)
-  } else {
-    this.props.dispatch(actions.displayWarning('Invalid Gas Parameters'))
-    this.setState({ submitting: false })
-  }
-}
-
-PendingTx.prototype.checkValidity = function () {
-  const form = this.getFormEl()
-  const valid = form.checkValidity()
-  return valid
-}
-
-PendingTx.prototype.getFormEl = function () {
-  const form = document.querySelector('form#pending-tx-form')
-  // Stub out form for unit tests:
-  if (!form) {
-    return { checkValidity () { return true } }
-  }
-  return form
-}
-
-// After a customizable state value has been updated,
-PendingTx.prototype.gatherTxMeta = function () {
-  log.debug(`pending-tx gatherTxMeta`)
-  const props = this.props
-  const state = this.state
-  const txData = clone(state.txData) || clone(props.txData)
-
-  log.debug(`UI has defaulted to tx meta ${JSON.stringify(txData)}`)
-  return txData
-}
-
-PendingTx.prototype.verifyGasParams = function () {
-  // We call this in case the gas has not been modified at all
-  if (!this.state) { return true }
-  return (
-    this._notZeroOrEmptyString(this.state.gas) &&
-    this._notZeroOrEmptyString(this.state.gasPrice)
-  )
-}
-
-PendingTx.prototype._notZeroOrEmptyString = function (obj) {
-  return obj !== '' && obj !== '0x0'
-}
-
-PendingTx.prototype.bnMultiplyByFraction = function (targetBN, numerator, denominator) {
-  const numBN = new BN(numerator)
-  const denomBN = new BN(denominator)
-  return targetBN.mul(numBN).div(denomBN)
-}
-
-function forwardCarrat () {
-  return (
-    h('img', {
-      src: 'images/forward-carrat.svg',
-      style: {
-        padding: '5px 6px 0px 10px',
-        height: '37px',
-      },
-    })
-  )
-}
diff --git a/ui/app/components/pending-tx/confirm-deploy-contract.js b/ui/app/components/pending-tx/confirm-deploy-contract.js
new file mode 100644
index 000000000..ea4aa1dde
--- /dev/null
+++ b/ui/app/components/pending-tx/confirm-deploy-contract.js
@@ -0,0 +1,344 @@
+const Component = require('react').Component
+const { connect } = require('react-redux')
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const actions = require('../../actions')
+const clone = require('clone')
+const Identicon = require('../identicon')
+const ethUtil = require('ethereumjs-util')
+const BN = ethUtil.BN
+const hexToBn = require('../../../../app/scripts/lib/hex-to-bn')
+const { conversionUtil } = require('../../conversion-util')
+
+const MIN_GAS_PRICE_GWEI_BN = new BN(1)
+const GWEI_FACTOR = new BN(1e9)
+const MIN_GAS_PRICE_BN = MIN_GAS_PRICE_GWEI_BN.mul(GWEI_FACTOR)
+
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(ConfirmDeployContract)
+
+function mapStateToProps (state) {
+  const {
+    conversionRate,
+    identities,
+  } = state.metamask
+  const accounts = state.metamask.accounts
+  const selectedAddress = state.metamask.selectedAddress || Object.keys(accounts)[0]
+  return {
+    conversionRate,
+    identities,
+    selectedAddress,
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    backToAccountDetail: address => dispatch(actions.backToAccountDetail(address)),
+    cancelTransaction: ({ id }) => dispatch(actions.cancelTx({ id })),
+  }
+}
+
+
+inherits(ConfirmDeployContract, Component)
+function ConfirmDeployContract () {
+  Component.call(this)
+  this.state = {}
+  this.onSubmit = this.onSubmit.bind(this)
+}
+
+ConfirmDeployContract.prototype.onSubmit = function (event) {
+  event.preventDefault()
+  const txMeta = this.gatherTxMeta()
+  const valid = this.checkValidity()
+  this.setState({ valid, submitting: true })
+
+  if (valid && this.verifyGasParams()) {
+    this.props.sendTransaction(txMeta, event)
+  } else {
+    this.props.dispatch(actions.displayWarning('Invalid Gas Parameters'))
+    this.setState({ submitting: false })
+  }
+}
+
+ConfirmDeployContract.prototype.cancel = function (event, txMeta) {
+  event.preventDefault()
+  this.props.cancelTransaction(txMeta)
+}
+
+ConfirmDeployContract.prototype.checkValidity = function () {
+  const form = this.getFormEl()
+  const valid = form.checkValidity()
+  return valid
+}
+
+ConfirmDeployContract.prototype.getFormEl = function () {
+  const form = document.querySelector('form#pending-tx-form')
+  // Stub out form for unit tests:
+  if (!form) {
+    return { checkValidity () { return true } }
+  }
+  return form
+}
+
+// After a customizable state value has been updated,
+ConfirmDeployContract.prototype.gatherTxMeta = function () {
+  const props = this.props
+  const state = this.state
+  const txData = clone(state.txData) || clone(props.txData)
+
+  // log.debug(`UI has defaulted to tx meta ${JSON.stringify(txData)}`)
+  return txData
+}
+
+ConfirmDeployContract.prototype.verifyGasParams = function () {
+  // We call this in case the gas has not been modified at all
+  if (!this.state) { return true }
+  return (
+    this._notZeroOrEmptyString(this.state.gas) &&
+    this._notZeroOrEmptyString(this.state.gasPrice)
+  )
+}
+
+ConfirmDeployContract.prototype._notZeroOrEmptyString = function (obj) {
+  return obj !== '' && obj !== '0x0'
+}
+
+ConfirmDeployContract.prototype.bnMultiplyByFraction = function (targetBN, numerator, denominator) {
+  const numBN = new BN(numerator)
+  const denomBN = new BN(denominator)
+  return targetBN.mul(numBN).div(denomBN)
+}
+
+ConfirmDeployContract.prototype.getData = function () {
+  const { identities } = this.props
+  const txMeta = this.gatherTxMeta()
+  const txParams = txMeta.txParams || {}
+
+  return {
+    from: {
+      address: txParams.from,
+      name: identities[txParams.from].name,
+    },
+    memo: txParams.memo || '',
+  }
+}
+
+ConfirmDeployContract.prototype.getAmount = function () {
+  const { conversionRate } = this.props
+  const txMeta = this.gatherTxMeta()
+  const txParams = txMeta.txParams || {}
+
+  const USD = conversionUtil(txParams.value, {
+    fromNumericBase: 'hex',
+    toNumericBase: 'dec',
+    fromCurrency: 'ETH',
+    toCurrency: 'USD',
+    numberOfDecimals: 2,
+    fromDenomination: 'WEI',
+    conversionRate,
+  })
+  const ETH = conversionUtil(txParams.value, {
+    fromNumericBase: 'hex',
+    toNumericBase: 'dec',
+    fromCurrency: 'ETH',
+    toCurrency: 'ETH',
+    fromDenomination: 'WEI',
+    conversionRate,
+    numberOfDecimals: 6,
+  })
+
+  return {
+    fiat: Number(USD),
+    token: Number(ETH),
+  }
+
+}
+
+ConfirmDeployContract.prototype.getGasFee = function () {
+  const { conversionRate } = this.props
+  const txMeta = this.gatherTxMeta()
+  const txParams = txMeta.txParams || {}
+
+  // Gas
+  const gas = txParams.gas
+  const gasBn = hexToBn(gas)
+
+  // Gas Price
+  const gasPrice = txParams.gasPrice || MIN_GAS_PRICE_BN.toString(16)
+  const gasPriceBn = hexToBn(gasPrice)
+
+  const txFeeBn = gasBn.mul(gasPriceBn)
+
+  const USD = conversionUtil(txFeeBn, {
+    fromNumericBase: 'BN',
+    toNumericBase: 'dec',
+    fromDenomination: 'WEI',
+    fromCurrency: 'ETH',
+    toCurrency: 'USD',
+    numberOfDecimals: 2,
+    conversionRate,
+  })
+  const ETH = conversionUtil(txFeeBn, {
+    fromNumericBase: 'BN',
+    toNumericBase: 'dec',
+    fromDenomination: 'WEI',
+    fromCurrency: 'ETH',
+    toCurrency: 'ETH',
+    numberOfDecimals: 6,
+    conversionRate,
+  })
+
+  return {
+    fiat: Number(USD),
+    eth: Number(ETH),
+  }
+}
+ConfirmDeployContract.prototype.renderGasFee = function () {
+  const { fiat: fiatGas, eth: ethGas } = this.getGasFee()
+
+  return (
+    h('section.flex-row.flex-center.confirm-screen-row', [
+      h('span.confirm-screen-label.confirm-screen-section-column', [ 'Gas Fee' ]),
+      h('div.confirm-screen-section-column', [
+        h('div.confirm-screen-row-info', `$${fiatGas} USD`),
+
+        h(
+          'div.confirm-screen-row-detail',
+          `${ethGas} ETH`
+        ),
+      ]),
+    ])
+  )
+}
+
+ConfirmDeployContract.prototype.renderHeroAmount = function () {
+  const { fiat: fiatAmount } = this.getAmount()
+  const txMeta = this.gatherTxMeta()
+  const txParams = txMeta.txParams || {}
+  const { memo = '' } = txParams
+
+  return (
+    h('div.confirm-send-token__hero-amount-wrapper', [
+      h('h3.flex-center.confirm-screen-send-amount', `$${fiatAmount}`),
+      h('h3.flex-center.confirm-screen-send-amount-currency', 'USD'),
+      h('div.flex-center.confirm-memo-wrapper', [
+        h('h3.confirm-screen-send-memo', memo),
+      ]),
+    ])
+  )
+}
+
+ConfirmDeployContract.prototype.renderTotalPlusGas = function () {
+  const { fiat: fiatAmount, token: tokenAmount } = this.getAmount()
+  const { fiat: fiatGas, eth: ethGas } = this.getGasFee()
+
+  return (
+    h('section.flex-row.flex-center.confirm-screen-total-box ', [
+      h('div.confirm-screen-section-column', [
+        h('span.confirm-screen-label', [ 'Total ' ]),
+        h('div.confirm-screen-total-box__subtitle', [ 'Amount + Gas' ]),
+      ]),
+
+      h('div.confirm-screen-section-column', [
+        h('div.confirm-screen-row-info', `$${fiatAmount + fiatGas} USD`),
+        h('div.confirm-screen-row-detail', `${tokenAmount + ethGas} ETH`),
+      ]),
+    ])
+  )
+}
+
+ConfirmDeployContract.prototype.render = function () {
+  const { backToAccountDetail, selectedAddress } = this.props
+  const txMeta = this.gatherTxMeta()
+
+  const {
+    from: {
+      address: fromAddress,
+      name: fromName,
+    },
+  } = this.getData()
+
+  this.inputs = []
+
+  return (
+    h('div.flex-column.flex-grow.confirm-screen-container', {
+      style: { minWidth: '355px' },
+    }, [
+      // Main Send token Card
+      h('div.confirm-screen-wrapper.flex-column.flex-grow', [
+        h('h3.flex-center.confirm-screen-header', [
+          h('button.confirm-screen-back-button', {
+            onClick: () => backToAccountDetail(selectedAddress),
+          }, 'BACK'),
+          h('div.confirm-screen-title', 'Confirm Contract'),
+          h('div.confirm-screen-header-tip'),
+        ]),
+        h('div.flex-row.flex-center.confirm-screen-identicons', [
+          h('div.confirm-screen-account-wrapper', [
+            h(
+              Identicon,
+              {
+                address: fromAddress,
+                diameter: 60,
+              },
+            ),
+            h('span.confirm-screen-account-name', fromName),
+            // h('span.confirm-screen-account-number', fromAddress.slice(fromAddress.length - 4)),
+          ]),
+          h('i.fa.fa-arrow-right.fa-lg'),
+          h('div.confirm-screen-account-wrapper', [
+            h('i.fa.fa-file-text-o'),
+            h('span.confirm-screen-account-name', 'New Contract'),
+            h('span.confirm-screen-account-number', ' '),
+          ]),
+        ]),
+
+        // h('h3.flex-center.confirm-screen-sending-to-message', {
+        //   style: {
+        //     textAlign: 'center',
+        //     fontSize: '16px',
+        //   },
+        // }, [
+        //   `You're deploying a new contract.`,
+        // ]),
+
+        this.renderHeroAmount(),
+
+        h('div.confirm-screen-rows', [
+          h('section.flex-row.flex-center.confirm-screen-row', [
+            h('span.confirm-screen-label.confirm-screen-section-column', [ 'From' ]),
+            h('div.confirm-screen-section-column', [
+              h('div.confirm-screen-row-info', fromName),
+              h('div.confirm-screen-row-detail', `...${fromAddress.slice(fromAddress.length - 4)}`),
+            ]),
+          ]),
+
+          h('section.flex-row.flex-center.confirm-screen-row', [
+            h('span.confirm-screen-label.confirm-screen-section-column', [ 'To' ]),
+            h('div.confirm-screen-section-column', [
+              h('div.confirm-screen-row-info', 'New Contract'),
+            ]),
+          ]),
+
+          this.renderGasFee(),
+
+          this.renderTotalPlusGas(),
+
+        ]),
+      ]),
+
+      h('form#pending-tx-form', {
+        onSubmit: this.onSubmit,
+      }, [
+        // Cancel Button
+        h('div.cancel.btn-light.confirm-screen-cancel-button', {
+          onClick: (event) => this.cancel(event, txMeta),
+        }, 'CANCEL'),
+
+        // Accept Button
+        h('button.confirm-screen-confirm-button', ['CONFIRM']),
+
+      ]),
+    ])
+  )
+}
diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js
new file mode 100644
index 000000000..537a9a659
--- /dev/null
+++ b/ui/app/components/pending-tx/confirm-send-ether.js
@@ -0,0 +1,445 @@
+const Component = require('react').Component
+const { connect } = require('react-redux')
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const actions = require('../../actions')
+const clone = require('clone')
+const Identicon = require('../identicon')
+const ethUtil = require('ethereumjs-util')
+const BN = ethUtil.BN
+const hexToBn = require('../../../../app/scripts/lib/hex-to-bn')
+const { conversionUtil, addCurrencies } = require('../../conversion-util')
+
+const MIN_GAS_PRICE_GWEI_BN = new BN(1)
+const GWEI_FACTOR = new BN(1e9)
+const MIN_GAS_PRICE_BN = MIN_GAS_PRICE_GWEI_BN.mul(GWEI_FACTOR)
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(ConfirmSendEther)
+
+function mapStateToProps (state) {
+  const {
+    conversionRate,
+    identities,
+  } = state.metamask
+  const accounts = state.metamask.accounts
+  const selectedAddress = state.metamask.selectedAddress || Object.keys(accounts)[0]
+  return {
+    conversionRate,
+    identities,
+    selectedAddress,
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    backToAccountDetail: address => dispatch(actions.backToAccountDetail(address)),
+    cancelTransaction: ({ id }) => dispatch(actions.cancelTx({ id })),
+  }
+}
+
+inherits(ConfirmSendEther, Component)
+function ConfirmSendEther () {
+  Component.call(this)
+  this.state = {}
+  this.onSubmit = this.onSubmit.bind(this)
+}
+
+ConfirmSendEther.prototype.getAmount = function () {
+  const { conversionRate } = this.props
+  const txMeta = this.gatherTxMeta()
+  const txParams = txMeta.txParams || {}
+  console.log(txParams)
+  const USD = conversionUtil(txParams.value, {
+    fromNumericBase: 'hex',
+    toNumericBase: 'dec',
+    fromCurrency: 'ETH',
+    toCurrency: 'USD',
+    numberOfDecimals: 2,
+    fromDenomination: 'WEI',
+    conversionRate,
+  })
+  const ETH = conversionUtil(txParams.value, {
+    fromNumericBase: 'hex',
+    toNumericBase: 'dec',
+    fromCurrency: 'ETH',
+    toCurrency: 'ETH',
+    fromDenomination: 'WEI',
+    conversionRate,
+    numberOfDecimals: 6,
+  })
+
+  return {
+    USD,
+    ETH,
+  }
+
+}
+
+ConfirmSendEther.prototype.getGasFee = function () {
+  const { conversionRate } = this.props
+  const txMeta = this.gatherTxMeta()
+  const txParams = txMeta.txParams || {}
+
+  // Gas
+  const gas = txParams.gas
+  const gasBn = hexToBn(gas)
+
+  // From latest master
+//   const gasLimit = new BN(parseInt(blockGasLimit))
+//   const safeGasLimitBN = this.bnMultiplyByFraction(gasLimit, 19, 20)
+//   const saferGasLimitBN = this.bnMultiplyByFraction(gasLimit, 18, 20)
+//   const safeGasLimit = safeGasLimitBN.toString(10)
+
+  // Gas Price
+  const gasPrice = txParams.gasPrice || MIN_GAS_PRICE_BN.toString(16)
+  const gasPriceBn = hexToBn(gasPrice)
+
+  const txFeeBn = gasBn.mul(gasPriceBn)
+
+  const USD = conversionUtil(txFeeBn, {
+    fromNumericBase: 'BN',
+    toNumericBase: 'dec',
+    fromDenomination: 'WEI',
+    fromCurrency: 'ETH',
+    toCurrency: 'USD',
+    numberOfDecimals: 2,
+    conversionRate,
+  })
+  const ETH = conversionUtil(txFeeBn, {
+    fromNumericBase: 'BN',
+    toNumericBase: 'dec',
+    fromDenomination: 'WEI',
+    fromCurrency: 'ETH',
+    toCurrency: 'ETH',
+    numberOfDecimals: 6,
+    conversionRate,
+  })
+
+  return {
+    USD,
+    ETH,
+  }
+}
+
+ConfirmSendEther.prototype.getData = function () {
+  const { identities } = this.props
+  const txMeta = this.gatherTxMeta()
+  const txParams = txMeta.txParams || {}
+  const { USD: gasFeeInUSD, ETH: gasFeeInETH } = this.getGasFee()
+  const { USD: amountInUSD, ETH: amountInETH } = this.getAmount()
+
+  const totalInUSD = addCurrencies(gasFeeInUSD, amountInUSD, {
+    toNumericBase: 'dec',
+    numberOfDecimals: 2,
+  })
+  const totalInETH = addCurrencies(gasFeeInETH, amountInETH, {
+    toNumericBase: 'dec',
+    numberOfDecimals: 6,
+  })
+
+  return {
+    from: {
+      address: txParams.from,
+      name: identities[txParams.from].name,
+    },
+    to: {
+      address: txParams.to,
+      name: identities[txParams.to] ? identities[txParams.to].name : 'New Recipient',
+    },
+    memo: txParams.memo || '',
+    gasFeeInUSD,
+    gasFeeInETH,
+    amountInUSD,
+    amountInETH,
+    totalInUSD,
+    totalInETH,
+  }
+}
+
+ConfirmSendEther.prototype.render = function () {
+  const { backToAccountDetail, selectedAddress } = this.props
+  const txMeta = this.gatherTxMeta()
+  const txParams = txMeta.txParams || {}
+
+  const {
+    from: {
+      address: fromAddress,
+      name: fromName,
+    },
+    to: {
+      address: toAddress,
+      name: toName,
+    },
+    memo,
+    gasFeeInUSD,
+    gasFeeInETH,
+    amountInUSD,
+    totalInUSD,
+    totalInETH,
+  } = this.getData()
+
+  // This is from the latest master
+  // It handles some of the errors that we are not currently handling
+  // Leaving as comments fo reference
+
+  // const balanceBn = hexToBn(balance)
+  // const insufficientBalance = balanceBn.lt(maxCost)
+  // const buyDisabled = insufficientBalance || !this.state.valid || !isValidAddress || this.state.submitting
+  // const showRejectAll = props.unconfTxListLength > 1
+//   const dangerousGasLimit = gasBn.gte(saferGasLimitBN)
+//   const gasLimitSpecified = txMeta.gasLimitSpecified
+
+  this.inputs = []
+
+  return (
+    h('div.confirm-screen-container', {
+      style: { minWidth: '355px' },
+    }, [
+      // Main Send token Card
+      h('div.confirm-screen-wrapper.flex-column.flex-grow', [
+        h('h3.flex-center.confirm-screen-header', [
+          h('button.confirm-screen-back-button', {
+            onClick: () => backToAccountDetail(selectedAddress),
+          }, 'BACK'),
+          h('div.confirm-screen-title', 'Confirm Transaction'),
+          h('div.confirm-screen-header-tip'),
+        ]),
+        h('div.flex-row.flex-center.confirm-screen-identicons', [
+          h('div.confirm-screen-account-wrapper', [
+            h(
+              Identicon,
+              {
+                address: fromAddress,
+                diameter: 60,
+              },
+            ),
+            h('span.confirm-screen-account-name', fromName),
+            // h('span.confirm-screen-account-number', fromAddress.slice(fromAddress.length - 4)),
+          ]),
+          h('i.fa.fa-arrow-right.fa-lg'),
+          h('div.confirm-screen-account-wrapper', [
+            h(
+              Identicon,
+              {
+                address: txParams.to,
+                diameter: 60,
+              },
+            ),
+            h('span.confirm-screen-account-name', toName),
+            // h('span.confirm-screen-account-number', toAddress.slice(toAddress.length - 4)),
+          ]),
+        ]),
+
+        // h('h3.flex-center.confirm-screen-sending-to-message', {
+        //   style: {
+        //     textAlign: 'center',
+        //     fontSize: '16px',
+        //   },
+        // }, [
+        //   `You're sending to Recipient ...${toAddress.slice(toAddress.length - 4)}`,
+        // ]),
+
+        h('h3.flex-center.confirm-screen-send-amount', [`$${amountInUSD}`]),
+        h('h3.flex-center.confirm-screen-send-amount-currency', [ 'USD' ]),
+        h('div.flex-center.confirm-memo-wrapper', [
+          h('h3.confirm-screen-send-memo', [ memo ? `"${memo}"` : '' ]),
+        ]),
+
+        h('div.confirm-screen-rows', [
+          h('section.flex-row.flex-center.confirm-screen-row', [
+            h('span.confirm-screen-label.confirm-screen-section-column', [ 'From' ]),
+            h('div.confirm-screen-section-column', [
+              h('div.confirm-screen-row-info', fromName),
+              h('div.confirm-screen-row-detail', `...${fromAddress.slice(fromAddress.length - 4)}`),
+            ]),
+          ]),
+
+          h('section.flex-row.flex-center.confirm-screen-row', [
+            h('span.confirm-screen-label.confirm-screen-section-column', [ 'To' ]),
+            h('div.confirm-screen-section-column', [
+              h('div.confirm-screen-row-info', toName),
+              h('div.confirm-screen-row-detail', `...${toAddress.slice(toAddress.length - 4)}`),
+            ]),
+          ]),
+
+          h('section.flex-row.flex-center.confirm-screen-row', [
+            h('span.confirm-screen-label.confirm-screen-section-column', [ 'Gas Fee' ]),
+            h('div.confirm-screen-section-column', [
+              h('div.confirm-screen-row-info', `$${gasFeeInUSD} USD`),
+
+              h('div.confirm-screen-row-detail', `${gasFeeInETH} ETH`),
+            ]),
+          ]),
+
+
+          h('section.flex-row.flex-center.confirm-screen-total-box ', [
+            h('div.confirm-screen-section-column', [
+              h('span.confirm-screen-label', [ 'Total ' ]),
+              h('div.confirm-screen-total-box__subtitle', [ 'Amount + Gas' ]),
+            ]),
+
+            h('div.confirm-screen-section-column', [
+              h('div.confirm-screen-row-info', `$${totalInUSD} USD`),
+              h('div.confirm-screen-row-detail', `${totalInETH} ETH`),
+            ]),
+          ]),
+        ]),
+
+// These are latest errors handling from master
+// Leaving as comments as reference when we start implementing error handling
+//         h('style', `
+//           .conf-buttons button {
+//             margin-left: 10px;
+//             text-transform: uppercase;
+//           }
+//         `),
+
+//         txMeta.simulationFails ?
+//           h('.error', {
+//             style: {
+//               marginLeft: 50,
+//               fontSize: '0.9em',
+//             },
+//           }, 'Transaction Error. Exception thrown in contract code.')
+//         : null,
+
+//         !isValidAddress ?
+//           h('.error', {
+//             style: {
+//               marginLeft: 50,
+//               fontSize: '0.9em',
+//             },
+//           }, 'Recipient address is invalid. Sending this transaction will result in a loss of ETH.')
+//         : null,
+
+//         insufficientBalance ?
+//           h('span.error', {
+//             style: {
+//               marginLeft: 50,
+//               fontSize: '0.9em',
+//             },
+//           }, 'Insufficient balance for transaction')
+//         : null,
+
+//         // send + cancel
+//         h('.flex-row.flex-space-around.conf-buttons', {
+//           style: {
+//             display: 'flex',
+//             justifyContent: 'flex-end',
+//             margin: '14px 25px',
+//           },
+//         }, [
+//           h('button', {
+//             onClick: (event) => {
+//               this.resetGasFields()
+//               event.preventDefault()
+//             },
+//           }, 'Reset'),
+
+//           // Accept Button or Buy Button
+//           insufficientBalance ? h('button.btn-green', { onClick: props.buyEth }, 'Buy Ether') :
+//             h('input.confirm.btn-green', {
+//               type: 'submit',
+//               value: 'SUBMIT',
+//               style: { marginLeft: '10px' },
+//               disabled: buyDisabled,
+//             }),
+
+//           h('button.cancel.btn-red', {
+//             onClick: props.cancelTransaction,
+//           }, 'Reject'),
+//         ]),
+//         showRejectAll ? h('.flex-row.flex-space-around.conf-buttons', {
+//           style: {
+//             display: 'flex',
+//             justifyContent: 'flex-end',
+//             margin: '14px 25px',
+//           },
+//         }, [
+//           h('button.cancel.btn-red', {
+//             onClick: props.cancelAllTransactions,
+//           }, 'Reject All'),
+//         ]) : null,
+//       ]),
+//     ])
+//   )
+// }
+      ]),
+
+      h('form#pending-tx-form', {
+        onSubmit: this.onSubmit,
+      }, [
+        // Cancel Button
+        h('div.cancel.btn-light.confirm-screen-cancel-button', {
+          onClick: (event) => this.cancel(event, txMeta),
+        }, 'CANCEL'),
+
+        // Accept Button
+        h('button.confirm-screen-confirm-button', ['CONFIRM']),
+      ]),
+    ])
+  )
+}
+
+ConfirmSendEther.prototype.onSubmit = function (event) {
+  event.preventDefault()
+  const txMeta = this.gatherTxMeta()
+  const valid = this.checkValidity()
+  this.setState({ valid, submitting: true })
+
+  if (valid && this.verifyGasParams()) {
+    this.props.sendTransaction(txMeta, event)
+  } else {
+    this.props.dispatch(actions.displayWarning('Invalid Gas Parameters'))
+    this.setState({ submitting: false })
+  }
+}
+
+ConfirmSendEther.prototype.cancel = function (event, txMeta) {
+  event.preventDefault()
+  this.props.cancelTransaction(txMeta)
+}
+
+ConfirmSendEther.prototype.checkValidity = function () {
+  const form = this.getFormEl()
+  const valid = form.checkValidity()
+  return valid
+}
+
+ConfirmSendEther.prototype.getFormEl = function () {
+  const form = document.querySelector('form#pending-tx-form')
+  // Stub out form for unit tests:
+  if (!form) {
+    return { checkValidity () { return true } }
+  }
+  return form
+}
+
+// After a customizable state value has been updated,
+ConfirmSendEther.prototype.gatherTxMeta = function () {
+  const props = this.props
+  const state = this.state
+  const txData = clone(state.txData) || clone(props.txData)
+
+  // log.debug(`UI has defaulted to tx meta ${JSON.stringify(txData)}`)
+  return txData
+}
+
+ConfirmSendEther.prototype.verifyGasParams = function () {
+  // We call this in case the gas has not been modified at all
+  if (!this.state) { return true }
+  return (
+    this._notZeroOrEmptyString(this.state.gas) &&
+    this._notZeroOrEmptyString(this.state.gasPrice)
+  )
+}
+
+ConfirmSendEther.prototype._notZeroOrEmptyString = function (obj) {
+  return obj !== '' && obj !== '0x0'
+}
+
+ConfirmSendEther.prototype.bnMultiplyByFraction = function (targetBN, numerator, denominator) {
+  const numBN = new BN(numerator)
+  const denomBN = new BN(denominator)
+  return targetBN.mul(numBN).div(denomBN)
+}
diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js
new file mode 100644
index 000000000..92bba8f62
--- /dev/null
+++ b/ui/app/components/pending-tx/confirm-send-token.js
@@ -0,0 +1,398 @@
+const Component = require('react').Component
+const { connect } = require('react-redux')
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const abi = require('human-standard-token-abi')
+const abiDecoder = require('abi-decoder')
+abiDecoder.addABI(abi)
+const actions = require('../../actions')
+const clone = require('clone')
+const Identicon = require('../identicon')
+const ethUtil = require('ethereumjs-util')
+const BN = ethUtil.BN
+const hexToBn = require('../../../../app/scripts/lib/hex-to-bn')
+const { conversionUtil } = require('../../conversion-util')
+
+const MIN_GAS_PRICE_GWEI_BN = new BN(1)
+const GWEI_FACTOR = new BN(1e9)
+const MIN_GAS_PRICE_BN = MIN_GAS_PRICE_GWEI_BN.mul(GWEI_FACTOR)
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(ConfirmSendToken)
+
+function mapStateToProps (state, ownProps) {
+  const { token: { symbol }, txData } = ownProps
+  const { txParams } = txData || {}
+  const tokenData = txParams.data && abiDecoder.decodeMethod(txParams.data)
+  const {
+    conversionRate,
+    identities,
+  } = state.metamask
+  const accounts = state.metamask.accounts
+  const selectedAddress = state.metamask.selectedAddress || Object.keys(accounts)[0]
+  const tokenExchangeRates = state.metamask.tokenExchangeRates
+  const pair = `${symbol.toLowerCase()}_eth`
+  const { rate: tokenExchangeRate = 0 } = tokenExchangeRates[pair] || {}
+
+  return {
+    conversionRate,
+    identities,
+    selectedAddress,
+    tokenExchangeRate,
+    tokenData: tokenData || {},
+  }
+}
+
+function mapDispatchToProps (dispatch, ownProps) {
+  const { token: { symbol } } = ownProps
+
+  return {
+    backToAccountDetail: address => dispatch(actions.backToAccountDetail(address)),
+    cancelTransaction: ({ id }) => dispatch(actions.cancelTx({ id })),
+    updateTokenExchangeRate: () => dispatch(actions.updateTokenExchangeRate(symbol)),
+  }
+}
+
+inherits(ConfirmSendToken, Component)
+function ConfirmSendToken () {
+  Component.call(this)
+  this.state = {}
+  this.onSubmit = this.onSubmit.bind(this)
+}
+
+ConfirmSendToken.prototype.componentWillMount = function () {
+  this.props.updateTokenExchangeRate()
+}
+
+ConfirmSendToken.prototype.getAmount = function () {
+  const { conversionRate, tokenExchangeRate, token, tokenData } = this.props
+  const { params = [] } = tokenData
+  const { value } = params[1] || {}
+  const { decimals } = token
+  const multiplier = Math.pow(10, Number(decimals || 0))
+  const sendTokenAmount = Number(value / multiplier)
+
+  return {
+    fiat: tokenExchangeRate
+      ? +(sendTokenAmount * tokenExchangeRate * conversionRate).toFixed(2)
+      : null,
+    token: +sendTokenAmount.toFixed(decimals),
+  }
+
+}
+
+ConfirmSendToken.prototype.getGasFee = function () {
+  const { conversionRate, tokenExchangeRate, token } = this.props
+  const txMeta = this.gatherTxMeta()
+  const txParams = txMeta.txParams || {}
+  const { decimals } = token
+
+  // Gas
+  const gas = txParams.gas
+  const gasBn = hexToBn(gas)
+
+  // Gas Price
+  const gasPrice = txParams.gasPrice || MIN_GAS_PRICE_BN.toString(16)
+  const gasPriceBn = hexToBn(gasPrice)
+  const txFeeBn = gasBn.mul(gasPriceBn)
+
+
+  const USD = conversionUtil(txFeeBn, {
+    fromNumericBase: 'BN',
+    toNumericBase: 'dec',
+    fromDenomination: 'WEI',
+    fromCurrency: 'ETH',
+    toCurrency: 'USD',
+    numberOfDecimals: 2,
+    conversionRate,
+  })
+  const ETH = conversionUtil(txFeeBn, {
+    fromNumericBase: 'BN',
+    toNumericBase: 'dec',
+    fromDenomination: 'WEI',
+    fromCurrency: 'ETH',
+    toCurrency: 'ETH',
+    numberOfDecimals: 6,
+    conversionRate,
+  })
+
+  return {
+    fiat: +Number(USD).toFixed(2),
+    eth: ETH,
+    token: tokenExchangeRate
+      ? +(ETH * tokenExchangeRate).toFixed(decimals)
+      : null,
+  }
+}
+
+ConfirmSendToken.prototype.getData = function () {
+  const { identities, tokenData } = this.props
+  const { params = [] } = tokenData
+  const { value } = params[0] || {}
+  const txMeta = this.gatherTxMeta()
+  const txParams = txMeta.txParams || {}
+
+  return {
+    from: {
+      address: txParams.from,
+      name: identities[txParams.from].name,
+    },
+    to: {
+      address: txParams.to,
+      name: identities[value] ? identities[value].name : 'New Recipient',
+    },
+    memo: txParams.memo || '',
+  }
+}
+
+ConfirmSendToken.prototype.renderHeroAmount = function () {
+  const { token: { symbol } } = this.props
+  const { fiat: fiatAmount, token: tokenAmount } = this.getAmount()
+  const txMeta = this.gatherTxMeta()
+  const txParams = txMeta.txParams || {}
+  const { memo = '' } = txParams
+
+  return fiatAmount
+    ? (
+      h('div.confirm-send-token__hero-amount-wrapper', [
+        h('h3.flex-center.confirm-screen-send-amount', `$${fiatAmount}`),
+        h('h3.flex-center.confirm-screen-send-amount-currency', 'USD'),
+        h('div.flex-center.confirm-memo-wrapper', [
+          h('h3.confirm-screen-send-memo', [ memo ? `"${memo}"` : '' ]),
+        ]),
+      ])
+    )
+    : (
+      h('div.confirm-send-token__hero-amount-wrapper', [
+        h('h3.flex-center.confirm-screen-send-amount', tokenAmount),
+        h('h3.flex-center.confirm-screen-send-amount-currency', symbol),
+        h('div.flex-center.confirm-memo-wrapper', [
+          h('h3.confirm-screen-send-memo', [ memo ? `"${memo}"` : '' ]),
+        ]),
+      ])
+    )
+}
+
+ConfirmSendToken.prototype.renderGasFee = function () {
+  const { token: { symbol } } = this.props
+  const { fiat: fiatGas, token: tokenGas, eth: ethGas } = this.getGasFee()
+
+  return (
+    h('section.flex-row.flex-center.confirm-screen-row', [
+      h('span.confirm-screen-label.confirm-screen-section-column', [ 'Gas Fee' ]),
+      h('div.confirm-screen-section-column', [
+        h('div.confirm-screen-row-info', `$${fiatGas} USD`),
+
+        h(
+          'div.confirm-screen-row-detail',
+          tokenGas ? `${tokenGas} ${symbol}` : `${ethGas} ETH`
+        ),
+      ]),
+    ])
+  )
+}
+
+ConfirmSendToken.prototype.renderTotalPlusGas = function () {
+  const { token: { symbol } } = this.props
+  const { fiat: fiatAmount, token: tokenAmount } = this.getAmount()
+  const { fiat: fiatGas, token: tokenGas } = this.getGasFee()
+
+  return fiatAmount && fiatGas
+    ? (
+      h('section.flex-row.flex-center.confirm-screen-total-box ', [
+        h('div.confirm-screen-section-column', [
+          h('span.confirm-screen-label', [ 'Total ' ]),
+          h('div.confirm-screen-total-box__subtitle', [ 'Amount + Gas' ]),
+        ]),
+
+        h('div.confirm-screen-section-column', [
+          h('div.confirm-screen-row-info', `$${fiatAmount + fiatGas} USD`),
+          h('div.confirm-screen-row-detail', `${tokenAmount + tokenGas} ${symbol}`),
+        ]),
+      ])
+    )
+    : (
+      h('section.flex-row.flex-center.confirm-screen-total-box ', [
+        h('div.confirm-screen-section-column', [
+          h('span.confirm-screen-label', [ 'Total ' ]),
+          h('div.confirm-screen-total-box__subtitle', [ 'Amount + Gas' ]),
+        ]),
+
+        h('div.confirm-screen-section-column', [
+          h('div.confirm-screen-row-info', `${tokenAmount} ${symbol}`),
+          h('div.confirm-screen-row-detail', `+ ${fiatGas} USD Gas`),
+        ]),
+      ])
+    )
+}
+
+ConfirmSendToken.prototype.render = function () {
+  const { backToAccountDetail, selectedAddress } = this.props
+  const txMeta = this.gatherTxMeta()
+  const txParams = txMeta.txParams || {}
+
+  const {
+    from: {
+      address: fromAddress,
+      name: fromName,
+    },
+    to: {
+      address: toAddress,
+      name: toName,
+    },
+  } = this.getData()
+
+  this.inputs = []
+
+  return (
+    h('div.confirm-screen-container', {
+      style: { minWidth: '355px' },
+    }, [
+      // Main Send token Card
+      h('div.confirm-screen-wrapper.flex-column.flex-grow', [
+        h('h3.flex-center.confirm-screen-header', [
+          h('button.confirm-screen-back-button', {
+            onClick: () => backToAccountDetail(selectedAddress),
+          }, 'BACK'),
+          h('div.confirm-screen-title', 'Confirm Transaction'),
+          h('div.confirm-screen-header-tip'),
+        ]),
+        h('div.flex-row.flex-center.confirm-screen-identicons', [
+          h('div.confirm-screen-account-wrapper', [
+            h(
+              Identicon,
+              {
+                address: fromAddress,
+                diameter: 60,
+              },
+            ),
+            h('span.confirm-screen-account-name', fromName),
+            // h('span.confirm-screen-account-number', fromAddress.slice(fromAddress.length - 4)),
+          ]),
+          h('i.fa.fa-arrow-right.fa-lg'),
+          h('div.confirm-screen-account-wrapper', [
+            h(
+              Identicon,
+              {
+                address: txParams.to,
+                diameter: 60,
+              },
+            ),
+            h('span.confirm-screen-account-name', toName),
+            // h('span.confirm-screen-account-number', toAddress.slice(toAddress.length - 4)),
+          ]),
+        ]),
+
+        // h('h3.flex-center.confirm-screen-sending-to-message', {
+        //   style: {
+        //     textAlign: 'center',
+        //     fontSize: '16px',
+        //   },
+        // }, [
+          // `You're sending to Recipient ...${toAddress.slice(toAddress.length - 4)}`,
+        // ]),
+
+        this.renderHeroAmount(),
+
+        h('div.confirm-screen-rows', [
+          h('section.flex-row.flex-center.confirm-screen-row', [
+            h('span.confirm-screen-label.confirm-screen-section-column', [ 'From' ]),
+            h('div.confirm-screen-section-column', [
+              h('div.confirm-screen-row-info', fromName),
+              h('div.confirm-screen-row-detail', `...${fromAddress.slice(fromAddress.length - 4)}`),
+            ]),
+          ]),
+
+          h('section.flex-row.flex-center.confirm-screen-row', [
+            h('span.confirm-screen-label.confirm-screen-section-column', [ 'To' ]),
+            h('div.confirm-screen-section-column', [
+              h('div.confirm-screen-row-info', toName),
+              h('div.confirm-screen-row-detail', `...${toAddress.slice(toAddress.length - 4)}`),
+            ]),
+          ]),
+
+          this.renderGasFee(),
+
+          this.renderTotalPlusGas(),
+
+        ]),
+      ]),
+
+      h('form#pending-tx-form', {
+        onSubmit: this.onSubmit,
+      }, [
+        // Cancel Button
+        h('div.cancel.btn-light.confirm-screen-cancel-button', {
+          onClick: (event) => this.cancel(event, txMeta),
+        }, 'CANCEL'),
+
+        // Accept Button
+        h('button.confirm-screen-confirm-button', ['CONFIRM']),
+      ]),
+
+
+    ])
+  )
+}
+
+ConfirmSendToken.prototype.onSubmit = function (event) {
+  event.preventDefault()
+  const txMeta = this.gatherTxMeta()
+  const valid = this.checkValidity()
+  this.setState({ valid, submitting: true })
+
+  if (valid && this.verifyGasParams()) {
+    this.props.sendTransaction(txMeta, event)
+  } else {
+    this.props.dispatch(actions.displayWarning('Invalid Gas Parameters'))
+    this.setState({ submitting: false })
+  }
+}
+
+ConfirmSendToken.prototype.cancel = function (event, txMeta) {
+  event.preventDefault()
+  this.props.cancelTransaction(txMeta)
+}
+
+ConfirmSendToken.prototype.checkValidity = function () {
+  const form = this.getFormEl()
+  const valid = form.checkValidity()
+  return valid
+}
+
+ConfirmSendToken.prototype.getFormEl = function () {
+  const form = document.querySelector('form#pending-tx-form')
+  // Stub out form for unit tests:
+  if (!form) {
+    return { checkValidity () { return true } }
+  }
+  return form
+}
+
+// After a customizable state value has been updated,
+ConfirmSendToken.prototype.gatherTxMeta = function () {
+  const props = this.props
+  const state = this.state
+  const txData = clone(state.txData) || clone(props.txData)
+
+  // log.debug(`UI has defaulted to tx meta ${JSON.stringify(txData)}`)
+  return txData
+}
+
+ConfirmSendToken.prototype.verifyGasParams = function () {
+  // We call this in case the gas has not been modified at all
+  if (!this.state) { return true }
+  return (
+    this._notZeroOrEmptyString(this.state.gas) &&
+    this._notZeroOrEmptyString(this.state.gasPrice)
+  )
+}
+
+ConfirmSendToken.prototype._notZeroOrEmptyString = function (obj) {
+  return obj !== '' && obj !== '0x0'
+}
+
+ConfirmSendToken.prototype.bnMultiplyByFraction = function (targetBN, numerator, denominator) {
+  const numBN = new BN(numerator)
+  const denomBN = new BN(denominator)
+  return targetBN.mul(numBN).div(denomBN)
+}
diff --git a/ui/app/components/pending-tx/index.js b/ui/app/components/pending-tx/index.js
new file mode 100644
index 000000000..770fb1dfd
--- /dev/null
+++ b/ui/app/components/pending-tx/index.js
@@ -0,0 +1,148 @@
+const Component = require('react').Component
+const { connect } = require('react-redux')
+const h = require('react-hyperscript')
+const clone = require('clone')
+const abi = require('human-standard-token-abi')
+const abiDecoder = require('abi-decoder')
+abiDecoder.addABI(abi)
+const inherits = require('util').inherits
+const actions = require('../../actions')
+const util = require('../../util')
+const ConfirmSendEther = require('./confirm-send-ether')
+const ConfirmSendToken = require('./confirm-send-token')
+const ConfirmDeployContract = require('./confirm-deploy-contract')
+
+const TX_TYPES = {
+  DEPLOY_CONTRACT: 'deploy_contract',
+  SEND_ETHER: 'send_ether',
+  SEND_TOKEN: 'send_token',
+}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(PendingTx)
+
+function mapStateToProps (state) {
+  const {
+    conversionRate,
+    identities,
+  } = state.metamask
+  const accounts = state.metamask.accounts
+  const selectedAddress = state.metamask.selectedAddress || Object.keys(accounts)[0]
+  return {
+    conversionRate,
+    identities,
+    selectedAddress,
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    setCurrentCurrencyToUSD: () => dispatch(actions.setCurrentCurrency('usd')),
+    backToAccountDetail: address => dispatch(actions.backToAccountDetail(address)),
+    cancelTransaction: ({ id }) => dispatch(actions.cancelTx({ id })),
+  }
+}
+
+inherits(PendingTx, Component)
+function PendingTx () {
+  Component.call(this)
+  this.state = {
+    isFetching: true,
+    transactionType: '',
+    tokenAddress: '',
+    tokenSymbol: '',
+    tokenDecimals: '',
+  }
+}
+
+PendingTx.prototype.componentWillMount = async function () {
+  const txMeta = this.gatherTxMeta()
+  const txParams = txMeta.txParams || {}
+
+  this.props.setCurrentCurrencyToUSD()
+
+  if (!txParams.to) {
+    return this.setState({
+      transactionType: TX_TYPES.DEPLOY_CONTRACT,
+      isFetching: false,
+    })
+  }
+
+  try {
+    const token = util.getContractAtAddress(txParams.to)
+    const results = await Promise.all([
+      token.symbol(),
+      token.decimals(),
+    ])
+
+    const [ symbol, decimals ] = results
+
+    if (symbol[0] && decimals[0]) {
+      this.setState({
+        transactionType: TX_TYPES.SEND_TOKEN,
+        tokenAddress: txParams.to,
+        tokenSymbol: symbol[0],
+        tokenDecimals: decimals[0],
+        isFetching: false,
+      })
+    } else {
+      this.setState({
+        transactionType: TX_TYPES.SEND_ETHER,
+        isFetching: false,
+      })
+    }
+  } catch (e) {
+    this.setState({
+      transactionType: TX_TYPES.SEND_ETHER,
+      isFetching: false,
+    })
+  }
+}
+
+PendingTx.prototype.gatherTxMeta = function () {
+  const props = this.props
+  const state = this.state
+  const txData = clone(state.txData) || clone(props.txData)
+
+  return txData
+}
+
+PendingTx.prototype.render = function () {
+  const {
+    isFetching,
+    transactionType,
+    tokenAddress,
+    tokenSymbol,
+    tokenDecimals,
+  } = this.state
+
+  const { sendTransaction } = this.props
+
+  if (isFetching) {
+    return h('noscript')
+  }
+
+  switch (transactionType) {
+    case TX_TYPES.SEND_ETHER:
+      return h(ConfirmSendEther, {
+        txData: this.gatherTxMeta(),
+        sendTransaction,
+      })
+    case TX_TYPES.SEND_TOKEN:
+      return h(ConfirmSendToken, {
+        txData: this.gatherTxMeta(),
+        sendTransaction,
+        token: {
+          address: tokenAddress,
+          symbol: tokenSymbol,
+          decimals: tokenDecimals,
+        },
+      })
+    case TX_TYPES.DEPLOY_CONTRACT:
+      return h(ConfirmDeployContract, {
+        txData: this.gatherTxMeta(),
+        sendTransaction,
+      })
+    default:
+      return h('noscript')
+  }
+}
diff --git a/ui/app/components/qr-code.js b/ui/app/components/qr-code.js
index 06b9aed9b..cc723df14 100644
--- a/ui/app/components/qr-code.js
+++ b/ui/app/components/qr-code.js
@@ -4,13 +4,13 @@ const qrCode = require('qrcode-npm').qrcode
 const inherits = require('util').inherits
 const connect = require('react-redux').connect
 const isHexPrefixed = require('ethereumjs-util').isHexPrefixed
-const CopyButton = require('./copyButton')
+const ReadOnlyInput = require('./readonly-input')
 
 module.exports = connect(mapStateToProps)(QrCodeView)
 
 function mapStateToProps (state) {
   return {
-    Qr: state.appState.Qr,
+    // Qr code is not fetched from state. 'message' and 'data' props are passed instead.
     buyView: state.appState.buyView,
     warning: state.appState.warning,
   }
@@ -29,46 +29,29 @@ QrCodeView.prototype.render = function () {
   const qrImage = qrCode(4, 'M')
   qrImage.addData(address)
   qrImage.make()
-  return h('.main-container.flex-column', {
-    key: 'qr',
+  return h('.div.flex-column.flex-center', {
     style: {
-      justifyContent: 'center',
-      paddingBottom: '45px',
-      paddingLeft: '45px',
-      paddingRight: '45px',
-      alignItems: 'center',
     },
   }, [
     Array.isArray(Qr.message) ? h('.message-container', this.renderMultiMessage()) : h('.qr-header', Qr.message),
 
     this.props.warning ? this.props.warning && h('span.error.flex-center', {
       style: {
-        textAlign: 'center',
-        width: '229px',
-        height: '82px',
       },
     },
     this.props.warning) : null,
 
-    h('#qr-container.flex-column', {
-      style: {
-        marginTop: '25px',
-        marginBottom: '15px',
-      },
+    h('.div.qr-wrapper', {
+      style: {},
       dangerouslySetInnerHTML: {
         __html: qrImage.createTableTag(4),
       },
     }),
-    h('.flex-row', [
-      h('h3.ellip-address', {
-        style: {
-          width: '247px',
-        },
-      }, Qr.data),
-      h(CopyButton, {
-        value: Qr.data,
-      }),
-    ]),
+    h(ReadOnlyInput, {
+      wrapperClass: 'ellip-address-wrapper',
+      inputClass: 'qr-ellip-address',
+      value: Qr.data,
+    }),
   ])
 }
 
diff --git a/ui/app/components/readonly-input.js b/ui/app/components/readonly-input.js
new file mode 100644
index 000000000..fcf05fb9e
--- /dev/null
+++ b/ui/app/components/readonly-input.js
@@ -0,0 +1,33 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+
+module.exports = ReadOnlyInput
+
+inherits(ReadOnlyInput, Component)
+function ReadOnlyInput () {
+  Component.call(this)
+}
+
+ReadOnlyInput.prototype.render = function () {
+  const {
+    wrapperClass = '',
+    inputClass = '',
+    value,
+    textarea,
+    onClick,
+  } = this.props
+
+  const inputType = textarea ? 'textarea' : 'input'
+
+  return h('div', {className: wrapperClass}, [
+    h(inputType, {
+      className: inputClass,
+      value,
+      readOnly: true,
+      onFocus: event => event.target.select(),
+      onClick,
+    }),
+  ])
+}
+
diff --git a/ui/app/components/send-token/index.js b/ui/app/components/send-token/index.js
new file mode 100644
index 000000000..a95a0a6d8
--- /dev/null
+++ b/ui/app/components/send-token/index.js
@@ -0,0 +1,440 @@
+const Component = require('react').Component
+const connect = require('react-redux').connect
+const h = require('react-hyperscript')
+const classnames = require('classnames')
+const abi = require('ethereumjs-abi')
+const inherits = require('util').inherits
+const actions = require('../../actions')
+const selectors = require('../../selectors')
+const { isValidAddress, allNull } = require('../../util')
+
+// const BalanceComponent = require('./balance-component')
+const Identicon = require('../identicon')
+const TokenBalance = require('../token-balance')
+const CurrencyToggle = require('../send/currency-toggle')
+const GasTooltip = require('../send/gas-tooltip')
+const GasFeeDisplay = require('../send/gas-fee-display')
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(SendTokenScreen)
+
+function mapStateToProps (state) {
+  // const sidebarOpen = state.appState.sidebarOpen
+
+  const { warning } = state.appState
+  const identities = state.metamask.identities
+  const addressBook = state.metamask.addressBook
+  const conversionRate = state.metamask.conversionRate
+  const currentBlockGasLimit = state.metamask.currentBlockGasLimit
+  const accounts = state.metamask.accounts
+  const selectedTokenAddress = state.metamask.selectedTokenAddress
+  const selectedAddress = state.metamask.selectedAddress || Object.keys(accounts)[0]
+  const selectedToken = selectors.getSelectedToken(state)
+  const tokenExchangeRates = state.metamask.tokenExchangeRates
+  const pair = `${selectedToken.symbol.toLowerCase()}_eth`
+  const { rate: tokenExchangeRate = 0 } = tokenExchangeRates[pair] || {}
+
+  return {
+    selectedAddress,
+    selectedTokenAddress,
+    identities,
+    addressBook,
+    conversionRate,
+    tokenExchangeRate,
+    currentBlockGasLimit,
+    selectedToken,
+    warning,
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    backToAccountDetail: address => dispatch(actions.backToAccountDetail(address)),
+    hideWarning: () => dispatch(actions.hideWarning()),
+    addToAddressBook: (recipient, nickname) => dispatch(
+      actions.addToAddressBook(recipient, nickname)
+    ),
+    signTx: txParams => dispatch(actions.signTx(txParams)),
+    signTokenTx: (tokenAddress, toAddress, amount, txData) => (
+      dispatch(actions.signTokenTx(tokenAddress, toAddress, amount, txData))
+    ),
+    updateTokenExchangeRate: token => dispatch(actions.updateTokenExchangeRate(token)),
+    estimateGas: params => dispatch(actions.estimateGas(params)),
+    getGasPrice: () => dispatch(actions.getGasPrice()),
+  }
+}
+
+inherits(SendTokenScreen, Component)
+function SendTokenScreen () {
+  Component.call(this)
+  this.state = {
+    to: '',
+    amount: '0x0',
+    amountToSend: '0x0',
+    selectedCurrency: 'USD',
+    isGasTooltipOpen: false,
+    gasPrice: null,
+    gasLimit: null,
+    errors: {},
+  }
+}
+
+SendTokenScreen.prototype.componentWillMount = function () {
+  const {
+    updateTokenExchangeRate,
+    selectedToken: { symbol },
+    getGasPrice,
+    estimateGas,
+    selectedAddress,
+  } = this.props
+
+  updateTokenExchangeRate(symbol)
+
+  const data = Array.prototype.map.call(
+    abi.rawEncode(['address', 'uint256'], [selectedAddress, '0x0']),
+    x => ('00' + x.toString(16)).slice(-2)
+  ).join('')
+
+  console.log(data)
+  Promise.all([
+    getGasPrice(),
+    estimateGas({
+      from: selectedAddress,
+      value: '0x0',
+      gas: '746a528800',
+      data,
+    }),
+  ])
+  .then(([blockGasPrice, estimatedGas]) => {
+    console.log({ blockGasPrice, estimatedGas})
+    this.setState({
+      gasPrice: blockGasPrice,
+      gasLimit: estimatedGas,
+    })
+  })
+}
+
+SendTokenScreen.prototype.validate = function () {
+  const {
+    to,
+    amount: stringAmount,
+    gasPrice: hexGasPrice,
+    gasLimit: hexGasLimit,
+  } = this.state
+
+  const gasPrice = parseInt(hexGasPrice, 16)
+  const gasLimit = parseInt(hexGasLimit, 16) / 1000000000
+  const amount = Number(stringAmount)
+
+  const errors = {
+    to: !to ? 'Required' : null,
+    amount: !amount ? 'Required' : null,
+    gasPrice: !gasPrice ? 'Gas Price Required' : null,
+    gasLimit: !gasLimit ? 'Gas Limit Required' : null,
+  }
+
+  if (to && !isValidAddress(to)) {
+    errors.to = 'Invalid address'
+  }
+
+  const isValid = Object.entries(errors).every(([key, value]) => value === null)
+  return {
+    isValid,
+    errors: isValid ? {} : errors,
+  }
+}
+
+SendTokenScreen.prototype.setErrorsFor = function (field) {
+  const { balance, selectedToken } = this.props
+  const { errors: previousErrors } = this.state
+
+  const {
+    isValid,
+    errors: newErrors
+  } = this.validate()
+
+  const nextErrors = Object.assign({}, previousErrors, {
+    [field]: newErrors[field] || null
+  })
+
+  if (!isValid) {
+    this.setState({
+      errors: nextErrors,
+      isValid,
+    })
+  }
+}
+
+SendTokenScreen.prototype.clearErrorsFor = function (field) {
+  const { errors: previousErrors } = this.state
+  const nextErrors = Object.assign({}, previousErrors, {
+    [field]: null
+  })
+
+  this.setState({
+    errors: nextErrors,
+    isValid: allNull(nextErrors),
+  })
+}
+
+SendTokenScreen.prototype.getAmountToSend = function (amount, selectedToken) {
+  const { decimals } = selectedToken || {}
+  const multiplier = Math.pow(10, Number(decimals || 0))
+  const sendAmount = '0x' + Number(amount * multiplier).toString(16)
+  return sendAmount
+}
+
+SendTokenScreen.prototype.submit = function () {
+  const {
+    to,
+    amount,
+    gasPrice,
+    gasLimit,
+  } = this.state
+
+  const {
+    identities,
+    selectedAddress,
+    selectedTokenAddress,
+    hideWarning,
+    addToAddressBook,
+    signTokenTx,
+    selectedToken,
+  } = this.props
+
+  const { nickname = ' ' } = identities[to] || {}
+
+  hideWarning()
+  addToAddressBook(to, nickname)
+
+  const txParams = {
+    from: selectedAddress,
+    value: '0',
+    gas: gasLimit,
+    gasPrice: gasPrice,
+  }
+
+  const sendAmount = this.getAmountToSend(amount, selectedToken)
+
+  signTokenTx(selectedTokenAddress, to, sendAmount, txParams)
+}
+
+SendTokenScreen.prototype.renderToAddressInput = function () {
+  const {
+    identities,
+    addressBook,
+  } = this.props
+
+  const {
+    to,
+    errors: { to: errorMessage },
+  } = this.state
+
+  return h('div', {
+    className: classnames('send-screen-input-wrapper', {
+      'send-screen-input-wrapper--error': errorMessage,
+    }),
+  }, [
+    h('div', ['To:']),
+    h('input.large-input.send-screen-input', {
+      name: 'address',
+      list: 'addresses',
+      placeholder: 'Address',
+      value: to,
+      onChange: e => this.setState({
+        to: e.target.value,
+        errors: {},
+      }),
+      onBlur: () => {
+        this.setErrorsFor('to')
+      },
+      onFocus: event => {
+        if (to) event.target.select()
+        this.clearErrorsFor('to')
+      },
+    }),
+    h('datalist#addresses', [
+      // Corresponds to the addresses owned.
+      Object.entries(identities).map(([key, { address, name }]) => {
+        return h('option', {
+          value: address,
+          label: name,
+          key: address,
+        })
+      }),
+      addressBook.map(({ address, name }) => {
+        return h('option', {
+          value: address,
+          label: name,
+          key: address,
+        })
+      }),
+    ]),
+    h('div.send-screen-input-wrapper__error-message', [ errorMessage ]),
+  ])
+}
+
+SendTokenScreen.prototype.renderAmountInput = function () {
+  const {
+    selectedCurrency,
+    amount,
+    errors: { amount: errorMessage },
+  } = this.state
+
+  const {
+    tokenExchangeRate,
+    selectedToken: {symbol},
+  } = this.props
+
+  return h('div.send-screen-input-wrapper', {
+    className: classnames('send-screen-input-wrapper', {
+      'send-screen-input-wrapper--error': errorMessage,
+    }),
+  }, [
+    h('div.send-screen-amount-labels', [
+      h('span', ['Amount']),
+      h(CurrencyToggle, {
+        currentCurrency: tokenExchangeRate ? selectedCurrency : 'USD',
+        currencies: tokenExchangeRate ? [ symbol, 'USD' ] : [],
+        onClick: currency => this.setState({ selectedCurrency: currency }),
+      }),
+    ]),
+    h('input.large-input.send-screen-input', {
+      placeholder: `0 ${symbol}`,
+      type: 'number',
+      value: amount,
+      onChange: e => this.setState({
+        amount: e.target.value,
+      }),
+      onBlur: () => {
+        this.setErrorsFor('amount')
+      },
+      onFocus: () => this.clearErrorsFor('amount'),
+    }),
+    h('div.send-screen-input-wrapper__error-message', [ errorMessage ]),
+  ])
+}
+
+SendTokenScreen.prototype.renderGasInput = function () {
+  const {
+    isGasTooltipOpen,
+    gasPrice,
+    gasLimit,
+    selectedCurrency,
+    errors: {
+      gasPrice: gasPriceErrorMessage,
+      gasLimit: gasLimitErrorMessage,
+    },
+  } = this.state
+
+  const {
+    conversionRate,
+    tokenExchangeRate,
+    currentBlockGasLimit,
+  } = this.props
+
+  return h('div.send-screen-input-wrapper', {
+    className: classnames('send-screen-input-wrapper', {
+      'send-screen-input-wrapper--error': gasPriceErrorMessage || gasLimitErrorMessage,
+    }),
+  }, [
+    isGasTooltipOpen && h(GasTooltip, {
+      className: 'send-tooltip',
+      gasPrice: gasPrice || '0x0',
+      gasLimit: gasLimit || '0x0',
+      onClose: () => this.setState({ isGasTooltipOpen: false }),
+      onFeeChange: ({ gasLimit, gasPrice }) => {
+        this.setState({ gasLimit, gasPrice, errors: {} })
+      },
+      onBlur: () => {
+        this.setErrorsFor('gasLimit')
+        this.setErrorsFor('gasPrice')
+      },
+      onFocus: () => {
+        this.clearErrorsFor('gasLimit')
+        this.clearErrorsFor('gasPrice')
+      },
+    }),
+
+    h('div.send-screen-gas-labels', {}, [
+      h('span', [ h('i.fa.fa-bolt'), 'Gas fee:']),
+      h('span', ['What\'s this?']),
+    ]),
+    h('div.large-input.send-screen-gas-input', [
+      h(GasFeeDisplay, {
+        conversionRate,
+        tokenExchangeRate,
+        gasPrice: gasPrice || '0x0',
+        activeCurrency: selectedCurrency,
+        gas: gasLimit || '0x0',
+        blockGasLimit: currentBlockGasLimit,
+      }),
+      h(
+        'div.send-screen-gas-input-customize',
+        { onClick: () => this.setState({ isGasTooltipOpen: !isGasTooltipOpen }) },
+        ['Customize']
+      ),
+    ]),
+    h('div.send-screen-input-wrapper__error-message', [
+      gasPriceErrorMessage || gasLimitErrorMessage,
+    ]),
+  ])
+}
+
+SendTokenScreen.prototype.renderMemoInput = function () {
+  return h('div.send-screen-input-wrapper', [
+    h('div', {}, ['Transaction memo (optional)']),
+    h(
+      'input.large-input.send-screen-input',
+      { onChange: e => this.setState({ memo: e.target.value }) }
+    ),
+  ])
+}
+
+SendTokenScreen.prototype.renderButtons = function () {
+  const { selectedAddress, backToAccountDetail } = this.props
+  const { isValid } = this.validate()
+
+  return h('div.send-token__button-group', [
+    h('button.send-token__button-next.btn-secondary', {
+      className: !isValid && 'send-screen__send-button__disabled',
+      onClick: () => isValid && this.submit(),
+    }, ['Next']),
+    h('button.send-token__button-cancel.btn-tertiary', {
+      onClick: () => backToAccountDetail(selectedAddress),
+    }, ['Cancel']),
+  ])
+}
+
+SendTokenScreen.prototype.render = function () {
+  const {
+    selectedTokenAddress,
+    selectedToken,
+    warning,
+  } = this.props
+
+  return h('div.send-token', [
+    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(),
+      warning && h('div.send-screen-input-wrapper--error', {}, 
+        h('div.send-screen-input-wrapper__error-message', [
+          warning,
+        ])
+      ),
+    ]),
+    this.renderButtons(),
+  ])
+}
diff --git a/ui/app/components/send/account-list-item.js b/ui/app/components/send/account-list-item.js
new file mode 100644
index 000000000..64acde767
--- /dev/null
+++ b/ui/app/components/send/account-list-item.js
@@ -0,0 +1,66 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const connect = require('react-redux').connect
+const Identicon = require('../identicon')
+const CurrencyDisplay = require('./currency-display')
+const { conversionRateSelector } = require('../../selectors')
+
+inherits(AccountListItem, Component)
+function AccountListItem () {
+  Component.call(this)
+}
+
+function mapStateToProps(state) {
+  return {
+    conversionRate: conversionRateSelector(state)
+  }
+}
+
+module.exports = connect(mapStateToProps)(AccountListItem)
+
+AccountListItem.prototype.render = function () {
+  const {
+    account, 
+    handleClick, 
+    icon = null,
+    conversionRate,
+  } = this.props
+
+  const { name, address, balance } = account
+
+  return h('div.account-list-item', {
+    onClick: () => handleClick({ name, address, balance }),
+  }, [
+
+    h('div.account-list-item__top-row', {}, [
+
+      h(
+        Identicon,
+        {
+          address,
+          diameter: 18,
+          className: 'account-list-item__identicon',
+        },
+      ),
+
+      h('div.account-list-item__account-name', {}, name),
+
+      icon && h('div.account-list-item__icon', [icon]),
+
+    ]),
+
+    h(CurrencyDisplay, {
+      primaryCurrency: 'ETH',
+      convertedCurrency: 'USD',
+      value: balance,
+      conversionRate,
+      convertedPrefix: '$',
+      readOnly: true,
+      className: 'account-list-item__account-balances',
+      primaryBalanceClassName: 'account-list-item__account-primary-balance',
+      convertedBalanceClassName: 'account-list-item__account-secondary-balance',
+    }, name),
+
+  ])
+}
\ No newline at end of file
diff --git a/ui/app/components/send/currency-display.js b/ui/app/components/send/currency-display.js
new file mode 100644
index 000000000..f7fbb2379
--- /dev/null
+++ b/ui/app/components/send/currency-display.js
@@ -0,0 +1,126 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const Identicon = require('../identicon')
+const { conversionUtil } = require('../../conversion-util')
+
+module.exports = CurrencyDisplay
+
+inherits(CurrencyDisplay, Component)
+function CurrencyDisplay () {
+  Component.call(this)
+
+  this.state = {
+    value: null,
+  }
+}
+
+function isValidInput (text) {
+  const re = /^([1-9]\d*|0)(\.|\.\d*)?$/
+  return re.test(text)
+}
+
+function resetCaretIfPastEnd (value, event) {
+  const caretPosition = event.target.selectionStart
+
+  if (caretPosition > value.length) {
+    event.target.setSelectionRange(value.length, value.length)
+  }
+}
+
+function toHexWei (value) {
+  return conversionUtil(value, {
+    fromNumericBase: 'dec',
+    toNumericBase: 'hex',
+    toDenomination: 'WEI',
+  })
+}
+
+CurrencyDisplay.prototype.render = function () {
+  const {
+    className = 'currency-display',
+    primaryBalanceClassName = 'currency-display__input',
+    convertedBalanceClassName = 'currency-display__converted-value',
+    conversionRate,
+    primaryCurrency,
+    convertedCurrency,
+    convertedPrefix = '',
+    placeholder = '0',
+    readOnly = false,
+    inError = false,
+    value: initValue,
+    handleChange,
+    validate,
+  } = this.props
+  const { value } = this.state
+
+  const initValueToRender = conversionUtil(initValue, {
+    fromNumericBase: 'hex',
+    toNumericBase: 'dec',
+    fromDenomination: 'WEI',
+    numberOfDecimals: 6,
+    conversionRate,
+  })
+
+  const convertedValue = conversionUtil(value || initValueToRender, {
+    fromNumericBase: 'dec',
+    fromCurrency: primaryCurrency,
+    toCurrency: convertedCurrency,
+    numberOfDecimals: 2,
+    conversionRate,
+  })
+
+  return h('div', {
+    className,
+    style: {
+      borderColor: inError ? 'red' : null,
+    },
+  }, [
+
+    h('div.currency-display__primary-row', [
+
+      h('div.currency-display__input-wrapper', [
+
+        h('input', {
+          className: primaryBalanceClassName,
+          value: `${value || initValueToRender} ${primaryCurrency}`,
+          placeholder: `${0} ${primaryCurrency}`,
+          readOnly,
+          onChange: (event) => {
+            let newValue = event.target.value.split(' ')[0]
+
+            if (newValue === '') {
+              this.setState({ value: '0' })
+            }
+            else if (newValue.match(/^0[1-9]$/)) {
+              this.setState({ value: newValue.match(/[1-9]/)[0] })
+            }
+            else if (newValue && !isValidInput(newValue)) {
+              event.preventDefault()
+            }
+            else {
+              this.setState({ value: newValue })
+            }
+          },
+          onBlur: event => !readOnly && handleChange(toHexWei(event.target.value.split(' ')[0])),
+          onKeyUp: event => {
+            if (!readOnly) {
+              validate(toHexWei(value || initValueToRender))
+              resetCaretIfPastEnd(value || initValueToRender, event)
+            }
+          },
+          onClick: event => !readOnly && resetCaretIfPastEnd(value || initValueToRender, event),
+        }),
+
+      ]),
+
+    ]),
+
+    h('div', {
+      className: convertedBalanceClassName,
+    }, `${convertedPrefix}${convertedValue} ${convertedCurrency}`),
+
+  ])
+    
+}
+
diff --git a/ui/app/components/send/currency-toggle.js b/ui/app/components/send/currency-toggle.js
new file mode 100644
index 000000000..7aaccd490
--- /dev/null
+++ b/ui/app/components/send/currency-toggle.js
@@ -0,0 +1,44 @@
+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)
+function CurrencyToggle () {
+  Component.call(this)
+}
+
+const defaultCurrencies = [ 'ETH', 'USD' ]
+
+CurrencyToggle.prototype.renderToggles = function () {
+  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 === activeCurrency,
+      }),
+      onClick: () => onClick(currencyA),
+    }, [ currencyA ]),
+    '<>',
+    h('span', {
+      className: classnames('currency-toggle__item', {
+        'currency-toggle__item--selected': currencyB === activeCurrency,
+      }),
+      onClick: () => onClick(currencyB),
+    }, [ currencyB ]),
+  ]
+}
+
+CurrencyToggle.prototype.render = function () {
+  const currencies = this.props.currencies || defaultCurrencies
+
+  return h('span.currency-toggle', currencies.length
+    ? this.renderToggles()
+    : []
+  )
+}
+
diff --git a/ui/app/components/send/eth-fee-display.js b/ui/app/components/send/eth-fee-display.js
new file mode 100644
index 000000000..8b4cec16c
--- /dev/null
+++ b/ui/app/components/send/eth-fee-display.js
@@ -0,0 +1,37 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const EthBalance = require('../eth-balance')
+const { getTxFeeBn } = require('../../util')
+
+module.exports = EthFeeDisplay
+
+inherits(EthFeeDisplay, Component)
+function EthFeeDisplay () {
+  Component.call(this)
+}
+
+EthFeeDisplay.prototype.render = function () {
+  const {
+    activeCurrency,
+    conversionRate,
+    gas,
+    gasPrice,
+    blockGasLimit,
+  } = this.props
+
+  return h(EthBalance, {
+    value: getTxFeeBn(gas, gasPrice, blockGasLimit),
+    currentCurrency: activeCurrency,
+    conversionRate,
+    showFiat: false,
+    hideTooltip: true,
+    styleOveride: {
+      color: '#5d5d5d',
+      fontSize: '16px',
+      fontFamily: 'DIN OT',
+      lineHeight: '22.4px'
+    }
+  })
+}
+
diff --git a/ui/app/components/send/from-dropdown.js b/ui/app/components/send/from-dropdown.js
new file mode 100644
index 000000000..6f2b9da68
--- /dev/null
+++ b/ui/app/components/send/from-dropdown.js
@@ -0,0 +1,74 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const Identicon = require('../identicon')
+const AccountListItem = require('./account-list-item')
+
+module.exports = FromDropdown
+
+inherits(FromDropdown, Component)
+function FromDropdown () {
+  Component.call(this)
+}
+
+FromDropdown.prototype.getListItemIcon = function (currentAccount, selectedAccount) {
+  const listItemIcon = h(`i.fa.fa-check.fa-lg`, { style: { color: '#02c9b1' } })
+
+  return currentAccount.address === selectedAccount.address
+    ? listItemIcon
+    : null
+}
+
+FromDropdown.prototype.renderDropdown = function () {
+  const {
+    accounts,
+    selectedAccount,
+    closeDropdown,
+    onSelect,
+  } = this.props
+
+  return h('div', {}, [
+
+    h('div.send-v2__from-dropdown__close-area', {
+      onClick: closeDropdown,
+    }),
+
+    h('div.send-v2__from-dropdown__list', {}, [
+
+      ...accounts.map(account => h(AccountListItem, {
+        account, 
+        handleClick: () => {
+          onSelect(account)
+          closeDropdown()
+        }, 
+        icon: this.getListItemIcon(account, selectedAccount),
+      }))
+
+    ]),
+
+  ])
+}
+
+FromDropdown.prototype.render = function () {
+  const {
+    accounts,
+    selectedAccount,
+    openDropdown,
+    closeDropdown,
+    dropdownOpen,
+  } = this.props
+
+  return h('div.send-v2__from-dropdown', {}, [
+
+    h(AccountListItem, {
+      account: selectedAccount,
+      handleClick: openDropdown,
+      icon: h(`i.fa.fa-caret-down.fa-lg`, { style: { color: '#dedede' } })
+    }),
+
+    dropdownOpen && this.renderDropdown(),
+
+  ])
+    
+}
+
diff --git a/ui/app/components/send/gas-fee-display-v2.js b/ui/app/components/send/gas-fee-display-v2.js
new file mode 100644
index 000000000..7c3913c7f
--- /dev/null
+++ b/ui/app/components/send/gas-fee-display-v2.js
@@ -0,0 +1,42 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const CurrencyDisplay = require('./currency-display')
+
+module.exports = GasFeeDisplay
+
+inherits(GasFeeDisplay, Component)
+function GasFeeDisplay () {
+  Component.call(this)
+}
+
+GasFeeDisplay.prototype.render = function () {
+  const {
+    conversionRate,
+    gasTotal,
+    onClick,
+  } = this.props
+
+  return h('div', [
+
+    gasTotal
+      ? h(CurrencyDisplay, {
+        primaryCurrency: 'ETH',
+        convertedCurrency: 'USD',
+        value: gasTotal,
+        conversionRate,
+        convertedPrefix: '$',
+        readOnly: true,
+      })
+      : h('div.currency-display', 'Loading...')
+    ,
+
+    h('div.send-v2__sliders-icon-container', {
+      onClick,
+    }, [
+      h('i.fa.fa-sliders.send-v2__sliders-icon'),
+    ])
+
+  ])
+}
+
diff --git a/ui/app/components/send/gas-fee-display.js b/ui/app/components/send/gas-fee-display.js
new file mode 100644
index 000000000..a9a3f3f49
--- /dev/null
+++ b/ui/app/components/send/gas-fee-display.js
@@ -0,0 +1,62 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const USDFeeDisplay = require('./usd-fee-display')
+const EthFeeDisplay = require('./eth-fee-display')
+const { getTxFeeBn, formatBalance, shortenBalance } = require('../../util')
+
+module.exports = GasFeeDisplay
+
+inherits(GasFeeDisplay, Component)
+function GasFeeDisplay () {
+  Component.call(this)
+}
+
+GasFeeDisplay.prototype.getTokenValue = function () {
+  const {
+    tokenExchangeRate,
+    gas,
+    gasPrice,
+    blockGasLimit,
+  } = this.props
+
+  const value = formatBalance(getTxFeeBn(gas, gasPrice, blockGasLimit), 6, true)
+  const [ethNumber] = value.split(' ')
+
+  return shortenBalance(Number(ethNumber) / tokenExchangeRate, 6)
+}
+
+GasFeeDisplay.prototype.render = function () {
+  const {
+    activeCurrency,
+    conversionRate,
+    gas,
+    gasPrice,
+    blockGasLimit,
+  } = this.props
+
+  switch (activeCurrency) {
+    case 'USD':
+      return h(USDFeeDisplay, {
+        activeCurrency,
+        conversionRate,
+        gas,
+        gasPrice,
+        blockGasLimit,
+      })
+    case 'ETH':
+      return h(EthFeeDisplay, {
+        activeCurrency,
+        conversionRate,
+        gas,
+        gasPrice,
+        blockGasLimit,
+      })
+    default:
+      return h('div.token-gas', [
+        h('div.token-gas__amount', this.getTokenValue()),
+        h('div.token-gas__symbol', activeCurrency),
+      ])
+  }
+}
+
diff --git a/ui/app/components/send/gas-tooltip.js b/ui/app/components/send/gas-tooltip.js
new file mode 100644
index 000000000..46aff3499
--- /dev/null
+++ b/ui/app/components/send/gas-tooltip.js
@@ -0,0 +1,100 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const InputNumber = require('../input-number.js')
+
+module.exports = GasTooltip
+
+inherits(GasTooltip, Component)
+function GasTooltip () {
+  Component.call(this)
+  this.state = {
+    gasLimit: 0,
+    gasPrice: 0,
+  }
+
+  this.updateGasPrice = this.updateGasPrice.bind(this)
+  this.updateGasLimit = this.updateGasLimit.bind(this)
+  this.onClose = this.onClose.bind(this)
+}
+
+GasTooltip.prototype.componentWillMount = function () {
+  const { gasPrice = 0, gasLimit = 0} = this.props
+
+  this.setState({
+    gasPrice: parseInt(gasPrice, 16) / 1000000000,
+    gasLimit: parseInt(gasLimit, 16),
+  })
+}
+
+GasTooltip.prototype.updateGasPrice = function (newPrice) {
+  const { onFeeChange } = this.props
+  const { gasLimit } = this.state
+
+  this.setState({ gasPrice: newPrice })
+  onFeeChange({
+    gasLimit: gasLimit.toString(16),
+    gasPrice: (newPrice * 1000000000).toString(16),
+  })
+}
+
+GasTooltip.prototype.updateGasLimit = function (newLimit) {
+  const { onFeeChange } = this.props
+  const { gasPrice } = this.state
+
+  this.setState({ gasLimit: newLimit })
+  onFeeChange({
+    gasLimit: newLimit.toString(16),
+    gasPrice: (gasPrice * 1000000000).toString(16),
+  })
+}
+
+GasTooltip.prototype.onClose = function (e) {
+  e.stopPropagation()
+  this.props.onClose()
+}
+
+GasTooltip.prototype.render = function () {
+  const { gasPrice, gasLimit } = this.state
+
+  return h('div.gas-tooltip', {}, [
+    h('div.gas-tooltip-close-area', {
+      onClick: this.onClose,
+    }),
+    h('div.customize-gas-tooltip-container', {}, [
+      h('div.customize-gas-tooltip', {}, [
+        h('div.gas-tooltip-header.gas-tooltip-label', {}, ['Customize Gas']),
+        h('div.gas-tooltip-input-label', {}, [
+          h('span.gas-tooltip-label', {}, ['Gas Price']),
+          h('i.fa.fa-info-circle'),
+        ]),
+        h(InputNumber, {
+          unitLabel: 'GWEI',
+          step: 1,
+          min: 0,
+          placeholder: '0',
+          value: gasPrice,
+          onChange: (newPrice) => this.updateGasPrice(newPrice),
+        }),
+        h('div.gas-tooltip-input-label', {
+          style: {
+            'marginTop': '81px',
+          },
+        }, [
+          h('span.gas-tooltip-label', {}, ['Gas Limit']),
+          h('i.fa.fa-info-circle'),
+        ]),
+        h(InputNumber, {
+          unitLabel: 'UNITS',
+          step: 1,
+          min: 0,
+          placeholder: '0',
+          value: gasLimit,
+          onChange: (newLimit) => this.updateGasLimit(newLimit),
+        }),
+      ]),
+      h('div.gas-tooltip-arrow', {}),
+    ]),
+  ])
+}
+
diff --git a/ui/app/components/send/memo-textarea.js b/ui/app/components/send/memo-textarea.js
new file mode 100644
index 000000000..4005b9493
--- /dev/null
+++ b/ui/app/components/send/memo-textarea.js
@@ -0,0 +1,33 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const Identicon = require('../identicon')
+
+module.exports = MemoTextArea
+
+inherits(MemoTextArea, Component)
+function MemoTextArea () {
+  Component.call(this)
+}
+
+MemoTextArea.prototype.render = function () {
+  const { memo, identities, onChange } = this.props
+
+  return h('div.send-v2__memo-text-area', [
+
+    h('textarea.send-v2__memo-text-area__input', {
+      placeholder: 'Optional',
+      value: memo,
+      onChange,
+      // onBlur: () => {
+      //   this.setErrorsFor('memo')
+      // },
+      onFocus: event => {
+        // this.clearErrorsFor('memo')
+      },
+    }),
+
+  ])
+    
+}
+
diff --git a/ui/app/components/send/send-v2-container.js b/ui/app/components/send/send-v2-container.js
new file mode 100644
index 000000000..ebe2b878b
--- /dev/null
+++ b/ui/app/components/send/send-v2-container.js
@@ -0,0 +1,82 @@
+const connect = require('react-redux').connect
+const actions = require('../../actions')
+const abi = require('ethereumjs-abi')
+const SendEther = require('../../send-v2')
+
+const { multiplyCurrencies } = require('../../conversion-util')
+
+const {
+  accountsWithSendEtherInfoSelector,
+  getCurrentAccountWithSendEtherInfo,
+  conversionRateSelector,
+  getSelectedToken,
+  getSelectedTokenExchangeRate,
+  getSelectedAddress,
+  getGasPrice,
+  getGasLimit,
+  getAddressBook,
+  getSendFrom,
+} = require('../../selectors')
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(SendEther)
+
+function mapStateToProps (state) {
+  const fromAccounts = accountsWithSendEtherInfoSelector(state)
+  const selectedAddress = getSelectedAddress(state)
+  const selectedToken = getSelectedToken(state)
+  const tokenExchangeRates = state.metamask.tokenExchangeRates
+  const selectedTokenExchangeRate = getSelectedTokenExchangeRate(state)
+  const conversionRate = conversionRateSelector(state)
+
+  let data;
+  let primaryCurrency;
+  let tokenToUSDRate;
+  if (selectedToken) {
+    data = Array.prototype.map.call(
+      abi.rawEncode(['address', 'uint256'], [selectedAddress, '0x0']),
+      x => ('00' + x.toString(16)).slice(-2)
+    ).join('')
+
+    primaryCurrency = selectedToken.symbol
+
+    tokenToUSDRate = multiplyCurrencies(
+      conversionRate,
+      selectedTokenExchangeRate,
+      { toNumericBase: 'dec' }
+    )
+  }
+
+  return {
+    ...state.metamask.send,
+    from: getSendFrom(state) || getCurrentAccountWithSendEtherInfo(state),
+    fromAccounts,
+    toAccounts: [...fromAccounts, ...getAddressBook(state)],
+    conversionRate,
+    selectedToken,
+    primaryCurrency,
+    data,
+    amountConversionRate: selectedToken ? tokenToUSDRate : conversionRate,
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    showCustomizeGasModal: () => dispatch(actions.showModal({ name: 'CUSTOMIZE_GAS' })),
+    estimateGas: params => dispatch(actions.estimateGas(params)),
+    getGasPrice: () => dispatch(actions.getGasPrice()),
+    updateTokenExchangeRate: token => dispatch(actions.updateTokenExchangeRate(token)),
+    signTokenTx: (tokenAddress, toAddress, amount, txData) => (
+      dispatch(actions.signTokenTx(tokenAddress, toAddress, amount, txData))
+    ),
+    signTx: txParams => dispatch(actions.signTx(txParams)),
+    setSelectedAddress: address => dispatch(actions.setSelectedAddress(address)),
+    addToAddressBook: address => dispatch(actions.addToAddressBook(address)),
+    updateGasTotal: newTotal => dispatch(actions.updateGasTotal(newTotal)),
+    updateSendFrom: newFrom => dispatch(actions.updateSendFrom(newFrom)),
+    updateSendTo: newTo => dispatch(actions.updateSendTo(newTo)),
+    updateSendAmount: newAmount => dispatch(actions.updateSendAmount(newAmount)),
+    updateSendMemo: newMemo => dispatch(actions.updateSendMemo(newMemo)),
+    updateSendErrors: newError => dispatch(actions.updateSendErrors(newError)),
+    goHome: () => dispatch(actions.goHome()),
+  }
+}
diff --git a/ui/app/components/send/to-autocomplete.js b/ui/app/components/send/to-autocomplete.js
new file mode 100644
index 000000000..686a7a23e
--- /dev/null
+++ b/ui/app/components/send/to-autocomplete.js
@@ -0,0 +1,55 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const Identicon = require('../identicon')
+
+module.exports = ToAutoComplete
+
+inherits(ToAutoComplete, Component)
+function ToAutoComplete () {
+  Component.call(this)
+}
+
+ToAutoComplete.prototype.render = function () {
+  const { to, accounts, onChange, inError } = this.props
+
+  return h('div.send-v2__to-autocomplete', [
+
+    h('input.send-v2__to-autocomplete__input', {
+      name: 'address',
+      list: 'addresses',
+      placeholder: 'Recipient Address',
+      className: inError ? `send-v2__error-border` : '', 
+      value: to,
+      onChange,
+      onFocus: event => {
+        to && event.target.select()
+      },
+      style: {
+        borderColor: inError ? 'red' : null,
+      }
+    }),
+
+    h('datalist#addresses', [
+      // Corresponds to the addresses owned.
+      ...Object.entries(accounts).map(([key, { address, name }]) => {
+        return h('option', {
+          value: address,
+          label: name,
+          key: address,
+        })
+      }),
+      // Corresponds to previously sent-to addresses.
+      // ...addressBook.map(({ address, name }) => {
+      //   return h('option', {
+      //     value: address,
+      //     label: name,
+      //     key: address,
+      //   })
+      // }),
+    ]),
+
+  ])
+    
+}
+
diff --git a/ui/app/components/send/usd-fee-display.js b/ui/app/components/send/usd-fee-display.js
new file mode 100644
index 000000000..6ee38f1b5
--- /dev/null
+++ b/ui/app/components/send/usd-fee-display.js
@@ -0,0 +1,35 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const FiatValue = require('../fiat-value')
+const { getTxFeeBn } = require('../../util')
+
+module.exports = USDFeeDisplay
+
+inherits(USDFeeDisplay, Component)
+function USDFeeDisplay () {
+  Component.call(this)
+}
+
+USDFeeDisplay.prototype.render = function () {
+  const {
+    activeCurrency,
+    conversionRate,
+    gas,
+    gasPrice,
+    blockGasLimit,
+  } = this.props
+
+  return h(FiatValue, {
+    value: getTxFeeBn(gas, gasPrice, blockGasLimit),
+    conversionRate,
+    currentCurrency: activeCurrency,
+    style: {
+      color: '#5d5d5d',
+      fontSize: '16px',
+      fontFamily: 'DIN OT',
+      lineHeight: '22.4px'
+    }
+  })
+}
+
diff --git a/ui/app/components/shapeshift-form.js b/ui/app/components/shapeshift-form.js
index 901a4a956..96a86d3b1 100644
--- a/ui/app/components/shapeshift-form.js
+++ b/ui/app/components/shapeshift-form.js
@@ -131,8 +131,8 @@ ShapeshiftForm.prototype.renderMain = function () {
       },
     }, [
       this.props.warning
-        ? this.props.warning
-        && h('span.error.flex-center', {
+        ? this.props.warning &&
+        h('span.error.flex-center', {
           style: {
             textAlign: 'center',
             width: '229px',
diff --git a/ui/app/components/shift-list-item.js b/ui/app/components/shift-list-item.js
index b555dee84..43973de63 100644
--- a/ui/app/components/shift-list-item.js
+++ b/ui/app/components/shift-list-item.js
@@ -29,7 +29,7 @@ function ShiftListItem () {
 
 ShiftListItem.prototype.render = function () {
   return (
-    h('.transaction-list-item.flex-row', {
+    h('div.tx-list-item.tx-list-clickable', {
       style: {
         paddingTop: '20px',
         paddingBottom: '20px',
diff --git a/ui/app/components/token-balance.js b/ui/app/components/token-balance.js
new file mode 100644
index 000000000..2f71c0687
--- /dev/null
+++ b/ui/app/components/token-balance.js
@@ -0,0 +1,113 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const TokenTracker = require('eth-token-tracker')
+const connect = require('react-redux').connect
+const selectors = require('../selectors')
+
+function mapStateToProps (state) {
+  return {
+    userAddress: selectors.getSelectedAddress(state),
+  }
+}
+
+module.exports = connect(mapStateToProps)(TokenBalance)
+
+
+inherits(TokenBalance, Component)
+function TokenBalance () {
+  this.state = {
+    string: '',
+    symbol: '',
+    isLoading: true,
+    error: null,
+  }
+  Component.call(this)
+}
+
+TokenBalance.prototype.render = function () {
+  const state = this.state
+  const { symbol, string, isLoading } = state
+  const { balanceOnly } = this.props
+
+  return isLoading
+    ? h('span', '')
+    : h('span.token-balance', [
+      h('span.token-balance__amount', string),
+      !balanceOnly && h('span.token-balance__symbol', symbol),
+    ])
+}
+
+TokenBalance.prototype.componentDidMount = function () {
+  this.createFreshTokenTracker()
+}
+
+TokenBalance.prototype.createFreshTokenTracker = function () {
+  if (this.tracker) {
+    // Clean up old trackers when refreshing:
+    this.tracker.stop()
+    this.tracker.removeListener('update', this.balanceUpdater)
+    this.tracker.removeListener('error', this.showError)
+  }
+
+  if (!global.ethereumProvider) return
+  const { userAddress, token } = this.props
+
+  this.tracker = new TokenTracker({
+    userAddress,
+    provider: global.ethereumProvider,
+    tokens: [token],
+    pollingInterval: 8000,
+  })
+
+
+  // Set up listener instances for cleaning up
+  this.balanceUpdater = this.updateBalance.bind(this)
+  this.showError = error => {
+    this.setState({ error, isLoading: false })
+  }
+  this.tracker.on('update', this.balanceUpdater)
+  this.tracker.on('error', this.showError)
+
+  this.tracker.updateBalances()
+    .then(() => {
+      this.updateBalance(this.tracker.serialize())
+    })
+    .catch((reason) => {
+      log.error(`Problem updating balances`, reason)
+      this.setState({ isLoading: false })
+    })
+}
+
+TokenBalance.prototype.componentDidUpdate = function (nextProps) {
+  const {
+    userAddress: oldAddress,
+    token: { address: oldTokenAddress },
+  } = this.props
+  const {
+    userAddress: newAddress,
+    token: { address: newTokenAddress },
+  } = nextProps
+
+  if ((!oldAddress || !newAddress) && (!oldTokenAddress || !newTokenAddress)) return
+  if ((oldAddress === newAddress) && (oldTokenAddress === newTokenAddress)) return
+
+  this.setState({ isLoading: true })
+  this.createFreshTokenTracker()
+}
+
+TokenBalance.prototype.updateBalance = function (tokens = []) {
+  const [{ string, symbol }] = tokens
+
+  this.setState({
+    string,
+    symbol,
+    isLoading: false,
+  })
+}
+
+TokenBalance.prototype.componentWillUnmount = function () {
+  if (!this.tracker) return
+  this.tracker.stop()
+}
+
diff --git a/ui/app/components/token-cell.js b/ui/app/components/token-cell.js
index 19d7139bb..ad431df69 100644
--- a/ui/app/components/token-cell.js
+++ b/ui/app/components/token-cell.js
@@ -1,35 +1,127 @@
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
+const connect = require('react-redux').connect
 const Identicon = require('./identicon')
 const prefixForNetwork = require('../../lib/etherscan-prefix-for-network')
+const selectors = require('../selectors')
+const actions = require('../actions')
+const { conversionUtil } = require('../conversion-util')
 
-module.exports = TokenCell
+const TokenMenuDropdown = require('./dropdowns/token-menu-dropdown.js')
+
+function mapStateToProps (state) {
+  return {
+    network: state.metamask.network,
+    selectedTokenAddress: state.metamask.selectedTokenAddress,
+    userAddress: selectors.getSelectedAddress(state),
+    tokenExchangeRates: state.metamask.tokenExchangeRates,
+    ethToUSDRate: state.metamask.conversionRate,
+    sidebarOpen: state.appState.sidebarOpen,
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    setSelectedToken: address => dispatch(actions.setSelectedToken(address)),
+    updateTokenExchangeRate: token => dispatch(actions.updateTokenExchangeRate(token)),
+    hideSidebar: () => dispatch(actions.hideSidebar()),
+  }
+}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(TokenCell)
 
 inherits(TokenCell, Component)
 function TokenCell () {
   Component.call(this)
+
+  this.state = {
+    tokenMenuOpen: false,
+  }
+}
+
+TokenCell.prototype.componentWillMount = function () {
+  const {
+    updateTokenExchangeRate,
+    symbol,
+  } = this.props
+
+  updateTokenExchangeRate(symbol)
 }
 
 TokenCell.prototype.render = function () {
+  const { tokenMenuOpen } = this.state
   const props = this.props
-  const { address, symbol, string, network, userAddress } = props
+  const {
+    address,
+    symbol,
+    string,
+    network,
+    setSelectedToken,
+    selectedTokenAddress,
+    tokenExchangeRates,
+    ethToUSDRate,
+    hideSidebar,
+    sidebarOpen,
+    // userAddress,
+  } = props
+  
+  const pair = `${symbol.toLowerCase()}_eth`;
 
+  let currentTokenToEthRate;
+  let currentTokenInUSD;
+  let formattedUSD = ''
+
+  if (tokenExchangeRates[pair]) {
+    currentTokenToEthRate = tokenExchangeRates[pair].rate;
+    currentTokenInUSD = conversionUtil(string, {
+      fromNumericBase: 'dec',
+      fromCurrency: symbol,
+      toCurrency: 'USD',
+      numberOfDecimals: 2,
+      conversionRate: currentTokenToEthRate,
+      ethToUSDRate,
+    })
+    formattedUSD = `$${currentTokenInUSD} USD`;
+  }
+ 
   return (
-    h('li.token-cell', {
-      style: { cursor: network === '1' ? 'pointer' : 'default' },
-      onClick: this.view.bind(this, address, userAddress, network),
+    h('div.token-list-item', {
+      className: `token-list-item ${selectedTokenAddress === address ? 'token-list-item--active' : ''}`,
+      // style: { cursor: network === '1' ? 'pointer' : 'default' },
+      // onClick: this.view.bind(this, address, userAddress, network),
+      onClick: () => {
+        setSelectedToken(address)
+        selectedTokenAddress !== address && sidebarOpen && hideSidebar()
+      },
     }, [
 
       h(Identicon, {
-        diameter: 50,
+        className: 'token-list-item__identicon',
+        diameter: 45,
         address,
         network,
       }),
 
-      h('h3', `${string || 0} ${symbol}`),
+      h('h.token-list-item__balance-wrapper', null, [
+        h('h3.token-list-item__token-balance', `${string || 0} ${symbol}`),
 
-      h('span', { style: { flex: '1 0 auto' } }),
+        h('div.token-list-item__fiat-amount', {
+          style: {},
+        }, formattedUSD),
+      ]),
+
+      h('i.fa.fa-ellipsis-h.fa-lg.token-list-item__ellipsis.cursor-pointer', {
+        onClick: (e) => {
+          e.stopPropagation()
+          this.setState({ tokenMenuOpen: true })
+        },
+      }),
+
+      tokenMenuOpen && h(TokenMenuDropdown, {
+        onClose: () => this.setState({ tokenMenuOpen: false }),
+        token: { symbol, address },
+      }),
 
       /*
       h('button', {
diff --git a/ui/app/components/token-list.js b/ui/app/components/token-list.js
index 998ec901d..4959f1cd5 100644
--- a/ui/app/components/token-list.js
+++ b/ui/app/components/token-list.js
@@ -3,8 +3,29 @@ const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const TokenTracker = require('eth-token-tracker')
 const TokenCell = require('./token-cell.js')
+const normalizeAddress = require('eth-sig-util').normalize
+const connect = require('react-redux').connect
+const selectors = require('../selectors')
+
+function mapStateToProps (state) {
+  return {
+    network: state.metamask.network,
+    tokens: state.metamask.tokens,
+    userAddress: selectors.getSelectedAddress(state),
+  }
+}
+
+const defaultTokens = []
+const contracts = require('eth-contract-metadata')
+for (const address in contracts) {
+  const contract = contracts[address]
+  if (contract.erc20) {
+    contract.address = address
+    defaultTokens.push(contract)
+  }
+}
 
-module.exports = TokenList
+module.exports = connect(mapStateToProps)(TokenList)
 
 inherits(TokenList, Component)
 function TokenList () {
@@ -19,10 +40,9 @@ function TokenList () {
 TokenList.prototype.render = function () {
   const state = this.state
   const { tokens, isLoading, error } = state
-  const { userAddress, network } = this.props
 
   if (isLoading) {
-    return this.message('Loading')
+    return this.message('Loading Tokens...')
   }
 
   if (error) {
@@ -47,87 +67,8 @@ TokenList.prototype.render = function () {
     ])
   }
 
-  const tokenViews = tokens.map((tokenData) => {
-    tokenData.network = network
-    tokenData.userAddress = userAddress
-    return h(TokenCell, tokenData)
-  })
-
-  return h('.full-flex-height', [
-    this.renderTokenStatusBar(),
-
-    h('ol.full-flex-height.flex-column', {
-      style: {
-        overflowY: 'auto',
-        display: 'flex',
-        flexDirection: 'column',
-      },
-    }, [
-      h('style', `
-
-        li.token-cell {
-          display: flex;
-          flex-direction: row;
-          align-items: center;
-          padding: 10px;
-          min-height: 50px;
-        }
-
-        li.token-cell > h3 {
-          margin-left: 12px;
-        }
-
-        li.token-cell:hover {
-          background: white;
-          cursor: pointer;
-        }
-
-      `),
-      ...tokenViews,
-      h('.flex-grow'),
-    ]),
-  ])
-}
-
-TokenList.prototype.renderTokenStatusBar = function () {
-  const { tokens } = this.state
-
-  let msg
-  if (tokens.length === 1) {
-    msg = `You own 1 token`
-  } else if (tokens.length > 1) {
-    msg = `You own ${tokens.length} tokens`
-  } else {
-    msg = `No tokens found`
-  }
+  return h('div', tokens.map((tokenData) => h(TokenCell, tokenData)))
 
-  return h('div', {
-    style: {
-      display: 'flex',
-      justifyContent: 'space-between',
-      alignItems: 'center',
-      minHeight: '70px',
-      padding: '10px',
-    },
-  }, [
-    h('span', msg),
-    h('button', {
-      key: 'reveal-account-bar',
-      onClick: (event) => {
-        event.preventDefault()
-        this.props.addToken()
-      },
-      style: {
-        display: 'flex',
-        height: '40px',
-        padding: '10px',
-        justifyContent: 'center',
-        alignItems: 'center',
-      },
-    }, [
-      'ADD TOKEN',
-    ]),
-  ])
 }
 
 TokenList.prototype.message = function (body) {
@@ -156,6 +97,7 @@ TokenList.prototype.createFreshTokenTracker = function () {
 
   if (!global.ethereumProvider) return
   const { userAddress } = this.props
+
   this.tracker = new TokenTracker({
     userAddress,
     provider: global.ethereumProvider,
@@ -182,15 +124,30 @@ TokenList.prototype.createFreshTokenTracker = function () {
   })
 }
 
-TokenList.prototype.componentWillUpdate = function (nextProps) {
-  if (nextProps.network === 'loading') return
-  const oldNet = this.props.network
-  const newNet = nextProps.network
-
-  if (oldNet && newNet && newNet !== oldNet) {
-    this.setState({ isLoading: true })
-    this.createFreshTokenTracker()
-  }
+TokenList.prototype.componentDidUpdate = function (nextProps) {
+  const {
+    network: oldNet,
+    userAddress: oldAddress,
+    tokens,
+  } = this.props
+  const {
+    network: newNet,
+    userAddress: newAddress,
+    tokens: newTokens,
+  } = nextProps
+
+  const isLoading = newNet === 'loading'
+  const missingInfo = !oldNet || !newNet || !oldAddress || !newAddress
+  const sameUserAndNetwork = oldAddress === newAddress && oldNet === newNet
+  const shouldUpdateTokens = isLoading || missingInfo || sameUserAndNetwork
+
+  const oldTokensLength = tokens ? tokens.length : 0
+  const tokensLengthUnchanged = oldTokensLength === newTokens.length
+
+  if (tokensLengthUnchanged && shouldUpdateTokens) return
+
+  this.setState({ isLoading: true })
+  this.createFreshTokenTracker()
 }
 
 TokenList.prototype.updateBalances = function (tokens) {
@@ -205,3 +162,15 @@ TokenList.prototype.componentWillUnmount = function () {
   this.tracker.stop()
 }
 
+function uniqueMergeTokens (tokensA, tokensB = []) {
+  const uniqueAddresses = []
+  const result = []
+  tokensA.concat(tokensB).forEach((token) => {
+    const normal = normalizeAddress(token.address)
+    if (!uniqueAddresses.includes(normal)) {
+      uniqueAddresses.push(normal)
+      result.push(token)
+    }
+  })
+  return result
+}
diff --git a/ui/app/components/transaction-list-item.js b/ui/app/components/transaction-list-item.js
index 891d5e227..21f2b8236 100644
--- a/ui/app/components/transaction-list-item.js
+++ b/ui/app/components/transaction-list-item.js
@@ -148,6 +148,12 @@ function renderErrorOrWarning (transaction) {
   if (status === 'rejected') {
     return h('span.error', ' (Rejected)')
   }
+  if (transaction.err || transaction.warning) {
+    const { err, warning = {} } = transaction
+    const errFirst = !!((err && warning) || err)
+    const message = errFirst ? err.message : warning.message
+
+    errFirst ? err.message : warning.message
 
   // show error
   if (err) {
diff --git a/ui/app/components/tx-list-item.js b/ui/app/components/tx-list-item.js
new file mode 100644
index 000000000..8422c02b9
--- /dev/null
+++ b/ui/app/components/tx-list-item.js
@@ -0,0 +1,187 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const connect = require('react-redux').connect
+const inherits = require('util').inherits
+const classnames = require('classnames')
+const abi = require('human-standard-token-abi')
+const abiDecoder = require('abi-decoder')
+abiDecoder.addABI(abi)
+const prefixForNetwork = require('../../lib/etherscan-prefix-for-network')
+const Identicon = require('./identicon')
+
+const { conversionUtil } = require('../conversion-util')
+
+module.exports = connect(mapStateToProps)(TxListItem)
+
+function mapStateToProps (state) {
+  return {
+    tokens: state.metamask.tokens,
+  }
+}
+
+inherits(TxListItem, Component)
+function TxListItem () {
+  Component.call(this)
+}
+
+TxListItem.prototype.getAddressText = function () {
+  const {
+    address,
+    txParams = {},
+  } = this.props
+
+  const decodedData = txParams.data && abiDecoder.decodeMethod(txParams.data)
+  const { name: txDataName, params = [] } = decodedData || {}
+  const { value } = params[0] || {}
+
+  switch (txDataName) {
+    case 'transfer':
+      return `${value.slice(0, 10)}...${value.slice(-4)}`
+    default:
+      return address
+        ? `${address.slice(0, 10)}...${address.slice(-4)}`
+        : 'Contract Published'
+  }
+}
+
+TxListItem.prototype.getSendEtherTotal = function () {
+  const {
+    transactionAmount,
+    conversionRate,
+    address,
+  } = this.props
+
+  if (!address) {
+    return {}
+  }
+
+  const totalInUSD = conversionUtil(transactionAmount, {
+    fromNumericBase: 'hex',
+    toNumericBase: 'dec',
+    fromCurrency: 'ETH',
+    toCurrency: 'USD',
+    fromDenomination: 'WEI',
+    numberOfDecimals: 2,
+    conversionRate,
+  })
+  const totalInETH = conversionUtil(transactionAmount, {
+    fromNumericBase: 'hex',
+    toNumericBase: 'dec',
+    fromCurrency: 'ETH',
+    toCurrency: 'ETH',
+    fromDenomination: 'WEI',
+    conversionRate,
+    numberOfDecimals: 6,
+  })
+
+  return {
+    total: `${totalInETH} ETH`,
+    fiatTotal: `$${totalInUSD} USD`,
+  }
+}
+
+TxListItem.prototype.getSendTokenTotal = function () {
+  const {
+    txParams = {},
+    tokens,
+  } = this.props
+
+  const toAddress = txParams.to
+  const decodedData = txParams.data && abiDecoder.decodeMethod(txParams.data)
+  const { params = [] } = decodedData || {}
+  const { value } = params[1] || {}
+  const { decimals, symbol } = tokens.filter(({ address }) => address === toAddress)[0] || {}
+
+  const multiplier = Math.pow(10, Number(decimals || 0))
+  const total = Number(value / multiplier)
+
+  return {
+    total: `${total} ${symbol}`,
+  }
+}
+
+TxListItem.prototype.render = function () {
+  const {
+    transactionStatus,
+    onClick,
+    transActionId,
+    dateString,
+    address,
+    className,
+    txParams = {},
+  } = this.props
+
+  const decodedData = txParams.data && abiDecoder.decodeMethod(txParams.data)
+  const { name: txDataName } = decodedData || {}
+
+  const { total, fiatTotal } = txDataName === 'transfer'
+    ? this.getSendTokenTotal()
+    : this.getSendEtherTotal()
+
+  return h(`div${className || ''}`, {
+    key: transActionId,
+    onClick: () => onClick && onClick(transActionId),
+  }, [
+    h(`div.flex-column.tx-list-item-wrapper`, {}, [
+
+      h('div.tx-list-date-wrapper', {
+        style: {},
+      }, [
+        h('span.tx-list-date', {}, [
+          dateString,
+        ]),
+      ]),
+
+      h('div.flex-row.tx-list-content-wrapper', {
+        style: {},
+      }, [
+
+        h('div.tx-list-identicon-wrapper', {
+          style: {},
+        }, [
+          h(Identicon, {
+            address,
+            diameter: 28,
+          }),
+        ]),
+
+        h('div.tx-list-account-and-status-wrapper', {}, [
+          h('div.tx-list-account-wrapper', {
+            style: {},
+          }, [
+            h('span.tx-list-account', {}, [
+              this.getAddressText(address),
+            ]),
+          ]),
+
+          h('div.tx-list-status-wrapper', {
+            style: {},
+          }, [
+            h('span', {
+              className: classnames('tx-list-status', {
+                'tx-list-status--rejected': transactionStatus === 'rejected',
+                'tx-list-status--failed': transactionStatus === 'failed',
+              }),
+            },
+              transactionStatus,
+            ),
+          ]),
+        ]),
+
+        h('div.flex-column.tx-list-details-wrapper', {
+          style: {},
+        }, [
+
+          h('span', {
+            className: classnames('tx-list-value', {
+              'tx-list-value--confirmed': transactionStatus === 'confirmed',
+            }),
+          }, total),
+
+          h('span.tx-list-fiat-value', fiatTotal),
+
+        ]),
+      ]),
+    ]) // holding on icon from design
+  ])
+}
diff --git a/ui/app/components/tx-list.js b/ui/app/components/tx-list.js
new file mode 100644
index 000000000..a02849d0e
--- /dev/null
+++ b/ui/app/components/tx-list.js
@@ -0,0 +1,135 @@
+const Component = require('react').Component
+const connect = require('react-redux').connect
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const prefixForNetwork = require('../../lib/etherscan-prefix-for-network')
+const selectors = require('../selectors')
+const TxListItem = require('./tx-list-item')
+const ShiftListItem = require('./shift-list-item')
+const { formatBalance, formatDate } = require('../util')
+const { showConfTxPage } = require('../actions')
+const classnames = require('classnames')
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(TxList)
+
+function mapStateToProps (state) {
+  return {
+    txsToRender: selectors.transactionsSelector(state),
+    conversionRate: selectors.conversionRateSelector(state),
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    showConfTxPage: ({ id }) => dispatch(showConfTxPage({ id }))
+  }
+}
+
+inherits(TxList, Component)
+function TxList () {
+  Component.call(this)
+}
+
+TxList.prototype.render = function () {
+
+  const { txsToRender, showConfTxPage } = this.props
+
+  return h('div.flex-column.tx-list-container', {}, [
+
+    h('div.flex-row.tx-list-header-wrapper', [
+      h('div.flex-row.tx-list-header', [
+        h('div', 'transactions'),
+      ]),
+    ]),
+
+    this.renderTransaction(),
+
+  ])
+}
+
+TxList.prototype.renderTransaction = function () {
+  const { txsToRender, conversionRate } = this.props
+  return txsToRender.length
+    ? txsToRender.map((transaction, i) => this.renderTransactionListItem(transaction, conversionRate))
+    : [h(
+        'div.tx-list-item.tx-list-item--empty',
+        { key: 'tx-list-none' },
+        [ 'No Transactions' ],
+      )]
+}
+
+// TODO: Consider moving TxListItem into a separate component
+TxList.prototype.renderTransactionListItem = function (transaction, conversionRate) {
+  // console.log({transaction})
+  // refer to transaction-list.js:line 58
+
+  if (transaction.key === 'shapeshift') {
+    return h(ShiftListItem, transaction)
+  }
+
+  const props = {
+    dateString: formatDate(transaction.time),
+    address: transaction.txParams.to,
+    transactionStatus: transaction.status,
+    transactionAmount: transaction.txParams.value,
+    transActionId: transaction.id,
+    transactionHash: transaction.hash,
+    transactionNetworkId: transaction.metamaskNetworkId,
+  }
+
+  const {
+    address,
+    transactionStatus,
+    transactionAmount,
+    dateString,
+    transActionId,
+    transactionHash,
+    transactionNetworkId,
+  } = props
+  const { showConfTxPage } = this.props
+
+  const opts = {
+    key: transActionId || transactionHash,
+    txParams: transaction.txParams,
+    transactionStatus,
+    transActionId,
+    key: transActionId,
+    dateString,
+    address,
+    transactionAmount,
+    transactionHash,
+    conversionRate,
+  }
+
+  const isUnapproved = transactionStatus === 'unapproved';
+
+  if (isUnapproved) {
+    opts.onClick = () => showConfTxPage({id: transActionId})
+    opts.transactionStatus = 'Not Started'
+  } else if (transactionHash) {
+    opts.onClick = () => this.view(transactionHash, transactionNetworkId)
+  }
+
+  opts.className = classnames('.tx-list-item', {
+    '.tx-list-pending-item-container': isUnapproved,
+    '.tx-list-clickable': Boolean(transactionHash) || isUnapproved,
+  })
+
+  return h(TxListItem, opts)
+}
+
+TxList.prototype.view = function (txHash, network) {
+  const url = etherscanLinkFor(txHash, network)
+  if (url) {
+    navigateTo(url)
+  }
+}
+
+function navigateTo (url) {
+  global.platform.openWindow({ url })
+}
+
+function etherscanLinkFor (txHash, network) {
+  const prefix = prefixForNetwork(network)
+  return `https://${prefix}etherscan.io/tx/${txHash}`
+}
diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js
new file mode 100644
index 000000000..59f55d485
--- /dev/null
+++ b/ui/app/components/tx-view.js
@@ -0,0 +1,148 @@
+const Component = require('react').Component
+const connect = require('react-redux').connect
+const h = require('react-hyperscript')
+const ethUtil = require('ethereumjs-util')
+const inherits = require('util').inherits
+const actions = require('../actions')
+const selectors = require('../selectors')
+
+const BalanceComponent = require('./balance-component')
+const TxList = require('./tx-list')
+const Identicon = require('./identicon')
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(TxView)
+
+function mapStateToProps (state) {
+  const sidebarOpen = state.appState.sidebarOpen
+
+  const identities = state.metamask.identities
+  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 checksumAddress = selectedAddress && ethUtil.toChecksumAddress(selectedAddress)
+  const identity = identities[selectedAddress]
+
+  return {
+    sidebarOpen,
+    selectedAddress,
+    checksumAddress,
+    selectedTokenAddress,
+    selectedToken: selectors.getSelectedToken(state),
+    identity,
+    network,
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    showSidebar: () => { dispatch(actions.showSidebar()) },
+    hideSidebar: () => { dispatch(actions.hideSidebar()) },
+    showModal: (payload) => { dispatch(actions.showModal(payload)) },
+    showSendPage: () => { dispatch(actions.showSendPage()) },
+    showSendTokenPage: () => { dispatch(actions.showSendTokenPage()) },
+  }
+}
+
+inherits(TxView, Component)
+function TxView () {
+  Component.call(this)
+}
+
+TxView.prototype.renderHeroBalance = function () {
+  const { selectedToken } = this.props
+
+  return h('div.hero-balance', {}, [
+
+    h(BalanceComponent, { token: selectedToken }),
+
+    this.renderButtons(),
+  ])
+}
+
+TxView.prototype.renderButtons = function () {
+  const {selectedToken, showModal, showSendPage, showSendTokenPage } = this.props
+
+  return !selectedToken
+    ? (
+      h('div.flex-row.flex-center.hero-balance-buttons', [
+        h('button.btn-clear', {
+          style: {
+            textAlign: 'center',
+          },
+          onClick: () => showModal({
+            name: 'BUY',
+          }),
+        }, 'BUY'),
+
+        h('button.btn-clear', {
+          style: {
+            textAlign: 'center',
+            marginLeft: '0.8em',
+          },
+          onClick: showSendPage,
+        }, 'SEND'),
+      ])
+    )
+    : (
+      h('div.flex-row.flex-center.hero-balance-buttons', [
+        h('button.btn-clear', {
+          style: {
+            textAlign: 'center',
+            marginLeft: '0.8em',
+          },
+          onClick: showSendTokenPage,
+        }, 'SEND'),
+      ])
+    )
+}
+
+TxView.prototype.render = function () {
+  const { selectedAddress, identity, network } = this.props
+
+  return h('div.tx-view.flex-column', {
+    style: {},
+  }, [
+
+    h('div.flex-row.phone-visible', {
+      style: {
+        margin: '1em 0.9em',
+        alignItems: 'center',
+      },
+      onClick: () => {
+        this.props.sidebarOpen ? this.props.hideSidebar() : this.props.showSidebar()
+      },
+    }, [
+
+      h('div.fa.fa-bars', {
+        style: {
+          fontSize: '1.3em',
+        },
+      }, []),
+
+      h('.identicon-wrapper.select-none', {
+        style: {
+          marginLeft: '0.9em',
+        },
+      }, [
+        h(Identicon, {
+          diameter: 24,
+          address: selectedAddress,
+          network,
+        }),
+      ]),
+
+      h('span.account-name', {
+        style: {},
+      }, [
+        identity.name,
+      ]),
+
+    ]),
+
+    this.renderHeroBalance(),
+
+    h(TxList),
+
+  ])
+}
diff --git a/ui/app/components/wallet-content-display.js b/ui/app/components/wallet-content-display.js
new file mode 100644
index 000000000..bfa061be4
--- /dev/null
+++ b/ui/app/components/wallet-content-display.js
@@ -0,0 +1,56 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+
+module.exports = WalletContentDisplay
+
+inherits(WalletContentDisplay, Component)
+function WalletContentDisplay () {
+  Component.call(this)
+}
+
+WalletContentDisplay.prototype.render = function () {
+  const { title, amount, fiatValue, active, style } = this.props
+
+  // TODO: Separate component: wallet-content-account
+  return h('div.flex-column', {
+    style: {
+      marginLeft: '1.3em',
+      alignItems: 'flex-start',
+      ...style,
+    },
+  }, [
+
+    h('span', {
+      style: {
+        fontSize: '1.1em',
+      },
+    }, title),
+
+    h('span', {
+      style: {
+        fontSize: '1.8em',
+        margin: '0.4em 0em',
+      },
+    }, amount),
+
+    h('span', {
+      style: {
+        fontSize: '1.3em',
+      },
+    }, fiatValue),
+
+    active && h('div', {
+      style: {
+        position: 'absolute',
+        marginLeft: '-1.3em',
+        height: '6em',
+        width: '0.3em',
+        background: '#D8D8D8', // $alto
+      },
+    }, [
+    ]),
+  ])
+
+}
+
diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js
new file mode 100644
index 000000000..f06c4d512
--- /dev/null
+++ b/ui/app/components/wallet-view.js
@@ -0,0 +1,179 @@
+const Component = require('react').Component
+const connect = require('react-redux').connect
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const Identicon = require('./identicon')
+const AccountDropdowns = require('./dropdowns/index.js').AccountDropdowns
+const actions = require('../actions')
+const BalanceComponent = require('./balance-component')
+const TokenList = require('./token-list')
+const selectors = require('../selectors')
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(WalletView)
+
+function mapStateToProps (state) {
+
+  return {
+    network: state.metamask.network,
+    sidebarOpen: state.appState.sidebarOpen,
+    identities: state.metamask.identities,
+    accounts: state.metamask.accounts,
+    tokens: state.metamask.tokens,
+    selectedAddress: selectors.getSelectedAddress(state),
+    selectedIdentity: selectors.getSelectedIdentity(state),
+    selectedAccount: selectors.getSelectedAccount(state),
+    selectedTokenAddress: state.metamask.selectedTokenAddress,
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    showSendPage: () => { dispatch(actions.showSendPage()) },
+    hideSidebar: () => { dispatch(actions.hideSidebar()) },
+    unsetSelectedToken: () => dispatch(actions.setSelectedToken()),
+  }
+}
+
+inherits(WalletView, Component)
+function WalletView () {
+  Component.call(this)
+}
+
+WalletView.prototype.renderWalletBalance = function () {
+  const {
+    selectedTokenAddress,
+    selectedAccount,
+    unsetSelectedToken,
+    hideSidebar,
+    sidebarOpen,
+  } = this.props
+
+  const selectedClass = selectedTokenAddress
+    ? ''
+    : 'wallet-balance-wrapper--active'
+  const className = `flex-column wallet-balance-wrapper ${selectedClass}`
+
+  return h('div', { className }, [
+    h('div.wallet-balance',
+      {
+        onClick: () => {
+          unsetSelectedToken()
+          selectedTokenAddress && sidebarOpen && hideSidebar()
+        },
+      },
+      [
+        h(BalanceComponent, {
+          balanceValue: selectedAccount.balance,
+          style: {},
+        }),
+      ]
+    ),
+  ])
+}
+
+WalletView.prototype.render = function () {
+  const {
+    network, responsiveDisplayClassname, identities,
+    selectedAddress, accounts,
+    selectedIdentity,
+  } = this.props
+  // temporary logs + fake extra wallets
+  // console.log('walletview, selectedAccount:', selectedAccount)
+
+  return h('div.wallet-view.flex-column' + (responsiveDisplayClassname || ''), {
+    style: {},
+  }, [
+
+    // TODO: Separate component: wallet account details
+    h('div.flex-column.wallet-view-account-details', {
+      style: {},
+    }, [
+
+      h('div.flex-row.account-options-menu', {
+        style: {
+          position: 'relative',
+        },
+      }, [
+
+        h(AccountDropdowns, {
+          selected: selectedAddress,
+          network,
+          identities,
+          useCssTransition: true,
+          enableAccountOptions: true,
+          dropdownWrapperStyle: {
+            padding: '1px 15px',
+            marginLeft: '-25px',
+            position: 'absolute',
+            width: '122%', // TODO, refactor all of this component out into media queries
+          },
+          menuItemStyles: {
+            padding: '0px 0px',
+            margin: '22px 0px',
+          },
+        }, []),
+
+      ]),
+
+      h('div.flex-column.flex-center', {
+      }, [
+        h('div', {
+          style: {
+            position: 'relative',
+          },
+        }, [
+          h(AccountDropdowns, {
+            accounts,
+            style: {
+              position: 'absolute',
+              left: 'calc(50% + 28px + 5.5px)',
+              top: '14px',
+            },
+            innerStyle: {
+              padding: '10px 16px',
+            },
+            useCssTransition: true,
+            selected: selectedAddress,
+            network,
+            identities,
+          }, []),
+        ]),
+
+        h(Identicon, {
+          diameter: 54,
+          address: selectedAddress,
+        }),
+
+        h('span.account-name', {
+          style: {},
+        }, [
+          selectedIdentity.name,
+        ]),
+
+      ]),
+    ]),
+
+    // 'Wallet' - Title
+    // Not visible on mobile
+    h('div.flex-column.wallet-view-title-wrapper', {}, [
+      h('span.wallet-view-title', {}, [
+        'Wallet',
+      ]),
+    ]),
+
+    this.renderWalletBalance(),
+
+    h(TokenList),
+
+  ])
+}
+
+// TODO: Extra wallets, for dev testing. Remove when PRing to master.
+// const extraWallet = h('div.flex-column.wallet-balance-wrapper', {}, [
+//     h('div.wallet-balance', {}, [
+//       h(BalanceComponent, {
+//         balanceValue: selectedAccount.balance,
+//         style: {},
+//       }),
+//     ]),
+// ])