poanetwork
/
nifty-wallet
mirror of https://github.com/poanetwork/nifty-wallet.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request #174 from poanetwork/send-messages 

(Fix) Sign data and recover account pages styles fixes
This commit is contained in:
Victor Baranov 2018-11-06 17:14:33 +03:00 committed by GitHub
parent 5851521673 428b39d4af
commit 686d1af3e4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 280 additions and 304 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
old-ui/app/app.js
View File

@ -106,6 +106,8 @@ App.prototype.render = function () {
`Connecting to ${networkName}` : null
log.debug('Main ui render function')
const confirmMsgTx = (props.currentView.name === 'confTx' && Object.keys(props.unapprovedTxs).length === 0)
return (
h('.flex-column.full-height', {
style: {
@ -124,7 +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') ? 'white' : 'transparent',
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(),

2
old-ui/app/components/account-panel.js
View File

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

7
old-ui/app/components/binary-renderer.js
View File

@ -17,12 +17,13 @@ BinaryRenderer.prototype.render = function () {
const text = this.hexToText(value)
const defaultStyle = extend({
width: '315px',
width: '100%',
maxHeight: '210px',
resize: 'none',
border: 'none',
background: 'white',
padding: '3px',
background: '#542289',
color: 'white',
padding: '20px',
}, style)
return (

77
old-ui/app/components/pending-msg-details.js
View File

@ -1,50 +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 20px',
},
}, [
// account that will sign
h(AccountPanel, {
showFullAddress: true,
identity: identity,
account: account,
imageifyIdenticons: state.imageifyIdenticons,
}),
// message data
h('.tx-data.flex-column.flex-justify-center.flex-grow.select-none', [
h('.flex-column.flex-space-between', [
h('label.font-small', 'MESSAGE'),
h('span.font-small', msgParams.data),
]),
]),
])
)
return (
<div key={msgData.id} style={{margin: '10px 0px'}}>
<AccountPanel
showFullAddress={true}
identity={identity}
account={account}
imageifyIdenticons={state.imageifyIdenticons}
style={{
background: 'transparent',
}}
/>
<div className="tx-data flex-column flex-justify-center flex-grow select-none" style={{
margin: '0 30px',
}}>
<div className="flex-column flex-space-between">
<label className="font-small" style={{color: 'white', margin: '10px 0'}}>MESSAGE</label>
<span className="font-small" style={{color: 'white', wordBreak: 'break-word'}}>{msgParams.data}</span>
</div>
</div>
</div>
)
}
}

89
old-ui/app/components/pending-msg.js
View File

@ -1,61 +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: {
maxWidth: '350px',
},
}, [
// header
h('h3', {
style: {
return (
<div key={msgData.id} style={{height: '100%'}}>
<h3 style={{
fontWeight: 'bold',
textAlign: 'center',
},
}, 'Sign Message'),
h('.error', {
style: {
margin: '10px',
},
}, [
`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. `,
]),
// message details
h(PendingTxDetails, state),
// sign + cancel
h('.flex-row.flex-space-around', [
h('button', {
onClick: state.cancelMessage,
}, 'Cancel'),
h('button', {
onClick: state.signMessage,
}, 'Sign'),
]),
])
)
color: 'white',
margin: '20px',
}}>Sign message</h3>
<div className="error" style={{
margin: '30px',
width: 'auto',
}}>
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.
</div>
<PendingTxDetails {...state}/>
<div className="flex-row flex-space-around" style={{
marginRight: '30px',
float: 'right',
display: 'block',
}}>
<button style={{marginRight: '10px'}} onClick={state.cancelMessage}>Cancel</button>
<button onClick={state.signMessage}>Sign</button>
</div>
</div>
)
}
}

95
old-ui/app/components/pending-personal-msg-details.js
View File

@ -1,60 +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 20px',
},
}, [
// account that will sign
h(AccountPanel, {
showFullAddress: true,
identity: identity,
account: account,
imageifyIdenticons: state.imageifyIdenticons,
}),
// message data
h('div', {
style: {
return (
<div key={msgData.id} style={{margin: '10px 0px'}}>
<AccountPanel
showFullAddress={true}
identity={identity}
account={account}
imageifyIdenticons={state.imageifyIdenticons}
style={{
background: 'transparent',
}}
/>
<div style={{
height: '260px',
},
}, [
h('label.font-small', { style: { display: 'block' } }, 'MESSAGE'),
h(BinaryRenderer, {
value: data,
style: {
height: '215px',
},
}),
]),
])
)
margin: '0 30px',
}}>
<label className="font-small" style={{
display: 'block',
color: 'white',
margin: '10px 0',
}}>MESSAGE</label>
<BinaryRenderer
value={data}
style={{
height: '215px',
}}
/>
</div>
</div>
)
}
}

66
old-ui/app/components/pending-personal-msg.js
View File

@ -1,47 +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,
}, [
// header
h('h3', {
style: {
return (
<div key={msgData.id} style={{height: '100%'}}>
<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.cancelPersonalMessage,
}, 'Cancel'),
h('button', {
onClick: state.signPersonalMessage,
}, 'Sign'),
]),
])
)
color: 'white',
margin: '20px',
}}>Sign message</h3>
<PendingTxDetails {...state}/>
<div className="flex-row flex-space-around" style={{
marginRight: '30px',
float: 'right',
display: 'block',
}}>
<button style={{marginRight: '10px'}} onClick={state.cancelPersonalMessage}>Cancel</button>
<button onClick={state.signPersonalMessage}>Sign</button>
</div>
</div>
)
}
}

96
old-ui/app/components/pending-typed-msg-details.js
View File

@ -1,60 +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 20px',
},
}, [
// account that will sign
h(AccountPanel, {
showFullAddress: true,
identity: identity,
account: account,
imageifyIdenticons: state.imageifyIdenticons,
}),
// message data
h('div', {
style: {
return (
<div key={msgData.id} style={{margin: '10px 0px'}}>
<AccountPanel
showFullAddress={true}
identity={identity}
account={account}
imageifyIdenticons={state.imageifyIdenticons}
style={{
background: 'transparent',
}}
/>
<div style={{
height: '260px',
},
}, [
h('label.font-small', { style: { display: 'block' } }, 'YOU ARE SIGNING'),
h(TypedMessageRenderer, {
value: data,
version,
style: {
height: '215px',
},
}),
]),
])
)
margin: '0 30px',
}}>
<label className="font-small" style={{
display: 'block',
color: 'white',
margin: '10px 0',
}}>YOU ARE SIGNING</label>
<TypedMessageRenderer
value={data}
version={version}
style={{
height: '215px',
}}
/>
</div>
</div>
)
}
}

65
old-ui/app/components/pending-typed-msg.js
View File

@ -1,46 +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,
}, [
// header
h('h3', {
style: {
return (
<div key={msgData.id} style={{height: '100%'}}>
<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'),
]),
])
)
color: 'white',
margin: '20px',
}}>Sign message</h3>
<PendingTxDetails {...state}/>
<div className="flex-row flex-space-around" style={{
marginRight: '30px',
float: 'right',
display: 'block',
}}>
<button style={{marginRight: '10px'}} onClick={state.cancelTypedMessage}>Cancel</button>
<button onClick={state.signTypedMessage}>Sign</button>
</div>
</div>
)
}
}

7
old-ui/app/components/typed-message-renderer.js
View File

@ -25,12 +25,13 @@ TypedMessageRenderer.prototype.render = function () {
}
const defaultStyle = extend({
width: '315px',
width: '100%',
maxHeight: '210px',
resize: 'none',
border: 'none',
background: 'white',
padding: '3px',
background: '#542289',
color: 'white',
padding: '20px',
overflow: 'scroll',
}, style)

6
old-ui/app/conf-tx.js
View File

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

10
test/e2e/elements.js
View File

@ -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: {

59
test/e2e/metamask.spec.js
View File

@ -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', () => {