diff options
| -rw-r--r-- | CHANGELOG.md | 1 | ||||
| -rw-r--r-- | ui/app/accounts.js | 2 | ||||
| -rw-r--r-- | ui/app/components/transaction-list.js | 74 |
3 files changed, 50 insertions, 27 deletions
diff --git a/CHANGELOG.md b/CHANGELOG.md index 2df3947d3..b0df0be73 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,7 @@ - Restored back button to account detail view. - Show transaction list always, never collapsed. - Changing provider now reloads current Dapps +- Improved appearance of transaction list in account detail view. ## 1.7.0 2016-04-29 diff --git a/ui/app/accounts.js b/ui/app/accounts.js index 0cc72878c..16f37dc67 100644 --- a/ui/app/accounts.js +++ b/ui/app/accounts.js @@ -50,7 +50,7 @@ AccountsScreen.prototype.render = function() { * regardless of the current domain. */ h('.current-domain-panel.flex-center.font-small', [ - h('spam', 'Selected address is visible to all sites you visit.'), + h('span', 'Selected address is visible to all sites you visit.'), // h('span', state.currentDomain), ]), diff --git a/ui/app/components/transaction-list.js b/ui/app/components/transaction-list.js index c5a86f082..3e153aecf 100644 --- a/ui/app/components/transaction-list.js +++ b/ui/app/components/transaction-list.js @@ -2,32 +2,54 @@ const h = require('react-hyperscript') const formatBalance = require('../util').formatBalance const addressSummary = require('../util').addressSummary const explorerLink = require('../../lib/explorer-link') +const Panel = require('./panel') module.exports = function(transactions, network) { - return h('.tx-list', { - style: { - overflowY: 'auto', - height: '180px', - textAlign: 'center', + return h('section', [ + + h('.current-domain-panel.flex-center.font-small', [ + h('span', 'Transactions'), + ]), + + h('.tx-list', { + style: { + overflowY: 'auto', + height: '180px', + textAlign: 'center', + }, }, - }, - - [ - h('div.font-small', {style: {display: 'inline'}}, 'Transactions'), - - transactions.map((transaction) => { - return h('.tx.flex-row.flex-space-around', { - key: `listed-tx-${transaction.hash}`, - }, [ - h('a.font-small', - { - href: explorerLink(transaction.hash, parseInt(network)), - target: '_blank', - }, - addressSummary(transaction.txParams.to)), - h('div.font-small', formatBalance(transaction.txParams.value)) - ]) - }) - ] - ) -} + + [ + + transactions.map((transaction) => { + console.dir(transaction) + + var panelOpts = { + key: `tx-${transaction.hash}`, + identiconKey: transaction.txParams.to, + style: { + cursor: 'pointer', + }, + onClick: (event) => { + var url = explorerLink(transaction.hash, parseInt(network)) + chrome.tabs.create({ url }); + }, + attributes: [ + { + key: 'TO', + value: addressSummary(transaction.txParams.to), + }, + { + key: 'VALUE', + value: formatBalance(transaction.txParams.value), + }, + ] + } + + return h(Panel, panelOpts) + }) + ] + ) + + ]) + } |