aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app/components
diff options
context:
space:
mode:
Diffstat (limited to 'ui/app/components')
-rw-r--r--ui/app/components/account-eth-balance.js140
-rw-r--r--ui/app/components/account-info-link.js2
-rw-r--r--ui/app/components/buy-button-subview.js2
-rw-r--r--ui/app/components/eth-balance.js25
-rw-r--r--ui/app/components/fiat-value.js71
-rw-r--r--ui/app/components/mascot.js27
-rw-r--r--ui/app/components/network.js3
-rw-r--r--ui/app/components/pending-tx-details.js11
-rw-r--r--ui/app/components/shapeshift-form.js15
-rw-r--r--ui/app/components/tooltip.js8
-rw-r--r--ui/app/components/transaction-list-item.js1
11 files changed, 121 insertions, 184 deletions
diff --git a/ui/app/components/account-eth-balance.js b/ui/app/components/account-eth-balance.js
deleted file mode 100644
index 8d693685f..000000000
--- a/ui/app/components/account-eth-balance.js
+++ /dev/null
@@ -1,140 +0,0 @@
-const Component = require('react').Component
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const connect = require('react-redux').connect
-const formatBalance = require('../util').formatBalance
-const generateBalanceObject = require('../util').generateBalanceObject
-const Tooltip = require('./tooltip.js')
-
-module.exports = connect(mapStateToProps)(EthBalanceComponent)
-
-function mapStateToProps (state) {
- return {
- conversionRate: state.metamask.conversionRate,
- conversionDate: state.metamask.conversionDate,
- currentFiat: state.metamask.currentFiat,
- }
-}
-
-inherits(EthBalanceComponent, Component)
-function EthBalanceComponent () {
- Component.call(this)
-}
-
-EthBalanceComponent.prototype.render = function () {
- var state = this.props
- var style = state.style
-
- const value = formatBalance(state.value, 6)
- var width = state.width
-
- return (
-
- h('.ether-balance', {
- style: style,
- }, [
- h('.ether-balance-amount', {
- style: {
- display: 'inline',
- width: width,
- },
- }, this.renderBalance(value, state)),
- ])
-
- )
-}
-EthBalanceComponent.prototype.renderBalance = function (value, state) {
- if (value === 'None') return value
- var balanceObj = generateBalanceObject(value, state.shorten ? 1 : 3)
- var balance, fiatDisplayNumber, fiatTooltipNumber
- var splitBalance = value.split(' ')
- var ethNumber = splitBalance[0]
- var ethSuffix = splitBalance[1]
-
-
- if (state.conversionRate !== 0) {
- fiatTooltipNumber = Number(splitBalance[0]) * state.conversionRate
- fiatDisplayNumber = fiatTooltipNumber.toFixed(2)
- } else {
- fiatDisplayNumber = 'N/A'
- }
-
- var fiatSuffix = state.currentFiat
-
- if (state.shorten) {
- balance = balanceObj.shortBalance
- } else {
- balance = balanceObj.balance
- }
-
- var label = balanceObj.label
-
- return (
- h('.flex-column', [
- h(Tooltip, {
- position: 'bottom',
- title: `${ethNumber} ${ethSuffix}`,
- }, [
- h('.flex-row', {
- style: {
- alignItems: 'flex-end',
- lineHeight: '13px',
- fontFamily: 'Montserrat Light',
- textRendering: 'geometricPrecision',
- marginBottom: '5px',
- },
- }, [
- h('div', {
- style: {
- width: '100%',
- textAlign: 'right',
- },
- }, balance),
- h('div', {
- style: {
- color: '#AEAEAE',
- marginLeft: '5px',
- },
- }, label),
- ]),
- ]),
- h(Tooltip, {
- position: 'bottom',
- title: `${fiatTooltipNumber} ${fiatSuffix}`,
- }, [
- fiatDisplay(fiatDisplayNumber, fiatSuffix),
- ]),
- ])
- )
-}
-
-function fiatDisplay (fiatDisplayNumber, fiatSuffix) {
- if (fiatDisplayNumber !== 'N/A') {
- return h('.flex-row', {
- style: {
- alignItems: 'flex-end',
- lineHeight: '13px',
- fontFamily: 'Montserrat Light',
- textRendering: 'geometricPrecision',
- },
- }, [
- h('div', {
- style: {
- width: '100%',
- textAlign: 'right',
- fontSize: '12px',
- color: '#333333',
- },
- }, fiatDisplayNumber),
- h('div', {
- style: {
- color: '#AEAEAE',
- marginLeft: '5px',
- fontSize: '12px',
- },
- }, fiatSuffix),
- ])
- } else {
- return h('div')
- }
-}
diff --git a/ui/app/components/account-info-link.js b/ui/app/components/account-info-link.js
index 4fe3b8b5d..49c42e9ec 100644
--- a/ui/app/components/account-info-link.js
+++ b/ui/app/components/account-info-link.js
@@ -14,7 +14,7 @@ function AccountInfoLink () {
AccountInfoLink.prototype.render = function () {
const { selected, network } = this.props
- const title = 'View account on etherscan'
+ const title = 'View account on Etherscan'
const url = genAccountLink(selected, network)
if (!url) {
diff --git a/ui/app/components/buy-button-subview.js b/ui/app/components/buy-button-subview.js
index 742241e5b..c3e9e5d7b 100644
--- a/ui/app/components/buy-button-subview.js
+++ b/ui/app/components/buy-button-subview.js
@@ -106,7 +106,7 @@ BuyButtonSubview.prototype.formVersionSubview = function () {
style: {
width: '225px',
},
- }, 'In order to access this feature please switch too the Main Network'),
+ }, 'In order to access this feature please switch to the Main Network'),
h('h3.text-transform-uppercase', 'or:'),
this.props.network === '2' ? h('button.text-transform-uppercase', {
onClick: () => this.props.dispatch(actions.buyEth()),
diff --git a/ui/app/components/eth-balance.js b/ui/app/components/eth-balance.js
index 498873faa..46127bed5 100644
--- a/ui/app/components/eth-balance.js
+++ b/ui/app/components/eth-balance.js
@@ -4,6 +4,7 @@ const inherits = require('util').inherits
const formatBalance = require('../util').formatBalance
const generateBalanceObject = require('../util').generateBalanceObject
const Tooltip = require('./tooltip.js')
+const FiatValue = require('./fiat-value.js')
module.exports = EthBalanceComponent
@@ -13,11 +14,11 @@ function EthBalanceComponent () {
}
EthBalanceComponent.prototype.render = function () {
- var state = this.props
- var style = state.style
+ var props = this.props
+ var style = props.style
var needsParse = this.props.needsParse !== undefined ? this.props.needsParse : true
- const value = formatBalance(state.value, 6, needsParse)
- var width = state.width
+ const value = formatBalance(props.value, 6, needsParse)
+ var width = props.width
return (
@@ -35,15 +36,16 @@ EthBalanceComponent.prototype.render = function () {
)
}
EthBalanceComponent.prototype.renderBalance = function (value) {
- var state = this.props
+ var props = this.props
if (value === 'None') return value
- var balanceObj = generateBalanceObject(value, state.shorten ? 1 : 3)
+ var balanceObj = generateBalanceObject(value, props.shorten ? 1 : 3)
var balance
var splitBalance = value.split(' ')
var ethNumber = splitBalance[0]
var ethSuffix = splitBalance[1]
+ const showFiat = 'showFiat' in props ? props.showFiat : true
- if (state.shorten) {
+ if (props.shorten) {
balance = balanceObj.shortBalance
} else {
balance = balanceObj.balance
@@ -55,8 +57,8 @@ EthBalanceComponent.prototype.renderBalance = function (value) {
h(Tooltip, {
position: 'bottom',
title: `${ethNumber} ${ethSuffix}`,
- }, [
- h('.flex-column', {
+ }, h('div.flex-column', [
+ h('.flex-row', {
style: {
alignItems: 'flex-end',
lineHeight: '13px',
@@ -74,9 +76,12 @@ EthBalanceComponent.prototype.renderBalance = function (value) {
style: {
color: ' #AEAEAE',
fontSize: '12px',
+ marginLeft: '5px',
},
}, label),
]),
- ])
+
+ showFiat ? h(FiatValue, { value: props.value }) : null,
+ ]))
)
}
diff --git a/ui/app/components/fiat-value.js b/ui/app/components/fiat-value.js
new file mode 100644
index 000000000..13ee48245
--- /dev/null
+++ b/ui/app/components/fiat-value.js
@@ -0,0 +1,71 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const connect = require('react-redux').connect
+const formatBalance = require('../util').formatBalance
+
+module.exports = connect(mapStateToProps)(FiatValue)
+
+function mapStateToProps (state) {
+ return {
+ conversionRate: state.metamask.conversionRate,
+ currentFiat: state.metamask.currentFiat,
+ }
+}
+
+inherits(FiatValue, Component)
+function FiatValue () {
+ Component.call(this)
+}
+
+FiatValue.prototype.render = function () {
+ const props = this.props
+ const value = formatBalance(props.value, 6)
+
+ if (value === 'None') return value
+ var fiatDisplayNumber, fiatTooltipNumber
+ var splitBalance = value.split(' ')
+
+ if (props.conversionRate !== 0) {
+ fiatTooltipNumber = Number(splitBalance[0]) * props.conversionRate
+ fiatDisplayNumber = fiatTooltipNumber.toFixed(2)
+ } else {
+ fiatDisplayNumber = 'N/A'
+ fiatTooltipNumber = 'Unknown'
+ }
+
+ var fiatSuffix = props.currentFiat
+
+ return fiatDisplay(fiatDisplayNumber, fiatSuffix)
+}
+
+function fiatDisplay (fiatDisplayNumber, fiatSuffix) {
+ if (fiatDisplayNumber !== 'N/A') {
+ return h('.flex-row', {
+ style: {
+ alignItems: 'flex-end',
+ lineHeight: '13px',
+ fontFamily: 'Montserrat Light',
+ textRendering: 'geometricPrecision',
+ },
+ }, [
+ h('div', {
+ style: {
+ width: '100%',
+ textAlign: 'right',
+ fontSize: '12px',
+ color: '#333333',
+ },
+ }, fiatDisplayNumber),
+ h('div', {
+ style: {
+ color: '#AEAEAE',
+ marginLeft: '5px',
+ fontSize: '12px',
+ },
+ }, fiatSuffix),
+ ])
+ } else {
+ return h('div')
+ }
+}
diff --git a/ui/app/components/mascot.js b/ui/app/components/mascot.js
index f2b00262b..f015d0c4d 100644
--- a/ui/app/components/mascot.js
+++ b/ui/app/components/mascot.js
@@ -14,9 +14,8 @@ function Mascot () {
pxNotRatio: true,
width: 200,
height: 200,
- staticImage: './images/icon-512.png',
})
- if (!this.logo.webGLSupport) return
+
this.refollowMouse = debounce(this.logo.setFollowMouse.bind(this.logo, true), 1000)
this.unfollowMouse = this.logo.setFollowMouse.bind(this.logo, false)
}
@@ -27,32 +26,25 @@ Mascot.prototype.render = function () {
// and we dont get that until render
this.handleAnimationEvents()
- return (
-
- h('#metamask-mascot-container')
-
- )
+ return h('#metamask-mascot-container', {
+ style: { zIndex: 2 },
+ })
}
Mascot.prototype.componentDidMount = function () {
var targetDivId = 'metamask-mascot-container'
var container = document.getElementById(targetDivId)
- if (!this.logo.webGLSupport) {
- var staticLogo = this.logo.staticLogo
- staticLogo.style.marginBottom = '40px'
- container.appendChild(staticLogo)
- } else {
- container.appendChild(this.logo.canvas)
- }
+ container.appendChild(this.logo.container)
}
Mascot.prototype.componentWillUnmount = function () {
- if (!this.logo.webGLSupport) return
- this.logo.canvas.remove()
+ this.animations = this.props.animationEventEmitter
+ this.animations.removeAllListeners()
+ this.logo.container.remove()
+ this.logo.stopAnimation()
}
Mascot.prototype.handleAnimationEvents = function () {
- if (!this.logo.webGLSupport) return
// only setup listeners once
if (this.animations) return
this.animations = this.props.animationEventEmitter
@@ -61,7 +53,6 @@ Mascot.prototype.handleAnimationEvents = function () {
}
Mascot.prototype.lookAt = function (target) {
- if (!this.logo.webGLSupport) return
this.unfollowMouse()
this.logo.lookAt(target)
this.refollowMouse()
diff --git a/ui/app/components/network.js b/ui/app/components/network.js
index 2f1bf639a..845861396 100644
--- a/ui/app/components/network.js
+++ b/ui/app/components/network.js
@@ -61,7 +61,7 @@ Network.prototype.render = function () {
style: {
color: '#039396',
}},
- 'Etherum Main Net'),
+ 'Ethereum Main Net'),
])
case 'morden-test-network':
return h('.network-indicator', [
@@ -75,7 +75,6 @@ Network.prototype.render = function () {
default:
return h('.network-indicator', [
h('i.fa.fa-question-circle.fa-lg', {
- ariaHidden: true,
style: {
margin: '10px',
color: 'rgb(125, 128, 130)',
diff --git a/ui/app/components/pending-tx-details.js b/ui/app/components/pending-tx-details.js
index 2fb0eae3f..c2e39a1ca 100644
--- a/ui/app/components/pending-tx-details.js
+++ b/ui/app/components/pending-tx-details.js
@@ -4,9 +4,8 @@ const inherits = require('util').inherits
const carratInline = require('fs').readFileSync('./images/forward-carrat.svg', 'utf8')
const MiniAccountPanel = require('./mini-account-panel')
-const EtherBalance = require('./eth-balance')
+const EthBalance = require('./eth-balance')
const addressSummary = require('../util').addressSummary
-const formatBalance = require('../util').formatBalance
const nameForAddress = require('../../lib/contract-namer')
const ethUtil = require('ethereumjs-util')
const BN = ethUtil.BN
@@ -70,7 +69,7 @@ PTXP.render = function () {
fontFamily: 'Montserrat Light, Montserrat, sans-serif',
},
}, [
- h(EtherBalance, {
+ h(EthBalance, {
value: balance,
inline: true,
labelColor: '#F7861C',
@@ -107,12 +106,12 @@ PTXP.render = function () {
h('.row', [
h('.cell.label', 'Amount'),
- h('.cell.value', formatBalance(txParams.value)),
+ h(EthBalance, { value: txParams.value }),
]),
h('.cell.row', [
h('.cell.label', 'Max Transaction Fee'),
- h('.cell.value', formatBalance(txFee.toString(16))),
+ h(EthBalance, { value: txFee.toString(16) }),
]),
h('.cell.row', {
@@ -129,7 +128,7 @@ PTXP.render = function () {
alignItems: 'center',
},
}, [
- h(EtherBalance, {
+ h(EthBalance, {
value: maxCost.toString(16),
inline: true,
labelColor: 'black',
diff --git a/ui/app/components/shapeshift-form.js b/ui/app/components/shapeshift-form.js
index b8650f7d5..58b7942c3 100644
--- a/ui/app/components/shapeshift-form.js
+++ b/ui/app/components/shapeshift-form.js
@@ -1,4 +1,4 @@
-const Component = require('react').Component
+const PersistentForm = require('../../lib/persistent-form')
const h = require('react-hyperscript')
const inherits = require('util').inherits
const connect = require('react-redux').connect
@@ -17,12 +17,15 @@ function mapStateToProps(state) {
}
}
-inherits(ShapeshiftForm, Component)
+inherits(ShapeshiftForm, PersistentForm)
function ShapeshiftForm () {
- Component.call(this)
+ PersistentForm.call(this)
+ this.persistentFormParentId = 'shapeshift-buy-form'
}
+
ShapeshiftForm.prototype.render = function () {
+
return h(ReactCSSTransitionGroup, {
className: 'css-transition-group',
transitionName: 'main',
@@ -66,6 +69,9 @@ ShapeshiftForm.prototype.renderMain = function () {
h('input#fromCoin.buy-inputs.ex-coins', {
type: 'text',
list: 'coinList',
+ dataset: {
+ persistentFormId: 'input-coin',
+ },
style: {
boxSizing: 'border-box',
},
@@ -159,6 +165,9 @@ ShapeshiftForm.prototype.renderMain = function () {
h('input#fromCoinAddress.buy-inputs', {
type: 'text',
placeholder: `Your ${coin} Refund Address`,
+ dataset: {
+ persistentFormId: 'refund-address',
+ },
style: {
boxSizing: 'border-box',
width: '278px',
diff --git a/ui/app/components/tooltip.js b/ui/app/components/tooltip.js
index fb67c717e..757ad0cd6 100644
--- a/ui/app/components/tooltip.js
+++ b/ui/app/components/tooltip.js
@@ -11,12 +11,14 @@ function Tooltip () {
}
Tooltip.prototype.render = function () {
+
const props = this.props
+ const { position, title, children } = props
return h(ReactTooltip, {
- position: props.position ? props.position : 'left',
- title: props.title,
+ position: position || 'left',
+ title,
fixed: false,
- }, props.children)
+ }, children)
}
diff --git a/ui/app/components/transaction-list-item.js b/ui/app/components/transaction-list-item.js
index 1b85464e1..66a232981 100644
--- a/ui/app/components/transaction-list-item.js
+++ b/ui/app/components/transaction-list-item.js
@@ -77,6 +77,7 @@ TransactionListItem.prototype.render = function () {
value: txParams.value,
width: '55px',
shorten: true,
+ showFiat: false,
style: {fontSize: '15px'},
}) : h('.flex-column'),
])
generated by cgit (git 2.34.1) at 2024-10-17 08:19:42 +0800