mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-10-23 20:05:27 +02:00
141 lines
2.6 KiB
JavaScript
141 lines
2.6 KiB
JavaScript
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) {
|
|
const network = state.metamask.network
|
|
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)
|
|
.sort((a, b) => b.time - a.time)
|
|
|
|
return {
|
|
txsToRender,
|
|
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 { 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: {
|
|
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'),
|
|
|
|
])
|
|
|
|
])
|
|
}
|
|
|