parent
72df9746fa
commit
9d36b25c5f
@ -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'), |
||||
|
||||
]) |
||||
|
||||
]) |
||||
} |
||||
|
Loading…
Reference in new issue