diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index c40a8c3b6..b8b9d9c1c 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -407,6 +407,9 @@ "message": "Get Ether from a faucet for the $1", "description": "Displays network name for Ether faucet" }, + "getYourTrezor": { + "message": "Don't have a TREZOR hardware wallet? Order yours now!" + }, "greaterThanMin": { "message": "must be greater than or equal to $1.", "description": "helper for inputting hex as decimal input" 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 0dd8e285b..8d9980b10 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 @@ -46,6 +46,12 @@ class ConnectScreen extends Component { { onClick: this.props.connectToTrezor.bind(this) }, this.props.btnText ), + h('div.hw-connect__get-trezor', {}, [ + h('a', { + href: 'https://shop.trezor.io/?a=metamask', + target: '_blank', + }, this.context.t('getYourTrezor')), + ]), ]) ) } diff --git a/ui/app/css/itcss/components/new-account.scss b/ui/app/css/itcss/components/new-account.scss index e11c10dfe..4552f0bf2 100644 --- a/ui/app/css/itcss/components/new-account.scss +++ b/ui/app/css/itcss/components/new-account.scss @@ -169,6 +169,21 @@ &__link { color: #2f9ae0; } + + &__get-trezor { + display: flex; + flex-flow: column; + align-items: center; + padding: 30px 30px 0; + width: 305px; + + a { + font-size: 14px; + text-align: center; + color: #2f9ae0; + cursor: pointer; + } + } } .hw-account-list { @@ -278,6 +293,7 @@ a { color: #2f9ae0; + font-size: 14px; cursor: pointer; } }