Fix iOS Safari with Polyfills (#599)

* Add polyfills, error text to error screen.

* copy update to warn users about ensuring that they only send us non-sensitive info

common/Root.tsx

@@ -21,25 +21,28 @@ interface Props {
 }
 
 interface State {
-  hasError: boolean;
+  error: Error | null;
 }
 
 export default class Root extends Component<Props, State> {
   public state = {
-    hasError: false
+    error: null
   };
 
-  public componentDidCatch() {
+  public componentDidCatch(error) {
-    this.setState({ hasError: true });
+    this.setState({ error });
   }
 
   public render() {
     const { store, history } = this.props;
-    const { hasError } = this.state;
+    const { error } = this.state;
+
+    if (error) {
+      return <ErrorScreen error={error} />;
+    }
+
     // key={Math.random()} = hack for HMR from https://github.com/webpack/webpack-dev-server/issues/395
-    return hasError ? (
+    return (
-      <ErrorScreen />
-    ) : (
       <Provider store={store} key={Math.random()}>
         <Router history={history} key={Math.random()}>
           <div>

common/components/ErrorScreen/index.scss

@@ -5,4 +5,16 @@
   @include cover-message;
   background: $brand-danger;
 
+  code {
+    display: block;
+    word-wrap: break-word;
+    background: rgba(#fff, 0.25);
+    border: 1px solid rgba(#fff, 0.6);
+    color: #FFF;
+    width: 100%;
+    padding: 10px;
+    border-radius: 2px;
+    text-shadow: none;
+    opacity: 0.8;
+  }
 }

common/components/ErrorScreen/index.tsx

@@ -3,9 +3,13 @@ import './index.scss';
 
 const SUBJECT = 'Error!';
 const DESCRIPTION =
-  'I encountered an error while using MyEtherWallet. Here are the steps to re-create the issue: ...';
+  'I encountered an error while using MyEtherWallet. Here are the steps to re-create the issue:\n\nThe full error message:';
 
-const ErrorScreen: React.SFC<{}> = () => {
+interface Props {
+  error: Error;
+}
+
+const ErrorScreen: React.SFC<Props> = ({ error }) => {
   return (
     <div className="ErrorScreen">
       <div className="ErrorScreen-content">
@@ -20,8 +24,14 @@ const ErrorScreen: React.SFC<{}> = () => {
           >
             support@myetherwallet.com
           </a>{' '}
-          if a refresh doesn't fix it (or click it anyway to open a ticket 😊 ).
+          if a refresh doesn't fix it (or click it anyway to open a ticket 😊). If you attach the
+          following error, you'll make it a ton easier to fix the issue.
         </p>
+        <h5>
+          Please make sure the error message does not include any sensitive information before
+          sending it us. We don't want your private keys!
+        </h5>
+        <code>{error.message}</code>
       </div>
     </div>
   );

common/index.html

@@ -97,9 +97,6 @@
         eval('let a = 1;');
         eval('const b = 1');
 
-        // Object.assign
-        Object.assign({}, {});
-
         // Local storage
         window.localStorage.setItem('test', 'test');
         window.localStorage.removeItem('test');

common/index.tsx

@@ -2,6 +2,8 @@
 import 'assets/styles/etherwallet-master.less';
 import 'font-awesome/scss/font-awesome.scss';
 import 'sass/styles.scss';
+import 'babel-polyfill';
+import 'whatwg-fetch';
 import React from 'react';
 import { render } from 'react-dom';
 import Root from './Root';

package.json

@@ -8,6 +8,7 @@
     "npm": ">= 5.0.0"
   },
   "dependencies": {
+    "babel-polyfill": "6.26.0",
     "bip39": "2.4.0",
     "bn.js": "4.11.8",
     "bootstrap-sass": "3.3.7",
@@ -136,6 +137,9 @@
     "prepush": "npm run tslint && npm run tscheck"
   },
   "lint-staged": {
-    "*.{ts,tsx}": ["prettier --write", "git add"]
+    "*.{ts,tsx}": [
+      "prettier --write",
+      "git add"
+    ]
   }
 }