diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 069db400d..f9f01f040 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -134,7 +134,7 @@
"confirmTransaction": {
"message": "Confirm Transaction"
},
- "connectHardware": {
+ "connectHardwareWallet": {
"message": "Connect Hardware Wallet"
},
"connect": {
@@ -286,6 +286,9 @@
"downloadStateLogs": {
"message": "Download State Logs"
},
+ "dontHaveATrezorWallet": {
+ "message": "Don't have a TREZOR hardware wallet?"
+ },
"dropped": {
"message": "Dropped"
},
@@ -407,8 +410,8 @@
"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!"
+ "getHelp": {
+ "message": "Get Help."
},
"greaterThanMin": {
"message": "must be greater than or equal to $1.",
@@ -417,6 +420,15 @@
"hardware": {
"message": "hardware"
},
+ "hardwareSupport": {
+ "message": "Hardware Support"
+ },
+ "hardwareSupportMsg": {
+ "message": "You can now view your Hardware accounts in MetaMask! Scroll down and read how it works."
+ },
+ "havingTroubleConnecting": {
+ "message": "Having trouble connecting?"
+ },
"here": {
"message": "here",
"description": "as in -click here- for more information (goes with troubleTokenBalances)"
@@ -515,7 +527,7 @@
"message": "Max"
},
"learnMore": {
- "message": "Learn more."
+ "message": "Learn more"
},
"lessThanMax": {
"message": "must be less than or equal to $1.",
@@ -778,6 +790,9 @@
"removeAccountDescription": {
"message": "This account will be removed from your wallet. Please make sure you have the original seed phrase or private key for this imported account before continuing. You can import or create accounts again from the account drop-down. "
},
+ "readyToConnect": {
+ "message": "Ready to Connect?"
+ },
"rinkeby": {
"message": "Rinkeby Test Network"
},
@@ -874,6 +889,9 @@
"message": "Only send $1 to an Ethereum account address.",
"description": "displays token symbol"
},
+ "orderOneHere": {
+ "message": "Order one here."
+ },
"searchTokens": {
"message": "Search Tokens"
},
@@ -892,6 +910,24 @@
"settings": {
"message": "Settings"
},
+ "step1HardwareWallet": {
+ "message": "1. Connect Hardware Wallet"
+ },
+ "step1HardwareWalletMsg": {
+ "message": "Connect your hardware wallet directly to your computer."
+ },
+ "step2HardwareWallet": {
+ "message": "2. Select an Account"
+ },
+ "step2HardwareWalletMsg": {
+ "message": "Select the account you want to view. You can only choose one at a time."
+ },
+ "step3HardwareWallet": {
+ "message": "3. Start using dApps and more!"
+ },
+ "step3HardwareWalletMsg": {
+ "message": "Use your hardware account like you would with any Ethereum account. Log in to dApps, send Eth, buy and store ERC20 tokens and Non-Fungible tokens like CryptoKitties."
+ },
"info": {
"message": "Info"
},
diff --git a/app/images/hardware-wallet-step-1.svg b/app/images/hardware-wallet-step-1.svg
new file mode 100644
index 000000000..2b6596a43
--- /dev/null
+++ b/app/images/hardware-wallet-step-1.svg
@@ -0,0 +1,44 @@
+
+
\ No newline at end of file
diff --git a/app/images/hardware-wallet-step-2.svg b/app/images/hardware-wallet-step-2.svg
new file mode 100644
index 000000000..9fff05b7e
--- /dev/null
+++ b/app/images/hardware-wallet-step-2.svg
@@ -0,0 +1,81 @@
+
+
\ No newline at end of file
diff --git a/app/images/hardware-wallet-step-3.svg b/app/images/hardware-wallet-step-3.svg
new file mode 100644
index 000000000..4a7655b3b
--- /dev/null
+++ b/app/images/hardware-wallet-step-3.svg
@@ -0,0 +1,42 @@
+
+
\ No newline at end of file
diff --git a/ui/app/components/account-menu/index.js b/ui/app/components/account-menu/index.js
index fc48b60f3..9c063d31e 100644
--- a/ui/app/components/account-menu/index.js
+++ b/ui/app/components/account-menu/index.js
@@ -125,7 +125,7 @@ AccountMenu.prototype.render = function () {
}
},
icon: h('img.account-menu__item-icon', { src: 'images/connect-icon.svg' }),
- text: this.context.t('connectHardware'),
+ text: this.context.t('connectHardwareWallet'),
}),
h(Divider),
h(Item, {
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 d4c479a58..47288c73f 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
@@ -27,34 +27,97 @@ class ConnectScreen extends Component {
)
}
- renderConnectScreen () {
+ renderHeader () {
return (
- h('div.new-account-connect-form', {}, [
- 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.hw-connect__link', {
- href: 'https://support.metamask.io/',
- target: '_blank',
- }, ` ${this.context.t('learnMore')}`),
- ]),
- ]),
- h(
- 'button.btn-primary.btn--large',
- { 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')),
+ h('div.hw-connect__header', {}, [
+ h('h3.hw-connect__header__title', {}, this.context.t(`hardwareSupport`)),
+ h('p.hw-connect__header__msg', {}, this.context.t(`hardwareSupportMsg`)),
+ ])
+ )
+ }
+
+ renderTrezorAffiliateLink () {
+ return h('div.hw-connect__get-trezor', {}, [
+ h('p.hw-connect__get-trezor__msg', {}, this.context.t(`dontHaveATrezorWallet`)),
+ h('a.hw-connect__get-trezor__link', {
+ href: 'https://shop.trezor.io/?a=metamask',
+ target: '_blank',
+ }, this.context.t('orderOneHere')),
+ ])
+ }
+
+ renderConnectToTrezorButton () {
+ return h(
+ 'button.btn-primary.btn--large',
+ { onClick: this.props.connectToTrezor.bind(this) },
+ this.props.btnText
+ )
+ }
+
+ renderLearnMore () {
+ return (
+ h('p.hw-connect__learn-more', {}, [
+ this.context.t('learnMore'),
+ h('img.hw-connect__learn-more__arrow', { src: 'images/caret-right.svg'}),
+ ])
+ )
+ }
+
+ renderTutorialSteps () {
+ const steps = [
+ {
+ asset: 'hardware-wallet-step-1',
+ dimensions: {width: '225px', height: '75px'},
+ },
+ {
+ asset: 'hardware-wallet-step-2',
+ dimensions: {width: '300px', height: '100px'},
+ },
+ {
+ asset: 'hardware-wallet-step-3',
+ dimensions: {width: '120px', height: '90px'},
+ },
+ ]
+
+ return h('.hw-tutorial', {},
+ steps.map((step, i) => (
+ h('div.hw-connect', [
+ h('h3.hw-connect__title', {}, this.context.t(`step${i + 1}HardwareWallet`)),
+ h('p.hw-connect__msg', {}, this.context.t(`step${i + 1}HardwareWalletMsg`)),
+ h('img.hw-connect__step-asset', { src: `images/${step.asset}.svg`, ...step.dimensions }),
+ ])
+ ))
+ )
+ }
+
+ renderFooter () {
+ return (
+ h('div.hw-connect__footer', {}, [
+ h('h3.hw-connect__footer__title', {}, this.context.t(`readyToConnect`)),
+ this.renderConnectToTrezorButton(),
+ h('p.hw-connect__footer__msg', {}, [
+ this.context.t(`havingTroubleConnecting`),
+ h('a.hw-connect__footer__link', {
+ href: '#',
+ target: '_blank',
+ }, this.context.t('getHelp')),
]),
])
)
- }
+ }
+
+ renderConnectScreen () {
+ return (
+ h('div.new-account-connect-form', {}, [
+ this.renderHeader(),
+ this.renderTrezorAffiliateLink(),
+ this.renderConnectToTrezorButton(),
+ this.renderLearnMore(),
+ this.renderTutorialSteps(),
+ this.renderFooter(),
+ ])
+ )
+ }
render () {
if (this.props.browserSupported) {
diff --git a/ui/app/css/itcss/components/new-account.scss b/ui/app/css/itcss/components/new-account.scss
index 0eacf4615..5af743a2e 100644
--- a/ui/app/css/itcss/components/new-account.scss
+++ b/ui/app/css/itcss/components/new-account.scss
@@ -1,9 +1,8 @@
.new-account {
- width: 376px;
+ width: 375px;
background-color: #FFFFFF;
box-shadow: 0 0 7px 0 rgba(0,0,0,0.08);
z-index: 25;
- padding-bottom: 31px;
&__header {
display: flex;
@@ -153,10 +152,51 @@
}
}
+.hw-tutorial {
+ width: 375px;
+ border-top: 1px solid #D2D8DD;
+ border-bottom: 1px solid #D2D8DD;
+ overflow: visible;
+ display: block;
+ padding: 15px 30px;
+}
+
.hw-connect {
+ &__header {
+ &__title {
+ margin-top: 5px;
+ margin-bottom: 15px;
+ font-size: 22px;
+ text-align: center;
+ }
+
+ &__msg {
+ font-size: 14px;
+ color: #9b9b9b;
+ margin-top: 10px;
+ margin-bottom: 0px;
+ }
+ }
+
+ &__learn-more {
+ margin-top: 15px;
+ font-size: 14px;
+ color: #5B5D67;
+ line-height: 19px;
+ text-align: center;
+
+ &__arrow {
+ transform: rotate(90deg);
+ display: block;
+ text-align: center;
+ height: 30px;
+ margin: 0px auto 10px;
+ }
+ }
+
&__title {
padding-top: 10px;
- font-weight: 500;
+ font-weight: 400;
font-size: 18px;
}
@@ -164,27 +204,59 @@
font-size: 14px;
color: #9b9b9b;
margin-top: 10px;
- margin-bottom: 20px;
+ margin-bottom: 15px;
}
&__link {
color: #2f9ae0;
}
- &__get-trezor {
- display: flex;
- flex-flow: column;
- align-items: center;
- padding: 30px 30px 0;
- width: 305px;
+ &__footer {
+ width: 100%;
- a {
+ &__title {
+ padding-top: 15px;
+ padding-bottom: 12px;
+ font-weight: 400;
+ font-size: 18px;
+ text-align: center;
+ }
+
+ &__msg {
+ font-size: 14px;
+ color: #9b9b9b;
+ margin-top: 12px;
+ margin-bottom: 27px;
+ }
+
+ &__link {
+ color: #2f9ae0;
+ margin-left: 5px;
+ }
+ }
+
+ &__get-trezor {
+ width: 100%;
+ padding-bottom: 20px;
+ padding-top: 20px;
+
+ &__msg {
+ font-size: 14px;
+ color: #9b9b9b;
+ }
+
+ &__link {
font-size: 14px;
text-align: center;
color: #2f9ae0;
cursor: pointer;
}
}
+
+ &__step-asset {
+ margin: 0px auto 20px;
+ display: flex;
+ }
}
.hw-account-list {
@@ -303,6 +375,8 @@
flex-flow: column;
align-items: center;
padding: 15px 30px 0;
+ height: 710px;
+ overflow: auto;
&__buttons {
margin-top: 39px;
@@ -316,23 +390,20 @@
min-width: initial;
}
- &__button.btn-primary {
- background-color: #259DE5;
- }
-
- &__button.btn-primary {
+ .btn-primary {
background-color: #259DE5;
color: #FFFFFF;
+ border: none;
+ width: 100%;
+ min-height: 54px;
+ font-weight: 300;
+ font-size: 14px;
}
&__button.btn-primary--disabled {
cursor: not-allowed;
opacity: .5;
}
-
-
-
-
}
.hw-forget-device-container {
@@ -352,7 +423,7 @@
display: flex;
flex-flow: column;
align-items: center;
- padding: 30px 30px 0;
+ padding: 30px;
&__input-label {
color: $scorpion;