From 45ae2a0be374d862b6910c8344ec9f888fef9c46 Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Wed, 25 May 2016 17:18:04 -0700 Subject: [PATCH] Make transaction list into actual React Component --- ui/app/account-detail.js | 31 +++++---- ui/app/components/transaction-list.js | 96 +++++++++++++++------------ 2 files changed, 71 insertions(+), 56 deletions(-) diff --git a/ui/app/account-detail.js b/ui/app/account-detail.js index bae44ec85..1dcce1d08 100644 --- a/ui/app/account-detail.js +++ b/ui/app/account-detail.js @@ -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){ diff --git a/ui/app/components/transaction-list.js b/ui/app/components/transaction-list.js index f85aab70f..7779326ad 100644 --- a/ui/app/components/transaction-list.js +++ b/ui/app/components/transaction-list.js @@ -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), ]) - } }