1 files changed, 32 insertions, 10 deletions

diff --git a/ui/app/components/signature-request.js b/ui/app/components/signature-request.js
index 2e0102d1a..d76eb5ef8 100644
--- a/ui/app/components/signature-request.js
+++ b/ui/app/components/signature-request.js
@@ -8,6 +8,7 @@ const ethUtil = require('ethereumjs-util')
 const classnames = require('classnames')
 const { compose } = require('recompose')
 const { withRouter } = require('react-router-dom')
+const { ObjectInspector } = require('react-inspector')
 
 const AccountDropdownMini = require('./dropdowns/account-dropdown-mini')
 
@@ -23,6 +24,7 @@ const {
 } = require('../selectors.js')
 
 import { clearConfirmTransaction } from '../ducks/confirm-transaction.duck'
+import Button from './button'
 
 const { DEFAULT_ROUTE } = require('../routes')
 
@@ -168,12 +170,29 @@ SignatureRequest.prototype.msgHexToText = function (hex) {
   }
 }
 
+// eslint-disable-next-line react/display-name
+SignatureRequest.prototype.renderTypedDataV3 = function (data) {
+  const { domain, message } = JSON.parse(data)
+  return [
+    h('div.request-signature__typed-container', [
+      domain ? h('div', [
+        h('h1', 'Domain'),
+        h(ObjectInspector, { data: domain, expandLevel: 1, name: 'domain' }),
+      ]) : '',
+      message ? h('div', [
+        h('h1', 'Message'),
+        h(ObjectInspector, { data: message, expandLevel: 1, name: 'message' }),
+      ]) : '',
+    ]),
+  ]
+}
+
 SignatureRequest.prototype.renderBody = function () {
   let rows
   let notice = this.context.t('youSign') + ':'
 
   const { txData } = this.props
-  const { type, msgParams: { data } } = txData
+  const { type, msgParams: { data, version } } = txData
 
   if (type === 'personal_sign') {
     rows = [{ name: this.context.t('message'), value: this.msgHexToText(data) }]
@@ -185,7 +204,7 @@ SignatureRequest.prototype.renderBody = function () {
       h('span.request-signature__help-link', {
         onClick: () => {
           global.platform.openWindow({
-            url: 'https://consensys.zendesk.com/hc/en-us/articles/360004427792',
+            url: 'https://metamask.zendesk.com/hc/en-us/articles/360015488751',
           })
         },
     }, this.context.t('learnMore'))]
@@ -204,9 +223,9 @@ SignatureRequest.prototype.renderBody = function () {
       }),
     }, [notice]),
 
-    h('div.request-signature__rows', [
-
-      ...rows.map(({ name, value }) => {
+    h('div.request-signature__rows', type === 'eth_signTypedData' && version === 'V3' ?
+      this.renderTypedDataV3(data) :
+      rows.map(({ name, value }) => {
         if (typeof value === 'boolean') {
           value = value.toString()
         }
@@ -215,9 +234,7 @@ SignatureRequest.prototype.renderBody = function () {
           h('div.request-signature__row-value', value),
         ])
       }),
-
-    ]),
-
+    ),
   ])
 }
 
@@ -248,7 +265,10 @@ SignatureRequest.prototype.renderFooter = function () {
   }
 
   return h('div.request-signature__footer', [
-    h('button.btn-default.btn--large.request-signature__footer__cancel-button', {
+    h(Button, {
+      type: 'default',
+      large: true,
+      className: 'request-signature__footer__cancel-button',
       onClick: event => {
         cancel(event).then(() => {
           this.props.clearConfirmTransaction()
@@ -256,7 +276,9 @@ SignatureRequest.prototype.renderFooter = function () {
         })
       },
     }, this.context.t('cancel')),
-    h('button.btn-primary.btn--large', {
+    h(Button, {
+      type: 'primary',
+      large: true,
       onClick: event => {
         sign(event).then(() => {
           this.props.clearConfirmTransaction()