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

Make transaction list into actual React Component

Browse Source
This commit is contained in:
Dan Finlay 2016-05-25 17:18:04 -07:00
parent 5669f44300
commit 45ae2a0be3
2 changed files with 71 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
ui/app/account-detail.js
View File

@ -7,10 +7,11 @@ const copyToClipboard = require('copy-to-clipboard')
const actions = require('./actions')
const addressSummary = require('./util').addressSummary
const ReactCSSTransitionGroup = require('react-addons-css-transition-group')
const valuesFor = require('./util').valuesFor
const Identicon = require('./components/identicon')
const EtherBalance = require('./components/eth-balance')
const transactionList = require('./components/transaction-list')
const TransactionList = require('./components/transaction-list')
const ExportAccountView = require('./components/account-export')
const ethUtil = require('ethereumjs-util')
const EditableLabel = require('./components/editable-label')
@ -24,7 +25,9 @@ function mapStateToProps(state) {
address: state.metamask.selectedAccount,
accountDetail: state.appState.accountDetail,
transactions: state.metamask.transactions,
networkVersion: state.metamask.network,
network: state.metamask.network,
unconfTxs: valuesFor(state.metamask.unconfTxs),
unconfMsgs: valuesFor(state.metamask.unconfMsgs),
}
}
@ -139,7 +142,7 @@ AccountDetailScreen.prototype.render = function() {
}),
h('button', {
onClick: () => this.props.dispatch(actions.showSendPage()),
onClick: () => props.dispatch(actions.showSendPage()),
style: {
margin: 10,
},
@ -183,18 +186,22 @@ AccountDetailScreen.prototype.subview = function() {
}
AccountDetailScreen.prototype.transactionList = function() {
var state = this.props
var transactions = state.transactions
const { transactions, unconfTxs, unconfMsgs, address, network } = this.props
var txsToRender = transactions
// only transactions that are from the current address
.filter(tx => tx.txParams.from === state.address)
// only transactions that are on the current network
.filter(tx => tx.txParams.metamaskNetworkId === state.networkVersion)
// sort by recency
.sort((a, b) => b.time - a.time)
// only transactions that are from the current address
.filter(tx => tx.txParams.from === address)
// only transactions that are on the current network
.filter(tx => tx.txParams.metamaskNetworkId === network)
// sort by recency
.sort((a, b) => b.time - a.time)
return transactionList(txsToRender, state.networkVersion)
return h(TransactionList, {
txsToRender,
network,
unconfTxs,
unconfMsgs,
})
}
AccountDetailScreen.prototype.navigateToAccounts = function(event){

96
ui/app/components/transaction-list.js
View File

@ -1,4 +1,7 @@
const Component = require('react').Component
const h = require('react-hyperscript')
const inherits = require('util').inherits
const vreme = new (require('vreme'))
const formatBalance = require('../util').formatBalance
const addressSummary = require('../util').addressSummary
@ -7,8 +10,18 @@ const Panel = require('./panel')
const Identicon = require('./identicon')
const EtherBalance = require('./eth-balance')
module.exports = TransactionList
inherits(TransactionList, Component)
function TransactionList() {
Component.call(this)
}
TransactionList.prototype.render = function() {
const { txsToRender, network, unconfTxs, unconfMsgs } = this.props
const transactions = txsToRender.concat(unconfTxs).concat(unconfMsgs)
module.exports = function(transactions, network) {
return (
h('section.transaction-list', [
@ -49,53 +62,49 @@ module.exports = function(transactions, network) {
height: '100%',
},
}, 'No transaction history...')]
))
])
)
}
function renderTransaction(transaction, i){
var txParams = transaction.txParams
var date = formatDate(transaction.time)
return (
h(`.transaction-list-item.flex-row.flex-space-between${transaction.hash ? '.pointer' : ''}`, {
key: `tx-${transaction.id + i}`,
onClick: (event) => {
if (!transaction.hash) return
var url = explorerLink(transaction.hash, parseInt(network))
chrome.tabs.create({ url })
},
style: {
padding: '20px 0',
},
}, [
// large identicon
h('.identicon-wrapper.flex-column.flex-center.select-none', [
identicon(txParams, transaction),
]),
h('.flex-column', [
h('div', date),
recipientField(txParams, transaction),
]),
h(EtherBalance, {
value: txParams.value,
}),
])
)
function renderTransaction(transaction, i){
var txParams = transaction.txParams
var date = formatDate(transaction.time)
return (
h(`.transaction-list-item.flex-row.flex-space-between${transaction.hash ? '.pointer' : ''}`, {
key: `tx-${transaction.id + i}`,
onClick: (event) => {
if (!transaction.hash) return
var url = explorerLink(transaction.hash, parseInt(network))
chrome.tabs.create({ url })
},
style: {
padding: '20px 0',
},
}, [
// large identicon
h('.identicon-wrapper.flex-column.flex-center.select-none', [
identicon(txParams, transaction),
]),
h('.flex-column', [
h('div', date),
recipientField(txParams, transaction),
]),
h(EtherBalance, {
value: txParams.value,
}),
])
)
}
}
function recipientField(txParams, transaction) {
@ -121,7 +130,6 @@ function recipientField(txParams, transaction) {
'Contract Published',
failIfFailed(transaction),
])
}
}