From 654e2a48bc5f874d5154319a91f49e2c3e959064 Mon Sep 17 00:00:00 2001 From: vbaranov Date: Mon, 29 Oct 2018 19:33:40 +0300 Subject: [PATCH 1/6] message page style fixes --- old-ui/app/components/binary-renderer.js | 2 +- old-ui/app/components/pending-msg-details.js | 8 ++++++-- old-ui/app/components/pending-msg.js | 17 ++++++++++------- .../components/pending-personal-msg-details.js | 3 ++- old-ui/app/components/pending-personal-msg.js | 11 ++++++++--- .../app/components/pending-typed-msg-details.js | 3 ++- old-ui/app/components/pending-typed-msg.js | 10 ++++++++-- old-ui/app/components/typed-message-renderer.js | 2 +- 8 files changed, 38 insertions(+), 18 deletions(-) diff --git a/old-ui/app/components/binary-renderer.js b/old-ui/app/components/binary-renderer.js index 0b6a1f5c2..48f3f053b 100644 --- a/old-ui/app/components/binary-renderer.js +++ b/old-ui/app/components/binary-renderer.js @@ -17,7 +17,7 @@ BinaryRenderer.prototype.render = function () { const text = this.hexToText(value) const defaultStyle = extend({ - width: '315px', + width: '100%', maxHeight: '210px', resize: 'none', border: 'none', diff --git a/old-ui/app/components/pending-msg-details.js b/old-ui/app/components/pending-msg-details.js index 718a22de0..790695bd8 100644 --- a/old-ui/app/components/pending-msg-details.js +++ b/old-ui/app/components/pending-msg-details.js @@ -24,7 +24,7 @@ PendingMsgDetails.prototype.render = function () { h('div', { key: msgData.id, style: { - margin: '10px 20px', + margin: '10px 0px', }, }, [ @@ -37,7 +37,11 @@ PendingMsgDetails.prototype.render = function () { }), // message data - h('.tx-data.flex-column.flex-justify-center.flex-grow.select-none', [ + h('.tx-data.flex-column.flex-justify-center.flex-grow.select-none', { + style: { + margin: '0 30px' + } + }, [ h('.flex-column.flex-space-between', [ h('label.font-small', 'MESSAGE'), h('span.font-small', msgParams.data), diff --git a/old-ui/app/components/pending-msg.js b/old-ui/app/components/pending-msg.js index df2481c97..99c96aa65 100644 --- a/old-ui/app/components/pending-msg.js +++ b/old-ui/app/components/pending-msg.js @@ -18,9 +18,6 @@ PendingMsg.prototype.render = function () { h('div', { key: msgData.id, - style: { - maxWidth: '350px', - }, }, [ // header @@ -33,7 +30,8 @@ PendingMsg.prototype.render = function () { h('.error', { style: { - margin: '10px', + margin: '30px', + width: 'auto', }, }, [ `Signing this message can have @@ -46,8 +44,14 @@ PendingMsg.prototype.render = function () { h(PendingTxDetails, state), // sign + cancel - h('.flex-row.flex-space-around', [ - h('button', { + h('.flex-row.flex-space-around', { + style: { + marginRight: '30px', + float: 'right', + display: 'block', + } + }, [ + h('button.btn-violet', { onClick: state.cancelMessage, }, 'Cancel'), h('button', { @@ -58,4 +62,3 @@ PendingMsg.prototype.render = function () { ) } - diff --git a/old-ui/app/components/pending-personal-msg-details.js b/old-ui/app/components/pending-personal-msg-details.js index 1050513f2..45d5ce9ae 100644 --- a/old-ui/app/components/pending-personal-msg-details.js +++ b/old-ui/app/components/pending-personal-msg-details.js @@ -27,7 +27,7 @@ PendingMsgDetails.prototype.render = function () { h('div', { key: msgData.id, style: { - margin: '10px 20px', + margin: '10px 0px', }, }, [ @@ -43,6 +43,7 @@ PendingMsgDetails.prototype.render = function () { h('div', { style: { height: '260px', + margin: '0 30px', }, }, [ h('label.font-small', { style: { display: 'block' } }, 'MESSAGE'), diff --git a/old-ui/app/components/pending-personal-msg.js b/old-ui/app/components/pending-personal-msg.js index 4542adb28..8ef1d58eb 100644 --- a/old-ui/app/components/pending-personal-msg.js +++ b/old-ui/app/components/pending-personal-msg.js @@ -32,8 +32,14 @@ PendingMsg.prototype.render = function () { h(PendingTxDetails, state), // sign + cancel - h('.flex-row.flex-space-around', [ - h('button', { + h('.flex-row.flex-space-around', { + style: { + marginRight: '30px', + float: 'right', + display: 'block', + } + }, [ + h('button.btn-violet', { onClick: state.cancelPersonalMessage, }, 'Cancel'), h('button', { @@ -44,4 +50,3 @@ PendingMsg.prototype.render = function () { ) } - diff --git a/old-ui/app/components/pending-typed-msg-details.js b/old-ui/app/components/pending-typed-msg-details.js index f95bf43a7..f7de118f5 100644 --- a/old-ui/app/components/pending-typed-msg-details.js +++ b/old-ui/app/components/pending-typed-msg-details.js @@ -27,7 +27,7 @@ PendingMsgDetails.prototype.render = function () { h('div', { key: msgData.id, style: { - margin: '10px 20px', + margin: '10px 0px', }, }, [ @@ -43,6 +43,7 @@ PendingMsgDetails.prototype.render = function () { h('div', { style: { height: '260px', + margin: '0 30px', }, }, [ h('label.font-small', { style: { display: 'block' } }, 'YOU ARE SIGNING'), diff --git a/old-ui/app/components/pending-typed-msg.js b/old-ui/app/components/pending-typed-msg.js index f8926d0a3..828f977d5 100644 --- a/old-ui/app/components/pending-typed-msg.js +++ b/old-ui/app/components/pending-typed-msg.js @@ -32,8 +32,14 @@ PendingMsg.prototype.render = function () { h(PendingTxDetails, state), // sign + cancel - h('.flex-row.flex-space-around', [ - h('button', { + h('.flex-row.flex-space-around', { + style: { + marginRight: '30px', + float: 'right', + display: 'block', + } + }, [ + h('button.btn-violet', { onClick: state.cancelTypedMessage, }, 'Cancel'), h('button', { diff --git a/old-ui/app/components/typed-message-renderer.js b/old-ui/app/components/typed-message-renderer.js index 0dc673b8a..f4341d8f9 100644 --- a/old-ui/app/components/typed-message-renderer.js +++ b/old-ui/app/components/typed-message-renderer.js @@ -25,7 +25,7 @@ TypedMessageRenderer.prototype.render = function () { } const defaultStyle = extend({ - width: '315px', + width: '100%', maxHeight: '210px', resize: 'none', border: 'none', From 5cbcd2f4f0dda18c476e14a026fb3d37159d88d7 Mon Sep 17 00:00:00 2001 From: vbaranov Date: Tue, 30 Oct 2018 13:44:52 +0300 Subject: [PATCH 2/6] new style for sign msg page --- old-ui/app/app.js | 7 ++++++- old-ui/app/components/account-panel.js | 2 +- old-ui/app/components/binary-renderer.js | 5 +++-- old-ui/app/components/pending-msg-details.js | 9 +++++++-- old-ui/app/components/pending-msg.js | 10 +++++++++- old-ui/app/components/pending-personal-msg-details.js | 5 ++++- old-ui/app/components/pending-personal-msg.js | 10 +++++++++- old-ui/app/components/pending-typed-msg-details.js | 5 ++++- old-ui/app/components/pending-typed-msg.js | 10 +++++++++- old-ui/app/components/typed-message-renderer.js | 5 +++-- 10 files changed, 55 insertions(+), 13 deletions(-) diff --git a/old-ui/app/app.js b/old-ui/app/app.js index a3aa70fd9..304d224b3 100644 --- a/old-ui/app/app.js +++ b/old-ui/app/app.js @@ -91,6 +91,8 @@ function mapStateToProps (state) { } App.prototype.render = function () { + console.log('props.currentView:') + console.log(this.props) var props = this.props const { currentView, @@ -106,6 +108,8 @@ App.prototype.render = function () { `Connecting to ${networkName}` : null log.debug('Main ui render function') + const confirmTX = props.currentView.name === 'confTx' + return ( h('.flex-column.full-height', { style: { @@ -124,7 +128,8 @@ App.prototype.render = function () { // panel content h('.app-primary' + (transForward ? '.from-right' : '.from-left'), { style: { - background: (props.isUnlocked || props.currentView.name === 'restoreVault' || props.currentView.name === 'config') ? 'white' : 'transparent', + background: (props.isUnlocked || props.currentView.name === 'restoreVault' || props.currentView.name === 'config') ? confirmTX ? 'linear-gradient(rgb(84, 36, 147), rgb(104, 45, 182))' : 'white' : 'transparent', + height: confirmTX ? '100%' : 'auto', }, }, [ this.renderPrimary(), diff --git a/old-ui/app/components/account-panel.js b/old-ui/app/components/account-panel.js index db3c901e9..c1f941ec7 100644 --- a/old-ui/app/components/account-panel.js +++ b/old-ui/app/components/account-panel.js @@ -36,7 +36,7 @@ AccountPanel.prototype.render = function () { h('.identity-panel.flex-row.flex-space-between', { style: { - background: 'linear-gradient(rgb(84, 36, 147), rgb(104, 45, 182))', + background: ((state.style && state.style.background) || 'linear-gradient(rgb(84, 36, 147), rgb(104, 45, 182))'), padding: '30px', flex: '1 0 auto', cursor: panelState.onClick ? 'pointer' : undefined, diff --git a/old-ui/app/components/binary-renderer.js b/old-ui/app/components/binary-renderer.js index 48f3f053b..eb7dfceb0 100644 --- a/old-ui/app/components/binary-renderer.js +++ b/old-ui/app/components/binary-renderer.js @@ -21,8 +21,9 @@ BinaryRenderer.prototype.render = function () { maxHeight: '210px', resize: 'none', border: 'none', - background: 'white', - padding: '3px', + background: '#542289', + color: 'white', + padding: '20px', }, style) return ( diff --git a/old-ui/app/components/pending-msg-details.js b/old-ui/app/components/pending-msg-details.js index 790695bd8..30432b40a 100644 --- a/old-ui/app/components/pending-msg-details.js +++ b/old-ui/app/components/pending-msg-details.js @@ -34,6 +34,9 @@ PendingMsgDetails.prototype.render = function () { identity: identity, account: account, imageifyIdenticons: state.imageifyIdenticons, + style: { + background: 'transparent' + } }), // message data @@ -43,8 +46,10 @@ PendingMsgDetails.prototype.render = function () { } }, [ h('.flex-column.flex-space-between', [ - h('label.font-small', 'MESSAGE'), - h('span.font-small', msgParams.data), + h('label.font-small', { + style: { color: 'white', margin: '10px 0' } + }, 'MESSAGE'), + h('span.font-small', {style: {color: 'white', wordBreak: 'break-word'}}, msgParams.data), ]), ]), diff --git a/old-ui/app/components/pending-msg.js b/old-ui/app/components/pending-msg.js index 99c96aa65..7ff44e725 100644 --- a/old-ui/app/components/pending-msg.js +++ b/old-ui/app/components/pending-msg.js @@ -18,6 +18,9 @@ PendingMsg.prototype.render = function () { h('div', { key: msgData.id, + style: { + height: '100%' + } }, [ // header @@ -25,6 +28,8 @@ PendingMsg.prototype.render = function () { style: { fontWeight: 'bold', textAlign: 'center', + color: 'white', + margin: '20px', }, }, 'Sign Message'), @@ -51,7 +56,10 @@ PendingMsg.prototype.render = function () { display: 'block', } }, [ - h('button.btn-violet', { + h('button', { + style: { + marginRight: '10px' + }, onClick: state.cancelMessage, }, 'Cancel'), h('button', { diff --git a/old-ui/app/components/pending-personal-msg-details.js b/old-ui/app/components/pending-personal-msg-details.js index 45d5ce9ae..d585e0a33 100644 --- a/old-ui/app/components/pending-personal-msg-details.js +++ b/old-ui/app/components/pending-personal-msg-details.js @@ -37,6 +37,9 @@ PendingMsgDetails.prototype.render = function () { identity: identity, account: account, imageifyIdenticons: state.imageifyIdenticons, + style: { + background: 'transparent' + } }), // message data @@ -46,7 +49,7 @@ PendingMsgDetails.prototype.render = function () { margin: '0 30px', }, }, [ - h('label.font-small', { style: { display: 'block' } }, 'MESSAGE'), + h('label.font-small', { style: { display: 'block', color: 'white', margin: '10px 0' } }, 'MESSAGE'), h(BinaryRenderer, { value: data, style: { diff --git a/old-ui/app/components/pending-personal-msg.js b/old-ui/app/components/pending-personal-msg.js index 8ef1d58eb..5512c2076 100644 --- a/old-ui/app/components/pending-personal-msg.js +++ b/old-ui/app/components/pending-personal-msg.js @@ -18,6 +18,9 @@ PendingMsg.prototype.render = function () { h('div', { key: msgData.id, + style: { + height: '100%' + } }, [ // header @@ -25,6 +28,8 @@ PendingMsg.prototype.render = function () { style: { fontWeight: 'bold', textAlign: 'center', + color: 'white', + margin: '20px', }, }, 'Sign Message'), @@ -39,7 +44,10 @@ PendingMsg.prototype.render = function () { display: 'block', } }, [ - h('button.btn-violet', { + h('button', { + style: { + marginRight: '10px' + }, onClick: state.cancelPersonalMessage, }, 'Cancel'), h('button', { diff --git a/old-ui/app/components/pending-typed-msg-details.js b/old-ui/app/components/pending-typed-msg-details.js index f7de118f5..4fedde933 100644 --- a/old-ui/app/components/pending-typed-msg-details.js +++ b/old-ui/app/components/pending-typed-msg-details.js @@ -37,6 +37,9 @@ PendingMsgDetails.prototype.render = function () { identity: identity, account: account, imageifyIdenticons: state.imageifyIdenticons, + style: { + background: 'transparent' + } }), // message data @@ -46,7 +49,7 @@ PendingMsgDetails.prototype.render = function () { margin: '0 30px', }, }, [ - h('label.font-small', { style: { display: 'block' } }, 'YOU ARE SIGNING'), + h('label.font-small', { style: { display: 'block', color: 'white', margin: '10px 0' } }, 'YOU ARE SIGNING'), h(TypedMessageRenderer, { value: data, version, diff --git a/old-ui/app/components/pending-typed-msg.js b/old-ui/app/components/pending-typed-msg.js index 828f977d5..f43133c0c 100644 --- a/old-ui/app/components/pending-typed-msg.js +++ b/old-ui/app/components/pending-typed-msg.js @@ -18,6 +18,9 @@ PendingMsg.prototype.render = function () { h('div', { key: msgData.id, + style: { + height: '100%' + } }, [ // header @@ -25,6 +28,8 @@ PendingMsg.prototype.render = function () { style: { fontWeight: 'bold', textAlign: 'center', + color: 'white', + margin: '20px', }, }, 'Sign Message'), @@ -39,7 +44,10 @@ PendingMsg.prototype.render = function () { display: 'block', } }, [ - h('button.btn-violet', { + h('button', { + style: { + marginRight: '10px' + }, onClick: state.cancelTypedMessage, }, 'Cancel'), h('button', { diff --git a/old-ui/app/components/typed-message-renderer.js b/old-ui/app/components/typed-message-renderer.js index f4341d8f9..ac2df067f 100644 --- a/old-ui/app/components/typed-message-renderer.js +++ b/old-ui/app/components/typed-message-renderer.js @@ -29,8 +29,9 @@ TypedMessageRenderer.prototype.render = function () { maxHeight: '210px', resize: 'none', border: 'none', - background: 'white', - padding: '3px', + background: '#542289', + color: 'white', + padding: '20px', overflow: 'scroll', }, style) From 50431d8e484a020e16c6e00b5e444ebe0a7f3ef2 Mon Sep 17 00:00:00 2001 From: vbaranov Date: Tue, 30 Oct 2018 13:47:59 +0300 Subject: [PATCH 3/6] eslint fixes --- old-ui/app/components/pending-msg-details.js | 10 +++++----- old-ui/app/components/pending-msg.js | 8 ++++---- old-ui/app/components/pending-personal-msg-details.js | 4 ++-- old-ui/app/components/pending-personal-msg.js | 8 ++++---- old-ui/app/components/pending-typed-msg-details.js | 4 ++-- old-ui/app/components/pending-typed-msg.js | 8 ++++---- 6 files changed, 21 insertions(+), 21 deletions(-) diff --git a/old-ui/app/components/pending-msg-details.js b/old-ui/app/components/pending-msg-details.js index 30432b40a..5ff2caebd 100644 --- a/old-ui/app/components/pending-msg-details.js +++ b/old-ui/app/components/pending-msg-details.js @@ -35,19 +35,19 @@ PendingMsgDetails.prototype.render = function () { account: account, imageifyIdenticons: state.imageifyIdenticons, style: { - background: 'transparent' - } + background: 'transparent', + }, }), // message data h('.tx-data.flex-column.flex-justify-center.flex-grow.select-none', { style: { - margin: '0 30px' - } + margin: '0 30px', + }, }, [ h('.flex-column.flex-space-between', [ h('label.font-small', { - style: { color: 'white', margin: '10px 0' } + style: { color: 'white', margin: '10px 0' }, }, 'MESSAGE'), h('span.font-small', {style: {color: 'white', wordBreak: 'break-word'}}, msgParams.data), ]), diff --git a/old-ui/app/components/pending-msg.js b/old-ui/app/components/pending-msg.js index 7ff44e725..e9aea5dd3 100644 --- a/old-ui/app/components/pending-msg.js +++ b/old-ui/app/components/pending-msg.js @@ -19,8 +19,8 @@ PendingMsg.prototype.render = function () { h('div', { key: msgData.id, style: { - height: '100%' - } + height: '100%', + }, }, [ // header @@ -54,11 +54,11 @@ PendingMsg.prototype.render = function () { marginRight: '30px', float: 'right', display: 'block', - } + }, }, [ h('button', { style: { - marginRight: '10px' + marginRight: '10px', }, onClick: state.cancelMessage, }, 'Cancel'), diff --git a/old-ui/app/components/pending-personal-msg-details.js b/old-ui/app/components/pending-personal-msg-details.js index d585e0a33..b213cc0eb 100644 --- a/old-ui/app/components/pending-personal-msg-details.js +++ b/old-ui/app/components/pending-personal-msg-details.js @@ -38,8 +38,8 @@ PendingMsgDetails.prototype.render = function () { account: account, imageifyIdenticons: state.imageifyIdenticons, style: { - background: 'transparent' - } + background: 'transparent', + }, }), // message data diff --git a/old-ui/app/components/pending-personal-msg.js b/old-ui/app/components/pending-personal-msg.js index 5512c2076..027c9491f 100644 --- a/old-ui/app/components/pending-personal-msg.js +++ b/old-ui/app/components/pending-personal-msg.js @@ -19,8 +19,8 @@ PendingMsg.prototype.render = function () { h('div', { key: msgData.id, style: { - height: '100%' - } + height: '100%', + }, }, [ // header @@ -42,11 +42,11 @@ PendingMsg.prototype.render = function () { marginRight: '30px', float: 'right', display: 'block', - } + }, }, [ h('button', { style: { - marginRight: '10px' + marginRight: '10px', }, onClick: state.cancelPersonalMessage, }, 'Cancel'), diff --git a/old-ui/app/components/pending-typed-msg-details.js b/old-ui/app/components/pending-typed-msg-details.js index 4fedde933..10efe8683 100644 --- a/old-ui/app/components/pending-typed-msg-details.js +++ b/old-ui/app/components/pending-typed-msg-details.js @@ -38,8 +38,8 @@ PendingMsgDetails.prototype.render = function () { account: account, imageifyIdenticons: state.imageifyIdenticons, style: { - background: 'transparent' - } + background: 'transparent', + }, }), // message data diff --git a/old-ui/app/components/pending-typed-msg.js b/old-ui/app/components/pending-typed-msg.js index f43133c0c..75e28b3cc 100644 --- a/old-ui/app/components/pending-typed-msg.js +++ b/old-ui/app/components/pending-typed-msg.js @@ -19,8 +19,8 @@ PendingMsg.prototype.render = function () { h('div', { key: msgData.id, style: { - height: '100%' - } + height: '100%', + }, }, [ // header @@ -42,11 +42,11 @@ PendingMsg.prototype.render = function () { marginRight: '30px', float: 'right', display: 'block', - } + }, }, [ h('button', { style: { - marginRight: '10px' + marginRight: '10px', }, onClick: state.cancelTypedMessage, }, 'Cancel'), From d8d527b4b23fb9528ca6e8d0f91dc1b6e6f91a4b Mon Sep 17 00:00:00 2001 From: vbaranov Date: Tue, 30 Oct 2018 17:30:51 +0300 Subject: [PATCH 4/6] react-hyperscript to JSX --- old-ui/app/components/pending-msg-details.js | 84 ++++++---------- old-ui/app/components/pending-msg.js | 86 +++++----------- .../pending-personal-msg-details.js | 97 ++++++++---------- old-ui/app/components/pending-personal-msg.js | 69 ++++--------- .../components/pending-typed-msg-details.js | 98 ++++++++----------- old-ui/app/components/pending-typed-msg.js | 69 ++++--------- old-ui/app/conf-tx.js | 6 +- 7 files changed, 179 insertions(+), 330 deletions(-) diff --git a/old-ui/app/components/pending-msg-details.js b/old-ui/app/components/pending-msg-details.js index 5ff2caebd..bcb0b1de3 100644 --- a/old-ui/app/components/pending-msg-details.js +++ b/old-ui/app/components/pending-msg-details.js @@ -1,59 +1,37 @@ -const Component = require('react').Component -const h = require('react-hyperscript') -const inherits = require('util').inherits +import React, {Component} from 'react' +import AccountPanel from './account-panel' -const AccountPanel = require('./account-panel') +export default class PendingMsgDetails extends Component { + render () { + var state = this.props + var msgData = state.txData -module.exports = PendingMsgDetails + var msgParams = msgData.msgParams || {} + var address = msgParams.from || state.selectedAddress + var identity = state.identities[address] || { address: address } + var account = state.accounts[address] || { address: address } -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 } - - return ( - h('div', { - key: msgData.id, - style: { - margin: '10px 0px', - }, - }, [ - - // account that will sign - h(AccountPanel, { - showFullAddress: true, - identity: identity, - account: account, - imageifyIdenticons: state.imageifyIdenticons, - style: { - background: 'transparent', - }, - }), - - // message data - h('.tx-data.flex-column.flex-justify-center.flex-grow.select-none', { - style: { + return ( +
+ +
+
+ + {msgParams.data} +
+
+
+ ) + } } diff --git a/old-ui/app/components/pending-msg.js b/old-ui/app/components/pending-msg.js index e9aea5dd3..7019a41c9 100644 --- a/old-ui/app/components/pending-msg.js +++ b/old-ui/app/components/pending-msg.js @@ -1,72 +1,38 @@ -const Component = require('react').Component -const h = require('react-hyperscript') -const inherits = require('util').inherits -const PendingTxDetails = require('./pending-msg-details') +import React, { Component } from 'react' +import PendingTxDetails from './pending-msg-details' -module.exports = PendingMsg +export default class PendingMsg extends Component { + render () { + var state = this.props + var msgData = state.txData -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, - style: { - height: '100%', - }, - }, [ - - // header - h('h3', { - style: { + return ( +
+

Sign message

+
+ 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. +
+ +
+ + +
+
+ ) + } } diff --git a/old-ui/app/components/pending-personal-msg-details.js b/old-ui/app/components/pending-personal-msg-details.js index b213cc0eb..fb71a5d88 100644 --- a/old-ui/app/components/pending-personal-msg-details.js +++ b/old-ui/app/components/pending-personal-msg-details.js @@ -1,64 +1,47 @@ -const Component = require('react').Component -const h = require('react-hyperscript') -const inherits = require('util').inherits +import React, {Component} from 'react' +import AccountPanel from './account-panel' +import BinaryRenderer from './binary-renderer' -const AccountPanel = require('./account-panel') -const BinaryRenderer = require('./binary-renderer') +export default class PendingMsgDetails extends Component { + render () { + var state = this.props + var msgData = state.txData -module.exports = PendingMsgDetails + var msgParams = msgData.msgParams || {} + var address = msgParams.from || state.selectedAddress + var identity = state.identities[address] || { address: address } + var account = state.accounts[address] || { address: address } -inherits(PendingMsgDetails, Component) -function PendingMsgDetails () { - Component.call(this) -} + var { data } = msgParams -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 0px', - }, - }, [ - - // account that will sign - h(AccountPanel, { - showFullAddress: true, - identity: identity, - account: account, - imageifyIdenticons: state.imageifyIdenticons, - style: { - background: 'transparent', - }, - }), - - // message data - h('div', { - style: { + return ( +
+ +
+ + +
+
+ ) + } } - diff --git a/old-ui/app/components/pending-personal-msg.js b/old-ui/app/components/pending-personal-msg.js index 027c9491f..f59d6e873 100644 --- a/old-ui/app/components/pending-personal-msg.js +++ b/old-ui/app/components/pending-personal-msg.js @@ -1,60 +1,29 @@ -const Component = require('react').Component -const h = require('react-hyperscript') -const inherits = require('util').inherits -const PendingTxDetails = require('./pending-personal-msg-details') +import React, { Component } from 'react' +import PendingTxDetails from './pending-personal-msg-details' -module.exports = PendingMsg +export default class PendingMsg extends Component { + render () { + var state = this.props + var msgData = state.txData -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, - style: { - height: '100%', - }, - }, [ - - // header - h('h3', { - style: { + return ( +
+

Sign message

+ +
+ + +
+
+ ) + } } diff --git a/old-ui/app/components/pending-typed-msg-details.js b/old-ui/app/components/pending-typed-msg-details.js index 10efe8683..a50ac7d86 100644 --- a/old-ui/app/components/pending-typed-msg-details.js +++ b/old-ui/app/components/pending-typed-msg-details.js @@ -1,64 +1,48 @@ -const Component = require('react').Component -const h = require('react-hyperscript') -const inherits = require('util').inherits +import React, {Component} from 'react' +import AccountPanel from './account-panel' +import TypedMessageRenderer from './typed-message-renderer' -const AccountPanel = require('./account-panel') -const TypedMessageRenderer = require('./typed-message-renderer') +export default class PendingMsgDetails extends Component { + render () { + var state = this.props + var msgData = state.txData -module.exports = PendingMsgDetails + var msgParams = msgData.msgParams || {} + var address = msgParams.from || state.selectedAddress + var identity = state.identities[address] || { address: address } + var account = state.accounts[address] || { address: address } -inherits(PendingMsgDetails, Component) -function PendingMsgDetails () { - Component.call(this) -} + var { data, version } = msgParams -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, version } = msgParams - - return ( - h('div', { - key: msgData.id, - style: { - margin: '10px 0px', - }, - }, [ - - // account that will sign - h(AccountPanel, { - showFullAddress: true, - identity: identity, - account: account, - imageifyIdenticons: state.imageifyIdenticons, - style: { - background: 'transparent', - }, - }), - - // message data - h('div', { - style: { + return ( +
+ +
+ + +
+
+ ) + } } diff --git a/old-ui/app/components/pending-typed-msg.js b/old-ui/app/components/pending-typed-msg.js index 75e28b3cc..c3f86cb2d 100644 --- a/old-ui/app/components/pending-typed-msg.js +++ b/old-ui/app/components/pending-typed-msg.js @@ -1,60 +1,29 @@ -const Component = require('react').Component -const h = require('react-hyperscript') -const inherits = require('util').inherits -const PendingTxDetails = require('./pending-typed-msg-details') +import React, { Component } from 'react' +import PendingTxDetails from './pending-typed-msg-details' -module.exports = PendingMsg +export default class PendingMsg extends Component { + render () { + var state = this.props + var msgData = state.txData -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, - style: { - height: '100%', - }, - }, [ - - // header - h('h3', { - style: { + return ( +
+

Sign message

+ +
+ + +
+
+ ) + } } diff --git a/old-ui/app/conf-tx.js b/old-ui/app/conf-tx.js index 0218830b9..575e44df7 100644 --- a/old-ui/app/conf-tx.js +++ b/old-ui/app/conf-tx.js @@ -8,9 +8,9 @@ const txHelper = require('../lib/tx-helper') const log = require('loglevel') const PendingTx = require('./components/pending-tx') -const PendingMsg = require('./components/pending-msg') -const PendingPersonalMsg = require('./components/pending-personal-msg') -const PendingTypedMsg = require('./components/pending-typed-msg') +import PendingMsg from './components/pending-msg' +import PendingPersonalMsg from './components/pending-personal-msg' +import PendingTypedMsg from './components/pending-typed-msg' const Loading = require('./components/loading') module.exports = connect(mapStateToProps)(ConfirmTxScreen) From cb6669b77b9f630b28f61fa392a95be5bf6ff50e Mon Sep 17 00:00:00 2001 From: dennistikhomirov Date: Wed, 31 Oct 2018 21:27:12 -0700 Subject: [PATCH 5/6] e2e: add sign data tests --- test/e2e/elements.js | 10 +++++++ test/e2e/metamask.spec.js | 59 ++++++++++++++++++++++++++++++++++++++- 2 files changed, 68 insertions(+), 1 deletion(-) diff --git a/test/e2e/elements.js b/test/e2e/elements.js index d62654958..2077300c3 100644 --- a/test/e2e/elements.js +++ b/test/e2e/elements.js @@ -46,6 +46,16 @@ module.exports = { }, }, screens: { + signMessage: { + buttons: { + sign: By.css('#app-content > div > div.app-primary.from-right > div > div > div.flex-row.flex-space-around > button:nth-child(2)'), + cancel: By.css('#app-content > div > div.app-primary.from-right > div > div > div.flex-row.flex-space-around > button:nth-child(1)'), + }, + title: By.css('#app-content > div > div.app-primary.from-right > div > div > h3'), + error: By.className('error'), + accountName: By.css('#app-content > div > div.app-primary.from-right > div > div > div:nth-child(3) > div.identity-panel.flex-row.flex-space-between > div.identity-data.flex-column.flex-justify-center.flex-grow.select-none > h2'), + message: By.css('#app-content > div > div.app-primary.from-right > div > div > div:nth-child(3) > div.tx-data.flex-column.flex-justify-center.flex-grow.select-none > div > span'), + }, sendTokens: { error: By.className('error flex-center'), errorText: { diff --git a/test/e2e/metamask.spec.js b/test/e2e/metamask.spec.js index fbb806974..55a24f7bd 100644 --- a/test/e2e/metamask.spec.js +++ b/test/e2e/metamask.spec.js @@ -52,7 +52,7 @@ describe('Metamask popup page', async function () { }) after(async function () { - await driver.quit() + // await driver.quit() }) describe('Setup', async function () { @@ -232,7 +232,64 @@ describe('Metamask popup page', async function () { const button = await waitUntilShowUp(screens.info.buttonArrow) await button.click() }) + }) + describe('Sign Data', () => { + + it('simulate sign request ', async function () { + await driver.get('https://danfinlay.github.io/js-eth-personal-sign-examples/') + const button = await waitUntilShowUp(By.id('ethSignButton')) + await button.click() + }) + + it('navigates back to MetaMask popup in the tab', async function () { + if (process.env.SELENIUM_BROWSER === 'chrome') { + await driver.get(`chrome-extension://${extensionId}/popup.html`) + } else if (process.env.SELENIUM_BROWSER === 'firefox') { + await driver.get(`moz-extension://${extensionId}/popup.html`) + } + await delay(700) + }) + + it('error message is displayed and contains text', async function () { + const error = await waitUntilShowUp(screens.signMessage.error) + assert.notEqual(error, false, 'error message isn\'t displayed') + const text = await error.getText() + assert.equal(text.length > 183, true, 'error message hasn\'t text') + }) + + it('account name is displayed and correct', async function () { + const name = await waitUntilShowUp(screens.signMessage.accountName) + assert.notEqual(name, false, 'account name isn\'t displayed') + assert.equal(await name.getText(), 'Account 2', 'account name is incorrect') + }) + + it('title is displayed and correct', async function () { + const title = await waitUntilShowUp(screens.signMessage.title) + assert.notEqual(title, false, 'title isn\'t displayed') + assert.equal(await title.getText(), 'Sign message', 'title is incorrect') + }) + + it('message is displayed and correct', async function () { + const message = await waitUntilShowUp(screens.signMessage.message) + assert.notEqual(message, false, 'message isn\'t displayed') + assert.equal((await message.getText()).length > 32, true, 'message is incorrect') + }) + + it('button \'Cancel\' is enabled and lead to main screen ', async function () { + const button = await waitUntilShowUp(screens.signMessage.buttons.cancel) + assert.equal(await button.isEnabled(), true, 'button isn\'t enabled') + assert.equal(await button.getText(), 'Cancel', 'button has incorrect name') + }) + + it('button \'Sign\' is enabled and lead to main screen ', async function () { + const button = await waitUntilShowUp(screens.signMessage.buttons.sign) + assert.equal(await button.isEnabled(), true, 'button isn\'t enabled') + assert.equal(await button.getText(), 'Sign', 'button has incorrect name') + await click(button) + const identicon = await waitUntilShowUp(screens.main.identicon) + assert.notEqual(identicon, false, 'main screen didn\'t opened') + }) }) describe('Import Account', () => { From 428b39d4af971f8ed81ea1b8bb49569ed5c6b439 Mon Sep 17 00:00:00 2001 From: vbaranov Date: Thu, 1 Nov 2018 22:15:11 +0300 Subject: [PATCH 6/6] Style fix for confirmation page --- old-ui/app/app.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/old-ui/app/app.js b/old-ui/app/app.js index 304d224b3..46f70228f 100644 --- a/old-ui/app/app.js +++ b/old-ui/app/app.js @@ -91,8 +91,6 @@ function mapStateToProps (state) { } App.prototype.render = function () { - console.log('props.currentView:') - console.log(this.props) var props = this.props const { currentView, @@ -108,7 +106,7 @@ App.prototype.render = function () { `Connecting to ${networkName}` : null log.debug('Main ui render function') - const confirmTX = props.currentView.name === 'confTx' + const confirmMsgTx = (props.currentView.name === 'confTx' && Object.keys(props.unapprovedTxs).length === 0) return ( h('.flex-column.full-height', { @@ -128,8 +126,8 @@ App.prototype.render = function () { // panel content h('.app-primary' + (transForward ? '.from-right' : '.from-left'), { style: { - background: (props.isUnlocked || props.currentView.name === 'restoreVault' || props.currentView.name === 'config') ? confirmTX ? 'linear-gradient(rgb(84, 36, 147), rgb(104, 45, 182))' : 'white' : 'transparent', - height: confirmTX ? '100%' : 'auto', + background: (props.isUnlocked || props.currentView.name === 'restoreVault' || props.currentView.name === 'config') ? confirmMsgTx ? 'linear-gradient(rgb(84, 36, 147), rgb(104, 45, 182))' : 'white' : 'transparent', + height: (props.isUnlocked && confirmMsgTx) ? '100%' : 'auto', }, }, [ this.renderPrimary(),