From 9fd00a4f7005fa3fa518b0cfab553650618b7b57 Mon Sep 17 00:00:00 2001
From: William O'Beirne <wbobeirne@gmail.com>
Date: Mon, 29 Jan 2018 15:51:02 -0500
Subject: [PATCH] MEW-01-011: remove dangerouslySetInnerHTML / Add Lint Rule
 (#955)

---
 common/components/Header/index.tsx  |  9 +++------
 common/config/{data.ts => data.tsx} | 30 ++++++++++++++++-------------
 tslint.json                         |  3 ++-
 3 files changed, 22 insertions(+), 20 deletions(-)
 rename common/config/{data.ts => data.tsx} (77%)

diff --git a/common/components/Header/index.tsx b/common/components/Header/index.tsx
index 96fcc9de..de5517e6 100644
--- a/common/components/Header/index.tsx
+++ b/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">
diff --git a/common/config/data.ts b/common/config/data.tsx
similarity index 77%
rename from common/config/data.ts
rename to common/config/data.tsx
index f975ad6c..b23b0320 100644
--- a/common/config/data.ts
+++ b/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';
diff --git a/tslint.json b/tslint.json
index 122d5c9b..b2d9618b 100644
--- a/tslint.json
+++ b/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"]
 }