diff options
Diffstat (limited to 'ui/app/components')
-rw-r--r-- | ui/app/components/account-dropdowns.js | 9 | ||||
-rw-r--r-- | ui/app/components/bn-as-decimal-input.js | 27 | ||||
-rw-r--r-- | ui/app/components/dropdown.js | 4 | ||||
-rw-r--r-- | ui/app/components/editable-label.js | 1 | ||||
-rw-r--r-- | ui/app/components/ens-input.js | 2 | ||||
-rw-r--r-- | ui/app/components/identicon.js | 2 | ||||
-rw-r--r-- | ui/app/components/menu-droppo.js | 4 | ||||
-rw-r--r-- | ui/app/components/notice.js | 2 | ||||
-rw-r--r-- | ui/app/components/pending-tx.js | 11 | ||||
-rw-r--r-- | ui/app/components/pending-typed-msg-details.js | 59 | ||||
-rw-r--r-- | ui/app/components/pending-typed-msg.js | 46 | ||||
-rw-r--r-- | ui/app/components/shapeshift-form.js | 6 | ||||
-rw-r--r-- | ui/app/components/shift-list-item.js | 2 | ||||
-rw-r--r-- | ui/app/components/transaction-list-item.js | 2 | ||||
-rw-r--r-- | ui/app/components/typed-message-renderer.js | 42 |
15 files changed, 193 insertions, 26 deletions
diff --git a/ui/app/components/account-dropdowns.js b/ui/app/components/account-dropdowns.js index b087a40d4..0c34a5154 100644 --- a/ui/app/components/account-dropdowns.js +++ b/ui/app/components/account-dropdowns.js @@ -2,7 +2,7 @@ const Component = require('react').Component const PropTypes = require('react').PropTypes const h = require('react-hyperscript') const actions = require('../actions') -const genAccountLink = require('../../lib/account-link.js') +const genAccountLink = require('etherscan-link').createAccountLink const connect = require('react-redux').connect const Dropdown = require('./dropdown').Dropdown const DropdownMenuItem = require('./dropdown').DropdownMenuItem @@ -161,8 +161,6 @@ class AccountDropdowns extends Component { ) } - - renderAccountOptions () { const { actions } = this.props const { optionsMenuActive } = this.state @@ -297,6 +295,11 @@ AccountDropdowns.propTypes = { identities: PropTypes.objectOf(PropTypes.object), selected: PropTypes.string, keyrings: PropTypes.array, + actions: PropTypes.objectOf(PropTypes.func), + network: PropTypes.string, + style: PropTypes.object, + enableAccountOptions: PropTypes.bool, + enableAccountsSelector: PropTypes.bool, } const mapDispatchToProps = (dispatch) => { diff --git a/ui/app/components/bn-as-decimal-input.js b/ui/app/components/bn-as-decimal-input.js index f3ace4720..22e37602e 100644 --- a/ui/app/components/bn-as-decimal-input.js +++ b/ui/app/components/bn-as-decimal-input.js @@ -31,7 +31,9 @@ BnAsDecimalInput.prototype.render = function () { const suffix = props.suffix const style = props.style const valueString = value.toString(10) - const newValue = this.downsize(valueString, scale, precision) + const newMin = min && this.downsize(min.toString(10), scale) + const newMax = max && this.downsize(max.toString(10), scale) + const newValue = this.downsize(valueString, scale) return ( h('.flex-column', [ @@ -47,8 +49,8 @@ BnAsDecimalInput.prototype.render = function () { type: 'number', step: 'any', required: true, - min, - max, + min: newMin, + max: newMax, style: extend({ display: 'block', textAlign: 'right', @@ -128,15 +130,17 @@ BnAsDecimalInput.prototype.updateValidity = function (event) { } BnAsDecimalInput.prototype.constructWarning = function () { - const { name, min, max } = this.props + const { name, min, max, scale, suffix } = this.props + const newMin = min && this.downsize(min.toString(10), scale) + const newMax = max && this.downsize(max.toString(10), scale) let message = name ? name + ' ' : '' if (min && max) { - message += `must be greater than or equal to ${min} and less than or equal to ${max}.` + message += `must be greater than or equal to ${newMin} ${suffix} and less than or equal to ${newMax} ${suffix}.` } else if (min) { - message += `must be greater than or equal to ${min}.` + message += `must be greater than or equal to ${newMin} ${suffix}.` } else if (max) { - message += `must be less than or equal to ${max}.` + message += `must be less than or equal to ${newMax} ${suffix}.` } else { message += 'Invalid input.' } @@ -145,14 +149,17 @@ BnAsDecimalInput.prototype.constructWarning = function () { } -BnAsDecimalInput.prototype.downsize = function (number, scale, precision) { +BnAsDecimalInput.prototype.downsize = function (number, scale) { // if there is no scaling, simply return the number if (scale === 0) { return Number(number) } else { // if the scale is the same as the precision, account for this edge case. - var decimals = (scale === precision) ? -1 : scale - precision - return Number(number.slice(0, -scale) + '.' + number.slice(-scale, decimals)) + var adjustedNumber = number + while (adjustedNumber.length < scale) { + adjustedNumber = '0' + adjustedNumber + } + return Number(adjustedNumber.slice(0, -scale) + '.' + adjustedNumber.slice(-scale)) } } diff --git a/ui/app/components/dropdown.js b/ui/app/components/dropdown.js index 73710acc2..cdd864cc3 100644 --- a/ui/app/components/dropdown.js +++ b/ui/app/components/dropdown.js @@ -52,6 +52,9 @@ Dropdown.propTypes = { onClick: PropTypes.func.isRequired, children: PropTypes.node, style: PropTypes.object.isRequired, + onClickOutside: PropTypes.func, + innerStyle: PropTypes.object, + useCssTransition: PropTypes.bool, } class DropdownMenuItem extends Component { @@ -86,6 +89,7 @@ DropdownMenuItem.propTypes = { closeMenu: PropTypes.func.isRequired, onClick: PropTypes.func.isRequired, children: PropTypes.node, + style: PropTypes.object, } module.exports = { diff --git a/ui/app/components/editable-label.js b/ui/app/components/editable-label.js index 167be7eaf..8a5c8954f 100644 --- a/ui/app/components/editable-label.js +++ b/ui/app/components/editable-label.js @@ -48,6 +48,7 @@ EditableLabel.prototype.saveIfEnter = function (event) { } EditableLabel.prototype.saveText = function () { + // eslint-disable-next-line react/no-find-dom-node var container = findDOMNode(this) var text = container.querySelector('.editable-label input').value var truncatedText = text.substring(0, 20) diff --git a/ui/app/components/ens-input.js b/ui/app/components/ens-input.js index 3a33ebf74..c85a23514 100644 --- a/ui/app/components/ens-input.js +++ b/ui/app/components/ens-input.js @@ -6,7 +6,7 @@ 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 ensRE = /.+\..+$/ const ZERO_ADDRESS = '0x0000000000000000000000000000000000000000' diff --git a/ui/app/components/identicon.js b/ui/app/components/identicon.js index c754bc6ba..bb476ca7b 100644 --- a/ui/app/components/identicon.js +++ b/ui/app/components/identicon.js @@ -41,6 +41,7 @@ IdenticonComponent.prototype.componentDidMount = function () { if (!address) return + // eslint-disable-next-line react/no-find-dom-node var container = findDOMNode(this) var diameter = props.diameter || this.defaultDiameter @@ -56,6 +57,7 @@ IdenticonComponent.prototype.componentDidUpdate = function () { if (!address) return + // eslint-disable-next-line react/no-find-dom-node var container = findDOMNode(this) var children = container.children diff --git a/ui/app/components/menu-droppo.js b/ui/app/components/menu-droppo.js index 66ab18954..e6276f3b1 100644 --- a/ui/app/components/menu-droppo.js +++ b/ui/app/components/menu-droppo.js @@ -19,7 +19,7 @@ MenuDroppoComponent.prototype.render = function () { this.manageListeners() - let style = this.props.style || {} + const style = this.props.style || {} if (!('position' in style)) { style.position = 'fixed' } @@ -95,6 +95,7 @@ MenuDroppoComponent.prototype.componentDidMount = function () { if (this && document.body) { this.globalClickHandler = this.globalClickOccurred.bind(this) document.body.addEventListener('click', this.globalClickHandler) + // eslint-disable-next-line react/no-find-dom-node var container = findDOMNode(this) this.container = container } @@ -108,6 +109,7 @@ MenuDroppoComponent.prototype.componentWillUnmount = function () { MenuDroppoComponent.prototype.globalClickOccurred = function (event) { const target = event.target + // eslint-disable-next-line react/no-find-dom-node const container = findDOMNode(this) if (target !== container && diff --git a/ui/app/components/notice.js b/ui/app/components/notice.js index c26505193..09d461c7b 100644 --- a/ui/app/components/notice.js +++ b/ui/app/components/notice.js @@ -117,6 +117,7 @@ Notice.prototype.render = function () { } Notice.prototype.componentDidMount = function () { + // eslint-disable-next-line react/no-find-dom-node var node = findDOMNode(this) linker.setupListener(node) if (document.getElementsByClassName('notice-box')[0].clientHeight < 310) { @@ -125,6 +126,7 @@ Notice.prototype.componentDidMount = function () { } Notice.prototype.componentWillUnmount = function () { + // eslint-disable-next-line react/no-find-dom-node var node = findDOMNode(this) linker.teardownListener(node) } diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js index c3350fcc1..5b1b367c6 100644 --- a/ui/app/components/pending-tx.js +++ b/ui/app/components/pending-tx.js @@ -15,10 +15,9 @@ const addressSummary = util.addressSummary const nameForAddress = require('../../lib/contract-namer') const BNInput = require('./bn-as-decimal-input') -const MIN_GAS_PRICE_GWEI_BN = new BN(1) -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) +// corresponds with 0.1 GWEI +const MIN_GAS_PRICE_BN = new BN('100000000') +const MIN_GAS_LIMIT_BN = new BN('21000') module.exports = PendingTx inherits(PendingTx, Component) @@ -175,7 +174,7 @@ PendingTx.prototype.render = function () { precision: 0, scale: 0, // The hard lower limit for gas. - min: MIN_GAS_LIMIT_BN.toString(10), + min: MIN_GAS_LIMIT_BN, max: safeGasLimit, suffix: 'UNITS', style: { @@ -200,7 +199,7 @@ PendingTx.prototype.render = function () { precision: 9, scale: 9, suffix: 'GWEI', - min: MIN_GAS_PRICE_GWEI_BN.toString(10), + min: MIN_GAS_PRICE_BN, style: { position: 'relative', top: '5px', diff --git a/ui/app/components/pending-typed-msg-details.js b/ui/app/components/pending-typed-msg-details.js new file mode 100644 index 000000000..b5fd29f71 --- /dev/null +++ b/ui/app/components/pending-typed-msg-details.js @@ -0,0 +1,59 @@ +const Component = require('react').Component +const h = require('react-hyperscript') +const inherits = require('util').inherits + +const AccountPanel = require('./account-panel') +const TypedMessageRenderer = require('./typed-message-renderer') + +module.exports = PendingMsgDetails + +inherits(PendingMsgDetails, Component) +function PendingMsgDetails () { + Component.call(this) +} + +PendingMsgDetails.prototype.render = function () { + var state = this.props + var msgData = state.txData + + var msgParams = msgData.msgParams || {} + var address = msgParams.from || state.selectedAddress + var identity = state.identities[address] || { address: address } + var account = state.accounts[address] || { address: address } + + var { data } = msgParams + + return ( + h('div', { + key: msgData.id, + style: { + margin: '10px 20px', + }, + }, [ + + // account that will sign + h(AccountPanel, { + showFullAddress: true, + identity: identity, + account: account, + imageifyIdenticons: state.imageifyIdenticons, + }), + + // message data + h('div', { + style: { + height: '260px', + }, + }, [ + h('label.font-small', { style: { display: 'block' } }, 'YOU ARE SIGNING'), + h(TypedMessageRenderer, { + value: data, + style: { + height: '215px', + }, + }), + ]), + + ]) + ) +} diff --git a/ui/app/components/pending-typed-msg.js b/ui/app/components/pending-typed-msg.js new file mode 100644 index 000000000..f8926d0a3 --- /dev/null +++ b/ui/app/components/pending-typed-msg.js @@ -0,0 +1,46 @@ +const Component = require('react').Component +const h = require('react-hyperscript') +const inherits = require('util').inherits +const PendingTxDetails = require('./pending-typed-msg-details') + +module.exports = PendingMsg + +inherits(PendingMsg, Component) +function PendingMsg () { + Component.call(this) +} + +PendingMsg.prototype.render = function () { + var state = this.props + var msgData = state.txData + + return ( + + h('div', { + key: msgData.id, + }, [ + + // header + h('h3', { + style: { + fontWeight: 'bold', + textAlign: 'center', + }, + }, 'Sign Message'), + + // message details + h(PendingTxDetails, state), + + // sign + cancel + h('.flex-row.flex-space-around', [ + h('button', { + onClick: state.cancelTypedMessage, + }, 'Cancel'), + h('button', { + onClick: state.signTypedMessage, + }, 'Sign'), + ]), + ]) + + ) +} diff --git a/ui/app/components/shapeshift-form.js b/ui/app/components/shapeshift-form.js index 901a4a956..c5993e3d3 100644 --- a/ui/app/components/shapeshift-form.js +++ b/ui/app/components/shapeshift-form.js @@ -130,9 +130,9 @@ ShapeshiftForm.prototype.renderMain = function () { alignItems: 'flex-start', }, }, [ - this.props.warning - ? this.props.warning - && h('span.error.flex-center', { + this.props.warning ? + this.props.warning && + h('span.error.flex-center', { style: { textAlign: 'center', width: '229px', diff --git a/ui/app/components/shift-list-item.js b/ui/app/components/shift-list-item.js index 079f05e31..b555dee84 100644 --- a/ui/app/components/shift-list-item.js +++ b/ui/app/components/shift-list-item.js @@ -3,7 +3,7 @@ const Component = require('react').Component const h = require('react-hyperscript') const connect = require('react-redux').connect const vreme = new (require('vreme'))() -const explorerLink = require('../../lib/explorer-link') +const explorerLink = require('etherscan-link').createExplorerLink const actions = require('../actions') const addressSummary = require('../util').addressSummary diff --git a/ui/app/components/transaction-list-item.js b/ui/app/components/transaction-list-item.js index a9961f47c..891d5e227 100644 --- a/ui/app/components/transaction-list-item.js +++ b/ui/app/components/transaction-list-item.js @@ -4,7 +4,7 @@ const inherits = require('util').inherits const EthBalance = require('./eth-balance') const addressSummary = require('../util').addressSummary -const explorerLink = require('../../lib/explorer-link') +const explorerLink = require('etherscan-link').createExplorerLink const CopyButton = require('./copyButton') const vreme = new (require('vreme'))() const Tooltip = require('./tooltip') diff --git a/ui/app/components/typed-message-renderer.js b/ui/app/components/typed-message-renderer.js new file mode 100644 index 000000000..d170d63b7 --- /dev/null +++ b/ui/app/components/typed-message-renderer.js @@ -0,0 +1,42 @@ +const Component = require('react').Component +const h = require('react-hyperscript') +const inherits = require('util').inherits +const extend = require('xtend') + +module.exports = TypedMessageRenderer + +inherits(TypedMessageRenderer, Component) +function TypedMessageRenderer () { + Component.call(this) +} + +TypedMessageRenderer.prototype.render = function () { + const props = this.props + const { value, style } = props + const text = renderTypedData(value) + + const defaultStyle = extend({ + width: '315px', + maxHeight: '210px', + resize: 'none', + border: 'none', + background: 'white', + padding: '3px', + overflow: 'scroll', + }, style) + + return ( + h('div.font-small', { + style: defaultStyle, + }, text) + ) +} + +function renderTypedData (values) { + return values.map(function (value) { + return h('div', {}, [ + h('strong', {style: {display: 'block', fontWeight: 'bold'}}, String(value.name) + ':'), + h('div', {}, value.value), + ]) + }) +} |