aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app/components/transaction-list.js
blob: e10dfecf30b58334af7652858ff883d58ccd9120 (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
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('section.transaction-list', [

      h('h3.flex-center.text-transform-uppercase', {
        style: {
          background: '#EBEBEB',
        },
      }, [
        'Transactions',
      ]),

      h('.tx-list', {
        style: {
          overflowY: 'auto',
          height: '204px',
          margin: '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: 'TO',
        value: addressSummary(transaction.txParams.to),
      },
      {
        key: 'VALUE',
        value: formatBalance(transaction.txParams.value),
      },
    ]
  }

  return h(Panel, panelOpts)
}