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