Render personal_sign messages as utf-8 text

Calls to `personal_sign` are now:

- When hex encoded, preserved as hex encoded, but displayed as utf-8 text.
- When not hex encoded, decoded as utf-8 text as hex for signing.
- The messages proposed for signing are displayed as UTF-8 text.
- When the message cannot be rendered as UTF-8 text, it is displayed as hexadecimal.

Fixes #1173

2 files changed, 46 insertions, 12 deletions

diff --git a/ui/app/components/binary-renderer.js b/ui/app/components/binary-renderer.js
new file mode 100644
index 000000000..a9d49b128
--- /dev/null
+++ b/ui/app/components/binary-renderer.js
@@ -0,0 +1,43 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const ethUtil = require('ethereumjs-util')
+
+module.exports = BinaryRenderer
+
+inherits(BinaryRenderer, Component)
+function BinaryRenderer () {
+  Component.call(this)
+}
+
+BinaryRenderer.prototype.render = function () {
+  const props = this.props
+  const { value } = props
+  const text = this.hexToText(value)
+
+  return (
+    h('textarea.font-small', {
+      readOnly: true,
+      style: {
+        width: '315px',
+        maxHeight: '210px',
+        resize: 'none',
+        border: 'none',
+        background: 'white',
+        padding: '3px',
+      },
+      defaultValue: text,
+    })
+  )
+}
+
+BinaryRenderer.prototype.hexToText = function (hex) {
+  try {
+    const stripped = ethUtil.stripHexPrefix(hex)
+    const buff = Buffer.from(stripped, 'hex')
+    return buff.toString('utf8')
+  } catch (e) {
+    return hex
+  }
+}
+
diff --git a/ui/app/components/pending-personal-msg-details.js b/ui/app/components/pending-personal-msg-details.js
index ffd11ca0b..afd04fc51 100644
--- a/ui/app/components/pending-personal-msg-details.js
+++ b/ui/app/components/pending-personal-msg-details.js
@@ -3,6 +3,7 @@ const h = require('react-hyperscript')
 const inherits = require('util').inherits
 
 const AccountPanel = require('./account-panel')
+const BinaryRenderer = require('./binary-renderer')
 
 module.exports = PendingMsgDetails
 
@@ -21,6 +22,7 @@ PendingMsgDetails.prototype.render = function () {
   var account = state.accounts[address] || { address: address }
 
   var { data } = msgParams
+  console.dir({ msgParams })
 
   return (
     h('div', {
@@ -41,18 +43,7 @@ PendingMsgDetails.prototype.render = function () {
       // message data
       h('div', [
         h('label.font-small', { style: { display: 'block' } }, 'MESSAGE'),
-        h('textarea.font-small', {
-          readOnly: true,
-          style: {
-            width: '315px',
-            maxHeight: '210px',
-            resize: 'none',
-            border: 'none',
-            background: 'white',
-            padding: '3px',
-          },
-          defaultValue: data,
-        }),
+        h(BinaryRenderer, { value: data }),
       ]),
 
     ])