diff options
author | Dan Finlay <somniac@me.com> | 2016-05-27 06:19:07 +0800 |
---|---|---|
committer | Dan Finlay <somniac@me.com> | 2016-05-27 06:19:07 +0800 |
commit | f1fb7ff42c5a86411108fe908d5d85921dcdaec4 (patch) | |
tree | 3ef4c7eefadc296203ba34f653d3a19aced1a255 /ui/app/components/transaction-list-item.js | |
parent | 7f4929a2d28b382c64761bd456a19e5e43ac4f64 (diff) | |
parent | 01e5bc25a9e03ab2d9c72dad29b5d7fa03933009 (diff) | |
download | tangerine-wallet-browser-f1fb7ff42c5a86411108fe908d5d85921dcdaec4.tar.gz tangerine-wallet-browser-f1fb7ff42c5a86411108fe908d5d85921dcdaec4.tar.zst tangerine-wallet-browser-f1fb7ff42c5a86411108fe908d5d85921dcdaec4.zip |
Merge pull request #224 from MetaMask/PendingTxList
Add pending txs to tx list
Diffstat (limited to 'ui/app/components/transaction-list-item.js')
-rw-r--r-- | ui/app/components/transaction-list-item.js | 117 |
1 files changed, 60 insertions, 57 deletions
diff --git a/ui/app/components/transaction-list-item.js b/ui/app/components/transaction-list-item.js index a0715db0b..fc1c3c630 100644 --- a/ui/app/components/transaction-list-item.js +++ b/ui/app/components/transaction-list-item.js @@ -2,13 +2,14 @@ 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')) +const TransactionIcon = require('./transaction-list-item-icon') + module.exports = TransactionListItem @@ -18,20 +19,36 @@ function TransactionListItem() { } TransactionListItem.prototype.render = function() { - const { transaction, i } = this.props + const { transaction, i, network } = this.props var date = formatDate(transaction.time) + let isLinkable = false + const numericNet = parseInt(network) + isLinkable = numericNet === 1 || numericNet === 2 + var isMsg = ('msgParams' in transaction) var isTx = ('txParams' in transaction) + var isPending = transaction.status === 'unconfirmed' + + let txParams + if (isTx) { + txParams = transaction.txParams + } else if (isMsg) { + txParams = transaction.msgParams + } - var txParams = transaction.txParams + const isClickable = ('hash' in transaction && isLinkable) || isPending return ( - h(`.transaction-list-item.flex-row.flex-space-between${transaction.hash ? '.pointer' : ''}`, { + h(`.transaction-list-item.flex-row.flex-space-between${isClickable ? '.pointer' : ''}`, { key: `tx-${transaction.id + i}`, onClick: (event) => { - if (!transaction.hash) return + if (isPending) { + this.props.showTx(transaction.id) + } + + if (!transaction.hash || !isLinkable) return var url = explorerLink(transaction.hash, parseInt(network)) chrome.tabs.create({ url }) }, @@ -42,53 +59,59 @@ TransactionListItem.prototype.render = function() { // large identicon h('.identicon-wrapper.flex-column.flex-center.select-none', [ - identicon(txParams, transaction), + transaction.status === 'unconfirmed' ? h('.red-dot', ' ') : + h(TransactionIcon, { txParams, transaction, isTx, isMsg }), ]), h('.flex-column', [ - + domainField(txParams), h('div', date), - - recipientField(txParams, transaction), - + recipientField(txParams, transaction, isTx, isMsg), ]), - h(EtherBalance, { + isTx ? h(EtherBalance, { value: txParams.value, - }), + }) : h('.flex-column'), ]) ) } +function domainField(txParams) { + return h('div', { + style: { + fontSize: 'small', + color: '#ABA9AA', + }, + },[ + txParams.origin, + ]) +} -function recipientField(txParams, transaction) { - if (txParams.to) { - return h('div', { - style: { - fontSize: 'small', - color: '#ABA9AA', - }, - }, [ - addressSummary(txParams.to), - failIfFailed(transaction), - ]) +function recipientField(txParams, transaction, isTx, isMsg) { + let message + if (isMsg) { + message = 'Signature Requested' + } else if (txParams.to) { + message = addressSummary(txParams.to) } else { - - return h('div', { - style: { - fontSize: 'small', - color: '#ABA9AA', - }, - },[ - 'Contract Published', - failIfFailed(transaction), - ]) + message = 'Contract Published' } + + return h('div', { + style: { + fontSize: 'small', + color: '#ABA9AA', + }, + },[ + message, + failIfFailed(transaction), + ]) + } TransactionListItem.prototype.renderMessage = function() { - const { transaction, i } = this.props + const { transaction, i, network } = this.props return h('div', 'wowie, thats a message') } @@ -96,31 +119,11 @@ 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', ' (Rejected)') + } + if (transaction.status === 'failed') { return h('span.error', ' (Failed)') } } |