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

Refactor BalanceComponent to jsx (#6048)

Browse Source
This commit is contained in:
Alexander Tseung 2019-01-21 06:26:48 -08:00 committed by Whymarrh Whitby
parent 0ad7797076
commit fe780fb3d4
6 changed files with 121 additions and 250 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

138
ui/app/components/account-export.js
View File

@ -1,138 +0,0 @@
const Component = require('react').Component
const h = require('react-hyperscript')
const PropTypes = require('prop-types')
const inherits = require('util').inherits
const exportAsFile = require('../util').exportAsFile
const copyToClipboard = require('copy-to-clipboard')
const actions = require('../actions')
const ethUtil = require('ethereumjs-util')
const connect = require('react-redux').connect
ExportAccountView.contextTypes = {
t: PropTypes.func,
}
module.exports = connect(mapStateToProps)(ExportAccountView)
inherits(ExportAccountView, Component)
function ExportAccountView () {
Component.call(this)
}
function mapStateToProps (state) {
return {
warning: state.appState.warning,
}
}
ExportAccountView.prototype.render = function () {
const state = this.props
const accountDetail = state.accountDetail
const nickname = state.identities[state.address].name
if (!accountDetail) return h('div')
const accountExport = accountDetail.accountExport
const notExporting = accountExport === 'none'
const exportRequested = accountExport === 'requested'
const accountExported = accountExport === 'completed'
if (notExporting) return h('div')
if (exportRequested) {
const warning = this.context.t('exportPrivateKeyWarning')
return (
h('div', {
style: {
display: 'inline-block',
textAlign: 'center',
},
},
[
h('div', {
key: 'exporting',
style: {
margin: '0 20px',
},
}, [
h('p.error', warning),
h('input#exportAccount.sizing-input', {
type: 'password',
placeholder: this.context.t('confirmPassword').toLowerCase(),
onKeyPress: this.onExportKeyPress.bind(this),
style: {
position: 'relative',
top: '1.5px',
marginBottom: '7px',
},
}),
]),
h('div', {
key: 'buttons',
style: {
margin: '0 20px',
},
},
[
h('button', {
onClick: () => this.onExportKeyPress({ key: 'Enter', preventDefault: () => {} }),
style: {
marginRight: '10px',
},
}, this.context.t('submit')),
h('button', {
onClick: () => this.props.dispatch(actions.backToAccountDetail(this.props.address)),
}, this.context.t('cancel')),
]),
(this.props.warning) && (
h('span.error', {
style: {
margin: '20px',
},
}, this.props.warning.split('-'))
),
])
)
}
if (accountExported) {
const plainKey = ethUtil.stripHexPrefix(accountDetail.privateKey)
return h('div.privateKey', {
style: {
margin: '0 20px',
},
}, [
h('label', this.context.t('copyPrivateKey') + ':'),
h('p.error.cursor-pointer', {
style: {
textOverflow: 'ellipsis',
overflow: 'hidden',
webkitUserSelect: 'text',
maxWidth: '275px',
},
onClick: function (event) {
copyToClipboard(ethUtil.stripHexPrefix(accountDetail.privateKey))
},
}, plainKey),
h('button', {
onClick: () => this.props.dispatch(actions.backToAccountDetail(this.props.address)),
}, this.context.t('done')),
h('button', {
style: {
marginLeft: '10px',
},
onClick: () => exportAsFile(`MetaMask ${nickname} Private Key`, plainKey),
}, this.context.t('saveAsFile')),
])
}
}
ExportAccountView.prototype.onExportKeyPress = function (event) {
if (event.key !== 'Enter') return
event.preventDefault()
const input = document.getElementById('exportAccount').value
this.props.dispatch(actions.exportAccount(input, this.props.address))
}

111
ui/app/components/balance-component.js
View File

@ -1,111 +0,0 @@
const Component = require('react').Component
const connect = require('react-redux').connect
const h = require('react-hyperscript')
const inherits = require('util').inherits
import TokenBalance from './token-balance'
import Identicon from './identicon'
import UserPreferencedCurrencyDisplay from './user-preferenced-currency-display'
import { PRIMARY, SECONDARY } from '../constants/common'
const { getNativeCurrency, getAssetImages, conversionRateSelector, getCurrentCurrency, getMetaMaskAccounts } = require('../selectors')
const { formatBalance } = require('../util')
module.exports = connect(mapStateToProps)(BalanceComponent)
function mapStateToProps (state) {
const accounts = getMetaMaskAccounts(state)
const network = state.metamask.network
const selectedAddress = state.metamask.selectedAddress || Object.keys(accounts)[0]
const account = accounts[selectedAddress]
return {
account,
network,
nativeCurrency: getNativeCurrency(state),
conversionRate: conversionRateSelector(state),
currentCurrency: getCurrentCurrency(state),
assetImages: getAssetImages(state),
}
}
inherits(BalanceComponent, Component)
function BalanceComponent () {
Component.call(this)
}
BalanceComponent.prototype.render = function () {
const props = this.props
const { token, network, assetImages } = props
const address = token && token.address
const image = assetImages && address ? assetImages[token.address] : undefined
return h('div.balance-container', {}, [
// TODO: balance icon needs to be passed in
// h('img.balance-icon', {
// src: '../images/eth_logo.svg',
// style: {},
// }),
h(Identicon, {
diameter: 50,
address,
network,
image,
}),
token ? this.renderTokenBalance() : this.renderBalance(),
])
}
BalanceComponent.prototype.renderTokenBalance = function () {
const { token } = this.props
return h('div.flex-column.balance-display', [
h('div.token-amount', [ h(TokenBalance, { token }) ]),
])
}
BalanceComponent.prototype.renderBalance = function () {
const props = this.props
const { account, nativeCurrency } = props
const balanceValue = account && account.balance
const needsParse = 'needsParse' in props ? props.needsParse : true
const formattedBalance = balanceValue ? formatBalance(balanceValue, 6, needsParse, nativeCurrency) : '...'
const showFiat = 'showFiat' in props ? props.showFiat : true
if (formattedBalance === 'None' || formattedBalance === '...') {
return h('div.flex-column.balance-display', {}, [
h('div.token-amount', {
style: {},
}, formattedBalance),
])
}
return h('div.flex-column.balance-display', {}, [
h(UserPreferencedCurrencyDisplay, {
className: 'token-amount',
value: balanceValue,
type: PRIMARY,
ethNumberOfDecimals: 4,
}),
showFiat && h(UserPreferencedCurrencyDisplay, {
value: balanceValue,
type: SECONDARY,
ethNumberOfDecimals: 4,
}),
])
}
BalanceComponent.prototype.getFiatDisplayNumber = function (formattedBalance, conversionRate) {
if (formattedBalance === 'None') return formattedBalance
if (conversionRate === 0) return 'N/A'
const splitBalance = formattedBalance.split(' ')
const convertedNumber = (Number(splitBalance[0]) * conversionRate)
const wholePart = Math.floor(convertedNumber)
const decimalPart = convertedNumber - wholePart
return wholePart + Number(decimalPart.toPrecision(2))
}

92
ui/app/components/balance/balance.component.js Normal file
View File

@ -0,0 +1,92 @@
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import TokenBalance from '../token-balance'
import Identicon from '../identicon'
import UserPreferencedCurrencyDisplay from '../user-preferenced-currency-display'
import { PRIMARY, SECONDARY } from '../../constants/common'
import { formatBalance } from '../../util'
export default class Balance extends PureComponent {
static propTypes = {
account: PropTypes.object,
assetImages: PropTypes.object,
nativeCurrency: PropTypes.string,
needsParse: PropTypes.bool,
network: PropTypes.string,
showFiat: PropTypes.bool,
token: PropTypes.object,
}
static defaultProps = {
needsParse: true,
showFiat: true,
}
renderBalance () {
const { account, nativeCurrency, needsParse, showFiat } = this.props
const balanceValue = account && account.balance
const formattedBalance = balanceValue
? formatBalance(balanceValue, 6, needsParse, nativeCurrency)
: '...'
if (formattedBalance === 'None' || formattedBalance === '...') {
return (
<div className="flex-column balance-display">
<div className="token-amount">
{ formattedBalance }
</div>
</div>
)
}
return (
<div className="flex-column balance-display">
<UserPreferencedCurrencyDisplay
className="token-amount"
value={balanceValue}
type={PRIMARY}
ethNumberOfDecimals={4}
/>
{
showFiat && (
<UserPreferencedCurrencyDisplay
value={balanceValue}
type={SECONDARY}
ethNumberOfDecimals={4}
/>
)
}
</div>
)
}
renderTokenBalance () {
const { token } = this.props
return (
<div className="flex-column balance-display">
<div className="token-amount">
<TokenBalance token={token} />
</div>
</div>
)
}
render () {
const { token, network, assetImages } = this.props
const address = token && token.address
const image = assetImages && address ? assetImages[token.address] : undefined
return (
<div className="balance-container">
<Identicon
diameter={50}
address={address}
network={network}
image={image}
/>
{ token ? this.renderTokenBalance() : this.renderBalance() }
</div>
)
}
}

27
ui/app/components/balance/balance.container.js Normal file
View File

@ -0,0 +1,27 @@
import { connect } from 'react-redux'
import Balance from './balance.component'
import {
getNativeCurrency,
getAssetImages,
conversionRateSelector,
getCurrentCurrency,
getMetaMaskAccounts,
} from '../../selectors'
const mapStateToProps = state => {
const accounts = getMetaMaskAccounts(state)
const network = state.metamask.network
const selectedAddress = state.metamask.selectedAddress || Object.keys(accounts)[0]
const account = accounts[selectedAddress]
return {
account,
network,
nativeCurrency: getNativeCurrency(state),
conversionRate: conversionRateSelector(state),
currentCurrency: getCurrentCurrency(state),
assetImages: getAssetImages(state),
}
}
export default connect(mapStateToProps)(Balance)

1
ui/app/components/balance/index.js Normal file
View File

@ -0,0 +1 @@
export { default } from './balance.container'

2
ui/app/components/wallet-view.js
View File

@ -12,7 +12,7 @@ import Identicon from './identicon'
const Tooltip = require('./tooltip-v2.js').default
const copyToClipboard = require('copy-to-clipboard')
const actions = require('../actions')
const BalanceComponent = require('./balance-component')
import BalanceComponent from './balance'
const TokenList = require('./token-list')
const selectors = require('../selectors')
const { ADD_TOKEN_ROUTE } = require('../routes')