diff options
Diffstat (limited to 'ui/app')
| -rw-r--r-- | ui/app/components/tx-list.js | 141 | ||||
| -rw-r--r-- | ui/app/components/tx-view.js | 112 |
2 files changed, 151 insertions, 102 deletions
diff --git a/ui/app/components/tx-list.js b/ui/app/components/tx-list.js new file mode 100644 index 000000000..8f6f09348 --- /dev/null +++ b/ui/app/components/tx-list.js @@ -0,0 +1,141 @@ +const Component = require('react').Component +const connect = require('react-redux').connect +const h = require('react-hyperscript') +const inherits = require('util').inherits + +const valuesFor = require('../util').valuesFor + +module.exports = connect(mapStateToProps)(TxList) + +function mapStateToProps(state) { + return { + network: state.metamask.network, + unapprovedMsgs: valuesFor(state.metamask.unapprovedMsgs), + shapeShiftTxList: state.metamask.shapeShiftTxList, + transactions: state.metamask.selectedAddressTxList || [], + conversionRate: state.metamask.conversionRate, + } +} + +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 { 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) + + 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: { + 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 + ]) +} + +TxList.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'), + + ]) + + ]) +} + diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js index 9d7bc9138..f0a93a2ab 100644 --- a/ui/app/components/tx-view.js +++ b/ui/app/components/tx-view.js @@ -10,6 +10,9 @@ const WalletView = require('./wallet-view') // balance component const BalanceComponent = require('./balance-component') +// tx list +const TxList = require('./tx-list') + const Identicon = require('./identicon') // const AccountDropdowns = require('./account-dropdowns').AccountDropdowns // const Content = require('./wallet-content-display') @@ -22,6 +25,8 @@ function mapStateToProps (state) { identities: state.metamask.identities, accounts: state.metamask.accounts, address: state.metamask.selectedAddress, + transactions: state.metamask.selectedAddressTxList || [], + shapeShiftTxList: state.metamask.shapeShiftTxList, conversionRate: state.metamask.conversionRate, currentCurrency: state.metamask.currentCurrency, } @@ -35,15 +40,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) @@ -56,7 +52,9 @@ TxView.prototype.render = function () { var checksumAddress = selected && ethUtil.toChecksumAddress(selected) var identity = props.identities[selected] var account = props.accounts[selected] - const { conversionRate, currentCurrency } = props + const { conversionRate, currentCurrency, transactions } = props + + console.log(transactions) return h('div.tx-view.flex-column', { style: {}, @@ -114,7 +112,7 @@ TxView.prototype.render = function () { // laptop: 10vw? // phone: 75vw? h('div.flex-row.flex-center.hero-balance-buttons', { - style: {} + style: {}, }, [ h('button.btn-clear', { style: { @@ -135,97 +133,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, + h(TxList, {}), ]) - // 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'), - - ]) - - ]) -} - - |