aboutsummaryrefslogtreecommitdiffstats
path: root/ui
diff options
context:
space:
mode:
authorkumavis <aaron@kumavis.me>2016-05-19 08:48:50 +0800
committerkumavis <aaron@kumavis.me>2016-05-19 08:48:50 +0800
commit8c6a451ac76572a6566dff594b586db718b68784 (patch)
tree2eae1610150dd5530f1424579d7ce1851606116b /ui
parentc85c594d5bc6c894f6a76b66c3df33c39cc76a3a (diff)
downloadtangerine-wallet-browser-8c6a451ac76572a6566dff594b586db718b68784.tar
tangerine-wallet-browser-8c6a451ac76572a6566dff594b586db718b68784.tar.gz
tangerine-wallet-browser-8c6a451ac76572a6566dff594b586db718b68784.tar.bz2
tangerine-wallet-browser-8c6a451ac76572a6566dff594b586db718b68784.tar.lz
tangerine-wallet-browser-8c6a451ac76572a6566dff594b586db718b68784.tar.xz
tangerine-wallet-browser-8c6a451ac76572a6566dff594b586db718b68784.tar.zst
tangerine-wallet-browser-8c6a451ac76572a6566dff594b586db718b68784.zip
ui - redesign - txList improved
Diffstat (limited to 'ui')
-rw-r--r--ui/app/components/transaction-list.js108
1 files changed, 83 insertions, 25 deletions
diff --git a/ui/app/components/transaction-list.js b/ui/app/components/transaction-list.js
index 2a1442b8c..40a4593fe 100644
--- a/ui/app/components/transaction-list.js
+++ b/ui/app/components/transaction-list.js
@@ -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),
- },
- {
- key: 'TO',
- value: addressSummary(transaction.txParams.to),
- },
- {
- key: 'VALUE',
- value: formatBalance(transaction.txParams.value),
+
+ 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,
+ }),
+
+ ])
+
+ )
}
- return h(Panel, panelOpts)
-}
+ }
function formatDate(date){
return vreme.format(new Date(date), 'March 16 2014 14:30')