diff options
| -rw-r--r-- | ui/app/components/pages/create-account/connect-hardware.js | 27 | ||||
| -rw-r--r-- | ui/app/css/itcss/components/new-account.scss | 13 |
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; |