aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorbrunobar79 <brunobar79@gmail.com>2018-08-17 07:39:52 +0800
committerbrunobar79 <brunobar79@gmail.com>2018-08-17 07:39:52 +0800
commit2ea05e303dedfd75cad6fdfddfa82da2ee32e92d (patch)
tree74e77d49c0f80e709f08fd83bffc61dfe1a53aef
parent837be704f531b0b8851d285f269ed48849b0a425 (diff)
downloadtangerine-wallet-browser-2ea05e303dedfd75cad6fdfddfa82da2ee32e92d.tar
tangerine-wallet-browser-2ea05e303dedfd75cad6fdfddfa82da2ee32e92d.tar.gz
tangerine-wallet-browser-2ea05e303dedfd75cad6fdfddfa82da2ee32e92d.tar.bz2
tangerine-wallet-browser-2ea05e303dedfd75cad6fdfddfa82da2ee32e92d.tar.lz
tangerine-wallet-browser-2ea05e303dedfd75cad6fdfddfa82da2ee32e92d.tar.xz
tangerine-wallet-browser-2ea05e303dedfd75cad6fdfddfa82da2ee32e92d.tar.zst
tangerine-wallet-browser-2ea05e303dedfd75cad6fdfddfa82da2ee32e92d.zip
connect screen ready
-rw-r--r--app/_locales/en/messages.json10
-rw-r--r--app/images/ledger-logo.svg1
-rw-r--r--app/images/trezor-logo.svg1
-rw-r--r--ui/app/components/pages/create-account/connect-hardware/connect-screen.js88
-rw-r--r--ui/app/css/itcss/components/new-account.scss63
5 files changed, 131 insertions, 32 deletions
diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 515f8becb..52d11ff1c 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -286,8 +286,8 @@
"downloadStateLogs": {
"message": "Download State Logs"
},
- "dontHaveATrezorWallet": {
- "message": "Don't have a TREZOR hardware wallet?"
+ "dontHaveAHardwareWallet": {
+ "message": "Don’t have a hardware wallet?"
},
"dropped": {
"message": "Dropped"
@@ -424,10 +424,10 @@
"message": "Hardware wallet connected"
},
"hardwareWallets": {
- "message": "Hardware Wallets"
+ "message": "Connect a hardware wallet"
},
"hardwareWalletsMsg": {
- "message": "You can now view your Hardware wallet accounts in MetaMask! Scroll down and read how it works."
+ "message": "Select a hardware wallet you'd like to use with MetaMask"
},
"havingTroubleConnecting": {
"message": "Having trouble connecting?"
@@ -908,7 +908,7 @@
"description": "displays token symbol"
},
"orderOneHere": {
- "message": "Order one here."
+ "message": "Order a Trezor or Ledger and keep your funds in cold storage"
},
"searchTokens": {
"message": "Search Tokens"
diff --git a/app/images/ledger-logo.svg b/app/images/ledger-logo.svg
new file mode 100644
index 000000000..21b99d0e5
--- /dev/null
+++ b/app/images/ledger-logo.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1916.3 516.8" width="2500" height="674"><style>.st0{fill:#333745}</style><g id="squares_1_"><path class="st0" d="M578.2 392.7V24.3h25.6v344.1h175.3v24.3H578.2zm327.5 5.1c-39.7 0-70.4-12.8-93.4-37.1-21.7-24.3-33.3-58.8-33.3-103.6 0-43.5 10.2-79.3 32-104.9 21.7-26.9 49.9-39.7 87-39.7 32 0 57.6 11.5 76.8 33.3 19.2 23 28.1 53.7 28.1 92.1v20.5H804.6c0 37.1 9 66.5 26.9 85.7 16.6 20.5 42.2 29.4 74.2 29.4 15.3 0 29.4-1.3 40.9-3.8 11.5-2.6 26.9-6.4 44.8-14.1v24.3c-15.3 6.4-29.4 11.5-42.2 14.1-14.3 2.6-28.9 3.9-43.5 3.8zM898 135.6c-26.9 0-47.3 9-64 25.6-15.3 17.9-25.6 42.2-28.1 75.5h168.9c0-32-6.4-56.3-20.5-74.2-12.8-18-32-26.9-56.3-26.9zm238-21.8c19.2 0 37.1 3.8 51.2 10.2 14.1 7.7 26.9 19.2 38.4 37.1h1.3c-1.3-21.7-1.3-42.2-1.3-62.7V0h24.3v392.7h-16.6l-6.4-42.2c-20.5 30.7-51.2 47.3-89.6 47.3s-66.5-11.5-87-35.8c-20.5-23-29.4-57.6-29.4-102.3 0-47.3 10.2-83.2 29.4-108.7 19.2-25.6 48.6-37.2 85.7-37.2zm0 21.8c-29.4 0-52.4 10.2-67.8 32-15.3 20.5-23 51.2-23 92.1 0 78 30.7 116.4 90.8 116.4 30.7 0 53.7-9 67.8-26.9 14.1-17.9 21.7-47.3 21.7-89.6v-3.8c0-42.2-7.7-72.9-21.7-90.8-12.8-20.5-35.8-29.4-67.8-29.4zm379.9-16.6v17.9l-56.3 3.8c15.3 19.2 23 39.7 23 61.4 0 26.9-9 47.3-26.9 64-17.9 16.6-40.9 24.3-70.4 24.3-12.8 0-21.7 0-25.6-1.3-10.2 5.1-17.9 11.5-23 17.9-5.1 7.7-7.7 14.1-7.7 23s3.8 15.3 10.2 19.2c6.4 3.8 17.9 6.4 33.3 6.4h47.3c29.4 0 52.4 6.4 67.8 17.9s24.3 29.4 24.3 53.7c0 29.4-11.5 51.2-34.5 66.5-23 15.3-56.3 23-99.8 23-34.5 0-61.4-6.4-80.6-20.5-19.2-12.8-28.1-32-28.1-55 0-19.2 6.4-34.5 17.9-47.3s28.1-20.5 47.3-25.6c-7.7-3.8-15.3-9-19.2-15.3-5-6.2-7.7-13.8-7.7-21.7 0-17.9 11.5-34.5 34.5-48.6-15.3-6.4-28.1-16.6-37.1-30.7-9-14.1-12.8-30.7-12.8-48.6 0-26.9 9-49.9 25.6-66.5 17.9-16.6 40.9-24.3 70.4-24.3 17.9 0 32 1.3 42.2 5.1h85.7v1.3h.2zm-222.6 319.8c0 37.1 28.1 56.3 84.4 56.3 71.6 0 107.5-23 107.5-69.1 0-16.6-5.1-28.1-16.6-35.8-11.5-7.7-29.4-11.5-55-11.5h-44.8c-49.9 1.2-75.5 20.4-75.5 60.1zm21.8-235.4c0 21.7 6.4 37.1 19.2 49.9 12.8 11.5 29.4 17.9 51.2 17.9 23 0 40.9-6.4 52.4-17.9 12.8-11.5 17.9-28.1 17.9-49.9 0-23-6.4-40.9-19.2-52.4-12.8-11.5-29.4-17.9-52.4-17.9-21.7 0-39.7 6.4-51.2 19.2-12.8 11.4-17.9 29.3-17.9 51.1z"/><path class="st0" d="M1640 397.8c-39.7 0-70.4-12.8-93.4-37.1-21.7-24.3-33.3-58.8-33.3-103.6 0-43.5 10.2-79.3 32-104.9 21.7-26.9 49.9-39.7 87-39.7 32 0 57.6 11.5 76.8 33.3 19.2 23 28.1 53.7 28.1 92.1v20.5h-197c0 37.1 9 66.5 26.9 85.7 16.6 20.5 42.2 29.4 74.2 29.4 15.3 0 29.4-1.3 40.9-3.8 11.5-2.6 26.9-6.4 44.8-14.1v24.3c-15.3 6.4-29.4 11.5-42.2 14.1-14.1 2.6-28.2 3.8-44.8 3.8zm-6.4-262.2c-26.9 0-47.3 9-64 25.6-15.3 17.9-25.6 42.2-28.1 75.5h168.9c0-32-6.4-56.3-20.5-74.2-12.8-18-32-26.9-56.3-26.9zm245.6-21.8c11.5 0 24.3 1.3 37.1 3.8l-5.1 24.3c-11.8-2.6-23.8-3.9-35.8-3.8-23 0-42.2 10.2-57.6 29.4-15.3 20.5-23 44.8-23 75.5v149.7h-25.6V119h21.7l2.6 49.9h1.3c11.5-20.5 23-34.5 35.8-42.2 15.4-9 30.7-12.9 48.6-12.9zM333.9 12.8h-183v245.6h245.6V76.7c.1-34.5-28.1-63.9-62.6-63.9zm-239.2 0H64c-34.5 0-64 28.1-64 64v30.7h94.7V12.8zM0 165h94.7v94.7H0V165zm301.9 245.6h30.7c34.5 0 64-28.1 64-64V316h-94.7v94.6zm-151-94.6h94.7v94.7h-94.7V316zM0 316v30.7c0 34.5 28.1 64 64 64h30.7V316H0z"/></g></svg> \ No newline at end of file
diff --git a/app/images/trezor-logo.svg b/app/images/trezor-logo.svg
new file mode 100644
index 000000000..b8d85e3af
--- /dev/null
+++ b/app/images/trezor-logo.svg
@@ -0,0 +1 @@
+<svg id="trezor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2567.5 722.3" width="2567.5" height="722.3"><style>.st0{display:none;fill:#fff;stroke:#000}</style><path id="rect25" class="st0" d="M1186 2932.6h46.2v147H1186v-147z"/><path id="path7" d="M249 0C149.9 0 69.7 80.2 69.7 179.3v67.2C34.9 252.8 0 261.2 0 272.1v350.7s0 9.7 10.9 14.3c39.5 16 194.9 71 230.6 83.6 4.6 1.7 5.9 1.7 7.1 1.7 1.7 0 2.5 0 7.1-1.7 35.7-12.6 191.5-67.6 231-83.6 10.1-4.2 10.5-13.9 10.5-13.9V272.1c0-10.9-34.4-19.7-69.3-25.6v-67.2C428.4 80.2 347.7 0 249 0zm0 85.7c58.4 0 93.7 35.3 93.7 93.7v58.4c-65.5-4.6-121.4-4.6-187.3 0v-58.4c0-58.5 35.3-93.7 93.6-93.7zm-.4 238.1c81.5 0 149.9 6.3 149.9 17.6v218.8c0 3.4-.4 3.8-3.4 5-2.9 1.3-139 50.4-139 50.4s-5.5 1.7-7.1 1.7c-1.7 0-7.1-2.1-7.1-2.1s-136.1-49.1-139-50.4-3.4-1.7-3.4-5V341c-.8-11.3 67.6-17.2 149.1-17.2z"/><g id="g3222" transform="translate(91.363 -287.434) scale(.95575)"><path id="path13" d="M666.6 890V639.3H575v-89.9h285.6v89.9h-90.7V890H666.6z"/><path id="path15" d="M1092 890l-47-107.1h-37.4V890H904.3V549.4h181.8c79.8 0 122.6 52.9 122.6 116.7 0 58.8-34 89.9-61.3 103.3l61.7 120.5H1092zm12.2-223.9c0-18.5-16.4-26.5-33.6-26.5h-63v53.8h63c17.2-.4 33.6-8.4 33.6-27.3z"/><path id="path17" d="M1262.9 890V549.4h258.3v89.9h-155.4v33.6h151.6v89.9h-151.6v37.4h155.4V890h-258.3z"/><path id="path19" d="M1574.9 890.4v-81.9l129.8-168.8h-129.8v-89.9h265.8v81.1l-130.2 169.7h134v89.9l-269.6-.1z"/><path id="path21" d="M1869.7 720.3c0-104.6 81.1-176.4 186.5-176.4 105 0 186.5 71.4 186.5 176.4 0 104.6-81.1 176-186.5 176s-186.5-71.4-186.5-176zm268 0c0-47.5-32.3-85.3-81.9-85.3-49.6 0-81.9 37.8-81.9 85.3s32.3 85.3 81.9 85.3c50 0 81.9-37.8 81.9-85.3z"/><path id="path23" d="M2473.6 890.4l-47-107.1h-37.4v107.1h-103.3V549.8h181.8c79.8 0 122.6 52.9 122.6 116.7 0 58.8-34 89.9-61.3 103.3l61.7 120.5h-117.1zm12.6-224.3c0-18.5-16.4-26.5-33.6-26.5h-63v53.8h63c17.3-.4 33.6-8.4 33.6-27.3z"/></g></svg> \ No newline at end of file
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 0a62f1c1e..ba78daed0 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
@@ -5,6 +5,52 @@ const h = require('react-hyperscript')
class ConnectScreen extends Component {
constructor (props, context) {
super(props)
+ this.state = {
+ selectedDevice: null,
+ }
+ }
+
+ connect = () => {
+ if (this.state.selectedDevice) {
+ this.props.connectToHardwareWallet(this.state.selectedDevice)
+ }
+ return null
+ }
+
+ renderConnectToTrezorButton () {
+ return h(
+ `button.hw-connect__btn${this.state.selectedDevice === 'trezor' ? '.selected' : ''}`,
+ { onClick: _ => this.setState({selectedDevice: 'trezor'}) },
+ h('img.hw-connect__btn__img', {
+ src: 'images/trezor-logo.svg',
+ })
+ )
+ }
+
+ renderConnectToLedgerButton () {
+ return h(
+ `button.hw-connect__btn${this.state.selectedDevice === 'ledger' ? '.selected' : ''}`,
+ { onClick: _ => this.setState({selectedDevice: 'ledger'}) },
+ h('img.hw-connect__btn__img', {
+ src: 'images/ledger-logo.svg',
+ })
+ )
+ }
+
+ renderButtons () {
+ return (
+ h('div', {}, [
+ h('div.hw-connect__btn-wrapper', {}, [
+ this.renderConnectToLedgerButton(),
+ this.renderConnectToTrezorButton(),
+ ]),
+ h(
+ `button.hw-connect__connect-btn${!this.state.selectedDevice ? '.disabled' : ''}`,
+ { onClick: this.connect },
+ this.context.t('connect')
+ ),
+ ])
+ )
}
renderUnsupportedBrowser () {
@@ -36,32 +82,26 @@ class ConnectScreen extends Component {
)
}
- 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')),
- ])
- }
+ getAffiliateLinks () {
+ const links = {
+ trezor: `<a class='hw-connect__get-hw__link' href='https://shop.trezor.io/?a=metamask' target='_blank'>Trezor</a>`,
+ ledger: `<a class='hw-connect__get-hw__link' href='https://shop.trezor.io/?a=metamask' target='_blank'>Ledger</a>`,
+ }
- renderConnectToTrezorButton () {
- return h(
- 'button.btn-primary.btn--large',
- { onClick: this.props.connectToHardwareWallet.bind(this, 'trezor') },
- this.context.t('connectToTrezor')
- )
+ const text = this.context.t('orderOneHere')
+ const response = text.replace('Trezor', links.trezor).replace('Ledger', links.ledger)
+
+ return h('div.hw-connect__get-hw__msg', { dangerouslySetInnerHTML: {__html: response }})
}
- renderConnectToLedgerButton () {
- return h(
- 'button.btn-primary.btn--large',
- { onClick: this.props.connectToHardwareWallet.bind(this, 'ledger') },
- this.context.t('connectToLedger')
- )
+ renderTrezorAffiliateLink () {
+ return h('div.hw-connect__get-hw', {}, [
+ h('p.hw-connect__get-hw__msg', {}, this.context.t(`dontHaveAHardwareWallet`)),
+ this.getAffiliateLinks(),
+ ])
}
+
scrollToTutorial = (e) => {
if (this.referenceNode) this.referenceNode.scrollIntoView({behavior: 'smooth'})
}
@@ -110,8 +150,7 @@ class ConnectScreen extends Component {
return (
h('div.hw-connect__footer', {}, [
h('h3.hw-connect__footer__title', {}, this.context.t(`readyToConnect`)),
- this.renderConnectToTrezorButton(),
- this.renderConnectToLedgerButton(),
+ this.renderButtons(),
h('p.hw-connect__footer__msg', {}, [
this.context.t(`havingTroubleConnecting`),
h('a.hw-connect__footer__link', {
@@ -127,8 +166,7 @@ class ConnectScreen extends Component {
return (
h('div.new-account-connect-form', {}, [
this.renderHeader(),
- this.renderConnectToLedgerButton(),
- this.renderConnectToTrezorButton(),
+ this.renderButtons(),
this.renderTrezorAffiliateLink(),
this.renderLearnMore(),
this.renderTutorialSteps(),
diff --git a/ui/app/css/itcss/components/new-account.scss b/ui/app/css/itcss/components/new-account.scss
index b9e6ac000..ded5d11b5 100644
--- a/ui/app/css/itcss/components/new-account.scss
+++ b/ui/app/css/itcss/components/new-account.scss
@@ -167,7 +167,6 @@
margin-top: 5px;
margin-bottom: 15px;
font-size: 22px;
- text-align: center;
}
&__msg {
@@ -178,6 +177,66 @@
}
}
+ &__btn-wrapper {
+ flex: 1;
+ flex-direction: row;
+ display: flex;
+ }
+
+ &__connect-btn {
+ background-color: #259De5;
+ color: #fff;
+ border: none;
+ width: 315px;
+ min-height: 54px;
+ font-weight: 300;
+ font-size: 14px;
+ margin-bottom: 20px;
+ margin-top: 20px;
+ border-radius: 5px;
+ display: flex;
+ flex: 1;
+ margin-left: 20px;
+ margin-right: 20px;
+ justify-content: center;
+ text-transform: uppercase;
+ }
+
+ &__connect-btn.disabled {
+ cursor: not-allowed;
+ opacity: .5;
+ }
+
+ &__btn {
+ background: #fbfbfb;
+ border: 1px solid #e5e5e5;
+ height: 100px;
+ width: 150px;
+ flex: 1;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 5px;
+
+ &__img {
+ width: 95px;
+ }
+ }
+
+ &__btn.selected {
+ border: 2px solid #00a8ee;
+ width: 149px;
+ }
+
+ &__btn:first-child {
+ margin-right: 15px;
+ margin-left: 20px;
+ }
+
+ &__btn:last-child {
+ margin-right: 20px;
+ }
+
&__hdPath {
display: flex;
flex-direction: row;
@@ -255,7 +314,7 @@
}
}
- &__get-trezor {
+ &__get-hw {
width: 100%;
padding-bottom: 10px;
padding-top: 10px;