aboutsummaryrefslogtreecommitdiffstats
path: root/ui
diff options
context:
space:
mode:
authorDan Finlay <dan@danfinlay.com>2017-05-11 08:26:09 +0800
committerDan Finlay <dan@danfinlay.com>2017-05-11 08:26:09 +0800
commitd737bd1633977174ddf3d3248ee6873cc3adca8e (patch)
treea802581bfbbb514a17f4053a2d0d456060af1780 /ui
parentecaa4cdeb202204f3085af3660338e23c575b06f (diff)
downloadtangerine-wallet-browser-d737bd1633977174ddf3d3248ee6873cc3adca8e.tar
tangerine-wallet-browser-d737bd1633977174ddf3d3248ee6873cc3adca8e.tar.gz
tangerine-wallet-browser-d737bd1633977174ddf3d3248ee6873cc3adca8e.tar.bz2
tangerine-wallet-browser-d737bd1633977174ddf3d3248ee6873cc3adca8e.tar.lz
tangerine-wallet-browser-d737bd1633977174ddf3d3248ee6873cc3adca8e.tar.xz
tangerine-wallet-browser-d737bd1633977174ddf3d3248ee6873cc3adca8e.tar.zst
tangerine-wallet-browser-d737bd1633977174ddf3d3248ee6873cc3adca8e.zip
Break up pending-tx component for better unit testability
Diffstat (limited to 'ui')
-rw-r--r--ui/app/components/pending-tx.js77
1 files changed, 39 insertions, 38 deletions
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`)