Allow sign display of markdown (#6707)

js/src/views/Signer/components/SignRequest/signRequest.css

@@ -28,12 +28,12 @@
 }
 
 .signData {
+  background: rgba(255,255,255, 0.25);
   border: 0.25em solid red;
-  margin-left: 2em;
-  padding: 0.5em;
+  font-size: 0.75em;
+  padding: 0.5rem;
   overflow: auto;
-  max-height: 6em;
-  max-width: calc(100% - 2em);
+  max-height: 10em;
 }
 
 .signData > p {

js/src/views/Signer/components/SignRequest/signRequest.js

@@ -18,8 +18,10 @@ import { observer } from 'mobx-react';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
+import ReactMarkdown from 'react-markdown';
 import ReactTooltip from 'react-tooltip';
 
+import { hexToAscii } from '~/api/util/format';
 import HardwareStore from '~/mobx/hardwareStore';
 
 import Account from '../Account';
@@ -29,16 +31,39 @@ import RequestOrigin from '../RequestOrigin';
 import styles from './signRequest.css';
 
 function isAscii (data) {
-  for (var i = 2; i < data.length; i += 2) {
+  for (let i = 2; i < data.length; i += 2) {
     let n = parseInt(data.substr(i, 2), 16);
 
     if (n < 32 || n >= 128) {
       return false;
     }
   }
+
   return true;
 }
 
+function decodeMarkdown (data) {
+  return decodeURIComponent(escape(hexToAscii(data)));
+}
+
+export function isMarkdown (data) {
+  try {
+    const decoded = decodeMarkdown(data);
+
+    for (let i = 0; i < decoded.length; i++) {
+      const code = decoded.charCodeAt(i);
+
+      if (code < 32 && code !== 10) {
+        return false;
+      }
+    }
+
+    return decoded.indexOf('#') !== -1 || decoded.indexOf('*') !== -1;
+  } catch (error) {
+    return false;
+  }
+}
+
 @observer
 class SignRequest extends Component {
   static contextTypes = {
@@ -113,29 +138,26 @@ class SignRequest extends Component {
     );
   }
 
-  renderAsciiDetails (ascii) {
-    return (
-      <div className={ styles.signData }>
-        <p>{ascii}</p>
-      </div>
-    );
-  }
+  renderData (data) {
+    if (isAscii(data)) {
+      return hexToAscii(data);
+    }
+
+    if (isMarkdown(data)) {
+      return (
+        <ReactMarkdown source={ decodeMarkdown(data) } />
+      );
+    }
 
-  renderBinaryDetails (data) {
     return (
-      <div className={ styles.signData }>
-        <p>
-          <FormattedMessage
-            id='signer.signRequest.unknownBinary'
-            defaultMessage='(Unknown binary data)'
-          />
-        </p>
-      </div>
+      <FormattedMessage
+        id='signer.signRequest.unknownBinary'
+        defaultMessage='(Unknown binary data)'
+      />
     );
   }
 
   renderDetails () {
-    const { api } = this.context;
     const { address, data, netVersion, origin, signerStore } = this.props;
     const { hashToSign } = this.state;
     const { balances, externalLink } = signerStore;
@@ -149,12 +171,14 @@ class SignRequest extends Component {
     const tooltip = [
       <FormattedMessage
         id='signer.signRequest.tooltip.hash'
+        key='tooltip.hash'
         defaultMessage='Hash to be signed: {hashToSign}'
         values={ { hashToSign } }
       />,
-      <br />,
+      <br key='tooltip.br' />,
       <FormattedMessage
         id='signer.signRequest.tooltip.data'
+        key='tooltip.data'
         defaultMessage='Data: {data}'
         values={ { data } }
       />
@@ -188,11 +212,9 @@ class SignRequest extends Component {
               defaultMessage='A request to sign data using your account:'
             />
           </p>
-          {
-            isAscii(data)
-              ? this.renderAsciiDetails(api.util.hexToAscii(data))
-              : this.renderBinaryDetails(data)
-          }
+          <div className={ styles.signData }>
+            <p>{ this.renderData(data) }</p>
+          </div>
           <p>
             <strong>
               <FormattedMessage

js/src/views/Signer/components/SignRequest/signRequest.spec.js

@@ -18,7 +18,9 @@ import { shallow } from 'enzyme';
 import React from 'react';
 import sinon from 'sinon';
 
-import SignRequest from './';
+import { asciiToHex } from '~/api/util/format';
+
+import SignRequest, { isMarkdown } from './signRequest';
 
 let component;
 let reduxStore;
@@ -81,4 +83,24 @@ describe('views/Signer/components/SignRequest', () => {
   it('renders', () => {
     expect(component).to.be.ok;
   });
+
+  describe.only('isMarkdown', () => {
+    it('returns true for markdown', () => {
+      const testMd = '# this is some\n\n*markdown*';
+      const encodedMd = asciiToHex(unescape(encodeURIComponent(testMd)));
+
+      expect(isMarkdown(encodedMd)).to.be.true;
+    });
+
+    it('return true with utf-8 markdown', () => {
+      const testMd = '# header\n\n(n) you are not a citizen of, or resident in, or located in, or incorporated or otherwise established in, the People\'s Republic of China 参与方并非中华人民共和国公民，或不常住中华人民共和国，或不位于中华人民共和国境内，或并非在中华人民共和国设立或以其他方式组建; and';
+      const encodedMd = asciiToHex(unescape(encodeURIComponent(testMd)));
+
+      expect(isMarkdown(encodedMd)).to.be.true;
+    });
+
+    it('returns false for randow data', () => {
+      expect(isMarkdown('0x1234')).to.be.false;
+    });
+  });
 });