added message for non-chrome browsers

2 files changed, 39 insertions, 1 deletions

diff --git a/ui/app/components/pages/create-account/connect-hardware.js b/ui/app/components/pages/create-account/connect-hardware.js
index d022d7487..c51b4c773 100644
--- a/ui/app/components/pages/create-account/connect-hardware.js
+++ b/ui/app/components/pages/create-account/connect-hardware.js
@@ -177,10 +177,35 @@ class ConnectHardwareForm extends Component {
       : null
   }
 
+  renderUnsupportedBrowser () {
+    return (
+      [h('div.hw-unsupported-browser', [
+        h('h3.hw-unsupported-browser__title', {}, 'Bummer! Your Browser is not supported...'),
+        h('p.hw-unsupported-browser__msg', {}, 'You need to use Metamask on Google Chrome in order to connect to your TREZOR device.'),
+      ]),
+      h(
+        'button.btn-primary.btn--large',
+        { onClick: () => global.platform.openWindow({
+          url: 'https://google.com/chrome',
+        }), style: { margin: 12 } },
+        'Download Google Chrome'
+      )]
+    )
+  }
+
+  renderConnectScreen () {
+    const isChrome = window.navigator.userAgent.search('Chrome') !== -1
+    if (isChrome) {
+      return this.renderConnectButton()
+    } else {
+      return this.renderUnsupportedBrowser()
+    }
+  }
+
   render () {
     return h('div.new-account-create-form', [
       this.renderError(),
-      this.renderConnectButton(),
+      this.renderConnectScreen(),
       this.renderAccounts(),
       this.renderPagination(),
       this.renderButtons(),
diff --git a/ui/app/css/itcss/components/new-account.scss b/ui/app/css/itcss/components/new-account.scss
index 2ecc157f1..551025df3 100644
--- a/ui/app/css/itcss/components/new-account.scss
+++ b/ui/app/css/itcss/components/new-account.scss
@@ -153,6 +153,19 @@
   }
 }
 
+.hw-unsupported-browser {
+  &__title {
+    padding-top: 10px;
+  }
+
+  &__msg {
+    font-size: 14px;
+    color: #9b9b9b;
+    margin-top: 15px;
+    margin-bottom: 15px;
+  }
+}
+
 .hw-account-list {
   display: flex;
   flex: 1;