diff --git a/ui/app/components/transaction-list-item-icon.js b/ui/app/components/transaction-list-item-icon.js new file mode 100644 index 000000000..fbee4b218 --- /dev/null +++ b/ui/app/components/transaction-list-item-icon.js @@ -0,0 +1,46 @@ +const Component = require('react').Component +const h = require('react-hyperscript') +const inherits = require('util').inherits + +const Identicon = require('./identicon') + +module.exports = TransactionIcon + + +inherits(TransactionIcon, Component) +function TransactionIcon() { + Component.call(this) +} + +TransactionIcon.prototype.render = function() { + const { transaction, txParams, isTx, isMsg } = this.props + + if (transaction.status === 'rejected') { + return h('i.fa.fa-exclamation-triangle.fa-lg.error', { + style: { + width: '24px', + } + }) + } + + if (isMsg) { + return h('i.fa.fa-certificate.fa-lg', { + 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', + } + }) + } +} diff --git a/ui/app/components/transaction-list-item.js b/ui/app/components/transaction-list-item.js index a0715db0b..cff9a47b2 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 @@ -25,7 +26,12 @@ TransactionListItem.prototype.render = function() { var isMsg = ('msgParams' in transaction) var isTx = ('txParams' in transaction) - var txParams = transaction.txParams + let txParams + if (isTx) { + txParams = transaction.txParams + } else if (isMsg) { + txParams = transaction.msgParams + } return ( h(`.transaction-list-item.flex-row.flex-space-between${transaction.hash ? '.pointer' : ''}`, { @@ -42,49 +48,55 @@ 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() { @@ -96,31 +108,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)') } } diff --git a/ui/app/components/transaction-list.js b/ui/app/components/transaction-list.js index 86abd9709..3c778b19d 100644 --- a/ui/app/components/transaction-list.js +++ b/ui/app/components/transaction-list.js @@ -14,7 +14,9 @@ function TransactionList() { TransactionList.prototype.render = function() { const { txsToRender, network, unconfTxs, unconfMsgs } = this.props - const transactions = txsToRender + const transactions = txsToRender.concat(unconfMsgs) + .sort((a, b) => b.time - a.time) + console.dir(transactions) return ( diff --git a/ui/app/css/lib.css b/ui/app/css/lib.css index 73be4023e..865d8060c 100644 --- a/ui/app/css/lib.css +++ b/ui/app/css/lib.css @@ -167,6 +167,20 @@ hr.horizontal-line { background: white; } +.red-dot { + position: inherit; + background: red; + color: white; + border-radius: 10px; + height: 12px; + min-width: 12px; + margin-left: 6px; + display: flex; + align-items: center; + justify-content: center; + padding: 4px; +} + .pending-dot { background: red; left: 57px; @@ -180,3 +194,8 @@ hr.horizontal-line { justify-content: center; padding: 4px; } + +.ether-balance { + display: flex; + align-items: center; +}