MEW-01-011: remove dangerouslySetInnerHTML / Add Lint Rule (#955)

common/components/Header/index.tsx

@@ -105,12 +105,9 @@ export default class Header extends PureComponent<Props, State> {
     return (
       <div className="Header">
         {ANNOUNCEMENT_MESSAGE && (
-          <div
-            className={`Header-announcement is-${ANNOUNCEMENT_TYPE}`}
-            dangerouslySetInnerHTML={{
-              __html: ANNOUNCEMENT_MESSAGE
-            }}
-          />
+          <div className={`Header-announcement is-${ANNOUNCEMENT_TYPE}`}>
+            {ANNOUNCEMENT_MESSAGE}
+          </div>
         )}
 
         <section className="Header-branding">

common/config/data.tsx

@@ -1,3 +1,4 @@
+import React from 'react'; // For ANNOUNCEMENT_MESSAGE jsx
 import { getValues } from '../utils/helpers';
 
 export const languages = require('./languages.json');
@@ -8,20 +9,23 @@ export const N_FACTOR = 1024;
 
 // Displays at the top of the site, make message empty string to remove.
 // Type can be primary, warning, danger, success, or info.
-// HTML is allowed inside of the message.
+// Message must be a JSX element if you want to use HTML.
 export const ANNOUNCEMENT_TYPE = 'warning';
-export const ANNOUNCEMENT_MESSAGE = `
-  This is an Alpha build of MyEtherWallet v4. Please only use for testing,
-  or use v3 at <a href='https://myetherwallet.com'>https://myetherwallet.com</a>.
-  <br/>
-  <span class="hidden-xs">
-    If you're interested in recieving updates about the MyEtherWallet V4 Alpha, you can subscribe via
-    <a href="http://myetherwallet.us16.list-manage.com/subscribe?u=afced8afb6eb2968ba407a144&id=15a7c74eab">
-      mailchimp
-    </a>
-    :)
-  </span>
-`;
+export const ANNOUNCEMENT_MESSAGE = (
+  <div>
+    This is an Alpha build of MyEtherWallet v4. Please only use for testing, or use v3 at{' '}
+    <a href="https://myetherwallet.com">{'https://myetherwallet.com'}</a>.
+    <br />
+    <span className="hidden-xs">
+      If you're interested in recieving updates about the MyEtherWallet V4 Alpha, you can subscribe
+      via{' '}
+      <a href="https://myetherwallet.us16.list-manage.com/subscribe?u=afced8afb6eb2968ba407a144&id=15a7c74eab">
+        mailchimp
+      </a>{' '}
+      :)
+    </span>
+  </div>
+);
 
 const etherScan = 'https://etherscan.io';
 const blockChainInfo = 'https://blockchain.info';

tslint.json

@@ -25,7 +25,8 @@
     "comment-format": false,
     "ordered-imports": false,
     "react-anchor-blank-noopener": true,
-    "no-external-http-link": true
+    "no-external-http-link": true,
+    "react-no-dangerous-html": true
   },
   "rulesDirectory": ["node_modules/tslint-microsoft-contrib", "custom_linting_rules"]
 }