Remove redux dependency from eth-balance and its dependent tree

For better unit testability of the conf-tx view.
feature/default_network_editable
Dan Finlay 8 years ago
parent daec667c16
commit 19db11856b
  1. 8
      ui/app/account-detail.js
  2. 3
      ui/app/accounts/account-list-item.js
  3. 4
      ui/app/accounts/index.js
  4. 16
      ui/app/components/eth-balance.js
  5. 16
      ui/app/components/fiat-value.js
  6. 2
      ui/app/components/pending-tx.js
  7. 6
      ui/app/components/shift-list-item.js
  8. 3
      ui/app/components/transaction-list-item.js
  9. 3
      ui/app/components/transaction-list.js
  10. 4
      ui/app/conf-tx.js
  11. 19
      ui/app/send.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) => {

@ -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',

@ -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,

@ -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,
]))
)
}

@ -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'

@ -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',
}),

@ -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,

@ -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,

@ -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)
},

@ -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),

@ -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', [

Loading…
Cancel
Save