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

Show token balance and identicon

This commit is contained in:
Chi Kei Chan 2017-09-06 23:03:23 -07:00
parent f1fb9e10a0
commit 14b2f3e391
7 changed files with 90 additions and 57 deletions

View File

@ -3,6 +3,7 @@ const connect = require('react-redux').connect
const h = require('react-hyperscript') const h = require('react-hyperscript')
const inherits = require('util').inherits const inherits = require('util').inherits
const TokenBalance = require('./token-balance') const TokenBalance = require('./token-balance')
const Identicon = require('./identicon')
const { formatBalance, generateBalanceObject } = require('../util') const { formatBalance, generateBalanceObject } = require('../util')
@ -10,11 +11,13 @@ module.exports = connect(mapStateToProps)(BalanceComponent)
function mapStateToProps (state) { function mapStateToProps (state) {
const accounts = state.metamask.accounts const accounts = state.metamask.accounts
const network = state.metamask.network
const selectedAddress = state.metamask.selectedAddress || Object.keys(accounts)[0] const selectedAddress = state.metamask.selectedAddress || Object.keys(accounts)[0]
const account = accounts[selectedAddress] const account = accounts[selectedAddress]
return { return {
account, account,
network,
conversionRate: state.metamask.conversionRate, conversionRate: state.metamask.conversionRate,
currentCurrency: state.metamask.currentCurrency, currentCurrency: state.metamask.currentCurrency,
} }
@ -27,15 +30,19 @@ function BalanceComponent () {
BalanceComponent.prototype.render = function () { BalanceComponent.prototype.render = function () {
const props = this.props const props = this.props
// const { balanceValue } = props const { token, network } = props
const { token } = props
return h('div.balance-container', {}, [ return h('div.balance-container', {}, [
// TODO: balance icon needs to be passed in // TODO: balance icon needs to be passed in
h('img.balance-icon', { // h('img.balance-icon', {
src: '../images/eth_logo.svg', // src: '../images/eth_logo.svg',
style: {}, // style: {},
// }),
h(Identicon, {
diameter: 45,
address: token && token.address,
network,
}), }),
token ? this.renderTokenBalance() : this.renderBalance(), token ? this.renderTokenBalance() : this.renderBalance(),

View File

@ -18,23 +18,35 @@ function IdenticonComponent () {
IdenticonComponent.prototype.render = function () { IdenticonComponent.prototype.render = function () {
var props = this.props var props = this.props
const { className = '' } = props const { className = '', address } = props
var diameter = props.diameter || this.defaultDiameter var diameter = props.diameter || this.defaultDiameter
return (
h('div', { return address
className: `${className} identicon`, ? (
key: 'identicon-' + this.props.address, h('div', {
style: { className: `${className} identicon`,
display: 'flex', key: 'identicon-' + address,
alignItems: 'center', style: {
justifyContent: 'center', display: 'flex',
height: diameter, alignItems: 'center',
width: diameter, justifyContent: 'center',
borderRadius: diameter / 2, height: diameter,
overflow: 'hidden', 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 () { IdenticonComponent.prototype.componentDidMount = function () {

View File

@ -90,9 +90,9 @@ TokenBalance.prototype.componentDidUpdate = function (nextProps) {
} }
TokenBalance.prototype.updateBalance = function (tokens = []) { TokenBalance.prototype.updateBalance = function (tokens = []) {
const [{ string }] = tokens const [{ string, symbol }] = tokens
this.setState({ this.setState({
balance: string, balance: `${string} ${symbol}`,
isLoading: false, isLoading: false,
}) })
} }

View File

@ -58,9 +58,9 @@ TokenCell.prototype.render = function () {
h('h.token-list-item__balance-wrapper', null, [ h('h.token-list-item__balance-wrapper', null, [
h('h3.token-list-item__token-balance', `${string || 0} ${symbol}`), h('h3.token-list-item__token-balance', `${string || 0} ${symbol}`),
h('div.token-list-item__fiat-amount', { // h('div.token-list-item__fiat-amount', {
style: {}, // style: {},
}, '210 FPO'), // }, '210 FPO'),
]), ]),
/* /*

View File

@ -27,7 +27,6 @@ const contentDivider = h('div.tx-list-content-divider', {
TxList.prototype.render = function () { TxList.prototype.render = function () {
const { txsToRender } = this.props const { txsToRender } = this.props
console.log('transactions to render', txsToRender) console.log('transactions to render', txsToRender)
return h('div.flex-column.tx-list-container', {}, [ return h('div.flex-column.tx-list-container', {}, [

View File

@ -9,7 +9,6 @@ const selectors = require('../selectors')
const BalanceComponent = require('./balance-component') const BalanceComponent = require('./balance-component')
const TxList = require('./tx-list') const TxList = require('./tx-list')
const Identicon = require('./identicon') const Identicon = require('./identicon')
const TokenBalance = require('./token-balance')
module.exports = connect(mapStateToProps, mapDispatchToProps)(TxView) module.exports = connect(mapStateToProps, mapDispatchToProps)(TxView)
@ -18,11 +17,11 @@ function mapStateToProps (state) {
const identities = state.metamask.identities const identities = state.metamask.identities
const accounts = state.metamask.accounts const accounts = state.metamask.accounts
const network = state.metamask.network
const selectedTokenAddress = state.metamask.selectedTokenAddress const selectedTokenAddress = state.metamask.selectedTokenAddress
const selectedAddress = state.metamask.selectedAddress || Object.keys(accounts)[0] const selectedAddress = state.metamask.selectedAddress || Object.keys(accounts)[0]
const checksumAddress = selectedAddress && ethUtil.toChecksumAddress(selectedAddress) const checksumAddress = selectedAddress && ethUtil.toChecksumAddress(selectedAddress)
const identity = identities[selectedAddress] const identity = identities[selectedAddress]
const account = accounts[selectedAddress]
return { return {
sidebarOpen, sidebarOpen,
@ -31,7 +30,7 @@ function mapStateToProps (state) {
selectedTokenAddress, selectedTokenAddress,
selectedToken: selectors.getSelectedToken(state), selectedToken: selectors.getSelectedToken(state),
identity, identity,
account, network,
} }
} }
@ -50,40 +49,55 @@ function TxView () {
} }
TxView.prototype.renderHeroBalance = function () { TxView.prototype.renderHeroBalance = function () {
const {account, selectedToken, showModal, showSendPage } = this.props const { selectedToken } = this.props
return h('div.hero-balance', {}, [ return h('div.hero-balance', {}, [
h(BalanceComponent, { h(BalanceComponent, { token: selectedToken }),
balanceValue: account && account.balance,
token: selectedToken,
}),
h('div.flex-row.flex-center.hero-balance-buttons', {}, [ this.renderButtons(),
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'),
]),
]) ])
} }
TxView.prototype.render = function () { TxView.prototype.renderButtons = function () {
const {selectedToken, showModal, showSendPage } = this.props
const { selectedAddress, identity } = 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'),
])
)
}
TxView.prototype.render = function () {
const { selectedAddress, identity, network } = this.props
return h('div.tx-view.flex-column', { return h('div.tx-view.flex-column', {
style: {}, style: {},
@ -113,6 +127,7 @@ TxView.prototype.render = function () {
h(Identicon, { h(Identicon, {
diameter: 24, diameter: 24,
address: selectedAddress, address: selectedAddress,
network,
}), }),
]), ]),

View File

@ -49,7 +49,7 @@ WalletView.prototype.renderWalletBalance = function () {
return h('div', { className }, [ return h('div', { className }, [
h('div.wallet-balance', h('div.wallet-balance',
{ {
onClick: () => unsetSelectedToken(), onClick: unsetSelectedToken,
}, },
[ [
h(BalanceComponent, { h(BalanceComponent, {