TheDude
/
ciphermask
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Signature Request

Browse Source
feature/default_network_editable
Dan 7 years ago committed by Chi Kei Chan
parent 0d39a3a8d4
commit 78836b0ead
7 changed files with 613 additions and 60 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 78
      ui/app/components/dropdowns/account-dropdown-mini.js
  2. 47
      ui/app/components/pending-personal-msg.js
  3. 245
      ui/app/components/signature-request.js
  4. 31
      ui/app/conf-tx.js
  5. 48
      ui/app/css/itcss/components/account-dropdown-mini.scss
  6. 4
      ui/app/css/itcss/components/index.scss
  7. 220
      ui/app/css/itcss/components/request-signature.scss

78
ui/app/components/dropdowns/account-dropdown-mini.js
Unescape View File

@ -0,0 +1,78 @@
const Component = require('react').Component
const h = require('react-hyperscript')
const inherits = require('util').inherits
const Identicon = require('../identicon')
const AccountListItem = require('../send/account-list-item')
module.exports = AccountDropdownMini
inherits(AccountDropdownMini, Component)
function AccountDropdownMini () {
Component.call(this)
}
AccountDropdownMini.prototype.getListItemIcon = function (currentAccount, selectedAccount) {
const listItemIcon = h(`i.fa.fa-check.fa-lg`, { style: { color: '#02c9b1' } })
return currentAccount.address === selectedAccount.address
? listItemIcon
: null
}
AccountDropdownMini.prototype.renderDropdown = function () {
const {
accounts,
selectedAccount,
closeDropdown,
onSelect,
} = this.props
return h('div', {}, [
h('div.account-dropdown-mini__close-area', {
onClick: closeDropdown,
}),
h('div.account-dropdown-mini__list', {}, [
...accounts.map(account => h(AccountListItem, {
account,
displayBalance: false,
displayAddress: false,
handleClick: () => {
onSelect(account)
closeDropdown()
},
icon: this.getListItemIcon(account, selectedAccount),
}))
]),
])
}
AccountDropdownMini.prototype.render = function () {
const {
accounts,
selectedAccount,
openDropdown,
closeDropdown,
dropdownOpen,
} = this.props
return h('div.account-dropdown-mini', {}, [
h(AccountListItem, {
account: selectedAccount,
handleClick: openDropdown,
displayBalance: false,
displayAddress: false,
icon: h(`i.fa.fa-caret-down.fa-lg`, { style: { color: '#dedede' } })
}),
dropdownOpen && this.renderDropdown(),
])
}

47
ui/app/components/pending-personal-msg.js
Unescape View File

@ -1,47 +0,0 @@
const Component = require('react').Component
const h = require('react-hyperscript')
const inherits = require('util').inherits
const PendingTxDetails = require('./pending-personal-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.cancelPersonalMessage,
}, 'Cancel'),
h('button', {
onClick: state.signPersonalMessage,
}, 'Sign'),
]),
])
)
}

245
ui/app/components/signature-request.js
Unescape View File

@ -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(),
])
)
}

31
ui/app/conf-tx.js
Unescape View File

@ -6,9 +6,10 @@ const actions = require('./actions')
const txHelper = require('../lib/tx-helper') const txHelper = require('../lib/tx-helper')
const PendingTx = require('./components/pending-tx') const PendingTx = require('./components/pending-tx')
const PendingMsg = require('./components/pending-msg') const SignatureRequest = require('./components/signature-request')
const PendingPersonalMsg = require('./components/pending-personal-msg') // const PendingMsg = require('./components/pending-msg')
const PendingTypedMsg = require('./components/pending-typed-msg') // const PendingPersonalMsg = require('./components/pending-personal-msg')
// const PendingTypedMsg = require('./components/pending-typed-msg')
const Loading = require('./components/loading') const Loading = require('./components/loading')
// const contentDivider = h('div', { // const contentDivider = h('div', {
@ -102,8 +103,10 @@ ConfirmTxScreen.prototype.render = function () {
cancelTransaction: this.cancelTransaction.bind(this, txData), cancelTransaction: this.cancelTransaction.bind(this, txData),
signMessage: this.signMessage.bind(this, txData), signMessage: this.signMessage.bind(this, txData),
signPersonalMessage: this.signPersonalMessage.bind(this, txData), signPersonalMessage: this.signPersonalMessage.bind(this, txData),
signTypedMessage: this.signTypedMessage.bind(this, txData),
cancelMessage: this.cancelMessage.bind(this, txData), cancelMessage: this.cancelMessage.bind(this, txData),
cancelPersonalMessage: this.cancelPersonalMessage.bind(this, txData), cancelPersonalMessage: this.cancelPersonalMessage.bind(this, txData),
cancelTypedMessage: this.cancelTypedMessage.bind(this, txData),
}) })
} }
@ -119,16 +122,18 @@ function currentTxView (opts) {
} else if (msgParams) { } else if (msgParams) {
log.debug('msgParams detected, rendering pending msg') log.debug('msgParams detected, rendering pending msg')
if (type === 'eth_sign') { return h(SignatureRequest, opts)
log.debug('rendering eth_sign message')
return h(PendingMsg, opts) // if (type === 'eth_sign') {
} else if (type === 'personal_sign') { // log.debug('rendering eth_sign message')
log.debug('rendering personal_sign message') // return h(PendingMsg, opts)
return h(PendingPersonalMsg, opts) // } else if (type === 'personal_sign') {
} else if (type === 'eth_signTypedData') { // log.debug('rendering personal_sign message')
log.debug('rendering eth_signTypedData message') // return h(PendingPersonalMsg, opts)
return h(PendingTypedMsg, opts) // } else if (type === 'eth_signTypedData') {
} // log.debug('rendering eth_signTypedData message')
// return h(PendingTypedMsg, opts)
// }
} }
return h(Loading) return h(Loading)
} }

48
ui/app/css/itcss/components/account-dropdown-mini.scss
Unescape View File

@ -0,0 +1,48 @@
.account-dropdown-mini {
height: 22px;
background-color: $white;
font-family: Roboto;
line-height: 16px;
font-size: 12px;
width: 124px;
&__close-area {
position: fixed;
top: 0;
left: 0;
z-index: 1000;
width: 100%;
height: 100%;
}
&__list {
z-index: 1050;
position: absolute;
height: 180px;
width: 96pxpx;
border: 1px solid $geyser;
border-radius: 4px;
background-color: $white;
box-shadow: 0 3px 6px 0 rgba(0 ,0 ,0 ,.11);
overflow-y: scroll;
}
.account-list-item {
margin-top: 6px;
}
.account-list-item__account-name {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
width: 80px;
}
.account-list-item__top-row {
margin: 0;
}
.account-list-item__icon {
position: initial;
}
}

4
ui/app/css/itcss/components/index.scss
Unescape View File

@ -43,3 +43,7 @@
@import './tab-bar.scss'; @import './tab-bar.scss';
@import './simple-dropdown.scss'; @import './simple-dropdown.scss';
@import './request-signature.scss';
@import './account-dropdown-mini.scss';

220
ui/app/css/itcss/components/request-signature.scss
Unescape View File

@ -0,0 +1,220 @@
.request-signature {
&__container {
height: 619px;
width: 380px;
border-radius: 8px;
background-color: $white;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.08);
display: flex;
flex-flow: column nowrap;
z-index: 25;
align-items: center;
font-family: Roboto;
position: relative;
@media screen and (max-width: $break-small) {
width: 100%;
top: 0;
box-shadow: none;
}
}
&__header {
height: 64px;
width: 100%;
position: relative;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
}
&__header-background {
position: absolute;
background-color: $athens-grey;
z-index: 2;
width: 100%;
height: 100%;
}
&__header__text {
height: 29px;
width: 179px;
color: #5B5D67;
font-family: Roboto;
font-size: 22px;
font-weight: 300;
line-height: 29px;
z-index: 3;
}
&__header__tip-container {
width: 100%;
display: flex;
justify-content: center;
}
&__header__tip {
height: 25px;
width: 25px;
background: $athens-grey;
transform: rotate(45deg);
position: absolute;
bottom: -8px;
z-index: 1;
}
&__account-info {
display: flex;
justify-content: space-between;
margin-top: 18px;
height: 69px;
}
&__account {
color: $dusty-gray;
margin-left: 17px;
}
&__account-text {
font-size: 14px;
}
&__balance {
color: $dusty-gray;
margin-right: 17px;
width: 124px;
}
&__balance-text {
text-align: right;
font-size: 14px;
}
&__balance-value {
text-align: right;
margin-top: 2.5px;
}
&__request-icon {
align-self: flex-end;
}
&__body {
width: 100%;
}
&__request-info {
display: flex;
justify-content: center;
}
&__headline {
height: 48px;
width: 240px;
color: $tundora;
font-family: Roboto;
font-size: 18px;
font-weight: 300;
line-height: 24px;
text-align: center;
margin-top: 20px;
}
&__notice {
height: 19px;
width: 105px;
color: #9B9B9B;
font-family: "Avenir Next";
font-size: 14px;
line-height: 19px;
text-align: center;
margin-top: 21px;
margin-bottom: 11px;
width: 100%;
}
&__rows {
height: 262px;
overflow-y: scroll;
overflow-x: hidden;
border-top: 1px solid $geyser;
@media screen and (max-width: $break-small) {
height: 208px;
}
}
// &__rows::-webkit-scrollbar {
// display: none;
// }
&__row {
height: 74px;
display: flex;
flex-flow: column;
border-bottom: 1px solid $geyser;
}
&__row-title {
height: 22px;
width: 80px;
color: $dusty-gray;
font-family: Roboto;
font-size: 16px;
line-height: 22px;
margin-top: 12px;
margin-left: 18px;
width: 100%;
}
&__row-value {
height: 19px;
color: $scorpion;
font-family: Roboto;
font-size: 14px;
line-height: 19px;
margin-top: 6px;
margin-bottom: 15px;
margin-left: 18px;
width: 95%;
}
&__footer {
height: 108px;
width: 100%;
display: flex;
align-items: center;
justify-content: space-evenly;
font-size: 22px;
position: relative;
&__cancel-button,
&__sign-button {
display: flex;
align-items: center;
justify-content: center;
flex: 1 0 auto;
font-family: Roboto;
font-size: 16px;
font-weight: 300;
height: 55px;
line-height: 32px;
cursor: pointer;
border-radius: 2px;
box-shadow: none;
max-width: 162px;
}
&__cancel-button {
background: none;
border: 1px solid $dusty-gray;
}
&__sign-button {
background-color: $caribbean-green;
border-width: 0;
color: $white;
}
}
}
Write Preview
Loading…
Cancel
Save