aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app/components/mini-account-panel.js
blob: e8d0debad72a539c525631d28602eae53dc7bf61 (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
102
103
104
105
const inherits = require('util').inherits
const Component = require('react').Component
const h = require('react-hyperscript')
const Identicon = require('./identicon')
const formatBalance = require('../util').formatBalance
const TransactionIcon = require('./transaction-list-item-icon')

module.exports = AccountPanel


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

AccountPanel.prototype.render = function () {
  var props = this.props
  var picOrder = props.picOrder || 'left'
  var isFauceting = props.isFauceting
  const { attrs, imageSeed } = props

  return (

    h('.identity-panel.flex-row.flex-left', {
      style: {
        cursor: props.onClick ? 'pointer' : undefined,
      },
      onClick: props.onClick,
    }, [

      this.genIcon(imageSeed, picOrder),

      h('div.flex-column.flex-justify-center', {
        style: {
          lineHeight: '15px',
          order: 2,
          display: 'flex',
          alignItems: picOrder === 'left' ? 'flex-begin' : 'flex-end',
        },
      }, [

        props.attrs.map((attr) => {
          return h('span.font-small', {
            key: `mini-${attr}`,
            style: {
              fontFamily: 'Montserrat Light, Montserrat, sans-serif',
            },
          }, attr)
        }),

      ]),

    ])
  )
}

AccountPanel.prototype.genIcon= function(seed, picOrder) {
  const props = this.props

  // When there is no seed value, this is a contract creation.
  // We then show the contract icon.
  if (!seed) {
    return h('.identicon-wrapper.flex-column.select-none', {
      style: {
        order: picOrder === 'left' ? 1 : 3,
     },
    }, [
      h('i.fa.fa-file-text-o.fa-lg', {
        style: {
          fontSize: '42px',
          transform: 'translate(0px, -16px)',
        },
      })
    ])
  }

  // If there was a seed, we return an identicon for that address.
  return h('.identicon-wrapper.flex-column.select-none', {
    style: {
      order: picOrder === 'left' ? 1 : 3,
    },
  }, [
    h(Identicon, {
      address: seed,
      imageify: props.imageifyIdenticons,
    }),
  ])
}

function balanceOrFaucetingIndication (account, isFauceting) {
  // Temporarily deactivating isFauceting indication
  // because it shows fauceting for empty restored accounts.
  if (/* isFauceting*/ false) {
    return {
      key: 'Account is auto-funding.',
      value: 'Please wait.',
    }
  } else {
    return {
      key: 'BALANCE',
      value: formatBalance(account.balance),
    }
  }
}