1 files changed, 148 insertions, 0 deletions
diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js
new file mode 100644
index 000000000..b25d8e0f9
--- /dev/null
+++ b/ui/app/components/tx-view.js
@@ -0,0 +1,148 @@
+const Component = require('react').Component
+const connect = require('react-redux').connect
+const h = require('react-hyperscript')
+const ethUtil = require('ethereumjs-util')
+const inherits = require('util').inherits
+const actions = require('../actions')
+const selectors = require('../selectors')
+
+const BalanceComponent = require('./balance-component')
+const TxList = require('./tx-list')
+const Identicon = require('./identicon')
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(TxView)
+
+function mapStateToProps (state) {
+  const sidebarOpen = state.appState.sidebarOpen
+  const isMascara = state.appState.isMascara
+
+  const identities = state.metamask.identities
+  const accounts = state.metamask.accounts
+  const network = state.metamask.network
+  const selectedTokenAddress = state.metamask.selectedTokenAddress
+  const selectedAddress = state.metamask.selectedAddress || Object.keys(accounts)[0]
+  const checksumAddress = selectedAddress && ethUtil.toChecksumAddress(selectedAddress)
+  const identity = identities[selectedAddress]
+
+  return {
+    sidebarOpen,
+    selectedAddress,
+    checksumAddress,
+    selectedTokenAddress,
+    selectedToken: selectors.getSelectedToken(state),
+    identity,
+    network,
+    isMascara,
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    showSidebar: () => { dispatch(actions.showSidebar()) },
+    hideSidebar: () => { dispatch(actions.hideSidebar()) },
+    showModal: (payload) => { dispatch(actions.showModal(payload)) },
+    showSendPage: () => { dispatch(actions.showSendPage()) },
+    showSendTokenPage: () => { dispatch(actions.showSendTokenPage()) },
+  }
+}
+
+inherits(TxView, Component)
+function TxView () {
+  Component.call(this)
+}
+
+TxView.prototype.renderHeroBalance = function () {
+  const { selectedToken } = this.props
+
+  return h('div.hero-balance', {}, [
+
+    h(BalanceComponent, { token: selectedToken }),
+
+    this.renderButtons(),
+  ])
+}
+
+TxView.prototype.renderButtons = function () {
+  const {selectedToken, showModal, showSendPage, showSendTokenPage } = this.props
+
+  return !selectedToken
+    ? (
+      h('div.flex-row.flex-center.hero-balance-buttons', [
+        h('button.btn-clear.hero-balance-button', {
+          onClick: () => showModal({
+            name: 'DEPOSIT_ETHER',
+          }),
+        }, 'DEPOSIT'),
+
+        h('button.btn-clear.hero-balance-button', {
+          style: {
+            marginLeft: '0.8em',
+          },
+          onClick: showSendPage,
+        }, 'SEND'),
+      ])
+    )
+    : (
+      h('div.flex-row.flex-center.hero-balance-buttons', [
+        h('button.btn-clear.hero-balance-button', {
+          onClick: showSendTokenPage,
+        }, 'SEND'),
+      ])
+    )
+}
+
+TxView.prototype.render = function () {
+  const { selectedAddress, identity, network, isMascara } = this.props
+
+  return h('div.tx-view.flex-column', {
+    style: {},
+  }, [
+
+    h('div.flex-row.phone-visible', {
+      style: {
+        margin: '1.5em 1.2em 0',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+      },
+    }, [
+
+      h('div.fa.fa-bars', {
+        style: {
+          fontSize: '1.3em',
+          cursor: 'pointer',
+        },
+        onClick: () => {
+          this.props.sidebarOpen ? this.props.hideSidebar() : this.props.showSidebar()
+        },
+      }, []),
+
+      h('.identicon-wrapper.select-none', {
+        style: {
+          marginLeft: '0.9em',
+        },
+      }, [
+        h(Identicon, {
+          diameter: 24,
+          address: selectedAddress,
+          network,
+        }),
+      ]),
+
+      h('span.account-name', {
+        style: {},
+      }, [
+        identity.name,
+      ]),
+
+      !isMascara && h('div.open-in-browser', {
+        onClick: () => global.platform.openExtensionInBrowser(),
+      }, [h('img', { src: 'images/popout.svg' })]),
+
+    ]),
+
+    this.renderHeroBalance(),
+
+    h(TxList),
+
+  ])
+}