From 78836b0ead0e1b2307a48868c109a5412effc78b Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 25 Oct 2017 13:31:58 -0230 Subject: Signature Request --- ui/app/components/signature-request.js | 245 +++++++++++++++++++++++++++++++++ 1 file changed, 245 insertions(+) create mode 100644 ui/app/components/signature-request.js (limited to 'ui/app/components/signature-request.js') diff --git a/ui/app/components/signature-request.js b/ui/app/components/signature-request.js new file mode 100644 index 000000000..4df4f9193 --- /dev/null +++ b/ui/app/components/signature-request.js @@ -0,0 +1,245 @@ +const Component = require('react').Component +const h = require('react-hyperscript') +const inherits = require('util').inherits +const Identicon = require('./identicon') +const connect = require('react-redux').connect +const ethUtil = require('ethereumjs-util') +const PendingTxDetails = require('./pending-personal-msg-details') +const AccountDropdownMini = require('./dropdowns/account-dropdown-mini') +const BinaryRenderer = require('./binary-renderer') + +const actions = require('../actions') +const { conversionUtil } = require('../conversion-util') + +const { + getSelectedAccount, + getCurrentAccountWithSendEtherInfo, + getSelectedAddress, + accountsWithSendEtherInfoSelector, + conversionRateSelector, +} = require('../selectors.js') + +function mapStateToProps (state) { + return { + balance: getSelectedAccount(state).balance, + selectedAccount: getCurrentAccountWithSendEtherInfo(state), + selectedAddress: getSelectedAddress(state), + requester: null, + requesterAddress: null, + accounts: accountsWithSendEtherInfoSelector(state), + conversionRate: conversionRateSelector(state) + } +} + +function mapDispatchToProps (dispatch) { + return { + goHome: () => dispatch(actions.goHome()) + } +} + +module.exports = connect(mapStateToProps, mapDispatchToProps)(SignatureRequest) + +inherits(SignatureRequest, Component) +function SignatureRequest (props) { + Component.call(this) + + this.state = { + selectedAccount: props.selectedAccount, + accountDropdownOpen: false, + } +} + +SignatureRequest.prototype.renderHeader = function () { + return h('div.request-signature__header', [ + + h('div.request-signature__header-background'), + + h('div.request-signature__header__text', 'Signature Request'), + + h('div.request-signature__header__tip-container', [ + h('div.request-signature__header__tip'), + ]), + + ]) +} + +SignatureRequest.prototype.renderAccountDropdown = function () { + const { + selectedAccount, + accountDropdownOpen, + } = this.state + + const { + accounts, + } = this.props + + return h('div.request-signature__account', [ + + h('div.request-signature__account-text', ['Account:']), + + h(AccountDropdownMini, { + selectedAccount, + accounts, + onSelect: selectedAccount => this.setState({ selectedAccount }), + dropdownOpen: accountDropdownOpen, + openDropdown: () => this.setState({ accountDropdownOpen: true }), + closeDropdown: () => this.setState({ accountDropdownOpen: false }), + }) + + ]) +} + +SignatureRequest.prototype.renderBalance = function () { + const { balance, conversionRate } = this.props + + const balanceInEther = conversionUtil(balance, { + fromNumericBase: 'hex', + toNumericBase: 'dec', + fromDenomination: 'WEI', + numberOfDecimals: 6, + conversionRate, + }) + + return h('div.request-signature__balance', [ + + h('div.request-signature__balance-text', ['Balance:']), + + h('div.request-signature__balance-value', `${balanceInEther} ETH`), + + ]) +} + +SignatureRequest.prototype.renderAccountInfo = function () { + return h('div.request-signature__account-info', [ + + this.renderAccountDropdown(), + + this.renderRequestIcon(), + + this.renderBalance(), + + ]) +} + +SignatureRequest.prototype.renderRequestIcon = function () { + const { requesterAddress } = this.props + + return h('div.request-signature__request-icon', [ + h(Identicon, { + diameter: 40, + address: requesterAddress, + }) + ]) +} + +SignatureRequest.prototype.renderRequestInfo = function () { + const { requester } = this.props + + return h('div.request-signature__request-info', [ + + h('div.request-signature__headline', [ + `Your signature is being requested`, + ]) + + ]) +} + +SignatureRequest.prototype.msgHexToText = function (hex) { + try { + const stripped = ethUtil.stripHexPrefix(hex) + const buff = Buffer.from(stripped, 'hex') + return buff.toString('utf8') + } catch (e) { + return hex + } +} + +SignatureRequest.prototype.renderBody = function () { + let rows + + const { txData } = this.props + const { type, msgParams: { data } } = txData + + if (type === 'personal_sign') { + rows = [{ name: 'Message:', value: this.msgHexToText(data) }] + } + else if (type === 'eth_signTypedData') { + rows = data + } + // given the warning in './pending-msg.js', eth_sign' has not been implemented on NewUI-flat at this time + // else if (type === 'eth_sign') { + // console.log('Not currently supported') + // } + + return h('div.request-signature__body', {}, [ + + this.renderAccountInfo(), + + this.renderRequestInfo(), + + h('div.request-signature__notice', ['You are signing:']), + + h('div.request-signature__rows', [ + + ...rows.map(({ name, value }) => { + return h('div.request-signature__row', [ + h('div.request-signature__row-title', [`${name}:`]), + h('div.request-signature__row-value', value), + ]) + }), + + ]), + + ]) +} + +SignatureRequest.prototype.renderFooter = function () { + const { + goHome, + signPersonalMessage, + signTypedMessage, + cancelPersonalMessage, + cancelTypedMessage, + } = this.props + + const { txData } = this.props + const { type } = txData + + let cancel + let sign + if (type === 'personal_sign') { + cancel = cancelPersonalMessage + sign = signPersonalMessage + } + else if (type === 'eth_signTypedData') { + cancel = cancelTypedMessage + sign = signTypedMessage + } + + return h('div.request-signature__footer', [ + h('div.request-signature__footer__cancel-button', { + onClick: cancel, + }, 'CANCEL'), + h('div.request-signature__footer__sign-button', { + onClick: sign, + }, 'SIGN'), + ]) +} + +SignatureRequest.prototype.render = function () { + return ( + + h('div.request-signature__container', [ + + this.renderHeader(), + + this.renderBody(), + + this.renderFooter(), + + ]) + + ) + +} + -- cgit v1.2.3 From ddf11011c9467209e6b9810dff2df84ea9e4a040 Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 25 Oct 2017 21:58:56 -0230 Subject: Signature request fixes. --- ui/app/components/signature-request.js | 22 ++++++++++++++++------ 1 file changed, 16 insertions(+), 6 deletions(-) (limited to 'ui/app/components/signature-request.js') diff --git a/ui/app/components/signature-request.js b/ui/app/components/signature-request.js index 4df4f9193..35a739a8f 100644 --- a/ui/app/components/signature-request.js +++ b/ui/app/components/signature-request.js @@ -156,20 +156,24 @@ SignatureRequest.prototype.msgHexToText = function (hex) { SignatureRequest.prototype.renderBody = function () { let rows + let notice = 'You are signing:' const { txData } = this.props const { type, msgParams: { data } } = txData if (type === 'personal_sign') { - rows = [{ name: 'Message:', value: this.msgHexToText(data) }] + rows = [{ name: 'Message', value: this.msgHexToText(data) }] } else if (type === 'eth_signTypedData') { rows = data } - // given the warning in './pending-msg.js', eth_sign' has not been implemented on NewUI-flat at this time - // else if (type === 'eth_sign') { - // console.log('Not currently supported') - // } + else if (type === 'eth_sign') { + rows = [{ name: 'Message', value: data }] + notice = `Signing this message can have + dangerous side effects. Only sign messages from + sites you fully trust with your entire account. + This dangerous method will be removed in a future version. ` + } return h('div.request-signature__body', {}, [ @@ -177,7 +181,7 @@ SignatureRequest.prototype.renderBody = function () { this.renderRequestInfo(), - h('div.request-signature__notice', ['You are signing:']), + h('div.request-signature__notice', [notice]), h('div.request-signature__rows', [ @@ -200,6 +204,8 @@ SignatureRequest.prototype.renderFooter = function () { signTypedMessage, cancelPersonalMessage, cancelTypedMessage, + signMessage, + cancelMessage, } = this.props const { txData } = this.props @@ -215,6 +221,10 @@ SignatureRequest.prototype.renderFooter = function () { cancel = cancelTypedMessage sign = signTypedMessage } + else if (type === 'eth_sign') { + cancel = cancelMessage + sign = signMessage + } return h('div.request-signature__footer', [ h('div.request-signature__footer__cancel-button', { -- cgit v1.2.3 From fa95303e1efef03db6c44878b89ccca680639598 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Wed, 25 Oct 2017 18:05:52 -0700 Subject: Sign Typed Request styling fixes --- ui/app/components/signature-request.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'ui/app/components/signature-request.js') diff --git a/ui/app/components/signature-request.js b/ui/app/components/signature-request.js index 35a739a8f..a0ecbe8ec 100644 --- a/ui/app/components/signature-request.js +++ b/ui/app/components/signature-request.js @@ -227,10 +227,10 @@ SignatureRequest.prototype.renderFooter = function () { } return h('div.request-signature__footer', [ - h('div.request-signature__footer__cancel-button', { + h('button.request-signature__footer__cancel-button', { onClick: cancel, }, 'CANCEL'), - h('div.request-signature__footer__sign-button', { + h('button.request-signature__footer__sign-button', { onClick: sign, }, 'SIGN'), ]) -- cgit v1.2.3 From f9fc6cec3b01357dd5bb182b6389426d1f17260a Mon Sep 17 00:00:00 2001 From: Dan Date: Thu, 26 Oct 2017 14:29:22 -0230 Subject: eth_sign warning color --- ui/app/components/signature-request.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) (limited to 'ui/app/components/signature-request.js') diff --git a/ui/app/components/signature-request.js b/ui/app/components/signature-request.js index a0ecbe8ec..e617fdbd6 100644 --- a/ui/app/components/signature-request.js +++ b/ui/app/components/signature-request.js @@ -4,6 +4,8 @@ const inherits = require('util').inherits const Identicon = require('./identicon') const connect = require('react-redux').connect const ethUtil = require('ethereumjs-util') +const classnames = require('classnames') + const PendingTxDetails = require('./pending-personal-msg-details') const AccountDropdownMini = require('./dropdowns/account-dropdown-mini') const BinaryRenderer = require('./binary-renderer') @@ -181,7 +183,12 @@ SignatureRequest.prototype.renderBody = function () { this.renderRequestInfo(), - h('div.request-signature__notice', [notice]), + h('div.request-signature__notice', { + className: classnames({ + 'request-signature__notice': type === 'personal_sign' || type === 'eth_signTypedData', + 'request-signature__warning': type === 'eth_sign', + }) + }, [notice]), h('div.request-signature__rows', [ -- cgit v1.2.3 From 5a94775b3fa22517a71232ebe229ee83e9debcf1 Mon Sep 17 00:00:00 2001 From: Dan Date: Thu, 2 Nov 2017 00:00:33 -0230 Subject: Lint fixes for NewUI-flat. --- ui/app/components/signature-request.js | 5 ----- 1 file changed, 5 deletions(-) (limited to 'ui/app/components/signature-request.js') diff --git a/ui/app/components/signature-request.js b/ui/app/components/signature-request.js index e617fdbd6..529449ff0 100644 --- a/ui/app/components/signature-request.js +++ b/ui/app/components/signature-request.js @@ -6,9 +6,7 @@ const connect = require('react-redux').connect const ethUtil = require('ethereumjs-util') const classnames = require('classnames') -const PendingTxDetails = require('./pending-personal-msg-details') const AccountDropdownMini = require('./dropdowns/account-dropdown-mini') -const BinaryRenderer = require('./binary-renderer') const actions = require('../actions') const { conversionUtil } = require('../conversion-util') @@ -135,8 +133,6 @@ SignatureRequest.prototype.renderRequestIcon = function () { } SignatureRequest.prototype.renderRequestInfo = function () { - const { requester } = this.props - return h('div.request-signature__request-info', [ h('div.request-signature__headline', [ @@ -206,7 +202,6 @@ SignatureRequest.prototype.renderBody = function () { SignatureRequest.prototype.renderFooter = function () { const { - goHome, signPersonalMessage, signTypedMessage, cancelPersonalMessage, -- cgit v1.2.3 From 56e9f98bd05de8ae26f653d15eec4304f0c72155 Mon Sep 17 00:00:00 2001 From: Dan Date: Thu, 2 Nov 2017 09:45:59 -0230 Subject: More lint fixes --- ui/app/components/signature-request.js | 28 ++++++++++++---------------- 1 file changed, 12 insertions(+), 16 deletions(-) (limited to 'ui/app/components/signature-request.js') diff --git a/ui/app/components/signature-request.js b/ui/app/components/signature-request.js index 529449ff0..c5cc23aa8 100644 --- a/ui/app/components/signature-request.js +++ b/ui/app/components/signature-request.js @@ -27,13 +27,13 @@ function mapStateToProps (state) { requester: null, requesterAddress: null, accounts: accountsWithSendEtherInfoSelector(state), - conversionRate: conversionRateSelector(state) + conversionRate: conversionRateSelector(state), } } function mapDispatchToProps (dispatch) { return { - goHome: () => dispatch(actions.goHome()) + goHome: () => dispatch(actions.goHome()), } } @@ -84,7 +84,7 @@ SignatureRequest.prototype.renderAccountDropdown = function () { dropdownOpen: accountDropdownOpen, openDropdown: () => this.setState({ accountDropdownOpen: true }), closeDropdown: () => this.setState({ accountDropdownOpen: false }), - }) + }), ]) } @@ -113,7 +113,7 @@ SignatureRequest.prototype.renderAccountInfo = function () { return h('div.request-signature__account-info', [ this.renderAccountDropdown(), - + this.renderRequestIcon(), this.renderBalance(), @@ -128,7 +128,7 @@ SignatureRequest.prototype.renderRequestIcon = function () { h(Identicon, { diameter: 40, address: requesterAddress, - }) + }), ]) } @@ -137,7 +137,7 @@ SignatureRequest.prototype.renderRequestInfo = function () { h('div.request-signature__headline', [ `Your signature is being requested`, - ]) + ]), ]) } @@ -161,11 +161,9 @@ SignatureRequest.prototype.renderBody = function () { if (type === 'personal_sign') { rows = [{ name: 'Message', value: this.msgHexToText(data) }] - } - else if (type === 'eth_signTypedData') { + } else if (type === 'eth_signTypedData') { rows = data - } - else if (type === 'eth_sign') { + } else if (type === 'eth_sign') { rows = [{ name: 'Message', value: data }] notice = `Signing this message can have dangerous side effects. Only sign messages from @@ -183,14 +181,14 @@ SignatureRequest.prototype.renderBody = function () { className: classnames({ 'request-signature__notice': type === 'personal_sign' || type === 'eth_signTypedData', 'request-signature__warning': type === 'eth_sign', - }) + }), }, [notice]), h('div.request-signature__rows', [ ...rows.map(({ name, value }) => { return h('div.request-signature__row', [ - h('div.request-signature__row-title', [`${name}:`]), + h('div.request-signature__row-title', [`${name}:`]), h('div.request-signature__row-value', value), ]) }), @@ -218,12 +216,10 @@ SignatureRequest.prototype.renderFooter = function () { if (type === 'personal_sign') { cancel = cancelPersonalMessage sign = signPersonalMessage - } - else if (type === 'eth_signTypedData') { + } else if (type === 'eth_signTypedData') { cancel = cancelTypedMessage sign = signTypedMessage - } - else if (type === 'eth_sign') { + } else if (type === 'eth_sign') { cancel = cancelMessage sign = signMessage } -- cgit v1.2.3