const h = require('react-hyperscript') 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') module.exports = function(transactions, network) { return ( h('section.transaction-list', [ h('style', ` .transaction-list .transaction-list-item:not(:last-of-type) { border-bottom: 1px solid #D4D4D4; } .transaction-list .transaction-list-item .ether-balance-label { display: block !important; font-size: small; } `), h('h3.flex-center.text-transform-uppercase', { style: { background: '#EBEBEB', color: '#AEAEAE', }, }, [ 'Transactions', ]), h('.tx-list', { style: { overflowY: 'auto', height: '204px', padding: '0 20px', textAlign: 'center', }, }, ( transactions.length ? transactions.map(renderTransaction) : [h('.flex-center', { style: { height: '100%', }, }, 'No transaction history...')] )) ]) ) function renderTransaction(transaction){ var panelOpts = { key: `tx-${transaction.hash}`, identiconKey: transaction.txParams.to, onClick: (event) => { var url = explorerLink(transaction.hash, parseInt(network)) chrome.tabs.create({ url }) }, attributes: [ { key: 'TIME', value: formatDate(transaction.time), }, { key: 'TO', value: addressSummary(transaction.txParams.to), }, { key: 'VALUE', value: formatBalance(transaction.txParams.value), }, ] } var txParams = transaction.txParams var date = formatDate(transaction.time) return ( h('.transaction-list-item.flex-row.flex-space-between.cursor-pointer', { key: `tx-${transaction.hash}`, onClick: (event) => { 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', [ h(Identicon, { diameter: 24, address: txParams.to, }), ]), h('.flex-column', [ h('div', date), h('div', { style: { fontSize: 'small', color: '#ABA9AA', }, }, addressSummary(txParams.to)), ]), h(EtherBalance, { value: txParams.value, }), ]) ) } } function formatDate(date){ return vreme.format(new Date(date), 'March 16 2014 14:30') }