diff options
| -rw-r--r-- | ui/app/components/balance-component.js | 17 | ||||
| -rw-r--r-- | ui/app/components/identicon.js | 44 | ||||
| -rw-r--r-- | ui/app/components/token-balance.js | 4 | ||||
| -rw-r--r-- | ui/app/components/token-cell.js | 6 | ||||
| -rw-r--r-- | ui/app/components/tx-list.js | 1 | ||||
| -rw-r--r-- | ui/app/components/tx-view.js | 73 | ||||
| -rw-r--r-- | ui/app/components/wallet-view.js | 2 |
7 files changed, 90 insertions, 57 deletions
diff --git a/ui/app/components/balance-component.js b/ui/app/components/balance-component.js index 6b997944f..6d73d5b4a 100644 --- a/ui/app/components/balance-component.js +++ b/ui/app/components/balance-component.js @@ -3,6 +3,7 @@ const connect = require('react-redux').connect const h = require('react-hyperscript') const inherits = require('util').inherits const TokenBalance = require('./token-balance') +const Identicon = require('./identicon') const { formatBalance, generateBalanceObject } = require('../util') @@ -10,11 +11,13 @@ module.exports = connect(mapStateToProps)(BalanceComponent) function mapStateToProps (state) { const accounts = state.metamask.accounts + const network = state.metamask.network const selectedAddress = state.metamask.selectedAddress || Object.keys(accounts)[0] const account = accounts[selectedAddress] return { account, + network, conversionRate: state.metamask.conversionRate, currentCurrency: state.metamask.currentCurrency, } @@ -27,15 +30,19 @@ function BalanceComponent () { BalanceComponent.prototype.render = function () { const props = this.props - // const { balanceValue } = props - const { token } = props + const { token, network } = props return h('div.balance-container', {}, [ // TODO: balance icon needs to be passed in - h('img.balance-icon', { - src: '../images/eth_logo.svg', - style: {}, + // h('img.balance-icon', { + // src: '../images/eth_logo.svg', + // style: {}, + // }), + h(Identicon, { + diameter: 45, + address: token && token.address, + network, }), token ? this.renderTokenBalance() : this.renderBalance(), diff --git a/ui/app/components/identicon.js b/ui/app/components/identicon.js index 71831fe71..259fa4d73 100644 --- a/ui/app/components/identicon.js +++ b/ui/app/components/identicon.js @@ -18,23 +18,35 @@ function IdenticonComponent () { IdenticonComponent.prototype.render = function () { var props = this.props - const { className = '' } = props + const { className = '', address } = props var diameter = props.diameter || this.defaultDiameter - return ( - h('div', { - className: `${className} identicon`, - key: 'identicon-' + this.props.address, - style: { - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - height: diameter, - width: diameter, - borderRadius: diameter / 2, - overflow: 'hidden', - }, - }) - ) + + return address + ? ( + h('div', { + className: `${className} identicon`, + key: 'identicon-' + address, + style: { + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + height: diameter, + width: diameter, + borderRadius: diameter / 2, + overflow: 'hidden', + }, + }) + ) + : ( + h('img.balance-icon', { + src: '../images/eth_logo.svg', + style: { + height: diameter, + width: diameter, + borderRadius: diameter / 2, + }, + }) + ) } IdenticonComponent.prototype.componentDidMount = function () { diff --git a/ui/app/components/token-balance.js b/ui/app/components/token-balance.js index 0757cc65c..d7fe168eb 100644 --- a/ui/app/components/token-balance.js +++ b/ui/app/components/token-balance.js @@ -90,9 +90,9 @@ TokenBalance.prototype.componentDidUpdate = function (nextProps) { } TokenBalance.prototype.updateBalance = function (tokens = []) { - const [{ string }] = tokens + const [{ string, symbol }] = tokens this.setState({ - balance: string, + balance: `${string} ${symbol}`, isLoading: false, }) } diff --git a/ui/app/components/token-cell.js b/ui/app/components/token-cell.js index 7fae67de6..e3ed734f4 100644 --- a/ui/app/components/token-cell.js +++ b/ui/app/components/token-cell.js @@ -58,9 +58,9 @@ TokenCell.prototype.render = function () { h('h.token-list-item__balance-wrapper', null, [ h('h3.token-list-item__token-balance', `${string || 0} ${symbol}`), - h('div.token-list-item__fiat-amount', { - style: {}, - }, '210 FPO'), + // h('div.token-list-item__fiat-amount', { + // style: {}, + // }, '210 FPO'), ]), /* diff --git a/ui/app/components/tx-list.js b/ui/app/components/tx-list.js index 0eb15aa70..524808e2e 100644 --- a/ui/app/components/tx-list.js +++ b/ui/app/components/tx-list.js @@ -27,7 +27,6 @@ const contentDivider = h('div.tx-list-content-divider', { TxList.prototype.render = function () { const { txsToRender } = this.props - console.log('transactions to render', txsToRender) return h('div.flex-column.tx-list-container', {}, [ diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js index d7e4a5b4b..c9be0d67d 100644 --- a/ui/app/components/tx-view.js +++ b/ui/app/components/tx-view.js @@ -9,7 +9,6 @@ const selectors = require('../selectors') const BalanceComponent = require('./balance-component') const TxList = require('./tx-list') const Identicon = require('./identicon') -const TokenBalance = require('./token-balance') module.exports = connect(mapStateToProps, mapDispatchToProps)(TxView) @@ -18,11 +17,11 @@ function mapStateToProps (state) { const identities = state.metamask.identities const accounts = state.metamask.accounts + const network = state.metamask.network const selectedTokenAddress = state.metamask.selectedTokenAddress const selectedAddress = state.metamask.selectedAddress || Object.keys(accounts)[0] const checksumAddress = selectedAddress && ethUtil.toChecksumAddress(selectedAddress) const identity = identities[selectedAddress] - const account = accounts[selectedAddress] return { sidebarOpen, @@ -31,7 +30,7 @@ function mapStateToProps (state) { selectedTokenAddress, selectedToken: selectors.getSelectedToken(state), identity, - account, + network, } } @@ -50,40 +49,55 @@ function TxView () { } TxView.prototype.renderHeroBalance = function () { - const {account, selectedToken, showModal, showSendPage } = this.props + const { selectedToken } = this.props return h('div.hero-balance', {}, [ - h(BalanceComponent, { - balanceValue: account && account.balance, - token: selectedToken, - }), + h(BalanceComponent, { token: selectedToken }), - h('div.flex-row.flex-center.hero-balance-buttons', {}, [ - h('button.btn-clear', { - style: { - textAlign: 'center', - }, - onClick: () => showModal({ - name: 'BUY', - }), - }, 'BUY'), - - h('button.btn-clear', { - style: { - textAlign: 'center', - marginLeft: '0.8em', - }, - onClick: showSendPage, - }, 'SEND'), - - ]), + this.renderButtons(), ]) } -TxView.prototype.render = function () { +TxView.prototype.renderButtons = function () { + const {selectedToken, showModal, showSendPage } = this.props + + return !selectedToken + ? ( + h('div.flex-row.flex-center.hero-balance-buttons', [ + h('button.btn-clear', { + style: { + textAlign: 'center', + }, + onClick: () => showModal({ + name: 'BUY', + }), + }, 'BUY'), + + h('button.btn-clear', { + style: { + textAlign: 'center', + marginLeft: '0.8em', + }, + onClick: showSendPage, + }, 'SEND'), + ]) + ) + : ( + h('div.flex-row.flex-center.hero-balance-buttons', [ + h('button.btn-clear', { + style: { + textAlign: 'center', + marginLeft: '0.8em', + }, + onClick: showSendPage, + }, 'SEND'), + ]) + ) +} - const { selectedAddress, identity } = this.props +TxView.prototype.render = function () { + const { selectedAddress, identity, network } = this.props return h('div.tx-view.flex-column', { style: {}, @@ -113,6 +127,7 @@ TxView.prototype.render = function () { h(Identicon, { diameter: 24, address: selectedAddress, + network, }), ]), diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index f9710ea4c..08c28f1dc 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -49,7 +49,7 @@ WalletView.prototype.renderWalletBalance = function () { return h('div', { className }, [ h('div.wallet-balance', { - onClick: () => unsetSelectedToken(), + onClick: unsetSelectedToken, }, [ h(BalanceComponent, { |