New signature request v3 UI

app/_locales/en/messages.json

@@ -1188,6 +1188,9 @@
   "signatureRequest": {
     "message": "Signature Request"
   },
+  "signatureRequest1": {
+    "message": "Message"
+  },
   "signed": {
     "message": "Signed"
   },

ui/app/components/app/index.scss

@@ -84,4 +84,4 @@
 
 @import 'home-notification/index';
 
-@import 'multiple-notifications/index';
+@import 'signature-request/index';

ui/app/components/app/signature-request.js → ui/app/components/app/signature-request-original.js

@@ -243,7 +243,7 @@ SignatureRequest.prototype.renderBody = function () {
   let notice = this.context.t('youSign') + ':'
 
   const { txData } = this.props
-  const { type, msgParams: { data, version } } = txData
+  const { type, msgParams: { data } } = txData
 
   if (type === 'personal_sign') {
     rows = [{ name: this.context.t('message'), value: this.msgHexToText(data) }]
@@ -275,17 +275,15 @@ SignatureRequest.prototype.renderBody = function () {
     }, [notice]),
 
     h('div.request-signature__rows',
-      type === 'eth_signTypedData' && (version === 'V3' || version === 'V4') ?
-        this.renderTypedData(data) :
-        rows.map(({ name, value }) => {
-          if (typeof value === 'boolean') {
-            value = value.toString()
-          }
-          return h('div.request-signature__row', [
-            h('div.request-signature__row-title', [`${name}:`]),
-            h('div.request-signature__row-value', value),
-          ])
-        }),
+      rows.map(({ name, value }, index) => {
+        if (typeof value === 'boolean') {
+          value = value.toString()
+        }
+        return h('div.request-signature__row', { key: `request-signature-row-${index}` }, [
+          h('div.request-signature__row-title', [`${name}:`]),
+          h('div.request-signature__row-value', value),
+        ])
+      })
     ),
   ])
 }

ui/app/components/app/signature-request/index.js

@@ -0,0 +1 @@
+export { default } from './signature-request.container'

ui/app/components/app/signature-request/index.scss

@@ -0,0 +1,96 @@
+@import 'signature-request-footer/index';
+@import 'signature-request-header/index';
+@import 'signature-request-message/index';
+
+.signature-request {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    min-width: 0;
+
+    @media screen and (min-width: 576px) {
+        flex: initial;
+    }
+}
+
+.signature-request-header {
+    flex: 1;
+
+    .network-display__container {
+        padding: 0;
+        justify-content: flex-end;   
+    }
+
+    .network-display__name {
+        font-size: 12px;
+        white-space: nowrap;
+        font-weight: 500;
+    }
+}
+
+.signature-request-content {
+    flex: 1 40%;
+    margin-top: 1rem;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    margin-bottom: 25px;
+    min-height: min-content;
+
+    &__title {
+        font-family: Roboto;
+        font-style: normal;
+        font-weight: 500;
+        font-size: 18px;
+    }
+
+    &__identicon-container {
+        padding: 1rem;
+        flex: 1;
+        position: relative;
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    &__identicon-border {
+        height: 75px;
+        width: 75px;
+        border-radius: 50%;
+        border: 1px solid white;
+        position: absolute;
+        box-shadow: 0 2px 2px 0.5px rgba(0, 0, 0, 0.19);
+    }
+
+    &__identicon-initial {
+        position: absolute;
+        font-family: Roboto;
+        font-style: normal;
+        font-weight: 500;
+        font-size: 60px;
+        color: white;
+        z-index: 1;
+        text-shadow: 0px 4px 6px rgba(0, 0, 0, 0.422);
+    }
+
+    &__info {
+        font-size: 12px;
+    }
+
+    &__info--bolded {
+        font-size: 16px;
+        font-weight: 500;
+    }
+
+    p {
+        color: #999999;
+        font-size: 0.8rem;
+    }
+
+    .identicon {}
+}
+
+.signature-request-footer {
+    flex: 1 1 auto;
+}

ui/app/components/app/signature-request/signature-request-footer/index.js

@@ -0,0 +1 @@
+export { default } from './signature-request-footer.component'

ui/app/components/app/signature-request/signature-request-footer/index.scss

@@ -0,0 +1,18 @@
+.signature-request-footer {
+    display: flex;
+    border-top: 1px solid #d2d8dd;
+
+    button {
+        text-transform: uppercase;
+        flex: 1;
+        margin: 1rem 0.5rem;
+        border-radius: 3px;
+    }
+
+    button:first-child() {
+        margin-left: 1rem;
+    }
+    button:last-child() {
+        margin-right: 1rem;
+    }
+}

ui/app/components/app/signature-request/signature-request-footer/signature-request-footer.component.js

@@ -0,0 +1,24 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import Button from '../../../ui/button'
+
+export default class SignatureRequestFooter extends PureComponent {
+  static propTypes = {
+    cancelAction: PropTypes.func.isRequired,
+    signAction: PropTypes.func.isRequired,
+  }
+
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  render () {
+    const { cancelAction, signAction } = this.props
+    return (
+      <div className="signature-request-footer">
+        <Button onClick={cancelAction} type="default" large>{this.context.t('cancel')}</Button>
+        <Button onClick={signAction} type="primary" large>{this.context.t('sign')}</Button>
+      </div>
+    )
+  }
+}

ui/app/components/app/signature-request/signature-request-header/index.js

@@ -0,0 +1 @@
+export { default } from './signature-request-header.component'

ui/app/components/app/signature-request/signature-request-header/index.scss

@@ -0,0 +1,25 @@
+.signature-request-header {
+  display: flex;
+  padding: 1rem;
+  border-bottom: 1px solid $geyser;
+  justify-content: space-between;
+  font-size: .75rem;
+
+  &--account, &--network {
+    flex: 1;
+  }
+
+  &--account {
+    display: flex;
+    align-items: center;
+
+    .account-list-item__account-name {
+      font-size: 12px;
+      font-weight: 500;
+    }
+
+    .account-list-item__top-row {
+      margin: 0px;
+    }
+  }
+}

ui/app/components/app/signature-request/signature-request-header/signature-request-header.component.js

@@ -0,0 +1,29 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import AccountListItem from '../../../../pages/send/account-list-item/account-list-item.component'
+import NetworkDisplay from '../../network-display'
+
+export default class SignatureRequestHeader extends PureComponent {
+  static propTypes = {
+    selectedAccount: PropTypes.object.isRequired,
+  }
+
+  render () {
+    const { selectedAccount } = this.props
+
+    return (
+      <div className="signature-request-header">
+        <div className="signature-request-header--account">
+          {selectedAccount && <AccountListItem
+            displayBalance={false}
+            account={selectedAccount}
+          />}
+          {name}
+        </div>
+        <div className="signature-request-header--network">
+          <NetworkDisplay colored={false} />
+        </div>
+      </div>
+    )
+  }
+}

ui/app/components/app/signature-request/signature-request-message/index.js

@@ -0,0 +1 @@
+export { default } from './signature-request-message.component'

ui/app/components/app/signature-request/signature-request-message/index.scss

@@ -0,0 +1,67 @@
+.signature-request-message {
+    flex: 1 60%;
+    display: flex;
+    flex-direction: column;
+
+    &__title {
+        font-weight: 500;
+        font-size: 14px;
+        color: #636778;
+        margin-left: 12px;
+    }
+
+    h2 {
+        flex: 1 1 0;
+        text-align: left;
+        font-size: 0.8rem;
+        border-bottom: 1px solid #d2d8dd;
+        padding: 0.5rem;
+        margin: 0;
+        color: #ccc;
+    }
+
+    &--root {
+        flex: 1 100%;
+        background-color: #f8f9fb;
+        padding-bottom: 0.5rem;
+        overflow: auto;
+        padding-left: 12px;
+        padding-right: 12px;
+        width: 360px;
+        font-family: monospace;
+
+        @media screen and (min-width: 576px) {
+            width: auto;
+        }
+    }
+
+    &__type-title {
+        font-family: monospace;
+        font-style: normal;
+        font-weight: normal;
+        font-size: 14px;
+        margin-left: 12px;
+        margin-top: 6px;
+        margin-bottom: 10px;
+    }
+
+    &--node, &--node-leaf {
+        padding-left: 0.8rem;
+
+        &-label {
+            color: #5B5D67;
+        }
+
+        &-value {
+            color: black;
+            margin-left: 0.5rem;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            overflow: hidden;
+        }
+    }
+
+    &--node-leaf {
+        display: flex;
+    }
+}

ui/app/components/app/signature-request/signature-request-message/signature-request-message.component.js

@@ -0,0 +1,50 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+
+export default class SignatureRequestMessage extends PureComponent {
+  static propTypes = {
+    data: PropTypes.object.isRequired,
+  }
+
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  renderNode (data) {
+    return (
+      <div className="signature-request-message--node">
+        {Object.entries(data).map(([ label, value ], i) => (
+          <div
+            className={classnames('signature-request-message--node', {
+              'signature-request-message--node-leaf': typeof value !== 'object' || value === null,
+            })}
+            key={i}
+          >
+            <span className="signature-request-message--node-label">{label}: </span>
+            {
+              typeof value === 'object' && value !== null ?
+                this.renderNode(value)
+                : <span className="signature-request-message--node-value">{value}</span>
+            }
+          </div>
+        ))}
+      </div>
+    )
+  }
+
+
+  render () {
+    const { data } = this.props
+
+    return (
+      <div className="signature-request-message">
+        <div className="signature-request-message__title">{this.context.t('signatureRequest1')}</div>
+        <div className="signature-request-message--root">
+          <div className="signature-request-message__type-title">{this.context.t('signatureRequest1')}</div>
+          {this.renderNode(data)}
+        </div>
+      </div>
+    )
+  }
+}