mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01: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 connect = require('react-redux').connect
|
||||
const h = require('react-hyperscript')
|
||||
const ethUtil = require('ethereumjs-util')
|
||||
const inherits = require('util').inherits
|
||||
const actions = require('../actions')
|
||||
// slideout menu
|
||||
const WalletView = require('./wallet-view')
|
||||
|
||||
// balance component
|
||||
const BalanceComponent = require('./balance-component')
|
||||
|
||||
const Identicon = require('./identicon')
|
||||
// const AccountDropdowns = require('./account-dropdowns').AccountDropdowns
|
||||
// const Content = require('./wallet-content-display')
|
||||
@ -15,13 +19,18 @@ module.exports = connect(mapStateToProps, mapDispatchToProps)(TxView)
|
||||
function mapStateToProps (state) {
|
||||
return {
|
||||
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) {
|
||||
return {
|
||||
showSidebar: () => {dispatch(actions.showSidebar())},
|
||||
hideSidebar: () => {dispatch(actions.hideSidebar())},
|
||||
showSidebar: () => { dispatch(actions.showSidebar()) },
|
||||
hideSidebar: () => { dispatch(actions.hideSidebar()) },
|
||||
}
|
||||
}
|
||||
|
||||
@ -40,7 +49,13 @@ function TxView () {
|
||||
}
|
||||
|
||||
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', {
|
||||
style: {},
|
||||
@ -62,7 +77,7 @@ TxView.prototype.render = function () {
|
||||
},
|
||||
}, []),
|
||||
|
||||
//account display
|
||||
// account display
|
||||
h('.identicon-wrapper.select-none', {
|
||||
style: {
|
||||
marginLeft: '0.9em',
|
||||
@ -75,9 +90,9 @@ TxView.prototype.render = function () {
|
||||
]),
|
||||
|
||||
h('span.account-name', {
|
||||
style: {}
|
||||
style: {},
|
||||
}, [
|
||||
'Account 1'
|
||||
identity.name,
|
||||
]),
|
||||
|
||||
]),
|
||||
@ -88,25 +103,13 @@ TxView.prototype.render = function () {
|
||||
style: {},
|
||||
}, [
|
||||
|
||||
// laptop: 50px 50px
|
||||
// mobile: 100px 100px
|
||||
h('img.hero-balance-icon', {
|
||||
src: '../images/eth_logo.svg',
|
||||
style: {}
|
||||
h(BalanceComponent, {
|
||||
balanceValue: account && account.balance,
|
||||
conversionRate,
|
||||
currentCurrency,
|
||||
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?
|
||||
// phone: 75vw?
|
||||
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;
|
||||
}
|
||||
|
||||
.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) {
|
||||
text-align: center;
|
||||
@ -38,7 +56,6 @@ $break-large: 576px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: $break-large) {
|
||||
flex-grow: 3;
|
||||
margin-left: 3%;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
@ -56,7 +73,7 @@ $break-large: 576px;
|
||||
|
||||
}
|
||||
|
||||
.hero-balance-icon {
|
||||
.balance-icon {
|
||||
border-radius: 25px;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
|
Loading…
Reference in New Issue
Block a user