aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app
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 /ui/app
parent837be704f531b0b8851d285f269ed48849b0a425 (diff)
downloadtangerine-wallet-browser-2ea05e303dedfd75cad6fdfddfa82da2ee32e92d.tar.gz
tangerine-wallet-browser-2ea05e303dedfd75cad6fdfddfa82da2ee32e92d.tar.zst
tangerine-wallet-browser-2ea05e303dedfd75cad6fdfddfa82da2ee32e92d.zip
connect screen ready
Diffstat (limited to 'ui/app')
-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
2 files changed, 124 insertions, 27 deletions
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;