mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
Refactor BalanceComponent to jsx (#6048)
This commit is contained in:
Alexander Tseung
Whymarrh Whitby
parent
0ad7797076
commit
fe780fb3d4
@ -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))
|
|
||||||
}
|
|
||||||
@ -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
92
ui/app/components/balance/balance.component.js
Normal 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
27
ui/app/components/balance/balance.container.js
Normal 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
1
ui/app/components/balance/index.js
Normal file
@ -0,0 +1 @@
|
|||||||
|
export { default } from './balance.container'
|
||||||
@ -12,7 +12,7 @@ import Identicon from './identicon'
|
|||||||
const Tooltip = require('./tooltip-v2.js').default
|
const Tooltip = require('./tooltip-v2.js').default
|
||||||
const copyToClipboard = require('copy-to-clipboard')
|
const copyToClipboard = require('copy-to-clipboard')
|
||||||
const actions = require('../actions')
|
const actions = require('../actions')
|
||||||
const BalanceComponent = require('./balance-component')
|
import BalanceComponent from './balance'
|
||||||
const TokenList = require('./token-list')
|
const TokenList = require('./token-list')
|
||||||
const selectors = require('../selectors')
|
const selectors = require('../selectors')
|
||||||
const { ADD_TOKEN_ROUTE } = require('../routes')
|
const { ADD_TOKEN_ROUTE } = require('../routes')
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user