Add Tx List and selectors

ui/app/components/balance-component.js

@@ -1,10 +1,18 @@
 const Component = require('react').Component
+const connect = require('react-redux').connect
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 
 const { formatBalance, generateBalanceObject } = require('../util')
 
-module.exports = BalanceComponent
+module.exports = connect(mapStateToProps)(BalanceComponent)
+
+function mapStateToProps (state) {
+  return {
+    conversionRate: state.metamask.conversionRate,
+    currentCurrency: state.metamask.currentCurrency,
+  }
+}
 
 inherits(BalanceComponent, Component)
 function BalanceComponent () {
@@ -18,8 +26,6 @@ BalanceComponent.prototype.render = function () {
   const formattedBalance = balanceValue ? formatBalance(balanceValue, 6, needsParse) : '...'
 
   return h('div.balance-container', {}, [
-    // laptop: 50px 50px
-    // mobile: 100px 100px
 
     // TODO: balance icon needs to be passed in
     h('img.balance-icon', {
@@ -44,8 +50,6 @@ BalanceComponent.prototype.renderBalance = function (formattedBalance) {
     ])
   }
 
-  // laptop: 5vw?
-  // phone: 50vw?
   return h('div.flex-column.balance-display', {}, [
     h('div.token-amount', {
       style: {},
@@ -57,8 +61,7 @@ BalanceComponent.prototype.renderBalance = function (formattedBalance) {
 
 BalanceComponent.prototype.renderFiatValue = function (formattedBalance) {
 
-  const props = this.props
-  const { conversionRate, currentCurrency } = props
+  const { conversionRate, currentCurrency } = this.props
 
   const fiatDisplayNumber = this.getFiatDisplayNumber(formattedBalance, conversionRate)
 

ui/app/components/tx-list.js

@@ -0,0 +1,191 @@
+const Component = require('react').Component
+const connect = require('react-redux').connect
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const selectors = require('../selectors')
+const Identicon = require('./identicon')
+
+const valuesFor = require('../util').valuesFor
+
+module.exports = connect(mapStateToProps)(TxList)
+
+function mapStateToProps (state) {
+  return {
+    txsToRender: selectors.transactionsSelector(state),
+    conversionRate: selectors.conversionRateSelector(state),
+  }
+}
+
+inherits(TxList, Component)
+function TxList () {
+  Component.call(this)
+}
+
+const contentDivider = h('div', {
+  style: {
+    marginLeft: '1.3em',
+    marginRight: '1.3em',
+    height:'1px',
+    background:'#E7E7E7', // TODO: make custom color
+  },
+})
+
+TxList.prototype.render = function () {
+
+  const { txsToRender, conversionRate } = this.props
+
+  console.log('transactions to render', txsToRender)
+
+  return h('div.flex-column.tx-list-container', {}, [
+
+    h('div.flex-row.tx-list', {
+      style: {
+        margin: '1.8em 0.9em 0.8em 0.9em',
+      },
+    }, [
+
+      // tx-view-tab.js
+      h('div.flex-row', {
+      }, [
+
+        h('div', {
+          style: {}
+        }, 'TRANSACTIONS'),
+
+      ]),
+    ]),
+
+    contentDivider,
+
+    this.renderTransactionListItem(),
+
+    contentDivider,
+
+    // this.renderTransactionListItem(),
+
+    // contentDivider,
+
+    // this.renderTransactionListItem(),
+
+    // contentDivider,
+
+    // this.renderTransactionListItem(),
+
+    // contentDivider,
+
+    // this.renderTransactionListItem(),
+
+    // contentDivider,
+
+    // this.renderTransactionListItem(),
+
+    // contentDivider,
+
+    // this.renderTransactionListItem(),
+
+    // contentDivider,
+
+    // this.renderTransactionListItem(),
+
+    // contentDivider,
+
+    // this.renderTransactionListItem(),
+
+    // contentDivider,
+
+    // this.renderTransactionListItem(),
+
+    // contentDivider,
+
+  ])
+}
+
+TxList.prototype.renderTransactionListItem = function () {
+  // fake data
+  const props = {
+    dateString: 'Jul 01, 2017',
+    address: '0x82df11beb942beeed58d466fcb0f0791365c7684',
+    transactionStatus: 'Confirmed',
+    transactionAmount: '3'
+  }
+
+  const { address, transactionStatus, transactionAmount, dateString } = props
+
+  return h('div.flex-column', {
+    style: {
+      alignItems: 'stretch',
+      justifyContent: 'flex-start',
+      margin: '0.6em 1.3em 0.6em 1.3em',
+      overflow: 'none'
+    }
+  }, [
+
+    h('div', {
+      style: {
+        flexGrow: 1,
+        flexShrink: 1,
+        flexBasis: 'auto',
+        marginTop: '0.3em',
+      }
+    }, [
+      h('span', {}, [
+        dateString,
+      ])
+    ]),
+
+    h('div.flex-row', {
+      style: {
+        alignItems: 'stretch',
+      }
+    }, [
+
+      h('div', {
+        style: {
+          flexGrow: 1,
+        }
+      }, [
+        h(Identicon, {
+          address,
+          diameter: 24,
+        })
+      ]),
+
+      h('div', {
+        style: {
+          flexGrow: 3,
+        }
+      }, [
+        h('span', {}, [
+          '0x82df11be...7684', //address
+        ]),
+      ]),
+
+      h('div', {
+        style: {
+          flexGrow: 5,
+        }
+      }, [
+        h('span', {}, [
+          transactionStatus,
+        ]),
+      ]),
+
+      h('div.flex-column', {
+        style: {
+          flexGrow: 2,
+        }
+      }, [
+
+        h('span', {}, [
+          transactionAmount,
+        ]),
+
+        h('span', {}, [
+          '300 USD',
+        ]),
+
+      ]),
+    ])
+  ])
+}
+

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, {}),
 
   ])
 }
-
-

ui/app/components/wallet-view.js

@@ -38,7 +38,9 @@ function WalletView () {
 const noop = () => {}
 
 WalletView.prototype.render = function () {
-  const { network, responsiveDisplayClassname, style, identities, selectedAddress } = this.props
+  const { network, responsiveDisplayClassname, style, identities, selectedAddress, selectedAccount } = this.props
+
+  console.log(selectedAccount)
 
   return h('div.wallet-view.flex-column' + (responsiveDisplayClassname || ''), {
     style: {},

ui/app/selectors.js

@@ -1,7 +1,11 @@
+const valuesFor = require('./util').valuesFor
+
 const selectors = {
   getSelectedAddress,
   getSelectedIdentity,
   getSelectedAccount,
+  conversionRateSelector,
+  transactionsSelector,
 }
 
 module.exports = selectors
@@ -24,4 +28,18 @@ function getSelectedAccount(state) {
   const selectedAddress = getSelectedAddress(state)
 
   return accounts[selectedAddress]
+}
+
+function conversionRateSelector(state) {
+  return state.metamask.conversionRate
+}
+
+function transactionsSelector(state) {
+  const { network } = state.metamask
+  const unapprovedMsgs = valuesFor(state.metamask.unapprovedMsgs)
+  const shapeShiftTxList = (network === '1') ? state.metamask.shapeShiftTxList : undefined
+  const transactions = state.metamask.selectedAddressTxList || []
+  const txsToRender = !shapeShiftTxList ? transactions.concat(unapprovedMsgs) : transactions.concat(unapprovedMsgs, shapeShiftTxList)
+
+  return txsToRender.sort((a, b) => b.time - a.time)
 }