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
|
const inherits = require('util').inherits
const ethUtil = require('ethereumjs-util')
const Component = require('react').Component
const h = require('react-hyperscript')
const addressSummary = require('../util').addressSummary
const formatBalance = require('../util').formatBalance
const Identicon = require('identicon.js')
module.exports = AccountPanel
inherits(AccountPanel, Component)
function AccountPanel() {
Component.call(this)
}
AccountPanel.prototype.render = function() {
var state = this.props
var identity = state.identity || {}
var account = state.account || {}
var isFauceting = state.isFauceting
var identicon = new Identicon(identity.address, 46).toString()
var identiconSrc = `data:image/png;base64,${identicon}`
return (
h('.identity-panel.flex-row.flex-space-between'+(state.isSelected?'.selected':''), {
style: {
flex: '1 0 auto',
},
onClick: (event) => state.onShowDetail(identity.address, event),
}, [
// account identicon
h('.identicon-wrapper.flex-column.select-none', [
h('img.identicon', {
src: identiconSrc,
style: {
border: 'none',
borderRadius: '20px',
}
}),
h('span.font-small', identity.name),
]),
// account address, balance
h('.identity-data.flex-column.flex-justify-center.flex-grow.select-none', [
h('.flex-row.flex-space-between', [
h('label.font-small', 'ADDRESS'),
h('span.font-small', addressSummary(identity.address)),
]),
balanceOrFaucetingIndication(account, isFauceting),
// outlet for inserting additional stuff
state.children,
]),
// navigate to account detail
!state.onShowDetail ? null :
h('.arrow-right.cursor-pointer', [
h('i.fa.fa-chevron-right.fa-lg'),
]),
])
)
}
function balanceOrFaucetingIndication(account, isFauceting) {
// Temporarily deactivating isFauceting indication
// because it shows fauceting for empty restored accounts.
if (/*isFauceting*/ false) {
return h('.flex-row.flex-space-between', [
h('span.font-small', {
}, [
'Account is auto-funding,',
h('br'),
'please wait.'
]),
])
} else {
return h('.flex-row.flex-space-between', [
h('label.font-small', 'BALANCE'),
h('span.font-small', {
style: {
overflowX: 'hidden',
maxWidth: '136px',
}
}, formatBalance(account.balance)),
])
}
}
|
