m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-26 12:29:06 +01:00
Code

Convert AccountPanel component to ES6 class (#7775)

Browse Source
This commit is contained in:
Whymarrh Whitby 2020-01-10 10:32:24 -03:30 committed by GitHub
parent 92971d3c87
commit 6947ff49e0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 38 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
ui/app/components/app/account-panel.js
View File

@ -1,55 +1,48 @@
import React, { Component } from 'react'
import { inherits } from 'util'
import Identicon from '../ui/identicon'
import { addressSummary, formatBalance } from '../../helpers/utils/util'
export default AccountPanel
export default class AccountPanel extends Component {
render () {
const state = this.props
const identity = state.identity || {}
const account = state.account || {}
const isFauceting = state.isFauceting
const panelState = {
key: `accountPanel${identity.address}`,
identiconKey: identity.address,
identiconLabel: identity.name || '',
attributes: [
{
key: 'ADDRESS',
value: addressSummary(identity.address),
},
balanceOrFaucetingIndication(account, isFauceting),
],
}
inherits(AccountPanel, Component)
function AccountPanel () {
Component.call(this)
}
AccountPanel.prototype.render = function () {
const state = this.props
const identity = state.identity || {}
const account = state.account || {}
const isFauceting = state.isFauceting
const panelState = {
key: `accountPanel${identity.address}`,
identiconKey: identity.address,
identiconLabel: identity.name || '',
attributes: [
{
key: 'ADDRESS',
value: addressSummary(identity.address),
},
balanceOrFaucetingIndication(account, isFauceting),
],
return (
<div
className="identity-panel flex-row flex-space-between"
style={{ flex: '1 0 auto', cursor: panelState.onClick ? 'pointer' : undefined }}
onClick={panelState.onClick}
>
<div className="identicon-wrapper flex-column select-none">
<Identicon address={panelState.identiconKey} imageify={state.imageifyIdenticons} />
<span className="font-small">{panelState.identiconLabel.substring(0, 7) + '...'}</span>
</div>
<div className="identity-data flex-column flex-justify-center flex-grow select-none">
{panelState.attributes.map((attr, index) => (
<div className="flex-row flex-space-between" key={index}>
<label className="font-small no-select">{attr.key}</label>
<span className="font-small">{attr.value}</span>
</div>
))}
</div>
</div>
)
}
return (
<div
className="identity-panel flex-row flex-space-between"
style={{ flex: '1 0 auto', cursor: panelState.onClick ? 'pointer' : undefined }}
onClick={panelState.onClick}
>
<div className="identicon-wrapper flex-column select-none">
<Identicon address={panelState.identiconKey} imageify={state.imageifyIdenticons} />
<span className="font-small">{panelState.identiconLabel.substring(0, 7) + '...'}</span>
</div>
<div className="identity-data flex-column flex-justify-center flex-grow select-none">
{panelState.attributes.map((attr, index) => (
<div className="flex-row flex-space-between" key={index}>
<label className="font-small no-select">{attr.key}</label>
<span className="font-small">{attr.value}</span>
</div>
))}
</div>
</div>
)
}
function balanceOrFaucetingIndication (account) {