diff --git a/common/components/ui/NewTabLink.tsx b/common/components/ui/NewTabLink.tsx index 520986fedb6..8d5a21f5291 100644 --- a/common/components/ui/NewTabLink.tsx +++ b/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; diff --git a/common/containers/Tabs/GenerateWallet/components/CryptoWarning.scss b/common/containers/Tabs/GenerateWallet/components/CryptoWarning.scss new file mode 100644 index 00000000000..4730d57545c --- /dev/null +++ b/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; + } + } + } +} diff --git a/common/containers/Tabs/GenerateWallet/components/CryptoWarning.tsx b/common/containers/Tabs/GenerateWallet/components/CryptoWarning.tsx new file mode 100644 index 00000000000..14e42a1a0cb --- /dev/null +++ b/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<{}> = () => +
+
+

+ Your Browser Cannot Generate a Wallet +

+

+ {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: + `} +

+ +
+ {BROWSERS.map((browser) => + +
+ +
+ {browser.name} +
+
+
+ )} +
+
+
+ +export default CryptoWarning; diff --git a/common/containers/Tabs/GenerateWallet/index.tsx b/common/containers/Tabs/GenerateWallet/index.tsx index da3725782b3..35e833b4195 100644 --- a/common/containers/Tabs/GenerateWallet/index.tsx +++ b/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 { const AnyEnterPassword = EnterPassword as new () => any; - switch (activeStep) { - case 'password': - content = ( - - ); - break; - - case 'download': - if (wallet) { + if (window.crypto) { + switch (activeStep) { + case 'password': content = ( - ); - } - break; + break; - case 'paper': - if (wallet) { - content = ; - } else { - content =

Uh oh. Not sure how you got here.

; - } - break; + case 'download': + if (wallet) { + content = ( + + ); + } + break; + + case 'paper': + if (wallet) { + content = ; + } else { + content =

Uh oh. Not sure how you got here.

; + } + break; - default: - content =

Uh oh. Not sure how you got here.

; + default: + content =

Uh oh. Not sure how you got here.

; + } + } + else { + content = ; } return ( diff --git a/common/utils/isMobile.ts b/common/utils/isMobile.ts new file mode 100644 index 00000000000..bc324ed1090 --- /dev/null +++ b/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;