diff options
| -rw-r--r-- | ui/app/components/transaction-list-item.js | 126 | ||||
| -rw-r--r-- | ui/app/components/transaction-list.js | 114 |
2 files changed, 133 insertions, 107 deletions
diff --git a/ui/app/components/transaction-list-item.js b/ui/app/components/transaction-list-item.js new file mode 100644 index 000000000..a0715db0b --- /dev/null +++ b/ui/app/components/transaction-list-item.js @@ -0,0 +1,126 @@ +const Component = require('react').Component +const h = require('react-hyperscript') +const inherits = require('util').inherits + +const Identicon = require('./identicon') +const EtherBalance = require('./eth-balance') +const addressSummary = require('../util').addressSummary +const explorerLink = require('../../lib/explorer-link') +const formatBalance = require('../util').formatBalance +const vreme = new (require('vreme')) + +module.exports = TransactionListItem + + +inherits(TransactionListItem, Component) +function TransactionListItem() { + Component.call(this) +} + +TransactionListItem.prototype.render = function() { + const { transaction, i } = this.props + + var date = formatDate(transaction.time) + + var isMsg = ('msgParams' in transaction) + var isTx = ('txParams' in transaction) + + var txParams = transaction.txParams + + 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) { + if (txParams.to) { + return h('div', { + style: { + fontSize: 'small', + color: '#ABA9AA', + }, + }, [ + addressSummary(txParams.to), + failIfFailed(transaction), + ]) + + } else { + + return h('div', { + style: { + fontSize: 'small', + color: '#ABA9AA', + }, + },[ + 'Contract Published', + failIfFailed(transaction), + ]) + } +} + +TransactionListItem.prototype.renderMessage = function() { + const { transaction, i } = this.props + return h('div', 'wowie, thats a message') +} + +function formatDate(date){ + return vreme.format(new Date(date), 'March 16 2014 14:30') +} + +function identicon(txParams, transaction) { + if (transaction.status === 'rejected') { + return h('i.fa.fa-exclamation-triangle.fa-lg.error', { + style: { + width: '24px', + } + }) + } + + if (txParams.to) { + return h(Identicon, { + diameter: 24, + address: txParams.to || transaction.hash, + }) + } else { + return h('i.fa.fa-file-text-o.fa-lg', { + style: { + width: '24px', + } + }) + } +} + +function failIfFailed(transaction) { + if (transaction.status === 'rejected') { + return h('span.error', ' (Failed)') + } +} diff --git a/ui/app/components/transaction-list.js b/ui/app/components/transaction-list.js index 7779326ad..86abd9709 100644 --- a/ui/app/components/transaction-list.js +++ b/ui/app/components/transaction-list.js @@ -2,13 +2,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 -const explorerLink = require('../../lib/explorer-link') -const Panel = require('./panel') -const Identicon = require('./identicon') -const EtherBalance = require('./eth-balance') +const TransactionListItem = require('./transaction-list-item') module.exports = TransactionList @@ -20,7 +14,7 @@ function TransactionList() { TransactionList.prototype.render = function() { const { txsToRender, network, unconfTxs, unconfMsgs } = this.props - const transactions = txsToRender.concat(unconfTxs).concat(unconfMsgs) + const transactions = txsToRender return ( @@ -55,7 +49,11 @@ TransactionList.prototype.render = function() { }, ( transactions.length ? - transactions.map(renderTransaction) + transactions.map((transaction, i) => { + return h(TransactionListItem, { + transaction, i + }) + }) : [h('.flex-center', { style: { @@ -67,101 +65,3 @@ TransactionList.prototype.render = function() { ) } - -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) { - if (txParams.to) { - return h('div', { - style: { - fontSize: 'small', - color: '#ABA9AA', - }, - }, [ - addressSummary(txParams.to), - failIfFailed(transaction), - ]) - - } else { - - return h('div', { - style: { - fontSize: 'small', - color: '#ABA9AA', - }, - },[ - 'Contract Published', - failIfFailed(transaction), - ]) - } -} - -function formatDate(date){ - return vreme.format(new Date(date), 'March 16 2014 14:30') -} - -function identicon(txParams, transaction) { - if (transaction.status === 'rejected') { - return h('i.fa.fa-exclamation-triangle.fa-lg.error', { - style: { - width: '24px', - } - }) - } - - if (txParams.to) { - return h(Identicon, { - diameter: 24, - address: txParams.to || transaction.hash, - }) - } else { - return h('i.fa.fa-file-text-o.fa-lg', { - style: { - width: '24px', - } - }) - } -} - -function failIfFailed(transaction) { - if (transaction.status === 'rejected') { - return h('span.error', ' (Failed)') - } -} |