m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-10-22 11:22:43 +02:00
Code

ui - redesign - txList improved

Browse Source
This commit is contained in:
kumavis 2016-05-18 17:48:50 -07:00
parent c85c594d5b
commit 8c6a451ac7
1 changed files with 82 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
ui/app/components/transaction-list.js
View File

@ -4,12 +4,25 @@ 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',
@ -42,35 +55,80 @@ module.exports = function(transactions, network) {
])
)
}
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),
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 })
},
{
key: 'TO',
value: addressSummary(transaction.txParams.to),
},
{
key: 'VALUE',
value: formatBalance(transaction.txParams.value),
},
]
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,
}),
])
)
}
return h(Panel, panelOpts)
}
}
function formatDate(date){
return vreme.format(new Date(date), 'March 16 2014 14:30')