TheDude
/
ciphermask
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor BalanceComponent to jsx (#6048)

Browse Source
feature/default_network_editable
Alexander Tseung 6 years ago committed by Whymarrh Whitby
parent 0ad7797076
commit fe780fb3d4
6 changed files with 121 additions and 250 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 138
      ui/app/components/account-export.js
  2. 111
      ui/app/components/balance-component.js
  3. 92
      ui/app/components/balance/balance.component.js
  4. 27
      ui/app/components/balance/balance.container.js
  5. 1
      ui/app/components/balance/index.js
  6. 2
      ui/app/components/wallet-view.js

138
ui/app/components/account-export.js
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape View File

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

2
ui/app/components/wallet-view.js
Unescape 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')

Write Preview
Loading…
Cancel
Save