m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

extracted transaction list

Browse Source
This commit is contained in:
Simon Liang 2017-08-09 18:10:51 +08:00
parent 72df9746fa
commit 9d36b25c5f
2 changed files with 151 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

141
ui/app/components/tx-list.js Normal file
View File

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

112
ui/app/components/tx-view.js
View File

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