aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app/components/tx-list-item.js
blob: 9c681644eb27a554e984ac84c284c4700041a57d (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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
const Component = require('react').Component
const h = require('react-hyperscript')
const inherits = require('util').inherits
const classnames = require('classnames')
const prefixForNetwork = require('../../lib/etherscan-prefix-for-network')
const Identicon = require('./identicon')

module.exports = TxListItem

inherits(TxListItem, Component)
function TxListItem () {
  Component.call(this)
}

TxListItem.prototype.getAddressText = function (address) {
  return address
    ? `${address.slice(0, 10)}...${address.slice(-4)}`
    : 'Contract Published'
}

TxListItem.prototype.render = function () {
  const {
    transactionStatus,
    onClick,
    transActionId,
    dateString,
    address,
    transactionAmount,
    className,
  } = this.props

  return h(`div${className || ''}`, {
    key: transActionId,
    onClick: () => onClick && onClick(transActionId),
  }, [
    h(`div.flex-column.tx-list-item-wrapper`, {}, [

      h('div.tx-list-date-wrapper', {
        style: {},
      }, [
        h('span.tx-list-date', {}, [
          dateString,
        ]),
      ]),

      h('div.flex-row.tx-list-content-wrapper', {
        style: {},
      }, [

        h('div.tx-list-identicon-wrapper', {
          style: {},
        }, [
          h(Identicon, {
            address,
            diameter: 28,
          }),
        ]),

        h('div.tx-list-account-and-status-wrapper', {}, [
          h('div.tx-list-account-wrapper', {
            style: {},
          }, [
            h('span.tx-list-account', {}, [
              this.getAddressText(address),
            ]),
          ]),

          h('div.tx-list-status-wrapper', {
            style: {},
          }, [
            h('span', {
              className: classnames('tx-list-status', {
                'tx-list-status--rejected': transactionStatus === 'rejected'
              })
            }, 
              transactionStatus,
            ),
          ]),
        ]),

        h('div.flex-column.tx-list-details-wrapper', {
          style: {},
        }, [

          h('span', {
            className: classnames('tx-list-value', {
              'tx-list-value--confirmed': transactionStatus === 'confirmed'
            })
          },
            transactionAmount
          ),

          h('span.tx-list-fiat-value', {}, [
            '+ $300 USD',
          ]),

        ]),
      ]),
    ]) // holding on icon from design
  ])
}