Signature Request

ui/app/components/dropdowns/account-dropdown-mini.js

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

ui/app/components/pending-personal-msg.js

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

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

ui/app/conf-tx.js

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

ui/app/css/itcss/components/account-dropdown-mini.scss

@@ -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;
+  }
+}

ui/app/css/itcss/components/index.scss

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

ui/app/css/itcss/components/request-signature.scss

@@ -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;
+    }
+  }
+}