diff options
author | Dan Finlay <dan@danfinlay.com> | 2016-05-26 08:57:08 +0800 |
---|---|---|
committer | Dan Finlay <dan@danfinlay.com> | 2016-05-26 08:57:08 +0800 |
commit | 21af266fde3a9147f43ee1186daae275dc2a5eed (patch) | |
tree | 79dd2d111f5d6d8c25b839fa3b3b3710dd7a78c7 /ui/app/components/transaction-list.js | |
parent | 45ae2a0be374d862b6910c8344ec9f888fef9c46 (diff) | |
download | tangerine-wallet-browser-21af266fde3a9147f43ee1186daae275dc2a5eed.tar.gz tangerine-wallet-browser-21af266fde3a9147f43ee1186daae275dc2a5eed.tar.zst tangerine-wallet-browser-21af266fde3a9147f43ee1186daae275dc2a5eed.zip |
Move transaction list item into its own component
Diffstat (limited to 'ui/app/components/transaction-list.js')
-rw-r--r-- | ui/app/components/transaction-list.js | 114 |
1 files changed, 7 insertions, 107 deletions
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)') - } -} |