From d737bd1633977174ddf3d3248ee6873cc3adca8e Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Wed, 10 May 2017 17:26:09 -0700 Subject: Break up pending-tx component for better unit testability --- ui/app/components/pending-tx.js | 77 +++++++++++++++++++++-------------------- 1 file changed, 39 insertions(+), 38 deletions(-) (limited to 'ui/app') diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js index 5ea885195..6b8f16dae 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,6 @@ function PendingTx () { PendingTx.prototype.render = function () { const props = this.props - const txMeta = this.gatherTxMeta() const txParams = txMeta.txParams || {} @@ -61,7 +54,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 +67,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 +82,6 @@ PendingTx.prototype.render = function () { h(MiniAccountPanel, { imageSeed: address, - imageifyIdenticons: imageify, picOrder: 'right', }, [ h('span.font-small', { @@ -176,12 +157,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 +178,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) }, }), ]), @@ -331,13 +302,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 +322,6 @@ PendingTx.prototype.miniAccountPanelForRecipient = function () { ]) } else { return h(MiniAccountPanel, { - imageifyIdenticons: imageify, picOrder: 'left', }, [ @@ -367,6 +335,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 +365,24 @@ 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 = document.querySelector('form#pending-tx-form') + const valid = form.checkValidity() + return valid +} + // After a customizable state value has been updated, PendingTx.prototype.gatherTxMeta = function () { log.debug(`pending-tx gatherTxMeta`) -- cgit From 19db11856bef65c38d96eb1d6084d88ab6e7eebc Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Fri, 12 May 2017 12:41:31 -0700 Subject: Remove redux dependency from eth-balance and its dependent tree For better unit testability of the conf-tx view. --- ui/app/account-detail.js | 8 ++++++-- ui/app/accounts/account-list-item.js | 3 ++- ui/app/accounts/index.js | 4 +++- ui/app/components/eth-balance.js | 16 ++++++++-------- ui/app/components/fiat-value.js | 16 +++++----------- ui/app/components/pending-tx.js | 2 ++ ui/app/components/shift-list-item.js | 6 +++++- ui/app/components/transaction-list-item.js | 3 ++- ui/app/components/transaction-list.js | 3 ++- ui/app/conf-tx.js | 4 +++- ui/app/send.js | 19 +++++++++++-------- 11 files changed, 49 insertions(+), 35 deletions(-) (limited to 'ui/app') diff --git a/ui/app/account-detail.js b/ui/app/account-detail.js index d592a5ad6..7cadb9d47 100644 --- a/ui/app/account-detail.js +++ b/ui/app/account-detail.js @@ -29,6 +29,7 @@ function mapStateToProps (state) { unapprovedMsgs: valuesFor(state.metamask.unapprovedMsgs), shapeShiftTxList: state.metamask.shapeShiftTxList, transactions: state.metamask.selectedAddressTxList || [], + conversionRate: state.metamask.conversionRate, } } @@ -43,7 +44,7 @@ AccountDetailScreen.prototype.render = function () { var checksumAddress = selected && ethUtil.toChecksumAddress(selected) var identity = props.identities[selected] var account = props.accounts[selected] - const { network } = props + const { network, conversionRate } = props return ( @@ -182,6 +183,7 @@ AccountDetailScreen.prototype.render = function () { h(EthBalance, { value: account && account.balance, + conversionRate, style: { lineHeight: '7px', marginTop: '10px', @@ -243,11 +245,13 @@ AccountDetailScreen.prototype.subview = function () { } AccountDetailScreen.prototype.transactionList = function () { - const {transactions, unapprovedMsgs, address, network, shapeShiftTxList } = this.props + const {transactions, unapprovedMsgs, address, + network, shapeShiftTxList, conversionRate } = this.props return h(TransactionList, { transactions: transactions.sort((a, b) => b.time - a.time), network, unapprovedMsgs, + conversionRate, address, shapeShiftTxList, viewPendingTx: (txId) => { diff --git a/ui/app/accounts/account-list-item.js b/ui/app/accounts/account-list-item.js index 2a3c13d05..0e87af612 100644 --- a/ui/app/accounts/account-list-item.js +++ b/ui/app/accounts/account-list-item.js @@ -15,7 +15,7 @@ function AccountListItem () { } AccountListItem.prototype.render = function () { - const { identity, selectedAddress, accounts, onShowDetail } = this.props + const { identity, selectedAddress, accounts, onShowDetail, conversionRate } = this.props const checksumAddress = identity && identity.address && ethUtil.toChecksumAddress(identity.address) const isSelected = selectedAddress === identity.address @@ -52,6 +52,7 @@ AccountListItem.prototype.render = function () { }, checksumAddress), h(EthBalance, { value: account && account.balance, + conversionRate, style: { lineHeight: '7px', marginTop: '10px', diff --git a/ui/app/accounts/index.js b/ui/app/accounts/index.js index 9584ebad9..5105c214b 100644 --- a/ui/app/accounts/index.js +++ b/ui/app/accounts/index.js @@ -23,6 +23,7 @@ function mapStateToProps (state) { scrollToBottom: state.appState.scrollToBottom, pending, keyrings: state.metamask.keyrings, + conversionRate: state.metamask.conversionRate, } } @@ -33,7 +34,7 @@ function AccountsScreen () { AccountsScreen.prototype.render = function () { const props = this.props - const { keyrings } = props + const { keyrings, conversionRate } = props const identityList = valuesFor(props.identities) const unapprovedTxList = valuesFor(props.unapprovedTxs) @@ -81,6 +82,7 @@ AccountsScreen.prototype.render = function () { key: `acct-panel-${identity.address}`, identity, selectedAddress: this.props.selectedAddress, + conversionRate, accounts: this.props.accounts, onShowDetail: this.onShowDetail.bind(this), pending, diff --git a/ui/app/components/eth-balance.js b/ui/app/components/eth-balance.js index 57ca84564..21906aa09 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 } = 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, conversionRate }) : null, ])) ) } diff --git a/ui/app/components/fiat-value.js b/ui/app/components/fiat-value.js index 298809b30..6e306c9e6 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,14 +12,16 @@ function FiatValue () { FiatValue.prototype.render = function () { const props = this.props + const { conversionRate } = 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' diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js index 6b8f16dae..fb555b821 100644 --- a/ui/app/components/pending-tx.js +++ b/ui/app/components/pending-tx.js @@ -31,6 +31,7 @@ function PendingTx () { PendingTx.prototype.render = function () { const props = this.props + const conversionRate = props.conversionRate const txMeta = this.gatherTxMeta() const txParams = txMeta.txParams || {} @@ -102,6 +103,7 @@ PendingTx.prototype.render = function () { }, [ h(EthBalance, { value: balance, + conversionRate, inline: true, labelColor: '#F7861C', }), diff --git a/ui/app/components/shift-list-item.js b/ui/app/components/shift-list-item.js index 96a7cba6e..db5fda5cb 100644 --- a/ui/app/components/shift-list-item.js +++ b/ui/app/components/shift-list-item.js @@ -15,7 +15,9 @@ const Tooltip = require('./tooltip') module.exports = connect(mapStateToProps)(ShiftListItem) function mapStateToProps (state) { - return {} + return { + conversionRate: state.metamask.conversionRate, + } } inherits(ShiftListItem, Component) @@ -64,6 +66,7 @@ function formatDate (date) { ShiftListItem.prototype.renderUtilComponents = function () { var props = this.props + const { conversionRate } = props switch (props.response.status) { case 'no_deposits': @@ -96,6 +99,7 @@ ShiftListItem.prototype.renderUtilComponents = function () { }), h(EtherBalance, { value: `${props.response.outgoingCoin}`, + conversionRate, 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..3db4c016e 100644 --- a/ui/app/components/transaction-list-item.js +++ b/ui/app/components/transaction-list-item.js @@ -19,7 +19,7 @@ function TransactionListItem () { } TransactionListItem.prototype.render = function () { - const { transaction, network } = this.props + const { transaction, network, conversionRate } = this.props if (transaction.key === 'shapeshift') { if (network === '1') return h(ShiftListItem, transaction) } @@ -80,6 +80,7 @@ TransactionListItem.prototype.render = function () { isTx ? h(EtherBalance, { value: txParams.value, + conversionRate, 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) }, diff --git a/ui/app/conf-tx.js b/ui/app/conf-tx.js index 83ac5a4fd..c4df66931 100644 --- a/ui/app/conf-tx.js +++ b/ui/app/conf-tx.js @@ -27,6 +27,7 @@ function mapStateToProps (state) { warning: state.appState.warning, network: state.metamask.network, provider: state.metamask.provider, + conversionRate: state.metamask.conversionRate, } } @@ -38,7 +39,7 @@ function ConfirmTxScreen () { ConfirmTxScreen.prototype.render = function () { const props = this.props const { network, provider, unapprovedTxs, - unapprovedMsgs, unapprovedPersonalMsgs } = props + unapprovedMsgs, unapprovedPersonalMsgs, conversionRate } = props var unconfTxList = txHelper(unapprovedTxs, unapprovedMsgs, unapprovedPersonalMsgs, network) @@ -102,6 +103,7 @@ ConfirmTxScreen.prototype.render = function () { selectedAddress: props.selectedAddress, accounts: props.accounts, identities: props.identities, + conversionRate, // Actions buyEth: this.buyEth.bind(this, txParams.from || props.selectedAddress), sendTransaction: this.sendTransaction.bind(this, txData), diff --git a/ui/app/send.js b/ui/app/send.js index eb32d5e06..d73744f70 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -21,6 +21,7 @@ function mapStateToProps (state) { warning: state.appState.warning, network: state.metamask.network, addressBook: state.metamask.addressBook, + conversionRate: state.metamask.conversionRate, } result.error = result.warning && result.warning.split('.')[0] @@ -40,13 +41,14 @@ function SendTransactionScreen () { SendTransactionScreen.prototype.render = function () { this.persistentFormParentId = 'send-tx-form' - var state = this.props - var address = state.address - var account = state.account - var identity = state.identity - var network = state.network - var identities = state.identities - var addressBook = state.addressBook + var props = this.props + var address = props.address + var account = props.account + var identity = props.identity + var network = props.network + var identities = props.identities + var addressBook = props.addressBook + var conversionRate = props.conversionRate return ( @@ -125,6 +127,7 @@ SendTransactionScreen.prototype.render = function () { h(EthBalance, { value: account && account.balance, + conversionRate, }), ]), @@ -147,7 +150,7 @@ SendTransactionScreen.prototype.render = function () { ]), // error message - state.error && h('span.error.flex-center', state.error), + props.error && h('span.error.flex-center', props.error), // 'to' field h('section.flex-row.flex-center', [ -- cgit From c4be4c7195c05936fba61783b9f8a3c96d161ce0 Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Mon, 15 May 2017 14:35:24 -0700 Subject: Skip jazzicons in unit tests --- ui/app/components/identicon.js | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) (limited to 'ui/app') 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) + } } -- cgit From 4b341e6a955d1fa71decfb021a86e7da09a933b0 Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Mon, 15 May 2017 15:07:38 -0700 Subject: Got test failing nearly correctly --- ui/app/components/pending-tx.js | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) (limited to 'ui/app') diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js index fb555b821..d31ccf2e5 100644 --- a/ui/app/components/pending-tx.js +++ b/ui/app/components/pending-tx.js @@ -380,11 +380,22 @@ PendingTx.prototype.onSubmit = function (event) { } PendingTx.prototype.checkValidity = function() { - const form = document.querySelector('form#pending-tx-form') + const form = this.getFormEl() + console.log("check validity got form el:") + console.dir(form) 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`) -- cgit From 75d9b5619c1b7e0949136702e7301ed0bb648f09 Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Mon, 15 May 2017 15:21:28 -0700 Subject: Verify updating gas value updates --- ui/app/components/pending-tx.js | 2 -- 1 file changed, 2 deletions(-) (limited to 'ui/app') diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js index d31ccf2e5..bbdac3bc4 100644 --- a/ui/app/components/pending-tx.js +++ b/ui/app/components/pending-tx.js @@ -381,8 +381,6 @@ PendingTx.prototype.onSubmit = function (event) { PendingTx.prototype.checkValidity = function() { const form = this.getFormEl() - console.log("check validity got form el:") - console.dir(form) const valid = form.checkValidity() return valid } -- cgit From fc7b4cb4bc5141f920131f8d79c56ca9ff3b6d2c Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Mon, 15 May 2017 15:22:49 -0700 Subject: Linted --- ui/app/components/ens-input.js | 5 +++-- ui/app/components/pending-tx.js | 6 +++--- 2 files changed, 6 insertions(+), 5 deletions(-) (limited to 'ui/app') diff --git a/ui/app/components/ens-input.js b/ui/app/components/ens-input.js index 04c6222c2..3e44d83af 100644 --- a/ui/app/components/ens-input.js +++ b/ui/app/components/ens-input.js @@ -168,6 +168,7 @@ EnsInput.prototype.ensIconContents = function (recipient) { } } -function getNetworkEnsSupport(network) { +function getNetworkEnsSupport (network) { return Boolean(networkMap[network]) -} \ No newline at end of file +} + diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js index bbdac3bc4..b084a1d2a 100644 --- a/ui/app/components/pending-tx.js +++ b/ui/app/components/pending-tx.js @@ -379,17 +379,17 @@ PendingTx.prototype.onSubmit = function (event) { } } -PendingTx.prototype.checkValidity = function() { +PendingTx.prototype.checkValidity = function () { const form = this.getFormEl() const valid = form.checkValidity() return valid } -PendingTx.prototype.getFormEl = function() { +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 { checkValidity () { return true } } } return form } -- cgit From 4c10e2021aa0cdc4f34a22368a37c76e0e1fea22 Mon Sep 17 00:00:00 2001 From: Thomas Huang Date: Mon, 15 May 2017 18:05:11 -0700 Subject: Change default network to rinkeby --- ui/app/app.js | 4 ++-- ui/app/components/drop-menu-item.js | 4 ++-- ui/app/components/network.js | 6 +++--- 3 files changed, 7 insertions(+), 7 deletions(-) (limited to 'ui/app') diff --git a/ui/app/app.js b/ui/app/app.js index bbfd58588..d096ca531 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -249,7 +249,7 @@ App.prototype.renderNetworkDropdown = function () { h(DropMenuItem, { label: 'Ropsten Test Network', closeMenu: () => this.setState({ isNetworkMenuOpen: false }), - action: () => props.dispatch(actions.setProviderType('testnet')), + action: () => props.dispatch(actions.setProviderType('ropsten')), icon: h('.menu-icon.red-dot'), activeNetworkRender: props.network, provider: props.provider, @@ -267,7 +267,7 @@ App.prototype.renderNetworkDropdown = function () { h(DropMenuItem, { label: 'Rinkeby Test Network', closeMenu: () => this.setState({ isNetworkMenuOpen: false}), - action: () => props.dispatch(actions.setProviderType('rinkeby')), + action: () => props.dispatch(actions.setProviderType('testnet')), icon: h('.menu-icon.golden-square'), activeNetworkRender: props.network, provider: props.provider, diff --git a/ui/app/components/drop-menu-item.js b/ui/app/components/drop-menu-item.js index bd9d8f597..27c2afde3 100644 --- a/ui/app/components/drop-menu-item.js +++ b/ui/app/components/drop-menu-item.js @@ -42,13 +42,13 @@ 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', '✓') break case 'Rinkeby Test Network': - if (providerType === 'rinkeby') return h('.check', '✓') + if (providerType === 'testnet') return h('.check', '✓') break case 'Localhost 8545': if (activeNetwork === 'http://localhost:8545') return h('.check', '✓') diff --git a/ui/app/components/network.js b/ui/app/components/network.js index f7ea8c49e..1e7c082e1 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) { @@ -43,7 +43,7 @@ Network.prototype.render = function () { } else if (providerName === 'kovan') { hoverText = 'Kovan Test Network' iconName = 'kovan-test-network' - } else if (providerName === 'rinkeby') { + } else if (providerName === 'testnet') { hoverText = 'Rinkeby Test Network' iconName = 'rinkeby-test-network' } else { @@ -90,7 +90,7 @@ Network.prototype.render = function () { h('.menu-icon.golden-square'), h('.network-name', { style: { - color: '#550077', + color: '#e7a218', }}, 'Rinkeby Test Net'), ]) -- cgit From 3367363b1234a076695758762d7f1220fe4a7f8c Mon Sep 17 00:00:00 2001 From: Thomas Huang Date: Mon, 15 May 2017 19:11:16 -0700 Subject: Remove all traces of testnet --- ui/app/app.js | 2 +- ui/app/components/drop-menu-item.js | 2 +- ui/app/components/network.js | 2 +- ui/app/config.js | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) (limited to 'ui/app') diff --git a/ui/app/app.js b/ui/app/app.js index d096ca531..6e5aa57cd 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -267,7 +267,7 @@ App.prototype.renderNetworkDropdown = function () { h(DropMenuItem, { label: 'Rinkeby Test Network', closeMenu: () => this.setState({ isNetworkMenuOpen: false}), - action: () => props.dispatch(actions.setProviderType('testnet')), + action: () => props.dispatch(actions.setProviderType('rinkeby')), icon: h('.menu-icon.golden-square'), activeNetworkRender: props.network, provider: props.provider, diff --git a/ui/app/components/drop-menu-item.js b/ui/app/components/drop-menu-item.js index 27c2afde3..e42948209 100644 --- a/ui/app/components/drop-menu-item.js +++ b/ui/app/components/drop-menu-item.js @@ -48,7 +48,7 @@ DropMenuItem.prototype.activeNetworkRender = function () { if (providerType === 'kovan') return h('.check', '✓') break case 'Rinkeby Test Network': - if (providerType === 'testnet') return h('.check', '✓') + if (providerType === 'rinkeby') return h('.check', '✓') break case 'Localhost 8545': if (activeNetwork === 'http://localhost:8545') return h('.check', '✓') diff --git a/ui/app/components/network.js b/ui/app/components/network.js index 1e7c082e1..31a8fc17c 100644 --- a/ui/app/components/network.js +++ b/ui/app/components/network.js @@ -43,7 +43,7 @@ Network.prototype.render = function () { } else if (providerName === 'kovan') { hoverText = 'Kovan Test Network' iconName = 'kovan-test-network' - } else if (providerName === 'testnet') { + } else if (providerName === 'rinkeby') { hoverText = 'Rinkeby Test Network' iconName = 'rinkeby-test-network' } else { diff --git a/ui/app/config.js b/ui/app/config.js index 26cfe663f..d7be26757 100644 --- a/ui/app/config.js +++ b/ui/app/config.js @@ -156,7 +156,7 @@ function currentProviderDisplay (metamaskState) { value = 'Main Ethereum Network' break - case 'testnet': + case 'ropsten': title = 'Current Network' value = 'Ropsten Test Network' break -- cgit From d5636080cf48fef8381a01006d4a3156a6b62aba Mon Sep 17 00:00:00 2001 From: kumavis Date: Mon, 15 May 2017 23:12:47 -0700 Subject: ui - send - clean props assignment --- ui/app/send.js | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) (limited to 'ui/app') diff --git a/ui/app/send.js b/ui/app/send.js index d73744f70..6cfe909e6 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -41,14 +41,16 @@ function SendTransactionScreen () { SendTransactionScreen.prototype.render = function () { this.persistentFormParentId = 'send-tx-form' - var props = this.props - var address = props.address - var account = props.account - var identity = props.identity - var network = props.network - var identities = props.identities - var addressBook = props.addressBook - var conversionRate = props.conversionRate + const props = this.props + const { + address, + account, + identity, + network, + identities, + addressBook, + conversionRate + } = props return ( -- cgit From e28e0acaa8fb690a7fe5ac45597837f20d2079e1 Mon Sep 17 00:00:00 2001 From: kumavis Date: Mon, 15 May 2017 23:21:46 -0700 Subject: lint - mandatory dangle :stuck_out_tongue: --- ui/app/send.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app') diff --git a/ui/app/send.js b/ui/app/send.js index 6cfe909e6..a313c6bee 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -49,7 +49,7 @@ SendTransactionScreen.prototype.render = function () { network, identities, addressBook, - conversionRate + conversionRate, } = props return ( -- cgit From b4e6ea9db787cbf7839d9caad6e1ea0385cc588e Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Tue, 16 May 2017 11:34:53 -0700 Subject: Fix fiat rendering Fixes #1439. When reorganizing fiat-value component to not use global state, had missed its necessary `currentCurrency` parameter. This now passes it in wherever it's used. --- ui/app/account-detail.js | 4 +++- ui/app/accounts/account-list-item.js | 4 +++- ui/app/accounts/index.js | 4 +++- ui/app/components/eth-balance.js | 4 ++-- ui/app/components/fiat-value.js | 6 ++---- ui/app/components/pending-tx.js | 9 +++++++-- ui/app/components/shift-list-item.js | 8 +++++--- ui/app/components/transaction-list-item.js | 7 ++++--- ui/app/conf-tx.js | 4 +++- ui/app/send.js | 3 +++ 10 files changed, 35 insertions(+), 18 deletions(-) (limited to 'ui/app') diff --git a/ui/app/account-detail.js b/ui/app/account-detail.js index 7cadb9d47..7a78a360c 100644 --- a/ui/app/account-detail.js +++ b/ui/app/account-detail.js @@ -30,6 +30,7 @@ function mapStateToProps (state) { shapeShiftTxList: state.metamask.shapeShiftTxList, transactions: state.metamask.selectedAddressTxList || [], conversionRate: state.metamask.conversionRate, + currentCurrency: state.metamask.currentCurrency, } } @@ -44,7 +45,7 @@ AccountDetailScreen.prototype.render = function () { var checksumAddress = selected && ethUtil.toChecksumAddress(selected) var identity = props.identities[selected] var account = props.accounts[selected] - const { network, conversionRate } = props + const { network, conversionRate, currentCurrency } = props return ( @@ -184,6 +185,7 @@ AccountDetailScreen.prototype.render = function () { h(EthBalance, { value: account && account.balance, conversionRate, + currentCurrency, style: { lineHeight: '7px', marginTop: '10px', diff --git a/ui/app/accounts/account-list-item.js b/ui/app/accounts/account-list-item.js index 0e87af612..10a0b6cc7 100644 --- a/ui/app/accounts/account-list-item.js +++ b/ui/app/accounts/account-list-item.js @@ -15,7 +15,8 @@ function AccountListItem () { } AccountListItem.prototype.render = function () { - const { identity, selectedAddress, accounts, onShowDetail, conversionRate } = this.props + const { identity, selectedAddress, accounts, onShowDetail, + conversionRate, currentCurrency } = this.props const checksumAddress = identity && identity.address && ethUtil.toChecksumAddress(identity.address) const isSelected = selectedAddress === identity.address @@ -52,6 +53,7 @@ AccountListItem.prototype.render = function () { }, checksumAddress), h(EthBalance, { value: account && account.balance, + currentCurrency, conversionRate, style: { lineHeight: '7px', diff --git a/ui/app/accounts/index.js b/ui/app/accounts/index.js index 5105c214b..ac2615cd7 100644 --- a/ui/app/accounts/index.js +++ b/ui/app/accounts/index.js @@ -24,6 +24,7 @@ function mapStateToProps (state) { pending, keyrings: state.metamask.keyrings, conversionRate: state.metamask.conversionRate, + currentCurrency: state.metamask.currentCurrency, } } @@ -34,7 +35,7 @@ function AccountsScreen () { AccountsScreen.prototype.render = function () { const props = this.props - const { keyrings, conversionRate } = props + const { keyrings, conversionRate, currentCurrency } = props const identityList = valuesFor(props.identities) const unapprovedTxList = valuesFor(props.unapprovedTxs) @@ -83,6 +84,7 @@ AccountsScreen.prototype.render = function () { identity, selectedAddress: this.props.selectedAddress, conversionRate, + currentCurrency, accounts: this.props.accounts, onShowDetail: this.onShowDetail.bind(this), pending, diff --git a/ui/app/components/eth-balance.js b/ui/app/components/eth-balance.js index 21906aa09..4f538fd31 100644 --- a/ui/app/components/eth-balance.js +++ b/ui/app/components/eth-balance.js @@ -37,7 +37,7 @@ EthBalanceComponent.prototype.render = function () { } EthBalanceComponent.prototype.renderBalance = function (value) { var props = this.props - const { conversionRate, shorten, incoming } = props + const { conversionRate, shorten, incoming, currentCurrency } = props if (value === 'None') return value if (value === '...') return value var balanceObj = generateBalanceObject(value, shorten ? 1 : 3) @@ -83,7 +83,7 @@ EthBalanceComponent.prototype.renderBalance = function (value) { }, label), ]), - showFiat ? h(FiatValue, { value, conversionRate }) : 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 6e306c9e6..8a64a1cfc 100644 --- a/ui/app/components/fiat-value.js +++ b/ui/app/components/fiat-value.js @@ -12,7 +12,7 @@ function FiatValue () { FiatValue.prototype.render = function () { const props = this.props - const { conversionRate } = props + const { conversionRate, currentCurrency } = props const value = formatBalance(props.value, 6) @@ -28,9 +28,7 @@ FiatValue.prototype.render = function () { fiatTooltipNumber = 'Unknown' } - var fiatSuffix = props.currentCurrency - - return fiatDisplay(fiatDisplayNumber, fiatSuffix) + return fiatDisplay(fiatDisplayNumber, currentCurrency) } function fiatDisplay (fiatDisplayNumber, fiatSuffix) { diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js index b084a1d2a..0d1f06ba6 100644 --- a/ui/app/components/pending-tx.js +++ b/ui/app/components/pending-tx.js @@ -31,6 +31,8 @@ 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 || {} @@ -104,6 +106,7 @@ PendingTx.prototype.render = function () { h(EthBalance, { value: balance, conversionRate, + currentCurrency, inline: true, labelColor: '#F7861C', }), @@ -141,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) @@ -189,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', { @@ -208,6 +211,8 @@ PendingTx.prototype.render = function () { }, [ h(EthBalance, { value: maxCost.toString(16), + currentCurrency, + conversionRate, inline: true, labelColor: 'black', fontSize: '16px', diff --git a/ui/app/components/shift-list-item.js b/ui/app/components/shift-list-item.js index db5fda5cb..32bfbeda4 100644 --- a/ui/app/components/shift-list-item.js +++ b/ui/app/components/shift-list-item.js @@ -8,7 +8,7 @@ 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') @@ -17,6 +17,7 @@ module.exports = connect(mapStateToProps)(ShiftListItem) function mapStateToProps (state) { return { conversionRate: state.metamask.conversionRate, + currentCurrency: state.metamask.currentCurrency, } } @@ -66,7 +67,7 @@ function formatDate (date) { ShiftListItem.prototype.renderUtilComponents = function () { var props = this.props - const { conversionRate } = props + const { conversionRate, currentCurrency } = props switch (props.response.status) { case 'no_deposits': @@ -97,9 +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 3db4c016e..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, conversionRate } = this.props + const { transaction, network, conversionRate, currentCurrency } = this.props if (transaction.key === 'shapeshift') { if (network === '1') return h(ShiftListItem, transaction) } @@ -78,9 +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/conf-tx.js b/ui/app/conf-tx.js index c4df66931..0d7c4c1bb 100644 --- a/ui/app/conf-tx.js +++ b/ui/app/conf-tx.js @@ -28,6 +28,7 @@ function mapStateToProps (state) { network: state.metamask.network, provider: state.metamask.provider, conversionRate: state.metamask.conversionRate, + currentCurrency: state.metamask.currentCurrency, } } @@ -38,7 +39,7 @@ function ConfirmTxScreen () { ConfirmTxScreen.prototype.render = function () { const props = this.props - const { network, provider, unapprovedTxs, + const { network, provider, unapprovedTxs, currentCurrency, unapprovedMsgs, unapprovedPersonalMsgs, conversionRate } = props var unconfTxList = txHelper(unapprovedTxs, unapprovedMsgs, unapprovedPersonalMsgs, network) @@ -104,6 +105,7 @@ ConfirmTxScreen.prototype.render = function () { accounts: props.accounts, identities: props.identities, conversionRate, + currentCurrency, // Actions buyEth: this.buyEth.bind(this, txParams.from || props.selectedAddress), sendTransaction: this.sendTransaction.bind(this, txData), diff --git a/ui/app/send.js b/ui/app/send.js index a313c6bee..fd6994145 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -22,6 +22,7 @@ function mapStateToProps (state) { network: state.metamask.network, addressBook: state.metamask.addressBook, conversionRate: state.metamask.conversionRate, + currentCurrency: state.metamask.currentCurrency, } result.error = result.warning && result.warning.split('.')[0] @@ -50,6 +51,7 @@ SendTransactionScreen.prototype.render = function () { identities, addressBook, conversionRate, + currentCurrency, } = props return ( @@ -130,6 +132,7 @@ SendTransactionScreen.prototype.render = function () { h(EthBalance, { value: account && account.balance, conversionRate, + currentCurrency, }), ]), -- cgit