diff options
| -rw-r--r-- | app/_locales/en/messages.json | 9 | ||||
| -rw-r--r-- | ui/app/components/pages/create-account/connect-hardware/connect-screen.js | 28 | ||||
| -rw-r--r-- | ui/app/css/itcss/components/new-account.scss | 6 |
3 files changed, 34 insertions, 9 deletions
diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index e1f321c68..658a77e77 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -140,6 +140,12 @@ "connectToTrezor": { "message": "Connect to Trezor" }, + "connectToTrezorHelp": { + "message": "Metamask is able to access your TREZOR ethereum accounts. First make sure your device is connected and unlocked." + }, + "connectToTrezorTrouble": { + "message": "If you are having trouble, make sure you are using the latest version of the TREZOR firmware." + }, "continue": { "message": "Continue" }, @@ -944,6 +950,9 @@ "transfers": { "message": "Transfers" }, + "trezorHardwareWallet": { + "message": "TREZOR Hardware Wallet" + }, "troubleTokenBalances": { "message": "We had trouble loading your token balances. You can view them ", "description": "Followed by a link (here) to view token balances" diff --git a/ui/app/components/pages/create-account/connect-hardware/connect-screen.js b/ui/app/components/pages/create-account/connect-hardware/connect-screen.js index ec6a11b40..cf6353bf8 100644 --- a/ui/app/components/pages/create-account/connect-hardware/connect-screen.js +++ b/ui/app/components/pages/create-account/connect-hardware/connect-screen.js @@ -10,9 +10,9 @@ class ConnectScreen extends Component { renderUnsupportedBrowser () { return ( h('div', {}, [ - h('div.hw-unsupported-browser', [ - h('h3.hw-unsupported-browser__title', {}, this.context.t('browserNotSupported')), - h('p.hw-unsupported-browser__msg', {}, this.context.t('chromeRequiredForTrezor')), + h('div.hw-connect', [ + h('h3.hw-connect__title', {}, this.context.t('browserNotSupported')), + h('p.hw-connect__msg', {}, this.context.t('chromeRequiredForTrezor')), ]), h( 'button.btn-primary.btn--large', @@ -25,18 +25,30 @@ class ConnectScreen extends Component { ) } - renderConnectButton () { - return h( + renderConnectScreen () { + return ( + h('div', {}, [ + h('div.hw-connect', [ + h('h3.hw-connect__title', {}, this.context.t('trezorHardwareWallet')), + h('p.hw-connect__msg', {}, this.context.t('connectToTrezorHelp')), + h('p.hw-connect__msg', {}, [ + this.context.t('connectToTrezorTrouble'), + h('a.___info-link', { url: 'https://support.metamask.io/', target: '_blank'}, this.context.t('learnMore')), + ]), + ]), + h( 'button.btn-primary.btn--large', - { onClick: this.props.connectToTrezor.bind(this), style: { margin: 12 } }, + { onClick: this.props.connectToTrezor.bind(this) }, this.props.btnText - ) + ), + ]) + ) } render () { const isChrome = window.navigator.userAgent.search('Chrome') !== -1 if (isChrome) { - return this.renderConnectButton() + return this.renderConnectScreen() } return this.renderUnsupportedBrowser() } diff --git a/ui/app/css/itcss/components/new-account.scss b/ui/app/css/itcss/components/new-account.scss index 551025df3..3d59081d8 100644 --- a/ui/app/css/itcss/components/new-account.scss +++ b/ui/app/css/itcss/components/new-account.scss @@ -153,7 +153,7 @@ } } -.hw-unsupported-browser { +.hw-connect { &__title { padding-top: 10px; } @@ -164,6 +164,10 @@ margin-top: 15px; margin-bottom: 15px; } + + &__info-link { + color: #2f9ae0; + } } .hw-account-list { |