mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-10-22 19:26:13 +02:00
extracted balance component and renders to the format, also wired in the account name
This commit is contained in:
parent
d8fff0fc8c
commit
e8ade42f2a
89
ui/app/components/balance-component.js
Normal file
89
ui/app/components/balance-component.js
Normal file
@ -0,0 +1,89 @@
|
|||||||
|
const Component = require('react').Component
|
||||||
|
const h = require('react-hyperscript')
|
||||||
|
const inherits = require('util').inherits
|
||||||
|
|
||||||
|
const { formatBalance, generateBalanceObject } = require('../util')
|
||||||
|
|
||||||
|
module.exports = BalanceComponent
|
||||||
|
|
||||||
|
inherits(BalanceComponent, Component)
|
||||||
|
function BalanceComponent () {
|
||||||
|
Component.call(this)
|
||||||
|
}
|
||||||
|
|
||||||
|
BalanceComponent.prototype.render = function () {
|
||||||
|
const props = this.props
|
||||||
|
const { balanceValue } = props
|
||||||
|
const needsParse = 'needsParse' in props ? props.needsParse : true
|
||||||
|
const formattedBalance = balanceValue ? formatBalance(balanceValue, 6, needsParse) : '...'
|
||||||
|
|
||||||
|
return h('div.balance-container', {}, [
|
||||||
|
// laptop: 50px 50px
|
||||||
|
// mobile: 100px 100px
|
||||||
|
|
||||||
|
// TODO: balance icon needs to be passed in
|
||||||
|
h('img.balance-icon', {
|
||||||
|
src: '../images/eth_logo.svg',
|
||||||
|
style: {},
|
||||||
|
}),
|
||||||
|
|
||||||
|
this.renderBalance(formattedBalance),
|
||||||
|
])
|
||||||
|
}
|
||||||
|
|
||||||
|
BalanceComponent.prototype.renderBalance = function (formattedBalance) {
|
||||||
|
const props = this.props
|
||||||
|
const { shorten } = props
|
||||||
|
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),
|
||||||
|
])
|
||||||
|
}
|
||||||
|
|
||||||
|
var balanceObj = generateBalanceObject(formattedBalance, shorten ? 1 : 3)
|
||||||
|
var balanceValue = shorten ? balanceObj.shortBalance : balanceObj.balance
|
||||||
|
|
||||||
|
var label = balanceObj.label
|
||||||
|
|
||||||
|
// laptop: 5vw?
|
||||||
|
// phone: 50vw?
|
||||||
|
return h('div.flex-column.balance-display', {}, [
|
||||||
|
h('div.token-amount', {
|
||||||
|
style: {},
|
||||||
|
}, `${balanceValue} ${label}`),
|
||||||
|
|
||||||
|
showFiat ? this.renderFiatValue(formattedBalance) : null,
|
||||||
|
])
|
||||||
|
}
|
||||||
|
|
||||||
|
BalanceComponent.prototype.renderFiatValue = function (formattedBalance) {
|
||||||
|
|
||||||
|
const props = this.props
|
||||||
|
const { conversionRate, currentCurrency } = props
|
||||||
|
|
||||||
|
if (formattedBalance === 'None') return formattedBalance
|
||||||
|
var fiatDisplayNumber
|
||||||
|
var splitBalance = formattedBalance.split(' ')
|
||||||
|
|
||||||
|
if (conversionRate !== 0) {
|
||||||
|
fiatDisplayNumber = (Number(splitBalance[0]) * conversionRate).toFixed(2)
|
||||||
|
} else {
|
||||||
|
fiatDisplayNumber = 'N/A'
|
||||||
|
}
|
||||||
|
|
||||||
|
return fiatDisplay(fiatDisplayNumber, currentCurrency)
|
||||||
|
}
|
||||||
|
|
||||||
|
function fiatDisplay (fiatDisplayNumber, fiatSuffix) {
|
||||||
|
if (fiatDisplayNumber !== 'N/A') {
|
||||||
|
return h('div.fiat-amount', {
|
||||||
|
style: {},
|
||||||
|
}, `${fiatDisplayNumber} ${fiatSuffix}`)
|
||||||
|
} else {
|
||||||
|
return h('div')
|
||||||
|
}
|
||||||
|
}
|
@ -1,11 +1,15 @@
|
|||||||
const Component = require('react').Component
|
const Component = require('react').Component
|
||||||
const connect = require('react-redux').connect
|
const connect = require('react-redux').connect
|
||||||
const h = require('react-hyperscript')
|
const h = require('react-hyperscript')
|
||||||
|
const ethUtil = require('ethereumjs-util')
|
||||||
const inherits = require('util').inherits
|
const inherits = require('util').inherits
|
||||||
const actions = require('../actions')
|
const actions = require('../actions')
|
||||||
// slideout menu
|
// slideout menu
|
||||||
const WalletView = require('./wallet-view')
|
const WalletView = require('./wallet-view')
|
||||||
|
|
||||||
|
// balance component
|
||||||
|
const BalanceComponent = require('./balance-component')
|
||||||
|
|
||||||
const Identicon = require('./identicon')
|
const Identicon = require('./identicon')
|
||||||
// const AccountDropdowns = require('./account-dropdowns').AccountDropdowns
|
// const AccountDropdowns = require('./account-dropdowns').AccountDropdowns
|
||||||
// const Content = require('./wallet-content-display')
|
// const Content = require('./wallet-content-display')
|
||||||
@ -15,13 +19,18 @@ module.exports = connect(mapStateToProps, mapDispatchToProps)(TxView)
|
|||||||
function mapStateToProps (state) {
|
function mapStateToProps (state) {
|
||||||
return {
|
return {
|
||||||
sidebarOpen: state.appState.sidebarOpen,
|
sidebarOpen: state.appState.sidebarOpen,
|
||||||
|
identities: state.metamask.identities,
|
||||||
|
accounts: state.metamask.accounts,
|
||||||
|
address: state.metamask.selectedAddress,
|
||||||
|
conversionRate: state.metamask.conversionRate,
|
||||||
|
currentCurrency: state.metamask.currentCurrency,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function mapDispatchToProps (dispatch) {
|
function mapDispatchToProps (dispatch) {
|
||||||
return {
|
return {
|
||||||
showSidebar: () => {dispatch(actions.showSidebar())},
|
showSidebar: () => { dispatch(actions.showSidebar()) },
|
||||||
hideSidebar: () => {dispatch(actions.hideSidebar())},
|
hideSidebar: () => { dispatch(actions.hideSidebar()) },
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -40,7 +49,13 @@ function TxView () {
|
|||||||
}
|
}
|
||||||
|
|
||||||
TxView.prototype.render = function () {
|
TxView.prototype.render = function () {
|
||||||
const selected = '0x82df11beb942BEeeD58d466fCb0F0791365C7684' // TODO: remove fake address
|
|
||||||
|
var props = this.props
|
||||||
|
var selected = props.address || Object.keys(props.accounts)[0]
|
||||||
|
var checksumAddress = selected && ethUtil.toChecksumAddress(selected)
|
||||||
|
var identity = props.identities[selected]
|
||||||
|
var account = props.accounts[selected]
|
||||||
|
const { conversionRate, currentCurrency } = props
|
||||||
|
|
||||||
return h('div.tx-view.flex-column', {
|
return h('div.tx-view.flex-column', {
|
||||||
style: {},
|
style: {},
|
||||||
@ -62,7 +77,7 @@ TxView.prototype.render = function () {
|
|||||||
},
|
},
|
||||||
}, []),
|
}, []),
|
||||||
|
|
||||||
//account display
|
// account display
|
||||||
h('.identicon-wrapper.select-none', {
|
h('.identicon-wrapper.select-none', {
|
||||||
style: {
|
style: {
|
||||||
marginLeft: '0.9em',
|
marginLeft: '0.9em',
|
||||||
@ -75,9 +90,9 @@ TxView.prototype.render = function () {
|
|||||||
]),
|
]),
|
||||||
|
|
||||||
h('span.account-name', {
|
h('span.account-name', {
|
||||||
style: {}
|
style: {},
|
||||||
}, [
|
}, [
|
||||||
'Account 1'
|
identity.name,
|
||||||
]),
|
]),
|
||||||
|
|
||||||
]),
|
]),
|
||||||
@ -88,25 +103,13 @@ TxView.prototype.render = function () {
|
|||||||
style: {},
|
style: {},
|
||||||
}, [
|
}, [
|
||||||
|
|
||||||
// laptop: 50px 50px
|
h(BalanceComponent, {
|
||||||
// mobile: 100px 100px
|
balanceValue: account && account.balance,
|
||||||
h('img.hero-balance-icon', {
|
conversionRate,
|
||||||
src: '../images/eth_logo.svg',
|
currentCurrency,
|
||||||
style: {}
|
style: {},
|
||||||
}),
|
}),
|
||||||
|
|
||||||
// laptop: 5vw?
|
|
||||||
// phone: 50vw?
|
|
||||||
h('div.flex-column.hero-balance-display', {}, [
|
|
||||||
h('div.token-amount', {
|
|
||||||
style: {}
|
|
||||||
}, '1001.124 ETH'),
|
|
||||||
|
|
||||||
h('div.fiat-amount', {
|
|
||||||
style: {}
|
|
||||||
}, '$300,000 USD'),
|
|
||||||
]),
|
|
||||||
|
|
||||||
// laptop: 10vw?
|
// laptop: 10vw?
|
||||||
// phone: 75vw?
|
// phone: 75vw?
|
||||||
h('div.flex-row.flex-center.hero-balance-buttons', {
|
h('div.flex-row.flex-center.hero-balance-buttons', {
|
||||||
|
@ -20,7 +20,25 @@ $break-large: 576px;
|
|||||||
margin: 2.8em 0.9em 0.8em 0.9em;
|
margin: 2.8em 0.9em 0.8em 0.9em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-balance-display {
|
.balance-container {
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
margin: 0;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
@media screen and (max-width: $break-small) {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: $break-large) {
|
||||||
|
flex-direction: row;
|
||||||
|
flex-grow: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.balance-display {
|
||||||
|
|
||||||
@media screen and (max-width: $break-small) {
|
@media screen and (max-width: $break-small) {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@ -38,7 +56,6 @@ $break-large: 576px;
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width: $break-large) {
|
@media screen and (min-width: $break-large) {
|
||||||
flex-grow: 3;
|
|
||||||
margin-left: 3%;
|
margin-left: 3%;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
@ -56,7 +73,7 @@ $break-large: 576px;
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-balance-icon {
|
.balance-icon {
|
||||||
border-radius: 25px;
|
border-radius: 25px;
|
||||||
width: 45px;
|
width: 45px;
|
||||||
height: 45px;
|
height: 45px;
|
||||||
|
Loading…
Reference in New Issue
Block a user