Add Tx List and selectors

1 files changed, 22 insertions, 129 deletions

diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js
index 9d7bc9138..0d1f3fc31 100644
--- a/ui/app/components/tx-view.js
+++ b/ui/app/components/tx-view.js
@@ -4,26 +4,30 @@ const h = require('react-hyperscript')
 const ethUtil = require('ethereumjs-util')
 const inherits = require('util').inherits
 const actions = require('../actions')
-// slideout menu
-const WalletView = require('./wallet-view')
 
-// balance component
+const WalletView = require('./wallet-view')
 const BalanceComponent = require('./balance-component')
-
+const TxList = require('./tx-list')
 const Identicon = require('./identicon')
-// const AccountDropdowns = require('./account-dropdowns').AccountDropdowns
-// const Content = require('./wallet-content-display')
 
 module.exports = connect(mapStateToProps, mapDispatchToProps)(TxView)
 
 function mapStateToProps (state) {
+  const sidebarOpen = state.appState.sidebarOpen
+
+  const identities = state.metamask.identities
+  const accounts = state.metamask.accounts
+  const selectedAddress = state.metamask.selectedAddress || Object.keys(accounts)[0]
+  const checksumAddress = selectedAddress && ethUtil.toChecksumAddress(selectedAddress)
+  const identity = identities[selectedAddress]
+  const account = accounts[selectedAddress]
+
   return {
-    sidebarOpen: state.appState.sidebarOpen,
-    identities: state.metamask.identities,
-    accounts: state.metamask.accounts,
-    address: state.metamask.selectedAddress,
-    conversionRate: state.metamask.conversionRate,
-    currentCurrency: state.metamask.currentCurrency,
+    sidebarOpen,
+    selectedAddress,
+    checksumAddress,
+    identity,
+    account,
   }
 }
 
@@ -35,15 +39,6 @@ function mapDispatchToProps (dispatch) {
   }
 }
 
-const contentDivider = h('div', {
-  style: {
-    marginLeft: '1.3em',
-    marginRight: '1.3em',
-    height:'1px',
-    background:'#E7E7E7', // TODO: make custom color
-  },
-})
-
 inherits(TxView, Component)
 function TxView () {
   Component.call(this)
@@ -51,12 +46,7 @@ function TxView () {
 
 TxView.prototype.render = function () {
 
-  var props = this.props
-  var selected = props.address || Object.keys(props.accounts)[0]
-  var checksumAddress = selected && ethUtil.toChecksumAddress(selected)
-  var identity = props.identities[selected]
-  var account = props.accounts[selected]
-  const { conversionRate, currentCurrency } = props
+  const { selectedAddress, identity, account } = this.props
 
   return h('div.tx-view.flex-column', {
     style: {},
@@ -65,20 +55,19 @@ TxView.prototype.render = function () {
     h('div.flex-row.phone-visible', {
       style: {
         margin: '1em 0.9em',
-        alignItems: 'center'
+        alignItems: 'center',
       },
       onClick: () => {
         this.props.sidebarOpen ? this.props.hideSidebar() : this.props.showSidebar()
       },
     }, [
-      // burger
+
       h('div.fa.fa-bars', {
         style: {
           fontSize: '1.3em',
         },
       }, []),
 
-      // account display
       h('.identicon-wrapper.select-none', {
         style: {
           marginLeft: '0.9em',
@@ -86,7 +75,7 @@ TxView.prototype.render = function () {
       }, [
         h(Identicon, {
           diameter: 24,
-          address: selected,
+          address: selectedAddress,
         }),
       ]),
 
@@ -98,23 +87,17 @@ TxView.prototype.render = function () {
 
     ]),
 
-    // laptop: flex-row, flex-center
-    // mobile: flex-column
     h('div.hero-balance', {
       style: {},
     }, [
 
       h(BalanceComponent, {
         balanceValue: account && account.balance,
-        conversionRate,
-        currentCurrency,
         style: {},
       }),
 
-      // laptop: 10vw?
-      // phone: 75vw?
       h('div.flex-row.flex-center.hero-balance-buttons', {
-        style: {}
+        style: {},
       }, [
         h('button.btn-clear', {
           style: {
@@ -135,97 +118,7 @@ TxView.prototype.render = function () {
       ]),
     ]),
 
-    h('div.flex-row', {
-      style: {
-        margin: '1.8em 0.9em 0.8em 0.9em',
-      }
-    }, [
-
-      // tx-view-tab.js
-      h('div.flex-row', {
-      }, [
-
-        h('div', {
-          style: {
-            borderBottom: '0.07em solid black',
-            paddingBottom: '0.015em',
-          }
-        }, 'TRANSACTIONS'),
-
-        h('div', {
-          style: {
-            marginLeft: '1.25em',
-          }
-        }, 'TOKENS'),
-
-      ]),
-    ]),
-
-    contentDivider,
-
-    this.renderTransactionListItem(),
-
-    contentDivider,
-
-    this.renderTransactionListItem(),
-
-    contentDivider,
-
-  ])
-  // column
-  // tab row
-  // divider
-  // item
-}
-
-TxView.prototype.renderTransactionListItem = function () {
-  return h('div.flex-column', {
-    style: {
-      alignItems: 'stretch',
-      margin: '0.6em 1.3em 0.6em 1.3em',
-    }
-  }, [
-
-    h('div', {
-      style: {
-        flexGrow: 1,
-        marginTop: '0.3em',
-      }
-    }, 'Jul 01, 2017'),
-
-    h('div.flex-row', {
-      style: {
-        alignItems: 'stretch',
-      }
-    }, [
-
-      h('div', {
-        style: {
-          flexGrow: 1,
-        }
-      }, 'icon'),
-
-      h('div', {
-        style: {
-          flexGrow: 3,
-        }
-      }, 'Hash'),
-
-      h('div', {
-        style: {
-          flexGrow: 5,
-        }
-      }, 'Status'),
-
-      h('div', {
-        style: {
-          flexGrow: 2,
-        }
-      }, 'Details'),
-
-    ])
+    h(TxList, {}),
 
   ])
 }
-
-