diff --git a/ui/app/components/account-export.js b/ui/app/components/account-export.js deleted file mode 100644 index 865207487..000000000 --- a/ui/app/components/account-export.js +++ /dev/null @@ -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)) -} diff --git a/ui/app/components/balance-component.js b/ui/app/components/balance-component.js deleted file mode 100644 index 78b51449e..000000000 --- a/ui/app/components/balance-component.js +++ /dev/null @@ -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)) -} diff --git a/ui/app/components/balance/balance.component.js b/ui/app/components/balance/balance.component.js new file mode 100644 index 000000000..9d0018add --- /dev/null +++ b/ui/app/components/balance/balance.component.js @@ -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 ( +
+
+ { formattedBalance } +
+
+ ) + } + + return ( +
+ + { + showFiat && ( + + ) + } +
+ ) + } + + renderTokenBalance () { + const { token } = this.props + + return ( +
+
+ +
+
+ ) + } + + render () { + const { token, network, assetImages } = this.props + const address = token && token.address + const image = assetImages && address ? assetImages[token.address] : undefined + + return ( +
+ + { token ? this.renderTokenBalance() : this.renderBalance() } +
+ ) + } +} diff --git a/ui/app/components/balance/balance.container.js b/ui/app/components/balance/balance.container.js new file mode 100644 index 000000000..b8c3a04cc --- /dev/null +++ b/ui/app/components/balance/balance.container.js @@ -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) diff --git a/ui/app/components/balance/index.js b/ui/app/components/balance/index.js new file mode 100644 index 000000000..f8fb9ea19 --- /dev/null +++ b/ui/app/components/balance/index.js @@ -0,0 +1 @@ +export { default } from './balance.container' diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index 8ad6637ae..6732010a3 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -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')