aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app/components
diff options
context:
space:
mode:
Diffstat (limited to 'ui/app/components')
-rw-r--r--ui/app/components/drop-menu-item.js2
-rw-r--r--ui/app/components/ens-input.js17
-rw-r--r--ui/app/components/eth-balance.js16
-rw-r--r--ui/app/components/fiat-value.js20
-rw-r--r--ui/app/components/hex-as-decimal-input.js2
-rw-r--r--ui/app/components/identicon.js13
-rw-r--r--ui/app/components/network.js4
-rw-r--r--ui/app/components/pending-tx.js95
-rw-r--r--ui/app/components/shift-list-item.js12
-rw-r--r--ui/app/components/transaction-list-item.js8
-rw-r--r--ui/app/components/transaction-list.js3
11 files changed, 109 insertions, 83 deletions
diff --git a/ui/app/components/drop-menu-item.js b/ui/app/components/drop-menu-item.js
index bd9d8f597..e42948209 100644
--- a/ui/app/components/drop-menu-item.js
+++ b/ui/app/components/drop-menu-item.js
@@ -42,7 +42,7 @@ DropMenuItem.prototype.activeNetworkRender = function () {
if (providerType === 'mainnet') return h('.check', '✓')
break
case 'Ropsten Test Network':
- if (providerType === 'testnet') return h('.check', '✓')
+ if (providerType === 'ropsten') return h('.check', '✓')
break
case 'Kovan Test Network':
if (providerType === 'kovan') return h('.check', '✓')
diff --git a/ui/app/components/ens-input.js b/ui/app/components/ens-input.js
index ec3cd60ed..3e44d83af 100644
--- a/ui/app/components/ens-input.js
+++ b/ui/app/components/ens-input.js
@@ -5,11 +5,9 @@ const extend = require('xtend')
const debounce = require('debounce')
const copyToClipboard = require('copy-to-clipboard')
const ENS = require('ethjs-ens')
+const networkMap = require('ethjs-ens/lib/network-map.json')
const ensRE = /.+\.eth$/
-const networkResolvers = {
- '3': '112234455c3a32fd11230c42e7bccd4a84e02010',
-}
module.exports = EnsInput
@@ -24,8 +22,8 @@ EnsInput.prototype.render = function () {
list: 'addresses',
onChange: () => {
const network = this.props.network
- const resolverAddress = networkResolvers[network]
- if (!resolverAddress) return
+ const networkHasEnsSupport = getNetworkEnsSupport(network)
+ if (!networkHasEnsSupport) return
const recipient = document.querySelector('input[name="address"]').value
if (recipient.match(ensRE) === null) {
@@ -73,9 +71,9 @@ EnsInput.prototype.render = function () {
EnsInput.prototype.componentDidMount = function () {
const network = this.props.network
- const resolverAddress = networkResolvers[network]
+ const networkHasEnsSupport = getNetworkEnsSupport(network)
- if (resolverAddress) {
+ if (networkHasEnsSupport) {
const provider = global.ethereumProvider
this.ens = new ENS({ provider, network })
this.checkName = debounce(this.lookupEnsName.bind(this), 200)
@@ -169,3 +167,8 @@ EnsInput.prototype.ensIconContents = function (recipient) {
})
}
}
+
+function getNetworkEnsSupport (network) {
+ return Boolean(networkMap[network])
+}
+
diff --git a/ui/app/components/eth-balance.js b/ui/app/components/eth-balance.js
index 57ca84564..4f538fd31 100644
--- a/ui/app/components/eth-balance.js
+++ b/ui/app/components/eth-balance.js
@@ -16,20 +16,19 @@ function EthBalanceComponent () {
EthBalanceComponent.prototype.render = function () {
var props = this.props
let { value } = props
- var style = props.style
+ const { style, width } = props
var needsParse = this.props.needsParse !== undefined ? this.props.needsParse : true
value = value ? formatBalance(value, 6, needsParse) : '...'
- var width = props.width
return (
h('.ether-balance.ether-balance-amount', {
- style: style,
+ style,
}, [
h('div', {
style: {
display: 'inline',
- width: width,
+ width,
},
}, this.renderBalance(value)),
])
@@ -38,16 +37,17 @@ EthBalanceComponent.prototype.render = function () {
}
EthBalanceComponent.prototype.renderBalance = function (value) {
var props = this.props
+ const { conversionRate, shorten, incoming, currentCurrency } = props
if (value === 'None') return value
if (value === '...') return value
- var balanceObj = generateBalanceObject(value, props.shorten ? 1 : 3)
+ var balanceObj = generateBalanceObject(value, 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 (props.shorten) {
+ if (shorten) {
balance = balanceObj.shortBalance
} else {
balance = balanceObj.balance
@@ -73,7 +73,7 @@ EthBalanceComponent.prototype.renderBalance = function (value) {
width: '100%',
textAlign: 'right',
},
- }, this.props.incoming ? `+${balance}` : balance),
+ }, incoming ? `+${balance}` : balance),
h('div', {
style: {
color: ' #AEAEAE',
@@ -83,7 +83,7 @@ EthBalanceComponent.prototype.renderBalance = function (value) {
}, label),
]),
- showFiat ? h(FiatValue, { value: props.value }) : null,
+ showFiat ? h(FiatValue, { value: props.value, conversionRate, currentCurrency }) : null,
]))
)
}
diff --git a/ui/app/components/fiat-value.js b/ui/app/components/fiat-value.js
index 298809b30..8a64a1cfc 100644
--- a/ui/app/components/fiat-value.js
+++ b/ui/app/components/fiat-value.js
@@ -1,17 +1,9 @@
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,
- currentCurrency: state.metamask.currentCurrency,
- }
-}
+module.exports = FiatValue
inherits(FiatValue, Component)
function FiatValue () {
@@ -20,23 +12,23 @@ function FiatValue () {
FiatValue.prototype.render = function () {
const props = this.props
+ const { conversionRate, currentCurrency } = 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
+ if (conversionRate !== 0) {
+ fiatTooltipNumber = Number(splitBalance[0]) * conversionRate
fiatDisplayNumber = fiatTooltipNumber.toFixed(2)
} else {
fiatDisplayNumber = 'N/A'
fiatTooltipNumber = 'Unknown'
}
- var fiatSuffix = props.currentCurrency
-
- return fiatDisplay(fiatDisplayNumber, fiatSuffix)
+ return fiatDisplay(fiatDisplayNumber, currentCurrency)
}
function fiatDisplay (fiatDisplayNumber, fiatSuffix) {
diff --git a/ui/app/components/hex-as-decimal-input.js b/ui/app/components/hex-as-decimal-input.js
index e37aaa8c3..4a71e9585 100644
--- a/ui/app/components/hex-as-decimal-input.js
+++ b/ui/app/components/hex-as-decimal-input.js
@@ -139,7 +139,7 @@ HexAsDecimalInput.prototype.constructWarning = function () {
}
function hexify (decimalString) {
- const hexBN = new BN(decimalString, 10)
+ const hexBN = new BN(parseInt(decimalString), 10)
return '0x' + hexBN.toString('hex')
}
diff --git a/ui/app/components/identicon.js b/ui/app/components/identicon.js
index 6d4871d02..9de854b54 100644
--- a/ui/app/components/identicon.js
+++ b/ui/app/components/identicon.js
@@ -1,6 +1,7 @@
const Component = require('react').Component
const h = require('react-hyperscript')
const inherits = require('util').inherits
+const isNode = require('detect-node')
const findDOMNode = require('react-dom').findDOMNode
const jazzicon = require('jazzicon')
const iconFactoryGen = require('../../lib/icon-factory')
@@ -40,8 +41,10 @@ IdenticonComponent.prototype.componentDidMount = function () {
var container = findDOMNode(this)
var diameter = props.diameter || this.defaultDiameter
- var img = iconFactory.iconForAddress(address, diameter, false)
- container.appendChild(img)
+ if (!isNode) {
+ var img = iconFactory.iconForAddress(address, diameter, false)
+ container.appendChild(img)
+ }
}
IdenticonComponent.prototype.componentDidUpdate = function () {
@@ -58,6 +61,8 @@ IdenticonComponent.prototype.componentDidUpdate = function () {
}
var diameter = props.diameter || this.defaultDiameter
- var img = iconFactory.iconForAddress(address, diameter, false)
- container.appendChild(img)
+ if (!isNode) {
+ var img = iconFactory.iconForAddress(address, diameter, false)
+ container.appendChild(img)
+ }
}
diff --git a/ui/app/components/network.js b/ui/app/components/network.js
index f7ea8c49e..31a8fc17c 100644
--- a/ui/app/components/network.js
+++ b/ui/app/components/network.js
@@ -34,7 +34,7 @@ Network.prototype.render = function () {
} else if (providerName === 'mainnet') {
hoverText = 'Main Ethereum Network'
iconName = 'ethereum-network'
- } else if (providerName === 'testnet') {
+ } else if (providerName === 'ropsten') {
hoverText = 'Ropsten Test Network'
iconName = 'ropsten-test-network'
} else if (parseInt(networkNumber) === 3) {
@@ -90,7 +90,7 @@ Network.prototype.render = function () {
h('.menu-icon.golden-square'),
h('.network-name', {
style: {
- color: '#550077',
+ color: '#e7a218',
}},
'Rinkeby Test Net'),
])
diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js
index 5ea885195..0d1f06ba6 100644
--- a/ui/app/components/pending-tx.js
+++ b/ui/app/components/pending-tx.js
@@ -1,5 +1,4 @@
const Component = require('react').Component
-const connect = require('react-redux').connect
const h = require('react-hyperscript')
const inherits = require('util').inherits
const actions = require('../actions')
@@ -20,12 +19,7 @@ const GWEI_FACTOR = new BN(1e9)
const MIN_GAS_PRICE_BN = MIN_GAS_PRICE_GWEI_BN.mul(GWEI_FACTOR)
const MIN_GAS_LIMIT_BN = new BN(21000)
-module.exports = connect(mapStateToProps)(PendingTx)
-
-function mapStateToProps (state) {
- return {}
-}
-
+module.exports = PendingTx
inherits(PendingTx, Component)
function PendingTx () {
Component.call(this)
@@ -37,7 +31,9 @@ function PendingTx () {
PendingTx.prototype.render = function () {
const props = this.props
+ const { currentCurrency } = props
+ const conversionRate = props.conversionRate
const txMeta = this.gatherTxMeta()
const txParams = txMeta.txParams || {}
@@ -61,7 +57,6 @@ PendingTx.prototype.render = function () {
const maxCost = txFeeBn.add(valueBn)
const dataLength = txParams.data ? (txParams.data.length - 2) / 2 : 0
- const imageify = props.imageifyIdenticons === undefined ? true : props.imageifyIdenticons
const balanceBn = hexToBn(balance)
const insufficientBalance = balanceBn.lt(maxCost)
@@ -75,18 +70,8 @@ PendingTx.prototype.render = function () {
}, [
h('form#pending-tx-form', {
- onSubmit: (event) => {
- const txMeta = this.gatherTxMeta()
- event.preventDefault()
- const form = document.querySelector('form#pending-tx-form')
- const valid = form.checkValidity()
- this.setState({ valid })
- if (valid && this.verifyGasParams()) {
- props.sendTransaction(txMeta, event)
- } else {
- this.props.dispatch(actions.displayWarning('Invalid Gas Parameters'))
- }
- },
+ onSubmit: this.onSubmit.bind(this),
+
}, [
// tx info
@@ -100,7 +85,6 @@ PendingTx.prototype.render = function () {
h(MiniAccountPanel, {
imageSeed: address,
- imageifyIdenticons: imageify,
picOrder: 'right',
}, [
h('span.font-small', {
@@ -121,6 +105,8 @@ PendingTx.prototype.render = function () {
}, [
h(EthBalance, {
value: balance,
+ conversionRate,
+ currentCurrency,
inline: true,
labelColor: '#F7861C',
}),
@@ -158,7 +144,7 @@ PendingTx.prototype.render = function () {
// in the way that gas and gasLimit currently are.
h('.row', [
h('.cell.label', 'Amount'),
- h(EthBalance, { value: txParams.value }),
+ h(EthBalance, { value: txParams.value, currentCurrency, conversionRate }),
]),
// Gas Limit (customizable)
@@ -176,12 +162,8 @@ PendingTx.prototype.render = function () {
position: 'relative',
top: '5px',
},
- onChange: (newHex) => {
- log.info(`Gas limit changed to ${newHex}`)
- const txMeta = this.gatherTxMeta()
- txMeta.txParams.gas = newHex
- this.setState({ txData: txMeta })
- },
+ onChange: this.gasLimitChanged.bind(this),
+
ref: (hexInput) => { this.inputs.push(hexInput) },
}),
]),
@@ -201,13 +183,7 @@ PendingTx.prototype.render = function () {
position: 'relative',
top: '5px',
},
- onChange: (newHex) => {
- log.info(`Gas price changed to: ${newHex}`)
- const inWei = hexToBn(newHex).mul(GWEI_FACTOR)
- const txMeta = this.gatherTxMeta()
- txMeta.txParams.gasPrice = inWei.toString(16)
- this.setState({ txData: txMeta })
- },
+ onChange: this.gasPriceChanged.bind(this),
ref: (hexInput) => { this.inputs.push(hexInput) },
}),
]),
@@ -216,7 +192,7 @@ PendingTx.prototype.render = function () {
// Max Transaction Fee (calculated)
h('.cell.row', [
h('.cell.label', 'Max Transaction Fee'),
- h(EthBalance, { value: txFeeBn.toString(16) }),
+ h(EthBalance, { value: txFeeBn.toString(16), currentCurrency, conversionRate }),
]),
h('.cell.row', {
@@ -235,6 +211,8 @@ PendingTx.prototype.render = function () {
}, [
h(EthBalance, {
value: maxCost.toString(16),
+ currentCurrency,
+ conversionRate,
inline: true,
labelColor: 'black',
fontSize: '16px',
@@ -331,13 +309,11 @@ PendingTx.prototype.miniAccountPanelForRecipient = function () {
const txData = props.txData
const txParams = txData.txParams || {}
const isContractDeploy = !('to' in txParams)
- const imageify = props.imageifyIdenticons === undefined ? true : props.imageifyIdenticons
// If it's not a contract deploy, send to the account
if (!isContractDeploy) {
return h(MiniAccountPanel, {
imageSeed: txParams.to,
- imageifyIdenticons: imageify,
picOrder: 'left',
}, [
h('span.font-small', {
@@ -353,7 +329,6 @@ PendingTx.prototype.miniAccountPanelForRecipient = function () {
])
} else {
return h(MiniAccountPanel, {
- imageifyIdenticons: imageify,
picOrder: 'left',
}, [
@@ -367,6 +342,21 @@ PendingTx.prototype.miniAccountPanelForRecipient = function () {
}
}
+PendingTx.prototype.gasPriceChanged = function (newHex) {
+ log.info(`Gas price changed to: ${newHex}`)
+ const inWei = hexToBn(newHex).mul(GWEI_FACTOR)
+ const txMeta = this.gatherTxMeta()
+ txMeta.txParams.gasPrice = inWei.toString(16)
+ this.setState({ txData: txMeta })
+}
+
+PendingTx.prototype.gasLimitChanged = function (newHex) {
+ log.info(`Gas limit changed to ${newHex}`)
+ const txMeta = this.gatherTxMeta()
+ txMeta.txParams.gas = newHex
+ this.setState({ txData: txMeta })
+}
+
PendingTx.prototype.resetGasFields = function () {
log.debug(`pending-tx resetGasFields`)
@@ -382,6 +372,33 @@ PendingTx.prototype.resetGasFields = function () {
})
}
+PendingTx.prototype.onSubmit = function (event) {
+ event.preventDefault()
+ const txMeta = this.gatherTxMeta()
+ const valid = this.checkValidity()
+ this.setState({ valid })
+ if (valid && this.verifyGasParams()) {
+ this.props.sendTransaction(txMeta, event)
+ } else {
+ this.props.dispatch(actions.displayWarning('Invalid Gas Parameters'))
+ }
+}
+
+PendingTx.prototype.checkValidity = function () {
+ const form = this.getFormEl()
+ const valid = form.checkValidity()
+ return valid
+}
+
+PendingTx.prototype.getFormEl = function () {
+ const form = document.querySelector('form#pending-tx-form')
+ // Stub out form for unit tests:
+ if (!form) {
+ return { checkValidity () { return true } }
+ }
+ return form
+}
+
// After a customizable state value has been updated,
PendingTx.prototype.gatherTxMeta = function () {
log.debug(`pending-tx gatherTxMeta`)
diff --git a/ui/app/components/shift-list-item.js b/ui/app/components/shift-list-item.js
index 96a7cba6e..32bfbeda4 100644
--- a/ui/app/components/shift-list-item.js
+++ b/ui/app/components/shift-list-item.js
@@ -8,14 +8,17 @@ const actions = require('../actions')
const addressSummary = require('../util').addressSummary
const CopyButton = require('./copyButton')
-const EtherBalance = require('./eth-balance')
+const EthBalance = require('./eth-balance')
const Tooltip = require('./tooltip')
module.exports = connect(mapStateToProps)(ShiftListItem)
function mapStateToProps (state) {
- return {}
+ return {
+ conversionRate: state.metamask.conversionRate,
+ currentCurrency: state.metamask.currentCurrency,
+ }
}
inherits(ShiftListItem, Component)
@@ -64,6 +67,7 @@ function formatDate (date) {
ShiftListItem.prototype.renderUtilComponents = function () {
var props = this.props
+ const { conversionRate, currentCurrency } = props
switch (props.response.status) {
case 'no_deposits':
@@ -94,8 +98,10 @@ ShiftListItem.prototype.renderUtilComponents = function () {
h(CopyButton, {
value: this.props.response.transaction,
}),
- h(EtherBalance, {
+ h(EthBalance, {
value: `${props.response.outgoingCoin}`,
+ conversionRate,
+ currentCurrency,
width: '55px',
shorten: true,
needsParse: false,
diff --git a/ui/app/components/transaction-list-item.js b/ui/app/components/transaction-list-item.js
index 7fb2e88d9..c2a585003 100644
--- a/ui/app/components/transaction-list-item.js
+++ b/ui/app/components/transaction-list-item.js
@@ -2,7 +2,7 @@ const Component = require('react').Component
const h = require('react-hyperscript')
const inherits = require('util').inherits
-const EtherBalance = require('./eth-balance')
+const EthBalance = require('./eth-balance')
const addressSummary = require('../util').addressSummary
const explorerLink = require('../../lib/explorer-link')
const CopyButton = require('./copyButton')
@@ -19,7 +19,7 @@ function TransactionListItem () {
}
TransactionListItem.prototype.render = function () {
- const { transaction, network } = this.props
+ const { transaction, network, conversionRate, currentCurrency } = this.props
if (transaction.key === 'shapeshift') {
if (network === '1') return h(ShiftListItem, transaction)
}
@@ -78,8 +78,10 @@ TransactionListItem.prototype.render = function () {
// Places a copy button if tx is successful, else places a placeholder empty div.
transaction.hash ? h(CopyButton, { value: transaction.hash }) : h('div', {style: { display: 'flex', alignItems: 'center', width: '26px' }}),
- isTx ? h(EtherBalance, {
+ isTx ? h(EthBalance, {
value: txParams.value,
+ conversionRate,
+ currentCurrency,
width: '55px',
shorten: true,
showFiat: false,
diff --git a/ui/app/components/transaction-list.js b/ui/app/components/transaction-list.js
index 3ae953637..37a757309 100644
--- a/ui/app/components/transaction-list.js
+++ b/ui/app/components/transaction-list.js
@@ -13,7 +13,7 @@ function TransactionList () {
}
TransactionList.prototype.render = function () {
- const { transactions, network, unapprovedMsgs } = this.props
+ const { transactions, network, unapprovedMsgs, conversionRate } = this.props
var shapeShiftTxList
if (network === '1') {
@@ -69,6 +69,7 @@ TransactionList.prototype.render = function () {
}
return h(TransactionListItem, {
transaction, i, network, key,
+ conversionRate,
showTx: (txId) => {
this.props.viewPendingTx(txId)
},
generated by cgit (git 2.34.1) at 2024-10-23 03:27:08 +0800