Warn / Prevent Outdated Browsers from Wallet Generation (#329)

common/components/ui/NewTabLink.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 interface AAttributes {
   charset?: string;
+  className?: string;
   coords?: string;
   download?: string;
   href: string;

common/containers/Tabs/GenerateWallet/components/CryptoWarning.scss

@@ -0,0 +1,41 @@
+@import "common/sass/variables";
+
+.CryptoWarning {
+  max-width: 740px;
+  margin: 0 auto;
+  text-align: center;
+
+  &-title {
+    margin-bottom: 15px;
+  }
+
+  &-text {
+    margin-bottom: 30px;
+  }
+
+  &-browsers {
+    &-browser {
+      display: inline-block;
+      width: 86px;
+      margin: 0 25px;
+      color: $text-color;
+      opacity: 0.8;
+      transition: opacity 100ms ease;
+
+      &:hover {
+        opacity: 1;
+      }
+
+      &-icon {
+        width: 100%;
+        height: auto;
+        margin-bottom: 10px;
+      }
+
+      &-name {
+        font-size: 18px;
+        font-weight: 300;
+      }
+    }
+  }
+}

common/containers/Tabs/GenerateWallet/components/CryptoWarning.tsx

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import NewTabLink from 'components/ui/NewTabLink';
+import isMobile from 'utils/isMobile';
+
+import firefoxIcon from 'assets/images/browsers/firefox.svg';
+import chromeIcon from 'assets/images/browsers/chrome.svg';
+import operaIcon from 'assets/images/browsers/opera.svg';
+import './CryptoWarning.scss';
+
+const BROWSERS = [{
+  name: "Firefox",
+  href: "https://www.mozilla.org/en-US/firefox/new/",
+  icon: firefoxIcon,
+}, {
+  name: "Chrome",
+  href: "https://www.google.com/chrome/browser/desktop/index.html",
+  icon: chromeIcon,
+}, {
+  name: "Opera",
+  href: "http://www.opera.com/",
+  icon: operaIcon,
+}];
+
+const CryptoWarning: React.SFC<{}> = () =>
+  <div className="Tab-content-pane">
+    <div className="CryptoWarning">
+      <h2 className="CryptoWarning-title">
+        Your Browser Cannot Generate a Wallet
+      </h2>
+      <p className="CryptoWarning-text">
+        {isMobile ? `
+          MyEtherWallet requires certain features for secure wallet generation
+          that your browser doesn't offer. You can still securely use the site
+          otherwise. To generate a wallet, please use your device's default
+          browser, or switch to a laptop or desktop computer.
+        ` : `
+          MyEtherWallet requires certain features for secure wallet generation
+          that your browser doesn't offer. You can still securely use the site
+          otherwise. To generate a wallet, upgrade to one of the following
+          browsers:
+        `}
+      </p>
+
+      <div className="CryptoWarning-browsers">
+        {BROWSERS.map((browser) =>
+          <NewTabLink
+            key={browser.href}
+            href={browser.href}
+            className="CryptoWarning-browsers-browser"
+          >
+            <div>
+              <img
+                className="CryptoWarning-browsers-browser-icon"
+                src={browser.icon}
+              />
+              <div className="CryptoWarning-browsers-browser-name">
+                {browser.name}
+              </div>
+            </div>
+          </NewTabLink>
+        )}
+      </div>
+    </div>
+  </div>
+
+export default CryptoWarning;

common/containers/Tabs/GenerateWallet/index.tsx

@@ -13,6 +13,7 @@ import { AppState } from 'reducers';
 import DownloadWallet from './components/DownloadWallet';
 import EnterPassword from './components/EnterPassword';
 import PaperWallet from './components/PaperWallet';
+import CryptoWarning from './components/CryptoWarning';
 import TabSection from 'containers/TabSection';
 
 interface Props {
@@ -38,38 +39,43 @@ class GenerateWallet extends Component<Props, {}> {
 
     const AnyEnterPassword = EnterPassword as new () => any;
 
-    switch (activeStep) {
-      case 'password':
-        content = (
-          <AnyEnterPassword
-            walletPasswordForm={this.props.walletPasswordForm}
-            generateNewWallet={this.props.generateNewWallet}
-          />
-        );
-        break;
-
-      case 'download':
-        if (wallet) {
+    if (window.crypto) {
+      switch (activeStep) {
+        case 'password':
           content = (
-            <DownloadWallet
-              wallet={wallet}
-              password={password}
-              continueToPaper={this.props.continueToPaper}
+            <AnyEnterPassword
+              walletPasswordForm={this.props.walletPasswordForm}
+              generateNewWallet={this.props.generateNewWallet}
             />
           );
-        }
-        break;
+          break;
 
-      case 'paper':
-        if (wallet) {
-          content = <PaperWallet wallet={wallet} />;
-        } else {
-          content = <h1>Uh oh. Not sure how you got here.</h1>;
-        }
-        break;
+        case 'download':
+          if (wallet) {
+            content = (
+              <DownloadWallet
+                wallet={wallet}
+                password={password}
+                continueToPaper={this.props.continueToPaper}
+              />
+            );
+          }
+          break;
+
+        case 'paper':
+          if (wallet) {
+            content = <PaperWallet wallet={wallet} />;
+          } else {
+            content = <h1>Uh oh. Not sure how you got here.</h1>;
+          }
+          break;
 
-      default:
-        content = <h1>Uh oh. Not sure how you got here.</h1>;
+        default:
+          content = <h1>Uh oh. Not sure how you got here.</h1>;
+      }
+    }
+    else {
+      content = <CryptoWarning/>;
     }
 
     return (

common/utils/isMobile.ts

@@ -0,0 +1,4 @@
+const isMobile = window && window.navigator ?
+  /iPhone|iPad|iPod|Android/i.test(window.navigator.userAgent) : false;
+
+export default isMobile;