From 86d367957fe8ac04462f716fe0ba2bfa4e5ff3f6 Mon Sep 17 00:00:00 2001
From: Dan Finlay <dan@danfinlay.com>
Date: Thu, 20 Jul 2017 12:38:38 -0700
Subject: Move responsive ui into its own folder for easier merges

---
 responsive-ui/app/components/account-dropdowns.js  | 227 ++++++++++
 responsive-ui/app/components/account-export.js     | 122 ++++++
 responsive-ui/app/components/account-panel.js      |  86 ++++
 responsive-ui/app/components/balance.js            |  89 ++++
 responsive-ui/app/components/binary-renderer.js    |  46 ++
 .../app/components/bn-as-decimal-input.js          | 174 ++++++++
 responsive-ui/app/components/buy-button-subview.js | 197 +++++++++
 responsive-ui/app/components/coinbase-form.js      |  63 +++
 responsive-ui/app/components/copyButton.js         |  59 +++
 responsive-ui/app/components/copyable.js           |  46 ++
 responsive-ui/app/components/custom-radio-list.js  |  60 +++
 responsive-ui/app/components/dropdown.js           |  89 ++++
 responsive-ui/app/components/editable-label.js     |  56 +++
 responsive-ui/app/components/ens-input.js          | 170 ++++++++
 responsive-ui/app/components/eth-balance.js        |  89 ++++
 responsive-ui/app/components/fiat-value.js         |  63 +++
 .../app/components/hex-as-decimal-input.js         | 154 +++++++
 responsive-ui/app/components/identicon.js          |  72 ++++
 responsive-ui/app/components/loading.js            |  53 +++
 responsive-ui/app/components/mascot.js             |  59 +++
 responsive-ui/app/components/mini-account-panel.js |  74 ++++
 responsive-ui/app/components/network.js            | 124 ++++++
 responsive-ui/app/components/notice.js             | 126 ++++++
 .../app/components/pending-msg-details.js          |  50 +++
 responsive-ui/app/components/pending-msg.js        |  56 +++
 .../app/components/pending-personal-msg-details.js |  60 +++
 .../app/components/pending-personal-msg.js         |  47 ++
 responsive-ui/app/components/pending-tx.js         | 480 +++++++++++++++++++++
 responsive-ui/app/components/qr-code.js            |  79 ++++
 responsive-ui/app/components/range-slider.js       |  58 +++
 responsive-ui/app/components/shapeshift-form.js    | 306 +++++++++++++
 responsive-ui/app/components/shift-list-item.js    | 204 +++++++++
 responsive-ui/app/components/tab-bar.js            |  36 ++
 responsive-ui/app/components/template.js           |  18 +
 responsive-ui/app/components/token-cell.js         |  72 ++++
 responsive-ui/app/components/token-list.js         | 192 +++++++++
 responsive-ui/app/components/tooltip.js            |  22 +
 .../app/components/transaction-list-item-icon.js   |  68 +++
 .../app/components/transaction-list-item.js        | 165 +++++++
 responsive-ui/app/components/transaction-list.js   |  79 ++++
 40 files changed, 4290 insertions(+)
 create mode 100644 responsive-ui/app/components/account-dropdowns.js
 create mode 100644 responsive-ui/app/components/account-export.js
 create mode 100644 responsive-ui/app/components/account-panel.js
 create mode 100644 responsive-ui/app/components/balance.js
 create mode 100644 responsive-ui/app/components/binary-renderer.js
 create mode 100644 responsive-ui/app/components/bn-as-decimal-input.js
 create mode 100644 responsive-ui/app/components/buy-button-subview.js
 create mode 100644 responsive-ui/app/components/coinbase-form.js
 create mode 100644 responsive-ui/app/components/copyButton.js
 create mode 100644 responsive-ui/app/components/copyable.js
 create mode 100644 responsive-ui/app/components/custom-radio-list.js
 create mode 100644 responsive-ui/app/components/dropdown.js
 create mode 100644 responsive-ui/app/components/editable-label.js
 create mode 100644 responsive-ui/app/components/ens-input.js
 create mode 100644 responsive-ui/app/components/eth-balance.js
 create mode 100644 responsive-ui/app/components/fiat-value.js
 create mode 100644 responsive-ui/app/components/hex-as-decimal-input.js
 create mode 100644 responsive-ui/app/components/identicon.js
 create mode 100644 responsive-ui/app/components/loading.js
 create mode 100644 responsive-ui/app/components/mascot.js
 create mode 100644 responsive-ui/app/components/mini-account-panel.js
 create mode 100644 responsive-ui/app/components/network.js
 create mode 100644 responsive-ui/app/components/notice.js
 create mode 100644 responsive-ui/app/components/pending-msg-details.js
 create mode 100644 responsive-ui/app/components/pending-msg.js
 create mode 100644 responsive-ui/app/components/pending-personal-msg-details.js
 create mode 100644 responsive-ui/app/components/pending-personal-msg.js
 create mode 100644 responsive-ui/app/components/pending-tx.js
 create mode 100644 responsive-ui/app/components/qr-code.js
 create mode 100644 responsive-ui/app/components/range-slider.js
 create mode 100644 responsive-ui/app/components/shapeshift-form.js
 create mode 100644 responsive-ui/app/components/shift-list-item.js
 create mode 100644 responsive-ui/app/components/tab-bar.js
 create mode 100644 responsive-ui/app/components/template.js
 create mode 100644 responsive-ui/app/components/token-cell.js
 create mode 100644 responsive-ui/app/components/token-list.js
 create mode 100644 responsive-ui/app/components/tooltip.js
 create mode 100644 responsive-ui/app/components/transaction-list-item-icon.js
 create mode 100644 responsive-ui/app/components/transaction-list-item.js
 create mode 100644 responsive-ui/app/components/transaction-list.js

(limited to 'responsive-ui/app/components')

diff --git a/responsive-ui/app/components/account-dropdowns.js b/responsive-ui/app/components/account-dropdowns.js
new file mode 100644
index 000000000..d1d319477
--- /dev/null
+++ b/responsive-ui/app/components/account-dropdowns.js
@@ -0,0 +1,227 @@
+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')
+
+class AccountDropdowns extends Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      accountSelectorActive: false,
+      optionsMenuActive: false,
+    }
+  }
+
+  renderAccounts () {
+    const { identities, selected } = this.props
+
+    return Object.keys(identities).map((key) => {
+      const identity = identities[key]
+      const isSelected = identity.address === selected
+
+      return h(
+        DropdownMenuItem,
+        {
+          closeMenu: () => {},
+          onClick: () => {
+            this.props.actions.showAccountDetail(identity.address)
+          },
+        },
+        [
+          h(
+            Identicon,
+            {
+              address: identity.address,
+              diameter: 16,
+            },
+          ),
+          h('span', { style: { marginLeft: '10px' } }, identity.name || ''),
+          h('span', { style: { marginLeft: '10px' } }, isSelected ? h('.check', '✓') : null),
+        ]
+      )
+    })
+  }
+
+  renderAccountSelector () {
+    const { actions } = this.props
+    const { accountSelectorActive } = this.state
+
+    return h(
+      Dropdown,
+      {
+        style: {
+          marginLeft: '-125px',
+          minWidth: '180px',
+        },
+        isOpen: accountSelectorActive,
+        onClickOutside: () => { this.setState({ accountSelectorActive: false }) },
+      },
+      [
+        ...this.renderAccounts(),
+        h(
+          DropdownMenuItem,
+          {
+            closeMenu: () => {},
+            onClick: () => actions.addNewAccount(),
+          },
+          [
+            h(
+              Identicon,
+              {
+                diameter: 16,
+              },
+            ),
+            h('span', { style: { marginLeft: '10px' } }, 'Create Account'),
+          ],
+        ),
+        h(
+          DropdownMenuItem,
+          {
+            closeMenu: () => {},
+            onClick: () => actions.showImportPage(),
+          },
+          [
+            h(
+              Identicon,
+              {
+                diameter: 16,
+              },
+            ),
+            h('span', { style: { marginLeft: '10px' } }, 'Import Account'),
+          ]
+        ),
+      ]
+    )
+  }
+
+  renderAccountOptions () {
+    const { actions } = this.props
+    const { optionsMenuActive } = this.state
+
+    return h(
+      Dropdown,
+      {
+        style: {
+          marginLeft: '-162px',
+          minWidth: '180px',
+        },
+        isOpen: optionsMenuActive,
+        onClickOutside: () => { this.setState({ optionsMenuActive: false }) },
+      },
+      [
+        h(
+          DropdownMenuItem,
+          {
+            closeMenu: () => {},
+            onClick: () => actions.showConfigPage(),
+          },
+          'Account Settings',
+        ),
+        h(
+          DropdownMenuItem,
+          {
+            closeMenu: () => {},
+            onClick: () => {
+              const { selected, network } = this.props
+              const url = genAccountLink(selected, network)
+              global.platform.openWindow({ url })
+            },
+          },
+          'View account on Etherscan',
+        ),
+        h(
+          DropdownMenuItem,
+          {
+            closeMenu: () => {},
+            onClick: () => {
+              const { selected } = this.props
+              const checkSumAddress = selected && ethUtil.toChecksumAddress(selected)
+              copyToClipboard(checkSumAddress)
+            },
+          },
+          'Copy Address to clipboard',
+        ),
+        h(
+          DropdownMenuItem,
+          {
+            closeMenu: () => {},
+            onClick: () => {
+              actions.requestAccountExport()
+            },
+          },
+          'Export Private Key',
+        ),
+      ]
+    )
+  }
+
+  render () {
+    const { style } = this.props
+    const { optionsMenuActive, accountSelectorActive } = this.state
+
+    return h(
+      'span',
+      {
+        style: style,
+      },
+      [
+        h(
+          'i.fa.fa-angle-down',
+          {
+            style: {},
+            onClick: (event) => {
+              event.stopPropagation()
+              this.setState({
+                accountSelectorActive: !accountSelectorActive,
+                optionsMenuActive: false,
+              })
+            },
+          },
+          this.renderAccountSelector(),
+        ),
+        h(
+          'i.fa.fa-ellipsis-h',
+          {
+            style: { 'marginLeft': '10px'},
+            onClick: (event) => {
+              event.stopPropagation()
+              this.setState({
+                accountSelectorActive: false,
+                optionsMenuActive: !optionsMenuActive,
+              })
+            },
+          },
+          this.renderAccountOptions()
+        ),
+      ]
+    )
+  }
+}
+
+AccountDropdowns.propTypes = {
+  identities: PropTypes.objectOf(PropTypes.object),
+  selected: PropTypes.string,
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    actions: {
+      showConfigPage: () => dispatch(actions.showConfigPage()),
+      requestAccountExport: () => dispatch(actions.requestExportAccount()),
+      showAccountDetail: (address) => dispatch(actions.showAccountDetail(address)),
+      addNewAccount: () => dispatch(actions.addNewAccount()),
+      showImportPage: () => dispatch(actions.showImportPage()),
+    },
+  }
+}
+
+module.exports = {
+  AccountDropdowns: connect(null, mapDispatchToProps)(AccountDropdowns),
+}
diff --git a/responsive-ui/app/components/account-export.js b/responsive-ui/app/components/account-export.js
new file mode 100644
index 000000000..394d878f7
--- /dev/null
+++ b/responsive-ui/app/components/account-export.js
@@ -0,0 +1,122 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const copyToClipboard = require('copy-to-clipboard')
+const actions = require('../actions')
+const ethUtil = require('ethereumjs-util')
+const connect = require('react-redux').connect
+
+module.exports = connect(mapStateToProps)(ExportAccountView)
+
+inherits(ExportAccountView, Component)
+function ExportAccountView () {
+  Component.call(this)
+}
+
+function mapStateToProps (state) {
+  return {
+    warning: state.appState.warning,
+  }
+}
+
+ExportAccountView.prototype.render = function () {
+  var state = this.props
+  var accountDetail = state.accountDetail
+
+  if (!accountDetail) return h('div')
+  var accountExport = accountDetail.accountExport
+
+  var notExporting = accountExport === 'none'
+  var exportRequested = accountExport === 'requested'
+  var accountExported = accountExport === 'completed'
+
+  if (notExporting) return h('div')
+
+  if (exportRequested) {
+    var warning = `Export private keys at your own risk.`
+    return (
+      h('div', {
+        style: {
+          display: 'inline-block',
+          textAlign: 'center',
+        },
+      },
+        [
+          h('div', {
+            key: 'exporting',
+            style: {
+              margin: '0 20px',
+            },
+          }, [
+            h('p.error', warning),
+            h('input#exportAccount.sizing-input', {
+              type: 'password',
+              placeholder: 'confirm password',
+              onKeyPress: this.onExportKeyPress.bind(this),
+              style: {
+                position: 'relative',
+                top: '1.5px',
+                marginBottom: '7px',
+              },
+            }),
+          ]),
+          h('div', {
+            key: 'buttons',
+            style: {
+              margin: '0 20px',
+            },
+          },
+            [
+              h('button', {
+                onClick: () => this.onExportKeyPress({ key: 'Enter', preventDefault: () => {} }),
+                style: {
+                  marginRight: '10px',
+                },
+              }, 'Submit'),
+              h('button', {
+                onClick: () => this.props.dispatch(actions.backToAccountDetail(this.props.address)),
+              }, 'Cancel'),
+            ]),
+          (this.props.warning) && (
+          h('span.error', {
+            style: {
+              margin: '20px',
+            },
+          }, this.props.warning.split('-'))
+        ),
+        ])
+    )
+  }
+
+  if (accountExported) {
+    return h('div.privateKey', {
+      style: {
+        margin: '0 20px',
+      },
+    }, [
+      h('label', 'Your private key (click to copy):'),
+      h('p.error.cursor-pointer', {
+        style: {
+          textOverflow: 'ellipsis',
+          overflow: 'hidden',
+          webkitUserSelect: 'text',
+          width: '100%',
+        },
+        onClick: function (event) {
+          copyToClipboard(ethUtil.stripHexPrefix(accountDetail.privateKey))
+        },
+      }, ethUtil.stripHexPrefix(accountDetail.privateKey)),
+      h('button', {
+        onClick: () => this.props.dispatch(actions.backToAccountDetail(this.props.address)),
+      }, 'Done'),
+    ])
+  }
+}
+
+ExportAccountView.prototype.onExportKeyPress = function (event) {
+  if (event.key !== 'Enter') return
+  event.preventDefault()
+
+  var input = document.getElementById('exportAccount').value
+  this.props.dispatch(actions.exportAccount(input, this.props.address))
+}
diff --git a/responsive-ui/app/components/account-panel.js b/responsive-ui/app/components/account-panel.js
new file mode 100644
index 000000000..abaaf8163
--- /dev/null
+++ b/responsive-ui/app/components/account-panel.js
@@ -0,0 +1,86 @@
+const inherits = require('util').inherits
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const Identicon = require('./identicon')
+const formatBalance = require('../util').formatBalance
+const addressSummary = require('../util').addressSummary
+
+module.exports = AccountPanel
+
+
+inherits(AccountPanel, Component)
+function AccountPanel () {
+  Component.call(this)
+}
+
+AccountPanel.prototype.render = function () {
+  var state = this.props
+  var identity = state.identity || {}
+  var account = state.account || {}
+  var isFauceting = state.isFauceting
+
+  var panelState = {
+    key: `accountPanel${identity.address}`,
+    identiconKey: identity.address,
+    identiconLabel: identity.name || '',
+    attributes: [
+      {
+        key: 'ADDRESS',
+        value: addressSummary(identity.address),
+      },
+      balanceOrFaucetingIndication(account, isFauceting),
+    ],
+  }
+
+  return (
+
+    h('.identity-panel.flex-row.flex-space-between', {
+      style: {
+        flex: '1 0 auto',
+        cursor: panelState.onClick ? 'pointer' : undefined,
+      },
+      onClick: panelState.onClick,
+    }, [
+
+      // account identicon
+      h('.identicon-wrapper.flex-column.select-none', [
+        h(Identicon, {
+          address: panelState.identiconKey,
+          imageify: state.imageifyIdenticons,
+        }),
+        h('span.font-small', panelState.identiconLabel.substring(0, 7) + '...'),
+      ]),
+
+      // account address, balance
+      h('.identity-data.flex-column.flex-justify-center.flex-grow.select-none', [
+
+        panelState.attributes.map((attr) => {
+          return h('.flex-row.flex-space-between', {
+            key: '' + Math.round(Math.random() * 1000000),
+          }, [
+            h('label.font-small.no-select', attr.key),
+            h('span.font-small', attr.value),
+          ])
+        }),
+      ]),
+
+    ])
+
+  )
+}
+
+function balanceOrFaucetingIndication (account, isFauceting) {
+  // Temporarily deactivating isFauceting indication
+  // because it shows fauceting for empty restored accounts.
+  if (/* isFauceting*/ false) {
+    return {
+      key: 'Account is auto-funding.',
+      value: 'Please wait.',
+    }
+  } else {
+    return {
+      key: 'BALANCE',
+      value: formatBalance(account.balance),
+    }
+  }
+}
diff --git a/responsive-ui/app/components/balance.js b/responsive-ui/app/components/balance.js
new file mode 100644
index 000000000..57ca84564
--- /dev/null
+++ b/responsive-ui/app/components/balance.js
@@ -0,0 +1,89 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const formatBalance = require('../util').formatBalance
+const generateBalanceObject = require('../util').generateBalanceObject
+const Tooltip = require('./tooltip.js')
+const FiatValue = require('./fiat-value.js')
+
+module.exports = EthBalanceComponent
+
+inherits(EthBalanceComponent, Component)
+function EthBalanceComponent () {
+  Component.call(this)
+}
+
+EthBalanceComponent.prototype.render = function () {
+  var props = this.props
+  let { value } = props
+  var style = props.style
+  var needsParse = this.props.needsParse !== undefined ? this.props.needsParse : true
+  value = value ? formatBalance(value, 6, needsParse) : '...'
+  var width = props.width
+
+  return (
+
+    h('.ether-balance.ether-balance-amount', {
+      style: style,
+    }, [
+      h('div', {
+        style: {
+          display: 'inline',
+          width: width,
+        },
+      }, this.renderBalance(value)),
+    ])
+
+  )
+}
+EthBalanceComponent.prototype.renderBalance = function (value) {
+  var props = this.props
+  if (value === 'None') return value
+  if (value === '...') return value
+  var balanceObj = generateBalanceObject(value, props.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 (props.shorten) {
+    balance = balanceObj.shortBalance
+  } else {
+    balance = balanceObj.balance
+  }
+
+  var label = balanceObj.label
+
+  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',
+          },
+        }, this.props.incoming ? `+${balance}` : balance),
+        h('div', {
+          style: {
+            color: ' #AEAEAE',
+            fontSize: '12px',
+            marginLeft: '5px',
+          },
+        }, label),
+      ]),
+
+      showFiat ? h(FiatValue, { value: props.value }) : null,
+    ]))
+  )
+}
diff --git a/responsive-ui/app/components/binary-renderer.js b/responsive-ui/app/components/binary-renderer.js
new file mode 100644
index 000000000..0b6a1f5c2
--- /dev/null
+++ b/responsive-ui/app/components/binary-renderer.js
@@ -0,0 +1,46 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const ethUtil = require('ethereumjs-util')
+const extend = require('xtend')
+
+module.exports = BinaryRenderer
+
+inherits(BinaryRenderer, Component)
+function BinaryRenderer () {
+  Component.call(this)
+}
+
+BinaryRenderer.prototype.render = function () {
+  const props = this.props
+  const { value, style } = props
+  const text = this.hexToText(value)
+
+  const defaultStyle = extend({
+    width: '315px',
+    maxHeight: '210px',
+    resize: 'none',
+    border: 'none',
+    background: 'white',
+    padding: '3px',
+  }, style)
+
+  return (
+    h('textarea.font-small', {
+      readOnly: true,
+      style: defaultStyle,
+      defaultValue: text,
+    })
+  )
+}
+
+BinaryRenderer.prototype.hexToText = function (hex) {
+  try {
+    const stripped = ethUtil.stripHexPrefix(hex)
+    const buff = Buffer.from(stripped, 'hex')
+    return buff.toString('utf8')
+  } catch (e) {
+    return hex
+  }
+}
+
diff --git a/responsive-ui/app/components/bn-as-decimal-input.js b/responsive-ui/app/components/bn-as-decimal-input.js
new file mode 100644
index 000000000..f3ace4720
--- /dev/null
+++ b/responsive-ui/app/components/bn-as-decimal-input.js
@@ -0,0 +1,174 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const ethUtil = require('ethereumjs-util')
+const BN = ethUtil.BN
+const extend = require('xtend')
+
+module.exports = BnAsDecimalInput
+
+inherits(BnAsDecimalInput, Component)
+function BnAsDecimalInput () {
+  this.state = { invalid: null }
+  Component.call(this)
+}
+
+/* Bn as Decimal Input
+ *
+ * A component for allowing easy, decimal editing
+ * of a passed in bn string value.
+ *
+ * On change, calls back its `onChange` function parameter
+ * and passes it an updated bn string.
+ */
+
+BnAsDecimalInput.prototype.render = function () {
+  const props = this.props
+  const state = this.state
+
+  const { value, scale, precision, onChange, min, max } = props
+
+  const suffix = props.suffix
+  const style = props.style
+  const valueString = value.toString(10)
+  const newValue = this.downsize(valueString, scale, precision)
+
+  return (
+    h('.flex-column', [
+      h('.flex-row', {
+        style: {
+          alignItems: 'flex-end',
+          lineHeight: '13px',
+          fontFamily: 'Montserrat Light',
+          textRendering: 'geometricPrecision',
+        },
+      }, [
+        h('input.hex-input', {
+          type: 'number',
+          step: 'any',
+          required: true,
+          min,
+          max,
+          style: extend({
+            display: 'block',
+            textAlign: 'right',
+            backgroundColor: 'transparent',
+            border: '1px solid #bdbdbd',
+
+          }, style),
+          value: newValue,
+          onBlur: (event) => {
+            this.updateValidity(event)
+          },
+          onChange: (event) => {
+            this.updateValidity(event)
+            const value = (event.target.value === '') ? '' : event.target.value
+
+
+            const scaledNumber = this.upsize(value, scale, precision)
+            const precisionBN = new BN(scaledNumber, 10)
+            onChange(precisionBN, event.target.checkValidity())
+          },
+          onInvalid: (event) => {
+            const msg = this.constructWarning()
+            if (msg === state.invalid) {
+              return
+            }
+            this.setState({ invalid: msg })
+            event.preventDefault()
+            return false
+          },
+        }),
+        h('div', {
+          style: {
+            color: ' #AEAEAE',
+            fontSize: '12px',
+            marginLeft: '5px',
+            marginRight: '6px',
+            width: '20px',
+          },
+        }, suffix),
+      ]),
+
+      state.invalid ? h('span.error', {
+        style: {
+          position: 'absolute',
+          right: '0px',
+          textAlign: 'right',
+          transform: 'translateY(26px)',
+          padding: '3px',
+          background: 'rgba(255,255,255,0.85)',
+          zIndex: '1',
+          textTransform: 'capitalize',
+          border: '2px solid #E20202',
+        },
+      }, state.invalid) : null,
+    ])
+  )
+}
+
+BnAsDecimalInput.prototype.setValid = function (message) {
+  this.setState({ invalid: null })
+}
+
+BnAsDecimalInput.prototype.updateValidity = function (event) {
+  const target = event.target
+  const value = this.props.value
+  const newValue = target.value
+
+  if (value === newValue) {
+    return
+  }
+
+  const valid = target.checkValidity()
+
+  if (valid) {
+    this.setState({ invalid: null })
+  }
+}
+
+BnAsDecimalInput.prototype.constructWarning = function () {
+  const { name, min, max } = this.props
+  let message = name ? name + ' ' : ''
+
+  if (min && max) {
+    message += `must be greater than or equal to  ${min} and less than or equal to ${max}.`
+  } else if (min) {
+    message += `must be greater than or equal to ${min}.`
+  } else if (max) {
+    message += `must be less than or equal to ${max}.`
+  } else {
+    message += 'Invalid input.'
+  }
+
+  return message
+}
+
+
+BnAsDecimalInput.prototype.downsize = function (number, scale, precision) {
+  // if there is no scaling, simply return the number
+  if (scale === 0) {
+    return Number(number)
+  } else {
+    // if the scale is the same as the precision, account for this edge case.
+    var decimals = (scale === precision) ? -1 : scale - precision
+    return Number(number.slice(0, -scale) + '.' + number.slice(-scale, decimals))
+  }
+}
+
+BnAsDecimalInput.prototype.upsize = function (number, scale, precision) {
+  var stringArray = number.toString().split('.')
+  var decimalLength = stringArray[1] ? stringArray[1].length : 0
+  var newString = stringArray[0]
+
+  // If there is scaling and decimal parts exist, integrate them in.
+  if ((scale !== 0) && (decimalLength !== 0)) {
+    newString += stringArray[1].slice(0, precision)
+  }
+
+  // Add 0s to account for the upscaling.
+  for (var i = decimalLength; i < scale; i++) {
+    newString += '0'
+  }
+  return newString
+}
diff --git a/responsive-ui/app/components/buy-button-subview.js b/responsive-ui/app/components/buy-button-subview.js
new file mode 100644
index 000000000..87084f92d
--- /dev/null
+++ b/responsive-ui/app/components/buy-button-subview.js
@@ -0,0 +1,197 @@
+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 CoinbaseForm = require('./coinbase-form')
+const ShapeshiftForm = require('./shapeshift-form')
+const Loading = require('./loading')
+const AccountPanel = require('./account-panel')
+const RadioList = require('./custom-radio-list')
+
+module.exports = connect(mapStateToProps)(BuyButtonSubview)
+
+function mapStateToProps (state) {
+  return {
+    identity: state.appState.identity,
+    account: state.metamask.accounts[state.appState.buyView.buyAddress],
+    warning: state.appState.warning,
+    buyView: state.appState.buyView,
+    network: state.metamask.network,
+    provider: state.metamask.provider,
+    context: state.appState.currentView.context,
+    isSubLoading: state.appState.isSubLoading,
+  }
+}
+
+inherits(BuyButtonSubview, Component)
+function BuyButtonSubview () {
+  Component.call(this)
+}
+
+BuyButtonSubview.prototype.render = function () {
+  const props = this.props
+  const isLoading = props.isSubLoading
+
+  return (
+    h('.buy-eth-section.flex-column', {
+      style: {
+        alignItems: 'center',
+      },
+    }, [
+             // back button
+      h('.flex-row', {
+        style: {
+          alignItems: 'center',
+          justifyContent: 'center',
+        },
+      }, [
+        h('i.fa.fa-arrow-left.fa-lg.cursor-pointer.color-orange', {
+          onClick: this.backButtonContext.bind(this),
+          style: {
+            position: 'absolute',
+            left: '10px',
+          },
+        }),
+        h('h2.text-transform-uppercase.flex-center', {
+          style: {
+            width: '100vw',
+            background: 'rgb(235, 235, 235)',
+            color: 'rgb(174, 174, 174)',
+            paddingTop: '4px',
+            paddingBottom: '4px',
+          },
+        }, 'Buy Eth'),
+      ]),
+      h('div', {
+        style: {
+          position: 'absolute',
+          top: '57vh',
+          left: '49vw',
+        },
+      }, [
+        h(Loading, {isLoading}),
+      ]),
+      h('div', {
+        style: {
+          width: '80%',
+        },
+      }, [
+        h(AccountPanel, {
+          showFullAddress: true,
+          identity: props.identity,
+          account: props.account,
+        }),
+      ]),
+      h('h3.text-transform-uppercase', {
+        style: {
+          paddingLeft: '15px',
+          fontFamily: 'Montserrat Light',
+          width: '100vw',
+          background: 'rgb(235, 235, 235)',
+          color: 'rgb(174, 174, 174)',
+          paddingTop: '4px',
+          paddingBottom: '4px',
+        },
+      }, 'Select Service'),
+      h('.flex-row.selected-exchange', {
+        style: {
+          position: 'relative',
+          right: '35px',
+          marginTop: '20px',
+          marginBottom: '20px',
+        },
+      }, [
+        h(RadioList, {
+          defaultFocus: props.buyView.subview,
+          labels: [
+            'Coinbase',
+            'ShapeShift',
+          ],
+          subtext: {
+            'Coinbase': 'Crypto/FIAT (USA only)',
+            'ShapeShift': 'Crypto',
+          },
+          onClick: this.radioHandler.bind(this),
+        }),
+      ]),
+      h('h3.text-transform-uppercase', {
+        style: {
+          paddingLeft: '15px',
+          fontFamily: 'Montserrat Light',
+          width: '100vw',
+          background: 'rgb(235, 235, 235)',
+          color: 'rgb(174, 174, 174)',
+          paddingTop: '4px',
+          paddingBottom: '4px',
+        },
+      }, props.buyView.subview),
+      this.formVersionSubview(),
+    ])
+  )
+}
+
+BuyButtonSubview.prototype.formVersionSubview = function () {
+  const network = this.props.network
+  if (network === '1') {
+    if (this.props.buyView.formView.coinbase) {
+      return h(CoinbaseForm, this.props)
+    } else if (this.props.buyView.formView.shapeshift) {
+      return h(ShapeshiftForm, this.props)
+    }
+  } else {
+    return h('div.flex-column', {
+      style: {
+        alignItems: 'center',
+        margin: '50px',
+      },
+    }, [
+      h('h3.text-transform-uppercase', {
+        style: {
+          width: '225px',
+          marginBottom: '15px',
+        },
+      }, 'In order to access this feature, please switch to the Main Network'),
+      ((network === '3') || (network === '4') || (network === '42')) ? h('h3.text-transform-uppercase', 'or go to the') : null,
+      (network === '3') ? h('button.text-transform-uppercase', {
+        onClick: () => this.props.dispatch(actions.buyEth({ network })),
+        style: {
+          marginTop: '15px',
+        },
+      }, 'Ropsten Test Faucet') : null,
+      (network === '4') ? h('button.text-transform-uppercase', {
+        onClick: () => this.props.dispatch(actions.buyEth({ network })),
+        style: {
+          marginTop: '15px',
+        },
+      }, 'Rinkeby Test Faucet') : null,
+      (network === '42') ? h('button.text-transform-uppercase', {
+        onClick: () => this.props.dispatch(actions.buyEth({ network })),
+        style: {
+          marginTop: '15px',
+        },
+      }, 'Kovan Test Faucet') : null,
+    ])
+  }
+}
+
+BuyButtonSubview.prototype.navigateTo = function (url) {
+  global.platform.openWindow({ url })
+}
+
+BuyButtonSubview.prototype.backButtonContext = function () {
+  if (this.props.context === 'confTx') {
+    this.props.dispatch(actions.showConfTxPage(false))
+  } else {
+    this.props.dispatch(actions.goHome())
+  }
+}
+
+BuyButtonSubview.prototype.radioHandler = function (event) {
+  switch (event.target.title) {
+    case 'Coinbase':
+      return this.props.dispatch(actions.coinBaseSubview())
+    case 'ShapeShift':
+      return this.props.dispatch(actions.shapeShiftSubview(this.props.provider.type))
+  }
+}
diff --git a/responsive-ui/app/components/coinbase-form.js b/responsive-ui/app/components/coinbase-form.js
new file mode 100644
index 000000000..f44d86045
--- /dev/null
+++ b/responsive-ui/app/components/coinbase-form.js
@@ -0,0 +1,63 @@
+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(mapStateToProps)(CoinbaseForm)
+
+function mapStateToProps (state) {
+  return {
+    warning: state.appState.warning,
+  }
+}
+
+inherits(CoinbaseForm, Component)
+
+function CoinbaseForm () {
+  Component.call(this)
+}
+
+CoinbaseForm.prototype.render = function () {
+  var props = this.props
+
+  return h('.flex-column', {
+    style: {
+      marginTop: '35px',
+      padding: '25px',
+      width: '100%',
+    },
+  }, [
+    h('.flex-row', {
+      style: {
+        justifyContent: 'space-around',
+        margin: '33px',
+        marginTop: '0px',
+      },
+    }, [
+      h('button.btn-green', {
+        onClick: this.toCoinbase.bind(this),
+      }, 'Continue to Coinbase'),
+
+      h('button.btn-red', {
+        onClick: () => props.dispatch(actions.backTobuyView(props.accounts.address)),
+      }, 'Cancel'),
+    ]),
+  ])
+}
+
+CoinbaseForm.prototype.toCoinbase = function () {
+  const props = this.props
+  const address = props.buyView.buyAddress
+  props.dispatch(actions.buyEth({ network: '1', address, amount: 0 }))
+}
+
+CoinbaseForm.prototype.renderLoading = function () {
+  return h('img', {
+    style: {
+      width: '27px',
+      marginRight: '-27px',
+    },
+    src: 'images/loading.svg',
+  })
+}
diff --git a/responsive-ui/app/components/copyButton.js b/responsive-ui/app/components/copyButton.js
new file mode 100644
index 000000000..a25d0719c
--- /dev/null
+++ b/responsive-ui/app/components/copyButton.js
@@ -0,0 +1,59 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const copyToClipboard = require('copy-to-clipboard')
+
+const Tooltip = require('./tooltip')
+
+module.exports = CopyButton
+
+inherits(CopyButton, Component)
+function CopyButton () {
+  Component.call(this)
+}
+
+// As parameters, accepts:
+// "value", which is the value to copy (mandatory)
+// "title", which is the text to show on hover (optional, defaults to 'Copy')
+CopyButton.prototype.render = function () {
+  const props = this.props
+  const state = this.state || {}
+
+  const value = props.value
+  const copied = state.copied
+
+  const message = copied ? 'Copied' : props.title || ' Copy '
+
+  return h('.copy-button', {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+    },
+  }, [
+
+    h(Tooltip, {
+      title: message,
+    }, [
+      h('i.fa.fa-clipboard.cursor-pointer.color-orange', {
+        style: {
+          margin: '5px',
+        },
+        onClick: (event) => {
+          event.preventDefault()
+          event.stopPropagation()
+          copyToClipboard(value)
+          this.debounceRestore()
+        },
+      }),
+    ]),
+
+  ])
+}
+
+CopyButton.prototype.debounceRestore = function () {
+  this.setState({ copied: true })
+  clearTimeout(this.timeout)
+  this.timeout = setTimeout(() => {
+    this.setState({ copied: false })
+  }, 850)
+}
diff --git a/responsive-ui/app/components/copyable.js b/responsive-ui/app/components/copyable.js
new file mode 100644
index 000000000..a4f6f4bc6
--- /dev/null
+++ b/responsive-ui/app/components/copyable.js
@@ -0,0 +1,46 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+
+const Tooltip = require('./tooltip')
+const copyToClipboard = require('copy-to-clipboard')
+
+module.exports = Copyable
+
+inherits(Copyable, Component)
+function Copyable () {
+  Component.call(this)
+  this.state = {
+    copied: false,
+  }
+}
+
+Copyable.prototype.render = function () {
+  const props = this.props
+  const state = this.state
+  const { value, children } = props
+  const { copied } = state
+
+  return h(Tooltip, {
+    title: copied ? 'Copied!' : 'Copy',
+    position: 'bottom',
+  }, h('span', {
+    style: {
+      cursor: 'pointer',
+    },
+    onClick: (event) => {
+      event.preventDefault()
+      event.stopPropagation()
+      copyToClipboard(value)
+      this.debounceRestore()
+    },
+  }, children))
+}
+
+Copyable.prototype.debounceRestore = function () {
+  this.setState({ copied: true })
+  clearTimeout(this.timeout)
+  this.timeout = setTimeout(() => {
+    this.setState({ copied: false })
+  }, 850)
+}
diff --git a/responsive-ui/app/components/custom-radio-list.js b/responsive-ui/app/components/custom-radio-list.js
new file mode 100644
index 000000000..a4c525396
--- /dev/null
+++ b/responsive-ui/app/components/custom-radio-list.js
@@ -0,0 +1,60 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+
+module.exports = RadioList
+
+inherits(RadioList, Component)
+function RadioList () {
+  Component.call(this)
+}
+
+RadioList.prototype.render = function () {
+  const props = this.props
+  const activeClass = '.custom-radio-selected'
+  const inactiveClass = '.custom-radio-inactive'
+  const {
+    labels,
+    defaultFocus,
+  } = props
+
+
+  return (
+    h('.flex-row', {
+      style: {
+        fontSize: '12px',
+      },
+    }, [
+      h('.flex-column.custom-radios', {
+        style: {
+          marginRight: '5px',
+        },
+      },
+        labels.map((lable, i) => {
+          let isSelcted = (this.state !== null)
+          isSelcted = isSelcted ? (this.state.selected === lable) : (defaultFocus === lable)
+          return h(isSelcted ? activeClass : inactiveClass, {
+            title: lable,
+            onClick: (event) => {
+              this.setState({selected: event.target.title})
+              props.onClick(event)
+            },
+          })
+        })
+      ),
+      h('.text', {},
+        labels.map((lable) => {
+          if (props.subtext) {
+            return h('.flex-row', {}, [
+              h('.radio-titles', lable),
+              h('.radio-titles-subtext', `- ${props.subtext[lable]}`),
+            ])
+          } else {
+            return h('.radio-titles', lable)
+          }
+        })
+      ),
+    ])
+  )
+}
+
diff --git a/responsive-ui/app/components/dropdown.js b/responsive-ui/app/components/dropdown.js
new file mode 100644
index 000000000..e77b4c40c
--- /dev/null
+++ b/responsive-ui/app/components/dropdown.js
@@ -0,0 +1,89 @@
+const Component = require('react').Component
+const PropTypes = require('react').PropTypes
+const h = require('react-hyperscript')
+const MenuDroppo = require('menu-droppo')
+
+const noop = () => {}
+
+class Dropdown extends Component {
+  render () {
+    const { isOpen, onClickOutside, style, children } = this.props
+
+    return h(
+      MenuDroppo,
+      {
+        isOpen,
+        zIndex: 11,
+        onClickOutside,
+        style,
+        innerStyle: {
+          borderRadius: '4px',
+          padding: '8px 16px',
+          background: 'rgba(0, 0, 0, 0.8)',
+          boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
+        },
+      },
+      [
+        h(
+          'style',
+          `
+          li.dropdown-menu-item:hover { color:rgb(225, 225, 225); }
+          li.dropdown-menu-item { color: rgb(185, 185, 185); }
+          `
+        ),
+        ...children,
+      ]
+    )
+  }
+}
+
+Dropdown.defaultProps = {
+  isOpen: false,
+  onClick: noop,
+}
+
+Dropdown.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onClick: PropTypes.func.isRequired,
+  children: PropTypes.node,
+  style: PropTypes.object.isRequired,
+}
+
+class DropdownMenuItem extends Component {
+  render () {
+    const { onClick, closeMenu, children } = this.props
+
+    return h(
+      'li.dropdown-menu-item',
+      {
+        onClick: () => {
+          onClick()
+          closeMenu()
+        },
+        style: {
+          listStyle: 'none',
+          padding: '8px 0px 8px 0px',
+          fontSize: '12px',
+          fontStyle: 'normal',
+          fontFamily: 'Montserrat Regular',
+          cursor: 'pointer',
+          display: 'flex',
+          justifyContent: 'flex-start',
+          alignItems: 'center',
+        },
+      },
+      children
+    )
+  }
+}
+
+DropdownMenuItem.propTypes = {
+  closeMenu: PropTypes.func.isRequired,
+  onClick: PropTypes.func.isRequired,
+  children: PropTypes.node,
+}
+
+module.exports = {
+  Dropdown,
+  DropdownMenuItem,
+}
diff --git a/responsive-ui/app/components/editable-label.js b/responsive-ui/app/components/editable-label.js
new file mode 100644
index 000000000..167be7eaf
--- /dev/null
+++ b/responsive-ui/app/components/editable-label.js
@@ -0,0 +1,56 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const findDOMNode = require('react-dom').findDOMNode
+
+module.exports = EditableLabel
+
+inherits(EditableLabel, Component)
+function EditableLabel () {
+  Component.call(this)
+}
+
+EditableLabel.prototype.render = function () {
+  const props = this.props
+  const state = this.state
+
+  if (state && state.isEditingLabel) {
+    return h('div.editable-label', [
+      h('input.sizing-input', {
+        defaultValue: props.textValue,
+        maxLength: '20',
+        onKeyPress: (event) => {
+          this.saveIfEnter(event)
+        },
+      }),
+      h('button.editable-button', {
+        onClick: () => this.saveText(),
+      }, 'Save'),
+    ])
+  } else {
+    return h('div.name-label', {
+      onClick: (event) => {
+        const nameAttribute = event.target.getAttribute('name')
+        // checks for class to handle smaller CTA above the account name
+        const classAttribute = event.target.getAttribute('class')
+        if (nameAttribute === 'edit' || classAttribute === 'edit-text') {
+          this.setState({ isEditingLabel: true })
+        }
+      },
+    }, this.props.children)
+  }
+}
+
+EditableLabel.prototype.saveIfEnter = function (event) {
+  if (event.key === 'Enter') {
+    this.saveText()
+  }
+}
+
+EditableLabel.prototype.saveText = function () {
+  var container = findDOMNode(this)
+  var text = container.querySelector('.editable-label input').value
+  var truncatedText = text.substring(0, 20)
+  this.props.saveText(truncatedText)
+  this.setState({ isEditingLabel: false, textLabel: truncatedText })
+}
diff --git a/responsive-ui/app/components/ens-input.js b/responsive-ui/app/components/ens-input.js
new file mode 100644
index 000000000..3a33ebf74
--- /dev/null
+++ b/responsive-ui/app/components/ens-input.js
@@ -0,0 +1,170 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const extend = require('xtend')
+const debounce = require('debounce')
+const copyToClipboard = require('copy-to-clipboard')
+const ENS = require('ethjs-ens')
+const networkMap = require('ethjs-ens/lib/network-map.json')
+const ensRE = /.+\.eth$/
+const ZERO_ADDRESS = '0x0000000000000000000000000000000000000000'
+
+
+module.exports = EnsInput
+
+inherits(EnsInput, Component)
+function EnsInput () {
+  Component.call(this)
+}
+
+EnsInput.prototype.render = function () {
+  const props = this.props
+  const opts = extend(props, {
+    list: 'addresses',
+    onChange: () => {
+      const network = this.props.network
+      const networkHasEnsSupport = getNetworkEnsSupport(network)
+      if (!networkHasEnsSupport) return
+
+      const recipient = document.querySelector('input[name="address"]').value
+      if (recipient.match(ensRE) === null) {
+        return this.setState({
+          loadingEns: false,
+          ensResolution: null,
+          ensFailure: null,
+        })
+      }
+
+      this.setState({
+        loadingEns: true,
+      })
+      this.checkName()
+    },
+  })
+  return h('div', {
+    style: { width: '100%' },
+  }, [
+    h('input.large-input', opts),
+    // The address book functionality.
+    h('datalist#addresses',
+      [
+        // Corresponds to the addresses owned.
+        Object.keys(props.identities).map((key) => {
+          const identity = props.identities[key]
+          return h('option', {
+            value: identity.address,
+            label: identity.name,
+            key: identity.address,
+          })
+        }),
+        // Corresponds to previously sent-to addresses.
+        props.addressBook.map((identity) => {
+          return h('option', {
+            value: identity.address,
+            label: identity.name,
+            key: identity.address,
+          })
+        }),
+      ]),
+    this.ensIcon(),
+  ])
+}
+
+EnsInput.prototype.componentDidMount = function () {
+  const network = this.props.network
+  const networkHasEnsSupport = getNetworkEnsSupport(network)
+  this.setState({ ensResolution: ZERO_ADDRESS })
+
+  if (networkHasEnsSupport) {
+    const provider = global.ethereumProvider
+    this.ens = new ENS({ provider, network })
+    this.checkName = debounce(this.lookupEnsName.bind(this), 200)
+  }
+}
+
+EnsInput.prototype.lookupEnsName = function () {
+  const recipient = document.querySelector('input[name="address"]').value
+  const { ensResolution } = this.state
+
+  log.info(`ENS attempting to resolve name: ${recipient}`)
+  this.ens.lookup(recipient.trim())
+  .then((address) => {
+    if (address === ZERO_ADDRESS) throw new Error('No address has been set for this name.')
+    if (address !== ensResolution) {
+      this.setState({
+        loadingEns: false,
+        ensResolution: address,
+        nickname: recipient.trim(),
+        hoverText: address + '\nClick to Copy',
+        ensFailure: false,
+      })
+    }
+  })
+  .catch((reason) => {
+    log.error(reason)
+    return this.setState({
+      loadingEns: false,
+      ensResolution: ZERO_ADDRESS,
+      ensFailure: true,
+      hoverText: reason.message,
+    })
+  })
+}
+
+EnsInput.prototype.componentDidUpdate = function (prevProps, prevState) {
+  const state = this.state || {}
+  const ensResolution = state.ensResolution
+  // If an address is sent without a nickname, meaning not from ENS or from
+  // the user's own accounts, a default of a one-space string is used.
+  const nickname = state.nickname || ' '
+  if (prevState && ensResolution && this.props.onChange &&
+      ensResolution !== prevState.ensResolution) {
+    this.props.onChange(ensResolution, nickname)
+  }
+}
+
+EnsInput.prototype.ensIcon = function (recipient) {
+  const { hoverText } = this.state || {}
+  return h('span', {
+    title: hoverText,
+    style: {
+      position: 'absolute',
+      padding: '9px',
+      transform: 'translatex(-40px)',
+    },
+  }, this.ensIconContents(recipient))
+}
+
+EnsInput.prototype.ensIconContents = function (recipient) {
+  const { loadingEns, ensFailure, ensResolution } = this.state || { ensResolution: ZERO_ADDRESS}
+
+  if (loadingEns) {
+    return h('img', {
+      src: 'images/loading.svg',
+      style: {
+        width: '30px',
+        height: '30px',
+        transform: 'translateY(-6px)',
+      },
+    })
+  }
+
+  if (ensFailure) {
+    return h('i.fa.fa-warning.fa-lg.warning')
+  }
+
+  if (ensResolution && (ensResolution !== ZERO_ADDRESS)) {
+    return h('i.fa.fa-check-circle.fa-lg.cursor-pointer', {
+      style: { color: 'green' },
+      onClick: (event) => {
+        event.preventDefault()
+        event.stopPropagation()
+        copyToClipboard(ensResolution)
+      },
+    })
+  }
+}
+
+function getNetworkEnsSupport (network) {
+  return Boolean(networkMap[network])
+}
diff --git a/responsive-ui/app/components/eth-balance.js b/responsive-ui/app/components/eth-balance.js
new file mode 100644
index 000000000..4f538fd31
--- /dev/null
+++ b/responsive-ui/app/components/eth-balance.js
@@ -0,0 +1,89 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const formatBalance = require('../util').formatBalance
+const generateBalanceObject = require('../util').generateBalanceObject
+const Tooltip = require('./tooltip.js')
+const FiatValue = require('./fiat-value.js')
+
+module.exports = EthBalanceComponent
+
+inherits(EthBalanceComponent, Component)
+function EthBalanceComponent () {
+  Component.call(this)
+}
+
+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) : '...'
+
+  return (
+
+    h('.ether-balance.ether-balance-amount', {
+      style,
+    }, [
+      h('div', {
+        style: {
+          display: 'inline',
+          width,
+        },
+      }, this.renderBalance(value)),
+    ])
+
+  )
+}
+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
+  }
+
+  var label = balanceObj.label
+
+  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', {
+          style: {
+            color: ' #AEAEAE',
+            fontSize: '12px',
+            marginLeft: '5px',
+          },
+        }, label),
+      ]),
+
+      showFiat ? h(FiatValue, { value: props.value, conversionRate, currentCurrency }) : null,
+    ]))
+  )
+}
diff --git a/responsive-ui/app/components/fiat-value.js b/responsive-ui/app/components/fiat-value.js
new file mode 100644
index 000000000..8a64a1cfc
--- /dev/null
+++ b/responsive-ui/app/components/fiat-value.js
@@ -0,0 +1,63 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const formatBalance = require('../util').formatBalance
+
+module.exports = FiatValue
+
+inherits(FiatValue, Component)
+function FiatValue () {
+  Component.call(this)
+}
+
+FiatValue.prototype.render = function () {
+  const props = this.props
+  const { conversionRate, currentCurrency } = props
+
+  const value = formatBalance(props.value, 6)
+
+  if (value === 'None') return value
+  var fiatDisplayNumber, fiatTooltipNumber
+  var splitBalance = value.split(' ')
+
+  if (conversionRate !== 0) {
+    fiatTooltipNumber = Number(splitBalance[0]) * conversionRate
+    fiatDisplayNumber = fiatTooltipNumber.toFixed(2)
+  } else {
+    fiatDisplayNumber = 'N/A'
+    fiatTooltipNumber = 'Unknown'
+  }
+
+  return fiatDisplay(fiatDisplayNumber, currentCurrency)
+}
+
+function fiatDisplay (fiatDisplayNumber, fiatSuffix) {
+  if (fiatDisplayNumber !== 'N/A') {
+    return h('.flex-row', {
+      style: {
+        alignItems: 'flex-end',
+        lineHeight: '13px',
+        fontFamily: 'Montserrat Light',
+        textRendering: 'geometricPrecision',
+      },
+    }, [
+      h('div', {
+        style: {
+          width: '100%',
+          textAlign: 'right',
+          fontSize: '12px',
+          color: '#333333',
+        },
+      }, fiatDisplayNumber),
+      h('div', {
+        style: {
+          color: '#AEAEAE',
+          marginLeft: '5px',
+          fontSize: '12px',
+        },
+      }, fiatSuffix),
+    ])
+  } else {
+    return h('div')
+  }
+}
diff --git a/responsive-ui/app/components/hex-as-decimal-input.js b/responsive-ui/app/components/hex-as-decimal-input.js
new file mode 100644
index 000000000..4a71e9585
--- /dev/null
+++ b/responsive-ui/app/components/hex-as-decimal-input.js
@@ -0,0 +1,154 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const ethUtil = require('ethereumjs-util')
+const BN = ethUtil.BN
+const extend = require('xtend')
+
+module.exports = HexAsDecimalInput
+
+inherits(HexAsDecimalInput, Component)
+function HexAsDecimalInput () {
+  this.state = { invalid: null }
+  Component.call(this)
+}
+
+/* Hex as Decimal Input
+ *
+ * A component for allowing easy, decimal editing
+ * of a passed in hex string value.
+ *
+ * On change, calls back its `onChange` function parameter
+ * and passes it an updated hex string.
+ */
+
+HexAsDecimalInput.prototype.render = function () {
+  const props = this.props
+  const state = this.state
+
+  const { value, onChange, min, max } = props
+
+  const toEth = props.toEth
+  const suffix = props.suffix
+  const decimalValue = decimalize(value, toEth)
+  const style = props.style
+
+  return (
+    h('.flex-column', [
+      h('.flex-row', {
+        style: {
+          alignItems: 'flex-end',
+          lineHeight: '13px',
+          fontFamily: 'Montserrat Light',
+          textRendering: 'geometricPrecision',
+        },
+      }, [
+        h('input.hex-input', {
+          type: 'number',
+          required: true,
+          min: min,
+          max: max,
+          style: extend({
+            display: 'block',
+            textAlign: 'right',
+            backgroundColor: 'transparent',
+            border: '1px solid #bdbdbd',
+
+          }, style),
+          value: parseInt(decimalValue),
+          onBlur: (event) => {
+            this.updateValidity(event)
+          },
+          onChange: (event) => {
+            this.updateValidity(event)
+            const hexString = (event.target.value === '') ? '' : hexify(event.target.value)
+            onChange(hexString)
+          },
+          onInvalid: (event) => {
+            const msg = this.constructWarning()
+            if (msg === state.invalid) {
+              return
+            }
+            this.setState({ invalid: msg })
+            event.preventDefault()
+            return false
+          },
+        }),
+        h('div', {
+          style: {
+            color: ' #AEAEAE',
+            fontSize: '12px',
+            marginLeft: '5px',
+            marginRight: '6px',
+            width: '20px',
+          },
+        }, suffix),
+      ]),
+
+      state.invalid ? h('span.error', {
+        style: {
+          position: 'absolute',
+          right: '0px',
+          textAlign: 'right',
+          transform: 'translateY(26px)',
+          padding: '3px',
+          background: 'rgba(255,255,255,0.85)',
+          zIndex: '1',
+          textTransform: 'capitalize',
+          border: '2px solid #E20202',
+        },
+      }, state.invalid) : null,
+    ])
+  )
+}
+
+HexAsDecimalInput.prototype.setValid = function (message) {
+  this.setState({ invalid: null })
+}
+
+HexAsDecimalInput.prototype.updateValidity = function (event) {
+  const target = event.target
+  const value = this.props.value
+  const newValue = target.value
+
+  if (value === newValue) {
+    return
+  }
+
+  const valid = target.checkValidity()
+  if (valid) {
+    this.setState({ invalid: null })
+  }
+}
+
+HexAsDecimalInput.prototype.constructWarning = function () {
+  const { name, min, max } = this.props
+  let message = name ? name + ' ' : ''
+
+  if (min && max) {
+    message += `must be greater than or equal to  ${min} and less than or equal to ${max}.`
+  } else if (min) {
+    message += `must be greater than or equal to ${min}.`
+  } else if (max) {
+    message += `must be less than or equal to ${max}.`
+  } else {
+    message += 'Invalid input.'
+  }
+
+  return message
+}
+
+function hexify (decimalString) {
+  const hexBN = new BN(parseInt(decimalString), 10)
+  return '0x' + hexBN.toString('hex')
+}
+
+function decimalize (input, toEth) {
+  if (input === '') {
+    return ''
+  } else {
+    const strippedInput = ethUtil.stripHexPrefix(input)
+    const inputBN = new BN(strippedInput, 'hex')
+    return inputBN.toString(10)
+  }
+}
diff --git a/responsive-ui/app/components/identicon.js b/responsive-ui/app/components/identicon.js
new file mode 100644
index 000000000..c754bc6ba
--- /dev/null
+++ b/responsive-ui/app/components/identicon.js
@@ -0,0 +1,72 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const isNode = require('detect-node')
+const findDOMNode = require('react-dom').findDOMNode
+const jazzicon = require('jazzicon')
+const iconFactoryGen = require('../../lib/icon-factory')
+const iconFactory = iconFactoryGen(jazzicon)
+
+module.exports = IdenticonComponent
+
+inherits(IdenticonComponent, Component)
+function IdenticonComponent () {
+  Component.call(this)
+
+  this.defaultDiameter = 46
+}
+
+IdenticonComponent.prototype.render = function () {
+  var props = this.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',
+      },
+    })
+  )
+}
+
+IdenticonComponent.prototype.componentDidMount = function () {
+  var props = this.props
+  const { address } = props
+
+  if (!address) return
+
+  var container = findDOMNode(this)
+
+  var diameter = props.diameter || this.defaultDiameter
+  if (!isNode) {
+    var img = iconFactory.iconForAddress(address, diameter)
+    container.appendChild(img)
+  }
+}
+
+IdenticonComponent.prototype.componentDidUpdate = function () {
+  var props = this.props
+  const { address } = props
+
+  if (!address) return
+
+  var container = findDOMNode(this)
+
+  var children = container.children
+  for (var i = 0; i < children.length; i++) {
+    container.removeChild(children[i])
+  }
+
+  var diameter = props.diameter || this.defaultDiameter
+  if (!isNode) {
+    var img = iconFactory.iconForAddress(address, diameter)
+    container.appendChild(img)
+  }
+}
+
diff --git a/responsive-ui/app/components/loading.js b/responsive-ui/app/components/loading.js
new file mode 100644
index 000000000..87d6f5d20
--- /dev/null
+++ b/responsive-ui/app/components/loading.js
@@ -0,0 +1,53 @@
+const inherits = require('util').inherits
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const ReactCSSTransitionGroup = require('react-addons-css-transition-group')
+
+
+inherits(LoadingIndicator, Component)
+module.exports = LoadingIndicator
+
+function LoadingIndicator () {
+  Component.call(this)
+}
+
+LoadingIndicator.prototype.render = function () {
+  const { isLoading, loadingMessage } = this.props
+
+  return (
+    h(ReactCSSTransitionGroup, {
+      className: 'css-transition-group',
+      transitionName: 'loader',
+      transitionEnterTimeout: 150,
+      transitionLeaveTimeout: 150,
+    }, [
+
+      isLoading ? h('div', {
+        style: {
+          zIndex: 10,
+          position: 'absolute',
+          flexDirection: 'column',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          height: '100%',
+          width: '100%',
+          background: 'rgba(255, 255, 255, 0.8)',
+        },
+      }, [
+        h('img', {
+          src: 'images/loading.svg',
+        }),
+
+        h('br'),
+
+        showMessageIfAny(loadingMessage),
+      ]) : null,
+    ])
+  )
+}
+
+function showMessageIfAny (loadingMessage) {
+  if (!loadingMessage) return null
+  return h('span', loadingMessage)
+}
diff --git a/responsive-ui/app/components/mascot.js b/responsive-ui/app/components/mascot.js
new file mode 100644
index 000000000..973ec2cad
--- /dev/null
+++ b/responsive-ui/app/components/mascot.js
@@ -0,0 +1,59 @@
+const inherits = require('util').inherits
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const metamaskLogo = require('metamask-logo')
+const debounce = require('debounce')
+
+module.exports = Mascot
+
+inherits(Mascot, Component)
+function Mascot () {
+  Component.call(this)
+  this.logo = metamaskLogo({
+    followMouse: true,
+    pxNotRatio: true,
+    width: 200,
+    height: 200,
+  })
+
+  this.refollowMouse = debounce(this.logo.setFollowMouse.bind(this.logo, true), 1000)
+  this.unfollowMouse = this.logo.setFollowMouse.bind(this.logo, false)
+}
+
+Mascot.prototype.render = function () {
+  // this is a bit hacky
+  // the event emitter is on `this.props`
+  // and we dont get that until render
+  this.handleAnimationEvents()
+
+  return h('#metamask-mascot-container', {
+    style: { zIndex: 0 },
+  })
+}
+
+Mascot.prototype.componentDidMount = function () {
+  var targetDivId = 'metamask-mascot-container'
+  var container = document.getElementById(targetDivId)
+  container.appendChild(this.logo.container)
+}
+
+Mascot.prototype.componentWillUnmount = function () {
+  this.animations = this.props.animationEventEmitter
+  this.animations.removeAllListeners()
+  this.logo.container.remove()
+  this.logo.stopAnimation()
+}
+
+Mascot.prototype.handleAnimationEvents = function () {
+  // only setup listeners once
+  if (this.animations) return
+  this.animations = this.props.animationEventEmitter
+  this.animations.on('point', this.lookAt.bind(this))
+  this.animations.on('setFollowMouse', this.logo.setFollowMouse.bind(this.logo))
+}
+
+Mascot.prototype.lookAt = function (target) {
+  this.unfollowMouse()
+  this.logo.lookAt(target)
+  this.refollowMouse()
+}
diff --git a/responsive-ui/app/components/mini-account-panel.js b/responsive-ui/app/components/mini-account-panel.js
new file mode 100644
index 000000000..c09cf5b7a
--- /dev/null
+++ b/responsive-ui/app/components/mini-account-panel.js
@@ -0,0 +1,74 @@
+const inherits = require('util').inherits
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const Identicon = require('./identicon')
+
+module.exports = AccountPanel
+
+
+inherits(AccountPanel, Component)
+function AccountPanel () {
+  Component.call(this)
+}
+
+AccountPanel.prototype.render = function () {
+  var props = this.props
+  var picOrder = props.picOrder || 'left'
+  const { imageSeed } = props
+
+  return (
+
+    h('.identity-panel.flex-row.flex-left', {
+      style: {
+        cursor: props.onClick ? 'pointer' : undefined,
+      },
+      onClick: props.onClick,
+    }, [
+
+      this.genIcon(imageSeed, picOrder),
+
+      h('div.flex-column.flex-justify-center', {
+        style: {
+          lineHeight: '15px',
+          order: 2,
+          display: 'flex',
+          alignItems: picOrder === 'left' ? 'flex-begin' : 'flex-end',
+        },
+      }, this.props.children),
+    ])
+  )
+}
+
+AccountPanel.prototype.genIcon = function (seed, picOrder) {
+  const props = this.props
+
+  // When there is no seed value, this is a contract creation.
+  // We then show the contract icon.
+  if (!seed) {
+    return h('.identicon-wrapper.flex-column.select-none', {
+      style: {
+        order: picOrder === 'left' ? 1 : 3,
+      },
+    }, [
+      h('i.fa.fa-file-text-o.fa-lg', {
+        style: {
+          fontSize: '42px',
+          transform: 'translate(0px, -16px)',
+        },
+      }),
+    ])
+  }
+
+  // If there was a seed, we return an identicon for that address.
+  return h('.identicon-wrapper.flex-column.select-none', {
+    style: {
+      order: picOrder === 'left' ? 1 : 3,
+    },
+  }, [
+    h(Identicon, {
+      address: seed,
+      imageify: props.imageifyIdenticons,
+    }),
+  ])
+}
+
diff --git a/responsive-ui/app/components/network.js b/responsive-ui/app/components/network.js
new file mode 100644
index 000000000..698a0bbb9
--- /dev/null
+++ b/responsive-ui/app/components/network.js
@@ -0,0 +1,124 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+
+module.exports = Network
+
+inherits(Network, Component)
+
+function Network () {
+  Component.call(this)
+}
+
+Network.prototype.render = function () {
+  const props = this.props
+  const networkNumber = props.network
+  let providerName
+  try {
+    providerName = props.provider.type
+  } catch (e) {
+    providerName = null
+  }
+  let iconName, hoverText
+
+  if (networkNumber === 'loading') {
+    return h('span', {
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+        flexDirection: 'row',
+      },
+      onClick: (event) => this.props.onClick(event),
+    }, [
+      h('img', {
+        title: 'Attempting to connect to blockchain.',
+        style: {
+          width: '27px',
+        },
+        src: 'images/loading.svg',
+      }),
+      h('i.fa.fa-sort-desc'),
+    ])
+  } else if (providerName === 'mainnet') {
+    hoverText = 'Main Ethereum Network'
+    iconName = 'ethereum-network'
+  } else if (providerName === 'ropsten') {
+    hoverText = 'Ropsten Test Network'
+    iconName = 'ropsten-test-network'
+  } else if (parseInt(networkNumber) === 3) {
+    hoverText = 'Ropsten Test Network'
+    iconName = 'ropsten-test-network'
+  } else if (providerName === 'kovan') {
+    hoverText = 'Kovan Test Network'
+    iconName = 'kovan-test-network'
+  } else if (providerName === 'rinkeby') {
+    hoverText = 'Rinkeby Test Network'
+    iconName = 'rinkeby-test-network'
+  } else {
+    hoverText = 'Unknown Private Network'
+    iconName = 'unknown-private-network'
+  }
+
+  return (
+    h('#network_component.pointer', {
+      title: hoverText,
+      onClick: (event) => this.props.onClick(event),
+    }, [
+      (function () {
+        switch (iconName) {
+          case 'ethereum-network':
+            return h('.network-indicator', [
+              h('.menu-icon.diamond'),
+              h('.network-name', {
+                style: {
+                  color: '#039396',
+                }},
+              'Ethereum Main Net'),
+            ])
+          case 'ropsten-test-network':
+            return h('.network-indicator', [
+              h('.menu-icon.red-dot'),
+              h('.network-name', {
+                style: {
+                  color: '#ff6666',
+                }},
+              'Ropsten Test Net'),
+            ])
+          case 'kovan-test-network':
+            return h('.network-indicator', [
+              h('.menu-icon.hollow-diamond'),
+              h('.network-name', {
+                style: {
+                  color: '#690496',
+                }},
+              'Kovan Test Net'),
+            ])
+          case 'rinkeby-test-network':
+            return h('.network-indicator', [
+              h('.menu-icon.golden-square'),
+              h('.network-name', {
+                style: {
+                  color: '#e7a218',
+                }},
+              'Rinkeby Test Net'),
+            ])
+          default:
+            return h('.network-indicator', [
+              h('i.fa.fa-question-circle.fa-lg', {
+                style: {
+                  margin: '10px',
+                  color: 'rgb(125, 128, 130)',
+                },
+              }),
+
+              h('.network-name', {
+                style: {
+                  color: '#AEAEAE',
+                }},
+              'Private Network'),
+            ])
+        }
+      })(),
+    ])
+  )
+}
diff --git a/responsive-ui/app/components/notice.js b/responsive-ui/app/components/notice.js
new file mode 100644
index 000000000..d9f0067cd
--- /dev/null
+++ b/responsive-ui/app/components/notice.js
@@ -0,0 +1,126 @@
+const inherits = require('util').inherits
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const ReactMarkdown = require('react-markdown')
+const linker = require('extension-link-enabler')
+const findDOMNode = require('react-dom').findDOMNode
+
+module.exports = Notice
+
+inherits(Notice, Component)
+function Notice () {
+  Component.call(this)
+}
+
+Notice.prototype.render = function () {
+  const { notice, onConfirm } = this.props
+  const { title, date, body } = notice
+  const state = this.state || { disclaimerDisabled: true }
+  const disabled = state.disclaimerDisabled
+
+  return (
+    h('.flex-column.flex-center.flex-grow', [
+      h('h3.flex-center.text-transform-uppercase.terms-header', {
+        style: {
+          background: '#EBEBEB',
+          color: '#AEAEAE',
+          width: '100%',
+          fontSize: '20px',
+          textAlign: 'center',
+          padding: 6,
+        },
+      }, [
+        title,
+      ]),
+
+      h('h5.flex-center.text-transform-uppercase.terms-header', {
+        style: {
+          background: '#EBEBEB',
+          color: '#AEAEAE',
+          marginBottom: 24,
+          width: '100%',
+          fontSize: '20px',
+          textAlign: 'center',
+          padding: 6,
+        },
+      }, [
+        date,
+      ]),
+
+      h('style', `
+
+        .markdown {
+          overflow-x: hidden;
+        }
+
+        .markdown h1, .markdown h2, .markdown h3 {
+          margin: 10px 0;
+          font-weight: bold;
+        }
+
+        .markdown strong {
+          font-weight: bold;
+        }
+        .markdown em {
+          font-style: italic;
+        }
+
+        .markdown p {
+          margin: 10px 0;
+        }
+
+        .markdown a {
+          color: #df6b0e;
+        }
+
+      `),
+
+      h('div.markdown', {
+        onScroll: (e) => {
+          var object = e.currentTarget
+          if (object.offsetHeight + object.scrollTop + 100 >= object.scrollHeight) {
+            this.setState({disclaimerDisabled: false})
+          }
+        },
+        style: {
+          background: 'rgb(235, 235, 235)',
+          height: '310px',
+          padding: '6px',
+          width: '90%',
+          overflowY: 'scroll',
+          scroll: 'auto',
+        },
+      }, [
+        h(ReactMarkdown, {
+          className: 'notice-box',
+          source: body,
+          skipHtml: true,
+        }),
+      ]),
+
+      h('button', {
+        disabled,
+        onClick: () => {
+          this.setState({disclaimerDisabled: true})
+          onConfirm()
+        },
+        style: {
+          marginTop: '18px',
+        },
+      }, 'Accept'),
+    ])
+  )
+}
+
+Notice.prototype.componentDidMount = function () {
+  var node = findDOMNode(this)
+  linker.setupListener(node)
+  if (document.getElementsByClassName('notice-box')[0].clientHeight < 310) {
+    this.setState({disclaimerDisabled: false})
+  }
+}
+
+Notice.prototype.componentWillUnmount = function () {
+  var node = findDOMNode(this)
+  linker.teardownListener(node)
+}
diff --git a/responsive-ui/app/components/pending-msg-details.js b/responsive-ui/app/components/pending-msg-details.js
new file mode 100644
index 000000000..16308d121
--- /dev/null
+++ b/responsive-ui/app/components/pending-msg-details.js
@@ -0,0 +1,50 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+
+const AccountPanel = require('./account-panel')
+
+module.exports = PendingMsgDetails
+
+inherits(PendingMsgDetails, Component)
+function PendingMsgDetails () {
+  Component.call(this)
+}
+
+PendingMsgDetails.prototype.render = function () {
+  var state = this.props
+  var msgData = state.txData
+
+  var msgParams = msgData.msgParams || {}
+  var address = msgParams.from || state.selectedAddress
+  var identity = state.identities[address] || { address: address }
+  var account = state.accounts[address] || { address: address }
+
+  return (
+    h('div', {
+      key: msgData.id,
+      style: {
+        margin: '10px 20px',
+      },
+    }, [
+
+      // account that will sign
+      h(AccountPanel, {
+        showFullAddress: true,
+        identity: identity,
+        account: account,
+        imageifyIdenticons: state.imageifyIdenticons,
+      }),
+
+      // message data
+      h('.tx-data.flex-column.flex-justify-center.flex-grow.select-none', [
+        h('.flex-row.flex-space-between', [
+          h('label.font-small', 'MESSAGE'),
+          h('span.font-small', msgParams.data),
+        ]),
+      ]),
+
+    ])
+  )
+}
+
diff --git a/responsive-ui/app/components/pending-msg.js b/responsive-ui/app/components/pending-msg.js
new file mode 100644
index 000000000..b2cac164a
--- /dev/null
+++ b/responsive-ui/app/components/pending-msg.js
@@ -0,0 +1,56 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const PendingTxDetails = require('./pending-msg-details')
+
+module.exports = PendingMsg
+
+inherits(PendingMsg, Component)
+function PendingMsg () {
+  Component.call(this)
+}
+
+PendingMsg.prototype.render = function () {
+  var state = this.props
+  var msgData = state.txData
+
+  return (
+
+    h('div', {
+      key: msgData.id,
+    }, [
+
+      // header
+      h('h3', {
+        style: {
+          fontWeight: 'bold',
+          textAlign: 'center',
+        },
+      }, 'Sign Message'),
+
+      h('.error', {
+        style: {
+          margin: '10px',
+        },
+      }, `Signing this message can have
+        dangerous side effects. Only sign messages from
+        sites you fully trust with your entire account.
+        This will be fixed in a future version.`),
+
+      // message details
+      h(PendingTxDetails, state),
+
+      // sign + cancel
+      h('.flex-row.flex-space-around', [
+        h('button', {
+          onClick: state.cancelMessage,
+        }, 'Cancel'),
+        h('button', {
+          onClick: state.signMessage,
+        }, 'Sign'),
+      ]),
+    ])
+
+  )
+}
+
diff --git a/responsive-ui/app/components/pending-personal-msg-details.js b/responsive-ui/app/components/pending-personal-msg-details.js
new file mode 100644
index 000000000..1050513f2
--- /dev/null
+++ b/responsive-ui/app/components/pending-personal-msg-details.js
@@ -0,0 +1,60 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+
+const AccountPanel = require('./account-panel')
+const BinaryRenderer = require('./binary-renderer')
+
+module.exports = PendingMsgDetails
+
+inherits(PendingMsgDetails, Component)
+function PendingMsgDetails () {
+  Component.call(this)
+}
+
+PendingMsgDetails.prototype.render = function () {
+  var state = this.props
+  var msgData = state.txData
+
+  var msgParams = msgData.msgParams || {}
+  var address = msgParams.from || state.selectedAddress
+  var identity = state.identities[address] || { address: address }
+  var account = state.accounts[address] || { address: address }
+
+  var { data } = msgParams
+
+  return (
+    h('div', {
+      key: msgData.id,
+      style: {
+        margin: '10px 20px',
+      },
+    }, [
+
+      // account that will sign
+      h(AccountPanel, {
+        showFullAddress: true,
+        identity: identity,
+        account: account,
+        imageifyIdenticons: state.imageifyIdenticons,
+      }),
+
+      // message data
+      h('div', {
+        style: {
+          height: '260px',
+        },
+      }, [
+        h('label.font-small', { style: { display: 'block' } }, 'MESSAGE'),
+        h(BinaryRenderer, {
+          value: data,
+          style: {
+            height: '215px',
+          },
+        }),
+      ]),
+
+    ])
+  )
+}
+
diff --git a/responsive-ui/app/components/pending-personal-msg.js b/responsive-ui/app/components/pending-personal-msg.js
new file mode 100644
index 000000000..4542adb28
--- /dev/null
+++ b/responsive-ui/app/components/pending-personal-msg.js
@@ -0,0 +1,47 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const PendingTxDetails = require('./pending-personal-msg-details')
+
+module.exports = PendingMsg
+
+inherits(PendingMsg, Component)
+function PendingMsg () {
+  Component.call(this)
+}
+
+PendingMsg.prototype.render = function () {
+  var state = this.props
+  var msgData = state.txData
+
+  return (
+
+    h('div', {
+      key: msgData.id,
+    }, [
+
+      // header
+      h('h3', {
+        style: {
+          fontWeight: 'bold',
+          textAlign: 'center',
+        },
+      }, 'Sign Message'),
+
+      // message details
+      h(PendingTxDetails, state),
+
+      // sign + cancel
+      h('.flex-row.flex-space-around', [
+        h('button', {
+          onClick: state.cancelPersonalMessage,
+        }, 'Cancel'),
+        h('button', {
+          onClick: state.signPersonalMessage,
+        }, 'Sign'),
+      ]),
+    ])
+
+  )
+}
+
diff --git a/responsive-ui/app/components/pending-tx.js b/responsive-ui/app/components/pending-tx.js
new file mode 100644
index 000000000..962680d30
--- /dev/null
+++ b/responsive-ui/app/components/pending-tx.js
@@ -0,0 +1,480 @@
+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(2)
+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 safeGasLimit = this.bnMultiplyByFraction(gasLimit, 19, 20).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)
+
+  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;
+          }
+        `),
+
+        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',
+          },
+        }, [
+
+
+          insufficientBalance ?
+            h('button.btn-green', {
+              onClick: props.buyEth,
+            }, 'Buy Ether')
+          : null,
+
+          h('button', {
+            onClick: (event) => {
+              this.resetGasFields()
+              event.preventDefault()
+            },
+          }, 'Reset'),
+
+          // Accept Button
+          h('input.confirm.btn-green', {
+            type: 'submit',
+            value: 'SUBMIT',
+            style: { marginLeft: '10px' },
+            disabled: insufficientBalance || !this.state.valid || !isValidAddress || this.state.submitting,
+          }),
+
+          h('button.cancel.btn-red', {
+            onClick: props.cancelTransaction,
+          }, 'Reject'),
+        ]),
+      ]),
+    ])
+  )
+}
+
+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/responsive-ui/app/components/qr-code.js b/responsive-ui/app/components/qr-code.js
new file mode 100644
index 000000000..06b9aed9b
--- /dev/null
+++ b/responsive-ui/app/components/qr-code.js
@@ -0,0 +1,79 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+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')
+
+module.exports = connect(mapStateToProps)(QrCodeView)
+
+function mapStateToProps (state) {
+  return {
+    Qr: state.appState.Qr,
+    buyView: state.appState.buyView,
+    warning: state.appState.warning,
+  }
+}
+
+inherits(QrCodeView, Component)
+
+function QrCodeView () {
+  Component.call(this)
+}
+
+QrCodeView.prototype.render = function () {
+  const props = this.props
+  const Qr = props.Qr
+  const address = `${isHexPrefixed(Qr.data) ? 'ethereum:' : ''}${Qr.data}`
+  const qrImage = qrCode(4, 'M')
+  qrImage.addData(address)
+  qrImage.make()
+  return h('.main-container.flex-column', {
+    key: 'qr',
+    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',
+      },
+      dangerouslySetInnerHTML: {
+        __html: qrImage.createTableTag(4),
+      },
+    }),
+    h('.flex-row', [
+      h('h3.ellip-address', {
+        style: {
+          width: '247px',
+        },
+      }, Qr.data),
+      h(CopyButton, {
+        value: Qr.data,
+      }),
+    ]),
+  ])
+}
+
+QrCodeView.prototype.renderMultiMessage = function () {
+  var Qr = this.props.Qr
+  var multiMessage = Qr.message.map((message) => h('.qr-message', message))
+  return multiMessage
+}
diff --git a/responsive-ui/app/components/range-slider.js b/responsive-ui/app/components/range-slider.js
new file mode 100644
index 000000000..823f5eb01
--- /dev/null
+++ b/responsive-ui/app/components/range-slider.js
@@ -0,0 +1,58 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+
+module.exports = RangeSlider
+
+inherits(RangeSlider, Component)
+function RangeSlider () {
+  Component.call(this)
+}
+
+RangeSlider.prototype.render = function () {
+  const state = this.state || {}
+  const props = this.props
+  const onInput = props.onInput || function () {}
+  const name = props.name
+  const {
+    min = 0,
+    max = 100,
+    increment = 1,
+    defaultValue = 50,
+    mirrorInput = false,
+  } = this.props.options
+  const {container, input, range} = props.style
+
+  return (
+    h('.flex-row', {
+      style: container,
+    }, [
+      h('input', {
+        type: 'range',
+        name: name,
+        min: min,
+        max: max,
+        step: increment,
+        style: range,
+        value: state.value || defaultValue,
+        onChange: mirrorInput ? this.mirrorInputs.bind(this, event) : onInput,
+      }),
+
+      // Mirrored input for range
+      mirrorInput ? h('input.large-input', {
+        type: 'number',
+        name: `${name}Mirror`,
+        min: min,
+        max: max,
+        value: state.value || defaultValue,
+        step: increment,
+        style: input,
+        onChange: this.mirrorInputs.bind(this, event),
+      }) : null,
+    ])
+  )
+}
+
+RangeSlider.prototype.mirrorInputs = function (event) {
+  this.setState({value: event.target.value})
+}
diff --git a/responsive-ui/app/components/shapeshift-form.js b/responsive-ui/app/components/shapeshift-form.js
new file mode 100644
index 000000000..e0a720426
--- /dev/null
+++ b/responsive-ui/app/components/shapeshift-form.js
@@ -0,0 +1,306 @@
+const PersistentForm = require('../../lib/persistent-form')
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const connect = require('react-redux').connect
+const ReactCSSTransitionGroup = require('react-addons-css-transition-group')
+const actions = require('../actions')
+const Qr = require('./qr-code')
+const isValidAddress = require('../util').isValidAddress
+module.exports = connect(mapStateToProps)(ShapeshiftForm)
+
+function mapStateToProps (state) {
+  return {
+    warning: state.appState.warning,
+    isSubLoading: state.appState.isSubLoading,
+    qrRequested: state.appState.qrRequested,
+  }
+}
+
+inherits(ShapeshiftForm, PersistentForm)
+
+function ShapeshiftForm () {
+  PersistentForm.call(this)
+  this.persistentFormParentId = 'shapeshift-buy-form'
+}
+
+ShapeshiftForm.prototype.render = function () {
+  return h(ReactCSSTransitionGroup, {
+    className: 'css-transition-group',
+    transitionName: 'main',
+    transitionEnterTimeout: 300,
+    transitionLeaveTimeout: 300,
+  }, [
+    this.props.qrRequested ? h(Qr, {key: 'qr'}) : this.renderMain(),
+  ])
+}
+
+ShapeshiftForm.prototype.renderMain = function () {
+  const marketinfo = this.props.buyView.formView.marketinfo
+  const coinOptions = this.props.buyView.formView.coinOptions
+  var coin = marketinfo.pair.split('_')[0].toUpperCase()
+
+  return h('.flex-column', {
+    style: {
+      // marginTop: '10px',
+      padding: '25px',
+      paddingTop: '5px',
+      width: '100%',
+      minHeight: '215px',
+      alignItems: 'center',
+      overflowY: 'auto',
+    },
+  }, [
+    h('.flex-row', {
+      style: {
+        justifyContent: 'center',
+        alignItems: 'baseline',
+        height: '42px',
+      },
+    }, [
+      h('img', {
+        src: coinOptions[coin].image,
+        width: '25px',
+        height: '25px',
+        style: {
+          marginRight: '5px',
+        },
+      }),
+
+      h('.input-container', [
+        h('input#fromCoin.buy-inputs.ex-coins', {
+          type: 'text',
+          list: 'coinList',
+          autoFocus: true,
+          dataset: {
+            persistentFormId: 'input-coin',
+          },
+          style: {
+            boxSizing: 'border-box',
+          },
+          onChange: this.handleLiveInput.bind(this),
+          defaultValue: 'BTC',
+        }),
+
+        this.renderCoinList(),
+
+        h('i.fa.fa-pencil-square-o.edit-text', {
+          style: {
+            fontSize: '12px',
+            color: '#F7861C',
+            position: 'relative',
+            bottom: '48px',
+            left: '106px',
+          },
+        }),
+      ]),
+
+      h('.icon-control', [
+        h('i.fa.fa-refresh.fa-4.orange', {
+          style: {
+            bottom: '5px',
+            left: '5px',
+            color: '#F7861C',
+          },
+          onClick: this.updateCoin.bind(this),
+        }),
+        h('i.fa.fa-chevron-right.fa-4.orange', {
+          style: {
+            position: 'relative',
+            bottom: '26px',
+            left: '10px',
+            color: '#F7861C',
+          },
+          onClick: this.updateCoin.bind(this),
+        }),
+      ]),
+
+      h('#toCoin.ex-coins', marketinfo.pair.split('_')[1].toUpperCase()),
+
+      h('img', {
+        src: coinOptions[marketinfo.pair.split('_')[1].toUpperCase()].image,
+        width: '25px',
+        height: '25px',
+        style: {
+          marginLeft: '5px',
+        },
+      }),
+    ]),
+    h('.flex-column', {
+      style: {
+        alignItems: 'flex-start',
+      },
+    }, [
+      this.props.warning ? this.props.warning && h('span.error.flex-center', {
+        style: {
+          textAlign: 'center',
+          width: '229px',
+          height: '82px',
+        },
+      },
+        this.props.warning) : this.renderInfo(),
+    ]),
+
+    h(this.activeToggle('.input-container'), {
+      style: {
+        padding: '10px',
+        paddingTop: '0px',
+        width: '100%',
+      },
+    }, [
+
+      h('div', `${coin} Address:`),
+
+      h('input#fromCoinAddress.buy-inputs', {
+        type: 'text',
+        placeholder: `Your ${coin} Refund Address`,
+        dataset: {
+          persistentFormId: 'refund-address',
+        },
+        style: {
+          boxSizing: 'border-box',
+          width: '227px',
+          height: '30px',
+          padding: ' 5px ',
+        },
+      }),
+
+      h('i.fa.fa-pencil-square-o.edit-text', {
+        style: {
+          fontSize: '12px',
+          color: '#F7861C',
+          position: 'relative',
+          bottom: '10px',
+          right: '11px',
+        },
+      }),
+      h('.flex-row', {
+        style: {
+          justifyContent: 'flex-end',
+        },
+      }, [
+        h('button', {
+          onClick: this.shift.bind(this),
+          style: {
+            marginTop: '10px',
+            position: 'relative',
+            bottom: '40px',
+          },
+        },
+        'Submit'),
+      ]),
+    ]),
+  ])
+}
+
+ShapeshiftForm.prototype.shift = function () {
+  var props = this.props
+  var withdrawal = this.props.buyView.buyAddress
+  var returnAddress = document.getElementById('fromCoinAddress').value
+  var pair = this.props.buyView.formView.marketinfo.pair
+  var data = {
+    'withdrawal': withdrawal,
+    'pair': pair,
+    'returnAddress': returnAddress,
+    //  Public api key
+    'apiKey': '803d1f5df2ed1b1476e4b9e6bcd089e34d8874595dda6a23b67d93c56ea9cc2445e98a6748b219b2b6ad654d9f075f1f1db139abfa93158c04e825db122c14b6',
+  }
+  var message = [
+    `Deposit Limit: ${props.buyView.formView.marketinfo.limit}`,
+    `Deposit Minimum:${props.buyView.formView.marketinfo.minimum}`,
+  ]
+  if (isValidAddress(withdrawal)) {
+    this.props.dispatch(actions.coinShiftRquest(data, message))
+  }
+}
+
+ShapeshiftForm.prototype.renderCoinList = function () {
+  var list = Object.keys(this.props.buyView.formView.coinOptions).map((item) => {
+    return h('option', {
+      value: item,
+    }, item)
+  })
+
+  return h('datalist#coinList', {
+    onClick: (event) => {
+      event.preventDefault()
+    },
+  }, list)
+}
+
+ShapeshiftForm.prototype.updateCoin = function (event) {
+  event.preventDefault()
+  const props = this.props
+  var coinOptions = this.props.buyView.formView.coinOptions
+  var coin = document.getElementById('fromCoin').value
+
+  if (!coinOptions[coin.toUpperCase()] || coin.toUpperCase() === 'ETH') {
+    var message = 'Not a valid coin'
+    return props.dispatch(actions.displayWarning(message))
+  } else {
+    return props.dispatch(actions.pairUpdate(coin))
+  }
+}
+
+ShapeshiftForm.prototype.handleLiveInput = function () {
+  const props = this.props
+  var coinOptions = this.props.buyView.formView.coinOptions
+  var coin = document.getElementById('fromCoin').value
+
+  if (!coinOptions[coin.toUpperCase()] || coin.toUpperCase() === 'ETH') {
+    return null
+  } else {
+    return props.dispatch(actions.pairUpdate(coin))
+  }
+}
+
+ShapeshiftForm.prototype.renderInfo = function () {
+  const marketinfo = this.props.buyView.formView.marketinfo
+  const coinOptions = this.props.buyView.formView.coinOptions
+  var coin = marketinfo.pair.split('_')[0].toUpperCase()
+
+  return h('span', {
+    style: {
+    },
+  }, [
+    h('h3.flex-row.text-transform-uppercase', {
+      style: {
+        color: '#868686',
+        paddingTop: '4px',
+        justifyContent: 'space-around',
+        textAlign: 'center',
+        fontSize: '17px',
+      },
+    }, `Market Info for ${marketinfo.pair.replace('_', ' to ').toUpperCase()}:`),
+    h('.marketinfo', ['Status : ', `${coinOptions[coin].status}`]),
+    h('.marketinfo', ['Exchange Rate: ', `${marketinfo.rate}`]),
+    h('.marketinfo', ['Limit: ', `${marketinfo.limit}`]),
+    h('.marketinfo', ['Minimum : ', `${marketinfo.minimum}`]),
+  ])
+}
+
+ShapeshiftForm.prototype.activeToggle = function (elementType) {
+  if (!this.props.buyView.formView.response || this.props.warning) return elementType
+  return `${elementType}.inactive`
+}
+
+ShapeshiftForm.prototype.renderLoading = function () {
+  return h('span', {
+    style: {
+      position: 'absolute',
+      left: '70px',
+      bottom: '194px',
+      background: 'transparent',
+      width: '229px',
+      height: '82px',
+      display: 'flex',
+      justifyContent: 'center',
+    },
+  }, [
+    h('img', {
+      style: {
+        width: '60px',
+      },
+      src: 'images/loading.svg',
+    }),
+  ])
+}
diff --git a/responsive-ui/app/components/shift-list-item.js b/responsive-ui/app/components/shift-list-item.js
new file mode 100644
index 000000000..32bfbeda4
--- /dev/null
+++ b/responsive-ui/app/components/shift-list-item.js
@@ -0,0 +1,204 @@
+const inherits = require('util').inherits
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const connect = require('react-redux').connect
+const vreme = new (require('vreme'))
+const explorerLink = require('../../lib/explorer-link')
+const actions = require('../actions')
+const addressSummary = require('../util').addressSummary
+
+const CopyButton = require('./copyButton')
+const EthBalance = require('./eth-balance')
+const Tooltip = require('./tooltip')
+
+
+module.exports = connect(mapStateToProps)(ShiftListItem)
+
+function mapStateToProps (state) {
+  return {
+    conversionRate: state.metamask.conversionRate,
+    currentCurrency: state.metamask.currentCurrency,
+  }
+}
+
+inherits(ShiftListItem, Component)
+
+function ShiftListItem () {
+  Component.call(this)
+}
+
+ShiftListItem.prototype.render = function () {
+  return (
+    h('.transaction-list-item.flex-row', {
+      style: {
+        paddingTop: '20px',
+        paddingBottom: '20px',
+        justifyContent: 'space-around',
+        alignItems: 'center',
+      },
+    }, [
+      h('div', {
+        style: {
+          width: '0px',
+          position: 'relative',
+          bottom: '19px',
+        },
+      }, [
+        h('img', {
+          src: 'https://info.shapeshift.io/sites/default/files/logo.png',
+          style: {
+            height: '35px',
+            width: '132px',
+            position: 'absolute',
+            clip: 'rect(0px,23px,34px,0px)',
+          },
+        }),
+      ]),
+
+      this.renderInfo(),
+      this.renderUtilComponents(),
+    ])
+  )
+}
+
+function formatDate (date) {
+  return vreme.format(new Date(date), 'March 16 2014 14:30')
+}
+
+ShiftListItem.prototype.renderUtilComponents = function () {
+  var props = this.props
+  const { conversionRate, currentCurrency } = props
+
+  switch (props.response.status) {
+    case 'no_deposits':
+      return h('.flex-row', [
+        h(CopyButton, {
+          value: this.props.depositAddress,
+        }),
+        h(Tooltip, {
+          title: 'QR Code',
+        }, [
+          h('i.fa.fa-qrcode.pointer.pop-hover', {
+            onClick: () => props.dispatch(actions.reshowQrCode(props.depositAddress, props.depositType)),
+            style: {
+              margin: '5px',
+              marginLeft: '23px',
+              marginRight: '12px',
+              fontSize: '20px',
+              color: '#F7861C',
+            },
+          }),
+        ]),
+      ])
+    case 'received':
+      return h('.flex-row')
+
+    case 'complete':
+      return h('.flex-row', [
+        h(CopyButton, {
+          value: this.props.response.transaction,
+        }),
+        h(EthBalance, {
+          value: `${props.response.outgoingCoin}`,
+          conversionRate,
+          currentCurrency,
+          width: '55px',
+          shorten: true,
+          needsParse: false,
+          incoming: true,
+          style: {
+            fontSize: '15px',
+            color: '#01888C',
+          },
+        }),
+      ])
+
+    case 'failed':
+      return ''
+    default:
+      return ''
+  }
+}
+
+ShiftListItem.prototype.renderInfo = function () {
+  var props = this.props
+  switch (props.response.status) {
+    case 'no_deposits':
+      return h('.flex-column', {
+        style: {
+          width: '200px',
+          overflow: 'hidden',
+        },
+      }, [
+        h('div', {
+          style: {
+            fontSize: 'x-small',
+            color: '#ABA9AA',
+            width: '100%',
+          },
+        }, `${props.depositType} to ETH via ShapeShift`),
+        h('div', 'No deposits received'),
+        h('div', {
+          style: {
+            fontSize: 'x-small',
+            color: '#ABA9AA',
+            width: '100%',
+          },
+        }, formatDate(props.time)),
+      ])
+    case 'received':
+      return h('.flex-column', {
+        style: {
+          width: '200px',
+          overflow: 'hidden',
+        },
+      }, [
+        h('div', {
+          style: {
+            fontSize: 'x-small',
+            color: '#ABA9AA',
+            width: '100%',
+          },
+        }, `${props.depositType} to ETH via ShapeShift`),
+        h('div', 'Conversion in progress'),
+        h('div', {
+          style: {
+            fontSize: 'x-small',
+            color: '#ABA9AA',
+            width: '100%',
+          },
+        }, formatDate(props.time)),
+      ])
+    case 'complete':
+      var url = explorerLink(props.response.transaction, parseInt('1'))
+
+      return h('.flex-column.pointer', {
+        style: {
+          width: '200px',
+          overflow: 'hidden',
+        },
+        onClick: () => global.platform.openWindow({ url }),
+      }, [
+        h('div', {
+          style: {
+            fontSize: 'x-small',
+            color: '#ABA9AA',
+            width: '100%',
+          },
+        }, 'From ShapeShift'),
+        h('div', formatDate(props.time)),
+        h('div', {
+          style: {
+            fontSize: 'x-small',
+            color: '#ABA9AA',
+            width: '100%',
+          },
+        }, addressSummary(props.response.transaction)),
+      ])
+
+    case 'failed':
+      return h('span.error', '(Failed)')
+    default:
+      return ''
+  }
+}
diff --git a/responsive-ui/app/components/tab-bar.js b/responsive-ui/app/components/tab-bar.js
new file mode 100644
index 000000000..6295e7dd9
--- /dev/null
+++ b/responsive-ui/app/components/tab-bar.js
@@ -0,0 +1,36 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+
+module.exports = TabBar
+
+inherits(TabBar, Component)
+function TabBar () {
+  Component.call(this)
+}
+
+TabBar.prototype.render = function () {
+  const props = this.props
+  const state = this.state || {}
+  const { tabs = [], defaultTab, tabSelected } = props
+  const { subview = defaultTab } = state
+
+  return (
+    h('.flex-row.space-around.text-transform-uppercase', {
+      style: {
+        background: '#EBEBEB',
+        color: '#AEAEAE',
+        paddingTop: '4px',
+      },
+    }, tabs.map((tab) => {
+      const { key, content } = tab
+      return h(subview === key ? '.activeForm' : '.inactiveForm.pointer', {
+        onClick: () => {
+          this.setState({ subview: key })
+          tabSelected(key)
+        },
+      }, content)
+    }))
+  )
+}
+
diff --git a/responsive-ui/app/components/template.js b/responsive-ui/app/components/template.js
new file mode 100644
index 000000000..b6ed8eaa0
--- /dev/null
+++ b/responsive-ui/app/components/template.js
@@ -0,0 +1,18 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+
+module.exports = NewComponent
+
+inherits(NewComponent, Component)
+function NewComponent () {
+  Component.call(this)
+}
+
+NewComponent.prototype.render = function () {
+  const props = this.props
+
+  return (
+    h('span', props.message)
+  )
+}
diff --git a/responsive-ui/app/components/token-cell.js b/responsive-ui/app/components/token-cell.js
new file mode 100644
index 000000000..19d7139bb
--- /dev/null
+++ b/responsive-ui/app/components/token-cell.js
@@ -0,0 +1,72 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const Identicon = require('./identicon')
+const prefixForNetwork = require('../../lib/etherscan-prefix-for-network')
+
+module.exports = TokenCell
+
+inherits(TokenCell, Component)
+function TokenCell () {
+  Component.call(this)
+}
+
+TokenCell.prototype.render = function () {
+  const props = this.props
+  const { address, symbol, string, network, userAddress } = props
+
+  return (
+    h('li.token-cell', {
+      style: { cursor: network === '1' ? 'pointer' : 'default' },
+      onClick: this.view.bind(this, address, userAddress, network),
+    }, [
+
+      h(Identicon, {
+        diameter: 50,
+        address,
+        network,
+      }),
+
+      h('h3', `${string || 0} ${symbol}`),
+
+      h('span', { style: { flex: '1 0 auto' } }),
+
+      /*
+      h('button', {
+        onClick: this.send.bind(this, address),
+      }, 'SEND'),
+      */
+
+    ])
+  )
+}
+
+TokenCell.prototype.send = function (address, event) {
+  event.preventDefault()
+  event.stopPropagation()
+  const url = tokenFactoryFor(address)
+  if (url) {
+    navigateTo(url)
+  }
+}
+
+TokenCell.prototype.view = function (address, userAddress, network, event) {
+  const url = etherscanLinkFor(address, userAddress, network)
+  if (url) {
+    navigateTo(url)
+  }
+}
+
+function navigateTo (url) {
+  global.platform.openWindow({ url })
+}
+
+function etherscanLinkFor (tokenAddress, address, network) {
+  const prefix = prefixForNetwork(network)
+  return `https://${prefix}etherscan.io/token/${tokenAddress}?a=${address}`
+}
+
+function tokenFactoryFor (tokenAddress) {
+  return `https://tokenfactory.surge.sh/#/token/${tokenAddress}`
+}
+
diff --git a/responsive-ui/app/components/token-list.js b/responsive-ui/app/components/token-list.js
new file mode 100644
index 000000000..20cfa897e
--- /dev/null
+++ b/responsive-ui/app/components/token-list.js
@@ -0,0 +1,192 @@
+const Component = require('react').Component
+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 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
+
+inherits(TokenList, Component)
+function TokenList () {
+  this.state = {
+    tokens: [],
+    isLoading: true,
+    network: null,
+  }
+  Component.call(this)
+}
+
+TokenList.prototype.render = function () {
+  const state = this.state
+  const { tokens, isLoading, error } = state
+  const { userAddress, network } = this.props
+
+  if (isLoading) {
+    return this.message('Loading')
+  }
+
+  if (error) {
+    log.error(error)
+    return this.message('There was a problem loading your token balances.')
+  }
+
+  const tokenViews = tokens.map((tokenData) => {
+    tokenData.network = network
+    tokenData.userAddress = userAddress
+    return h(TokenCell, tokenData)
+  })
+
+  return h('div', [
+    h('ol', {
+      style: {
+        height: '260px',
+        overflowY: 'auto',
+        display: 'flex',
+        flexDirection: 'column',
+      },
+    }, [
+      h('style', `
+
+        li.token-cell {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          padding: 10px;
+        }
+
+        li.token-cell > h3 {
+          margin-left: 12px;
+        }
+
+        li.token-cell:hover {
+          background: white;
+          cursor: pointer;
+        }
+
+      `),
+      ...tokenViews,
+      tokenViews.length ? null : this.message('No Tokens Found.'),
+    ]),
+    this.addTokenButtonElement(),
+  ])
+}
+
+TokenList.prototype.addTokenButtonElement = function () {
+  return h('div', [
+    h('div.footer.hover-white.pointer', {
+      key: 'reveal-account-bar',
+      onClick: () => {
+        this.props.addToken()
+      },
+      style: {
+        display: 'flex',
+        height: '40px',
+        padding: '10px',
+        justifyContent: 'center',
+        alignItems: 'center',
+      },
+    }, [
+      h('i.fa.fa-plus.fa-lg'),
+    ]),
+  ])
+}
+
+TokenList.prototype.message = function (body) {
+  return h('div', {
+    style: {
+      display: 'flex',
+      height: '250px',
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: '30px',
+    },
+  }, body)
+}
+
+TokenList.prototype.componentDidMount = function () {
+  this.createFreshTokenTracker()
+}
+
+TokenList.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 } = this.props
+  this.tracker = new TokenTracker({
+    userAddress,
+    provider: global.ethereumProvider,
+    tokens: uniqueMergeTokens(defaultTokens, this.props.tokens),
+    pollingInterval: 8000,
+  })
+
+
+  // Set up listener instances for cleaning up
+  this.balanceUpdater = this.updateBalances.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.updateBalances(this.tracker.serialize())
+  })
+  .catch((reason) => {
+    log.error(`Problem updating balances`, reason)
+    this.setState({ isLoading: false })
+  })
+}
+
+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.updateBalances = function (tokens) {
+  const heldTokens = tokens.filter(token => {
+    return token.balance !== '0' && token.string !== '0.000'
+  })
+  this.setState({ tokens: heldTokens, isLoading: false })
+}
+
+TokenList.prototype.componentWillUnmount = function () {
+  if (!this.tracker) return
+  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/responsive-ui/app/components/tooltip.js b/responsive-ui/app/components/tooltip.js
new file mode 100644
index 000000000..edbc074bb
--- /dev/null
+++ b/responsive-ui/app/components/tooltip.js
@@ -0,0 +1,22 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const ReactTooltip = require('react-tooltip-component')
+
+module.exports = Tooltip
+
+inherits(Tooltip, Component)
+function Tooltip () {
+  Component.call(this)
+}
+
+Tooltip.prototype.render = function () {
+  const props = this.props
+  const { position, title, children } = props
+
+  return h(ReactTooltip, {
+    position: position || 'left',
+    title,
+    fixed: false,
+  }, children)
+}
diff --git a/responsive-ui/app/components/transaction-list-item-icon.js b/responsive-ui/app/components/transaction-list-item-icon.js
new file mode 100644
index 000000000..431054340
--- /dev/null
+++ b/responsive-ui/app/components/transaction-list-item-icon.js
@@ -0,0 +1,68 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const Tooltip = require('./tooltip')
+
+const Identicon = require('./identicon')
+
+module.exports = TransactionIcon
+
+inherits(TransactionIcon, Component)
+function TransactionIcon () {
+  Component.call(this)
+}
+
+TransactionIcon.prototype.render = function () {
+  const { transaction, txParams, isMsg } = this.props
+  switch (transaction.status) {
+    case 'unapproved':
+      return h(!isMsg ? '.unapproved-tx-icon' : 'i.fa.fa-certificate.fa-lg')
+
+    case 'rejected':
+      return h('i.fa.fa-exclamation-triangle.fa-lg.warning', {
+        style: {
+          width: '24px',
+        },
+      })
+
+    case 'failed':
+      return h('i.fa.fa-exclamation-triangle.fa-lg.error', {
+        style: {
+          width: '24px',
+        },
+      })
+
+    case 'submitted':
+      return h(Tooltip, {
+        title: 'Pending',
+        position: 'bottom',
+      }, [
+        h('i.fa.fa-ellipsis-h', {
+          style: {
+            fontSize: '27px',
+          },
+        }),
+      ])
+  }
+
+  if (isMsg) {
+    return h('i.fa.fa-certificate.fa-lg', {
+      style: {
+        width: '24px',
+      },
+    })
+  }
+
+  if (txParams.to) {
+    return h(Identicon, {
+      diameter: 24,
+      address: txParams.to || transaction.hash,
+    })
+  } else {
+    return h('i.fa.fa-file-text-o.fa-lg', {
+      style: {
+        width: '24px',
+      },
+    })
+  }
+}
diff --git a/responsive-ui/app/components/transaction-list-item.js b/responsive-ui/app/components/transaction-list-item.js
new file mode 100644
index 000000000..dbda66a31
--- /dev/null
+++ b/responsive-ui/app/components/transaction-list-item.js
@@ -0,0 +1,165 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+
+const EthBalance = require('./eth-balance')
+const addressSummary = require('../util').addressSummary
+const explorerLink = require('../../lib/explorer-link')
+const CopyButton = require('./copyButton')
+const vreme = new (require('vreme'))
+const Tooltip = require('./tooltip')
+const numberToBN = require('number-to-bn')
+
+const TransactionIcon = require('./transaction-list-item-icon')
+const ShiftListItem = require('./shift-list-item')
+module.exports = TransactionListItem
+
+inherits(TransactionListItem, Component)
+function TransactionListItem () {
+  Component.call(this)
+}
+
+TransactionListItem.prototype.render = function () {
+  const { transaction, network, conversionRate, currentCurrency } = this.props
+  if (transaction.key === 'shapeshift') {
+    if (network === '1') return h(ShiftListItem, transaction)
+  }
+  var date = formatDate(transaction.time)
+
+  let isLinkable = false
+  const numericNet = parseInt(network)
+  isLinkable = numericNet === 1 || numericNet === 3 || numericNet === 4 || numericNet === 42
+
+  var isMsg = ('msgParams' in transaction)
+  var isTx = ('txParams' in transaction)
+  var isPending = transaction.status === 'unapproved'
+  let txParams
+  if (isTx) {
+    txParams = transaction.txParams
+  } else if (isMsg) {
+    txParams = transaction.msgParams
+  }
+
+  const nonce = txParams.nonce ? numberToBN(txParams.nonce).toString(10) : ''
+
+  const isClickable = ('hash' in transaction && isLinkable) || isPending
+  return (
+    h(`.transaction-list-item.flex-row.flex-space-between${isClickable ? '.pointer' : ''}`, {
+      onClick: (event) => {
+        if (isPending) {
+          this.props.showTx(transaction.id)
+        }
+        event.stopPropagation()
+        if (!transaction.hash || !isLinkable) return
+        var url = explorerLink(transaction.hash, parseInt(network))
+        global.platform.openWindow({ url })
+      },
+      style: {
+        padding: '20px 0',
+      },
+    }, [
+
+      h('.identicon-wrapper.flex-column.flex-center.select-none', [
+        h('.pop-hover', {
+          onClick: (event) => {
+            event.stopPropagation()
+            if (!isTx || isPending) return
+            var url = `https://metamask.github.io/eth-tx-viz/?tx=${transaction.hash}`
+            global.platform.openWindow({ url })
+          },
+        }, [
+          h(TransactionIcon, { txParams, transaction, isTx, isMsg }),
+        ]),
+      ]),
+
+      h(Tooltip, {
+        title: 'Transaction Number',
+        position: 'bottom',
+      }, [
+        h('span', {
+          style: {
+            display: 'flex',
+            cursor: 'normal',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: '10px',
+          },
+        }, nonce),
+      ]),
+
+      h('.flex-column', {style: {width: '200px', overflow: 'hidden'}}, [
+        domainField(txParams),
+        h('div', date),
+        recipientField(txParams, transaction, isTx, isMsg),
+      ]),
+
+      // Places a copy button if tx is successful, else places a placeholder empty div.
+      transaction.hash ? h(CopyButton, { value: transaction.hash }) : h('div', {style: { display: 'flex', alignItems: 'center', width: '26px' }}),
+
+      isTx ? h(EthBalance, {
+        value: txParams.value,
+        conversionRate,
+        currentCurrency,
+        width: '55px',
+        shorten: true,
+        showFiat: false,
+        style: {fontSize: '15px'},
+      }) : h('.flex-column'),
+    ])
+  )
+}
+
+function domainField (txParams) {
+  return h('div', {
+    style: {
+      fontSize: 'x-small',
+      color: '#ABA9AA',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      width: '100%',
+    },
+  }, [
+    txParams.origin,
+  ])
+}
+
+function recipientField (txParams, transaction, isTx, isMsg) {
+  let message
+
+  if (isMsg) {
+    message = 'Signature Requested'
+  } else if (txParams.to) {
+    message = addressSummary(txParams.to)
+  } else {
+    message = 'Contract Published'
+  }
+
+  return h('div', {
+    style: {
+      fontSize: 'x-small',
+      color: '#ABA9AA',
+    },
+  }, [
+    message,
+    failIfFailed(transaction),
+  ])
+}
+
+function formatDate (date) {
+  return vreme.format(new Date(date), 'March 16 2014 14:30')
+}
+
+function failIfFailed (transaction) {
+  if (transaction.status === 'rejected') {
+    return h('span.error', ' (Rejected)')
+  }
+  if (transaction.err) {
+    return h(Tooltip, {
+      title: transaction.err.message,
+      position: 'bottom',
+    }, [
+      h('span.error', ' (Failed)'),
+    ])
+  }
+}
diff --git a/responsive-ui/app/components/transaction-list.js b/responsive-ui/app/components/transaction-list.js
new file mode 100644
index 000000000..3b4ba741e
--- /dev/null
+++ b/responsive-ui/app/components/transaction-list.js
@@ -0,0 +1,79 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+
+const TransactionListItem = require('./transaction-list-item')
+
+module.exports = TransactionList
+
+
+inherits(TransactionList, Component)
+function TransactionList () {
+  Component.call(this)
+}
+
+TransactionList.prototype.render = function () {
+  const { transactions, network, unapprovedMsgs, conversionRate } = this.props
+
+  var shapeShiftTxList
+  if (network === '1') {
+    shapeShiftTxList = this.props.shapeShiftTxList
+  }
+  const txsToRender = !shapeShiftTxList ? transactions.concat(unapprovedMsgs) : transactions.concat(unapprovedMsgs, shapeShiftTxList)
+  .sort((a, b) => b.time - a.time)
+
+  return (
+
+    h('section.transaction-list', [
+
+      h('style', `
+        .transaction-list .transaction-list-item:not(:last-of-type) {
+          border-bottom: 1px solid #D4D4D4;
+        }
+        .transaction-list .transaction-list-item .ether-balance-label {
+          display: block !important;
+          font-size: small;
+        }
+      `),
+
+      h('.tx-list', {
+        style: {
+          overflowY: 'auto',
+          height: '300px',
+          padding: '0 20px',
+          textAlign: 'center',
+        },
+      }, [
+
+        txsToRender.length
+          ? txsToRender.map((transaction, i) => {
+            let key
+            switch (transaction.key) {
+              case 'shapeshift':
+                const { depositAddress, time } = transaction
+                key = `shift-tx-${depositAddress}-${time}-${i}`
+                break
+              default:
+                key = `tx-${transaction.id}-${i}`
+            }
+            return h(TransactionListItem, {
+              transaction, i, network, key,
+              conversionRate,
+              showTx: (txId) => {
+                this.props.viewPendingTx(txId)
+              },
+            })
+          })
+        : h('.flex-center', {
+          style: {
+            flexDirection: 'column',
+            height: '100%',
+          },
+        }, [
+          'No transaction history.',
+        ]),
+      ]),
+    ])
+  )
+}
+
-- 
cgit