From 5ef80495cfd47a8f5e4caf4b16842155420de62e Mon Sep 17 00:00:00 2001 From: brunobar79 Date: Fri, 10 Aug 2018 21:54:34 -0400 Subject: refactor to support multiple hw wallets --- ui/app/actions.js | 8 ++--- .../connect-hardware/account-list.js | 9 ++--- .../connect-hardware/connect-screen.js | 14 ++++++-- .../pages/create-account/connect-hardware/index.js | 39 ++++++++++++---------- 4 files changed, 43 insertions(+), 27 deletions(-) (limited to 'ui') diff --git a/ui/app/actions.js b/ui/app/actions.js index bd5d25327..04af9d7c8 100644 --- a/ui/app/actions.js +++ b/ui/app/actions.js @@ -91,7 +91,7 @@ var actions = { connectHardware, checkHardwareStatus, forgetDevice, - unlockTrezorAccount, + unlockHardwareWalletAccount, NEW_ACCOUNT_SCREEN: 'NEW_ACCOUNT_SCREEN', navigateToNewAccountScreen, resetAccount, @@ -702,12 +702,12 @@ function connectHardware (deviceName, page) { } } -function unlockTrezorAccount (index) { - log.debug(`background.unlockTrezorAccount`, index) +function unlockHardwareWalletAccount (index, deviceName) { + log.debug(`background.unlockHardwareWalletAccount`, index, deviceName) return (dispatch, getState) => { dispatch(actions.showLoadingIndication()) return new Promise((resolve, reject) => { - background.unlockTrezorAccount(index, (err, accounts) => { + background.unlockHardwareWalletAccount(index, deviceName, (err, accounts) => { if (err) { log.error(err) dispatch(actions.displayWarning(err.message)) diff --git a/ui/app/components/pages/create-account/connect-hardware/account-list.js b/ui/app/components/pages/create-account/connect-hardware/account-list.js index c722d1f55..730f2df34 100644 --- a/ui/app/components/pages/create-account/connect-hardware/account-list.js +++ b/ui/app/components/pages/create-account/connect-hardware/account-list.js @@ -61,7 +61,7 @@ class AccountList extends Component { h( 'button.hw-list-pagination__button', { - onClick: () => this.props.getPage(-1), + onClick: () => this.props.getPage(-1, this.props.device), }, `< ${this.context.t('prev')}` ), @@ -69,7 +69,7 @@ class AccountList extends Component { h( 'button.hw-list-pagination__button', { - onClick: () => this.props.getPage(1), + onClick: () => this.props.getPage(1, this.props.device), }, `${this.context.t('next')} >` ), @@ -95,7 +95,7 @@ class AccountList extends Component { h( `button.btn-primary.btn--large.new-account-connect-form__button.unlock ${disabled ? '.btn-primary--disabled' : ''}`, { - onClick: this.props.onUnlockAccount.bind(this), + onClick: this.props.onUnlockAccount.bind(this, this.props.device), ...buttonProps, }, [this.context.t('unlock')] @@ -106,7 +106,7 @@ class AccountList extends Component { renderForgetDevice () { return h('div.hw-forget-device-container', {}, [ h('a', { - onClick: this.props.onForgetDevice.bind(this), + onClick: this.props.onForgetDevice.bind(this, this.props.device), }, this.context.t('forgetDevice')), ]) } @@ -125,6 +125,7 @@ class AccountList extends Component { AccountList.propTypes = { + device: PropTypes.string.isRequired, accounts: PropTypes.array.isRequired, onAccountChange: PropTypes.func.isRequired, onForgetDevice: PropTypes.func.isRequired, 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 cb2b86595..af144d410 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 @@ -49,11 +49,19 @@ class ConnectScreen extends Component { renderConnectToTrezorButton () { return h( 'button.btn-primary.btn--large', - { onClick: this.props.connectToTrezor.bind(this) }, + { onClick: this.props.connectToHardwareWallet.bind(this, 'trezor') }, this.props.btnText ) } + renderConnectToLedgerButton () { + return h( + 'button.btn-primary.btn--large', + { onClick: this.props.connectToHardwareWallet.bind(this, 'ledger') }, + this.props.btnText.replace('Trezor', 'Ledger') + ) + } + scrollToTutorial = (e) => { if (this.referenceNode) this.referenceNode.scrollIntoView({behavior: 'smooth'}) } @@ -103,6 +111,7 @@ class ConnectScreen extends Component { h('div.hw-connect__footer', {}, [ h('h3.hw-connect__footer__title', {}, this.context.t(`readyToConnect`)), this.renderConnectToTrezorButton(), + this.renderConnectToLedgerButton(), h('p.hw-connect__footer__msg', {}, [ this.context.t(`havingTroubleConnecting`), h('a.hw-connect__footer__link', { @@ -120,6 +129,7 @@ class ConnectScreen extends Component { this.renderHeader(), this.renderTrezorAffiliateLink(), this.renderConnectToTrezorButton(), + this.renderConnectToLedgerButton(), this.renderLearnMore(), this.renderTutorialSteps(), this.renderFooter(), @@ -136,7 +146,7 @@ class ConnectScreen extends Component { } ConnectScreen.propTypes = { - connectToTrezor: PropTypes.func.isRequired, + connectToHardwareWallet: PropTypes.func.isRequired, btnText: PropTypes.string.isRequired, browserSupported: PropTypes.bool.isRequired, } diff --git a/ui/app/components/pages/create-account/connect-hardware/index.js b/ui/app/components/pages/create-account/connect-hardware/index.js index 3f66e7098..646ba8bec 100644 --- a/ui/app/components/pages/create-account/connect-hardware/index.js +++ b/ui/app/components/pages/create-account/connect-hardware/index.js @@ -18,6 +18,7 @@ class ConnectHardwareForm extends Component { accounts: [], browserSupported: true, unlocked: false, + device: null } } @@ -38,19 +39,22 @@ class ConnectHardwareForm extends Component { } async checkIfUnlocked () { - const unlocked = await this.props.checkHardwareStatus('trezor') - if (unlocked) { - this.setState({unlocked: true}) - this.getPage(0) - } + ['trezor', 'ledger'].forEach(async device => { + const unlocked = await this.props.checkHardwareStatus(device) + if (unlocked) { + this.setState({unlocked: true}) + this.getPage(0, device) + } + }) } - connectToTrezor = () => { + connectToHardwareWallet = (device) => { + debugger if (this.state.accounts.length) { return null } this.setState({ btnText: this.context.t('connecting')}) - this.getPage(0) + this.getPage(0, device) } onAccountChange = (account) => { @@ -65,9 +69,9 @@ class ConnectHardwareForm extends Component { }, 5000) } - getPage = (page) => { + getPage = (page, device) => { this.props - .connectHardware('trezor', page) + .connectHardware(device, page) .then(accounts => { if (accounts.length) { @@ -77,7 +81,7 @@ class ConnectHardwareForm extends Component { this.showTemporaryAlert() } - const newState = { unlocked: true } + const newState = { unlocked: true, device } // Default to the first account if (this.state.selectedAccount === null) { accounts.forEach((a, i) => { @@ -110,8 +114,8 @@ class ConnectHardwareForm extends Component { }) } - onForgetDevice = () => { - this.props.forgetDevice('trezor') + onForgetDevice = (device) => { + this.props.forgetDevice(device) .then(_ => { this.setState({ error: null, @@ -131,7 +135,7 @@ class ConnectHardwareForm extends Component { this.setState({ error: this.context.t('accountSelectionRequired') }) } - this.props.unlockTrezorAccount(this.state.selectedAccount) + this.props.unlockHardwareWalletAccount(this.state.selectedAccount, this.state.device) .then(_ => { this.props.history.push(DEFAULT_ROUTE) }).catch(e => { @@ -152,13 +156,14 @@ class ConnectHardwareForm extends Component { renderContent () { if (!this.state.accounts.length) { return h(ConnectScreen, { - connectToTrezor: this.connectToTrezor, + connectToHardwareWallet: this.connectToHardwareWallet, btnText: this.state.btnText, browserSupported: this.state.browserSupported, }) } return h(AccountList, { + device: this.state.device, accounts: this.state.accounts, selectedAccount: this.state.selectedAccount, onAccountChange: this.onAccountChange, @@ -188,7 +193,7 @@ ConnectHardwareForm.propTypes = { forgetDevice: PropTypes.func, showAlert: PropTypes.func, hideAlert: PropTypes.func, - unlockTrezorAccount: PropTypes.func, + unlockHardwareWalletAccount: PropTypes.func, numberOfExistingAccounts: PropTypes.number, history: PropTypes.object, t: PropTypes.func, @@ -222,8 +227,8 @@ const mapDispatchToProps = dispatch => { forgetDevice: (deviceName) => { return dispatch(actions.forgetDevice(deviceName)) }, - unlockTrezorAccount: index => { - return dispatch(actions.unlockTrezorAccount(index)) + unlockHardwareWalletAccount: (index, deviceName) => { + return dispatch(actions.unlockHardwareWalletAccount(index, deviceName)) }, showImportPage: () => dispatch(actions.showImportPage()), showConnectPage: () => dispatch(actions.showConnectPage()), -- cgit v1.2.3 From 78a1cd3314455d6e4e08839a3eea3ec2868f4f59 Mon Sep 17 00:00:00 2001 From: brunobar79 Date: Sat, 11 Aug 2018 02:35:20 -0400 Subject: iframe communication working --- ui/app/components/pages/create-account/connect-hardware/index.js | 1 - 1 file changed, 1 deletion(-) (limited to 'ui') diff --git a/ui/app/components/pages/create-account/connect-hardware/index.js b/ui/app/components/pages/create-account/connect-hardware/index.js index 646ba8bec..86a4d7257 100644 --- a/ui/app/components/pages/create-account/connect-hardware/index.js +++ b/ui/app/components/pages/create-account/connect-hardware/index.js @@ -49,7 +49,6 @@ class ConnectHardwareForm extends Component { } connectToHardwareWallet = (device) => { - debugger if (this.state.accounts.length) { return null } -- cgit v1.2.3 From 8e842a8947997b7ea47cf35d1348788d21f2f467 Mon Sep 17 00:00:00 2001 From: brunobar79 Date: Sat, 11 Aug 2018 05:02:02 -0400 Subject: able to add accounts --- .../components/pages/create-account/connect-hardware/account-list.js | 2 +- ui/app/components/pages/create-account/connect-hardware/index.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) (limited to 'ui') diff --git a/ui/app/components/pages/create-account/connect-hardware/account-list.js b/ui/app/components/pages/create-account/connect-hardware/account-list.js index 730f2df34..ac020345a 100644 --- a/ui/app/components/pages/create-account/connect-hardware/account-list.js +++ b/ui/app/components/pages/create-account/connect-hardware/account-list.js @@ -11,7 +11,7 @@ class AccountList extends Component { renderHeader () { return ( h('div.hw-connect', [ - h('h3.hw-connect__title', {}, this.context.t('selectAnAccount')), + h('h3.hw-connect__title', {}, `${this.props.device.toUpperCase()} - ${this.context.t('selectAnAccount')}`), h('p.hw-connect__msg', {}, this.context.t('selectAnAccountHelp')), ]) ) diff --git a/ui/app/components/pages/create-account/connect-hardware/index.js b/ui/app/components/pages/create-account/connect-hardware/index.js index 86a4d7257..644742172 100644 --- a/ui/app/components/pages/create-account/connect-hardware/index.js +++ b/ui/app/components/pages/create-account/connect-hardware/index.js @@ -128,13 +128,13 @@ class ConnectHardwareForm extends Component { }) } - onUnlockAccount = () => { + onUnlockAccount = (device) => { if (this.state.selectedAccount === null) { this.setState({ error: this.context.t('accountSelectionRequired') }) } - this.props.unlockHardwareWalletAccount(this.state.selectedAccount, this.state.device) + this.props.unlockHardwareWalletAccount(this.state.selectedAccount, device) .then(_ => { this.props.history.push(DEFAULT_ROUTE) }).catch(e => { -- cgit v1.2.3 From aa6a42e3deda1725cb5e4e0df97549f9facc18f5 Mon Sep 17 00:00:00 2001 From: brunobar79 Date: Sat, 11 Aug 2018 05:11:21 -0400 Subject: rename keyring --- ui/app/components/account-menu/index.js | 1 + 1 file changed, 1 insertion(+) (limited to 'ui') diff --git a/ui/app/components/account-menu/index.js b/ui/app/components/account-menu/index.js index 9c063d31e..bcada41e3 100644 --- a/ui/app/components/account-menu/index.js +++ b/ui/app/components/account-menu/index.js @@ -229,6 +229,7 @@ AccountMenu.prototype.renderKeyringType = function (keyring) { let label switch (type) { case 'Trezor Hardware': + case 'Ledger Hardware': label = this.context.t('hardware') break case 'Simple Key Pair': -- cgit v1.2.3 From e6d64cecf84d91f1db3aab5777db3530c9cd8ab7 Mon Sep 17 00:00:00 2001 From: brunobar79 Date: Sat, 11 Aug 2018 20:26:34 -0400 Subject: message signing works --- ui/app/css/itcss/components/new-account.scss | 1 + 1 file changed, 1 insertion(+) (limited to 'ui') diff --git a/ui/app/css/itcss/components/new-account.scss b/ui/app/css/itcss/components/new-account.scss index b12afb124..8a6201805 100644 --- a/ui/app/css/itcss/components/new-account.scss +++ b/ui/app/css/itcss/components/new-account.scss @@ -412,6 +412,7 @@ min-height: 54px; font-weight: 300; font-size: 14px; + margin-bottom: 20px } &__button.unlock { -- cgit v1.2.3 From 4e1d8ba19db729f5c282c4e3c6b43433b562a45e Mon Sep 17 00:00:00 2001 From: brunobar79 Date: Mon, 13 Aug 2018 19:29:43 -0400 Subject: good progress adding paths --- ui/app/actions.js | 27 +++++++++----- .../connect-hardware/account-list.js | 41 ++++++++++++++++++++- .../pages/create-account/connect-hardware/index.js | 43 ++++++++++++++++------ ui/app/css/itcss/components/new-account.scss | 19 ++++++++++ ui/app/reducers/app.js | 13 +++++++ 5 files changed, 121 insertions(+), 22 deletions(-) (limited to 'ui') diff --git a/ui/app/actions.js b/ui/app/actions.js index 04af9d7c8..6bcc64e17 100644 --- a/ui/app/actions.js +++ b/ui/app/actions.js @@ -235,6 +235,8 @@ var actions = { UPDATE_TOKENS: 'UPDATE_TOKENS', setRpcTarget: setRpcTarget, setProviderType: setProviderType, + SET_HARDWARE_WALLET_DEFAULT_HD_PATH: 'SET_HARDWARE_WALLET_DEFAULT_HD_PATH', + setHardwareWalletDefaultHdPath, updateProviderType, // loading overlay SHOW_LOADING: 'SHOW_LOADING_INDICATION', @@ -639,12 +641,12 @@ function addNewAccount () { } } -function checkHardwareStatus (deviceName) { - log.debug(`background.checkHardwareStatus`, deviceName) +function checkHardwareStatus (deviceName, hdPath) { + log.debug(`background.checkHardwareStatus`, deviceName, hdPath) return (dispatch, getState) => { dispatch(actions.showLoadingIndication()) return new Promise((resolve, reject) => { - background.checkHardwareStatus(deviceName, (err, unlocked) => { + background.checkHardwareStatus(deviceName, hdPath, (err, unlocked) => { if (err) { log.error(err) dispatch(actions.displayWarning(err.message)) @@ -681,12 +683,12 @@ function forgetDevice (deviceName) { } } -function connectHardware (deviceName, page) { - log.debug(`background.connectHardware`, deviceName, page) +function connectHardware (deviceName, page, hdPath) { + log.debug(`background.connectHardware`, deviceName, page, hdPath) return (dispatch, getState) => { dispatch(actions.showLoadingIndication()) return new Promise((resolve, reject) => { - background.connectHardware(deviceName, page, (err, accounts) => { + background.connectHardware(deviceName, page, hdPath, (err, accounts) => { if (err) { log.error(err) dispatch(actions.displayWarning(err.message)) @@ -702,12 +704,12 @@ function connectHardware (deviceName, page) { } } -function unlockHardwareWalletAccount (index, deviceName) { - log.debug(`background.unlockHardwareWalletAccount`, index, deviceName) +function unlockHardwareWalletAccount (index, deviceName, hdPath) { + log.debug(`background.unlockHardwareWalletAccount`, index, deviceName, hdPath) return (dispatch, getState) => { dispatch(actions.showLoadingIndication()) return new Promise((resolve, reject) => { - background.unlockHardwareWalletAccount(index, deviceName, (err, accounts) => { + background.unlockHardwareWalletAccount(index, deviceName, hdPath, (err, accounts) => { if (err) { log.error(err) dispatch(actions.displayWarning(err.message)) @@ -1854,6 +1856,13 @@ function showLoadingIndication (message) { } } +function setHardwareWalletDefaultHdPath ({ device, path }) { + return { + type: actions.SET_HARDWARE_WALLET_DEFAULT_HD_PATH, + value: {device, path}, + } +} + function hideLoadingIndication () { return { type: actions.HIDE_LOADING, diff --git a/ui/app/components/pages/create-account/connect-hardware/account-list.js b/ui/app/components/pages/create-account/connect-hardware/account-list.js index ac020345a..4c6cc67f9 100644 --- a/ui/app/components/pages/create-account/connect-hardware/account-list.js +++ b/ui/app/components/pages/create-account/connect-hardware/account-list.js @@ -2,16 +2,53 @@ const { Component } = require('react') const PropTypes = require('prop-types') const h = require('react-hyperscript') const genAccountLink = require('../../../../../lib/account-link.js') +const Select = require('react-select').default class AccountList extends Component { constructor (props, context) { super(props) } + getHdPaths () { + return [ + { + label: `m/44'/60'/0' (Legacy)`, + value: `m/44'/60'/0'`, + }, + { + label: `m/44'/60'/0'/0`, + value: `m/44'/60'/0'/0'`, + }, + ] + } + + renderHdPathSelector () { + const { onPathChange, selectedPath } = this.props + + const options = this.getHdPaths() + return h('div.hw-connect__hdPath', [ + h('h3.hw-connect__hdPath__title', {}, `HD Path`), + h(Select, { + className: 'hw-connect__hdPath__select', + name: 'hd-path-select', + clearable: false, + value: selectedPath, + options, + onChange: (opt) => { + onPathChange(opt.value) + }, + }), + ]) + } renderHeader () { + const { device } = this.props return ( h('div.hw-connect', [ - h('h3.hw-connect__title', {}, `${this.props.device.toUpperCase()} - ${this.context.t('selectAnAccount')}`), + + h('h3.hw-connect__title', {}, `${device.toUpperCase()} - ${this.context.t('selectAnAccount')}`), + + device.toLowerCase() === 'ledger' ? this.renderHdPathSelector() : null, + h('p.hw-connect__msg', {}, this.context.t('selectAnAccountHelp')), ]) ) @@ -125,6 +162,8 @@ class AccountList extends Component { AccountList.propTypes = { + onPathChange: PropTypes.func.isRequired, + selectedPath: PropTypes.string.isRequired, device: PropTypes.string.isRequired, accounts: PropTypes.array.isRequired, onAccountChange: PropTypes.func.isRequired, diff --git a/ui/app/components/pages/create-account/connect-hardware/index.js b/ui/app/components/pages/create-account/connect-hardware/index.js index 644742172..0eb2aa16f 100644 --- a/ui/app/components/pages/create-account/connect-hardware/index.js +++ b/ui/app/components/pages/create-account/connect-hardware/index.js @@ -18,7 +18,7 @@ class ConnectHardwareForm extends Component { accounts: [], browserSupported: true, unlocked: false, - device: null + device: null, } } @@ -40,10 +40,10 @@ class ConnectHardwareForm extends Component { async checkIfUnlocked () { ['trezor', 'ledger'].forEach(async device => { - const unlocked = await this.props.checkHardwareStatus(device) + const unlocked = await this.props.checkHardwareStatus(device, this.props.defaultHdPaths[device]) if (unlocked) { this.setState({unlocked: true}) - this.getPage(0, device) + this.getPage(0, device, this.props.defaultHdPaths[device]) } }) } @@ -52,8 +52,16 @@ class ConnectHardwareForm extends Component { if (this.state.accounts.length) { return null } + + // Default values this.setState({ btnText: this.context.t('connecting')}) - this.getPage(0, device) + this.getPage(0, device, this.props.defaultHdPaths[device]) + } + + onPathChange = (path) => { + console.log('BRUNO: path changed', path) + this.props.setHardwareWalletDefaultHdPath({device: this.state.device, path}) + this.getPage(0, this.state.device, path) } onAccountChange = (account) => { @@ -68,9 +76,9 @@ class ConnectHardwareForm extends Component { }, 5000) } - getPage = (page, device) => { + getPage = (page, device, hdPath) => { this.props - .connectHardware(device, page) + .connectHardware(device, page, hdPath) .then(accounts => { if (accounts.length) { @@ -162,6 +170,8 @@ class ConnectHardwareForm extends Component { } return h(AccountList, { + onPathChange: this.onPathChange, + selectedPath: this.props.defaultHdPaths[this.state.device], device: this.state.device, accounts: this.state.accounts, selectedAccount: this.state.selectedAccount, @@ -193,12 +203,14 @@ ConnectHardwareForm.propTypes = { showAlert: PropTypes.func, hideAlert: PropTypes.func, unlockHardwareWalletAccount: PropTypes.func, + setHardwareWalletDefaultHdPath: PropTypes.func, numberOfExistingAccounts: PropTypes.number, history: PropTypes.object, t: PropTypes.func, network: PropTypes.string, accounts: PropTypes.object, address: PropTypes.string, + defaultHdPaths: PropTypes.object, } const mapStateToProps = state => { @@ -206,28 +218,35 @@ const mapStateToProps = state => { metamask: { network, selectedAddress, identities = {}, accounts = [] }, } = state const numberOfExistingAccounts = Object.keys(identities).length + const { + appState: { defaultHdPaths }, + } = state return { network, accounts, address: selectedAddress, numberOfExistingAccounts, + defaultHdPaths, } } const mapDispatchToProps = dispatch => { return { - connectHardware: (deviceName, page) => { - return dispatch(actions.connectHardware(deviceName, page)) + setHardwareWalletDefaultHdPath: ({device, path}) => { + return dispatch(actions.setHardwareWalletDefaultHdPath({device, path})) + }, + connectHardware: (deviceName, page, hdPath) => { + return dispatch(actions.connectHardware(deviceName, hdPath, page)) }, - checkHardwareStatus: (deviceName) => { - return dispatch(actions.checkHardwareStatus(deviceName)) + checkHardwareStatus: (deviceName, hdPath) => { + return dispatch(actions.checkHardwareStatus(deviceName, hdPath)) }, forgetDevice: (deviceName) => { return dispatch(actions.forgetDevice(deviceName)) }, - unlockHardwareWalletAccount: (index, deviceName) => { - return dispatch(actions.unlockHardwareWalletAccount(index, deviceName)) + unlockHardwareWalletAccount: (index, deviceName, hdPath) => { + return dispatch(actions.unlockHardwareWalletAccount(index, deviceName, hdPath)) }, showImportPage: () => dispatch(actions.showImportPage()), showConnectPage: () => dispatch(actions.showConnectPage()), diff --git a/ui/app/css/itcss/components/new-account.scss b/ui/app/css/itcss/components/new-account.scss index 8a6201805..10d101601 100644 --- a/ui/app/css/itcss/components/new-account.scss +++ b/ui/app/css/itcss/components/new-account.scss @@ -178,6 +178,25 @@ } } + &__hdPath { + display: flex; + flex-direction: row; + margin-top: 15px; + margin-bottom: 15px; + font-size: 14px; + + &__title { + display: flex; + margin-top: 10px; + margin-right: 15px; + } + + &__select { + display: flex; + flex: 1; + } + } + &__learn-more { margin-top: 15px; font-size: 14px; diff --git a/ui/app/reducers/app.js b/ui/app/reducers/app.js index 98d467163..4d70d2718 100644 --- a/ui/app/reducers/app.js +++ b/ui/app/reducers/app.js @@ -67,6 +67,10 @@ function reduceApp (state, action) { isMouseUser: false, gasIsLoading: false, networkNonce: null, + defaultHdPaths: { + trezor: `m/44'/60'/0'/0`, + ledger: `m/44'/60'/0'`, + }, }, state.appState) switch (action.type) { @@ -525,6 +529,15 @@ function reduceApp (state, action) { warning: '', }) + case actions.SET_HARDWARE_WALLET_DEFAULT_HD_PATH: + const { device, path } = action.value + const newDefaults = {...appState.defaultHdPaths} + newDefaults[device] = path + + return extend(appState, { + defaultHdPaths: newDefaults, + }) + case actions.SHOW_LOADING: return extend(appState, { isLoading: true, -- cgit v1.2.3 From 61a279204a804ddf4815d0db6103c19c5640bbb9 Mon Sep 17 00:00:00 2001 From: brunobar79 Date: Tue, 14 Aug 2018 01:26:18 -0400 Subject: legacy and new hd path working --- .../connect-hardware/account-list.js | 52 ++++++++++++++-------- .../pages/create-account/connect-hardware/index.js | 15 ++++--- ui/app/reducers/app.js | 2 +- 3 files changed, 45 insertions(+), 24 deletions(-) (limited to 'ui') diff --git a/ui/app/components/pages/create-account/connect-hardware/account-list.js b/ui/app/components/pages/create-account/connect-hardware/account-list.js index 4c6cc67f9..c8fb5030b 100644 --- a/ui/app/components/pages/create-account/connect-hardware/account-list.js +++ b/ui/app/components/pages/create-account/connect-hardware/account-list.js @@ -12,32 +12,47 @@ class AccountList extends Component { getHdPaths () { return [ { - label: `m/44'/60'/0' (Legacy)`, - value: `m/44'/60'/0'`, + label: `Ledger Live`, + value: `m/44'/60'/0'/0/0`, }, { - label: `m/44'/60'/0'/0`, - value: `m/44'/60'/0'/0'`, + label: `Legacy (MEW / MyCrypto)`, + value: `m/44'/60'/0'`, }, ] } + goToNextPage = () => { + if (this.props.accounts === 5) { + this.props.getPage(this.props.device, 1, this.props.selectedPath) + } else { + this.props.onAccountRestriction() + } + } + + goToPreviousPage = () => { + this.props.getPage(this.props.device, -1, this.props.selectedPath) + } + renderHdPathSelector () { const { onPathChange, selectedPath } = this.props const options = this.getHdPaths() - return h('div.hw-connect__hdPath', [ - h('h3.hw-connect__hdPath__title', {}, `HD Path`), - h(Select, { - className: 'hw-connect__hdPath__select', - name: 'hd-path-select', - clearable: false, - value: selectedPath, - options, - onChange: (opt) => { - onPathChange(opt.value) - }, - }), + return h('div', [ + h('div.hw-connect__hdPath', [ + h('h3.hw-connect__hdPath__title', {}, `HD Path`), + h(Select, { + className: 'hw-connect__hdPath__select', + name: 'hd-path-select', + clearable: false, + value: selectedPath, + options, + onChange: (opt) => { + onPathChange(opt.value) + }, + }), + ]), + h('p.hw-connect__msg', {}, this.context.t('selectPathHelp')), ]) } renderHeader () { @@ -98,7 +113,7 @@ class AccountList extends Component { h( 'button.hw-list-pagination__button', { - onClick: () => this.props.getPage(-1, this.props.device), + onClick: this.goToPreviousPage, }, `< ${this.context.t('prev')}` ), @@ -106,7 +121,7 @@ class AccountList extends Component { h( 'button.hw-list-pagination__button', { - onClick: () => this.props.getPage(1, this.props.device), + onClick: this.goToNextPage, }, `${this.context.t('next')} >` ), @@ -174,6 +189,7 @@ AccountList.propTypes = { history: PropTypes.object, onUnlockAccount: PropTypes.func, onCancel: PropTypes.func, + onAccountRestriction: PropTypes.func, } AccountList.contextTypes = { diff --git a/ui/app/components/pages/create-account/connect-hardware/index.js b/ui/app/components/pages/create-account/connect-hardware/index.js index 0eb2aa16f..e7e94686a 100644 --- a/ui/app/components/pages/create-account/connect-hardware/index.js +++ b/ui/app/components/pages/create-account/connect-hardware/index.js @@ -43,7 +43,7 @@ class ConnectHardwareForm extends Component { const unlocked = await this.props.checkHardwareStatus(device, this.props.defaultHdPaths[device]) if (unlocked) { this.setState({unlocked: true}) - this.getPage(0, device, this.props.defaultHdPaths[device]) + this.getPage(device, 0, this.props.defaultHdPaths[device]) } }) } @@ -55,19 +55,23 @@ class ConnectHardwareForm extends Component { // Default values this.setState({ btnText: this.context.t('connecting')}) - this.getPage(0, device, this.props.defaultHdPaths[device]) + this.getPage(device, 0, this.props.defaultHdPaths[device]) } onPathChange = (path) => { console.log('BRUNO: path changed', path) this.props.setHardwareWalletDefaultHdPath({device: this.state.device, path}) - this.getPage(0, this.state.device, path) + this.getPage(this.state.device, 0, path) } onAccountChange = (account) => { this.setState({selectedAccount: account.toString(), error: null}) } + onAccountRestriction = () => { + this.setState({error: this.context.t('ledgerAccountRestriction') }) + } + showTemporaryAlert () { this.props.showAlert(this.context.t('hardwareWalletConnected')) // Autohide the alert after 5 seconds @@ -76,7 +80,7 @@ class ConnectHardwareForm extends Component { }, 5000) } - getPage = (page, device, hdPath) => { + getPage = (device, page, hdPath) => { this.props .connectHardware(device, page, hdPath) .then(accounts => { @@ -182,6 +186,7 @@ class ConnectHardwareForm extends Component { onUnlockAccount: this.onUnlockAccount, onForgetDevice: this.onForgetDevice, onCancel: this.onCancel, + onAccountRestriction: this.onAccountRestriction, }) } @@ -237,7 +242,7 @@ const mapDispatchToProps = dispatch => { return dispatch(actions.setHardwareWalletDefaultHdPath({device, path})) }, connectHardware: (deviceName, page, hdPath) => { - return dispatch(actions.connectHardware(deviceName, hdPath, page)) + return dispatch(actions.connectHardware(deviceName, page, hdPath)) }, checkHardwareStatus: (deviceName, hdPath) => { return dispatch(actions.checkHardwareStatus(deviceName, hdPath)) diff --git a/ui/app/reducers/app.js b/ui/app/reducers/app.js index 4d70d2718..c246e7904 100644 --- a/ui/app/reducers/app.js +++ b/ui/app/reducers/app.js @@ -69,7 +69,7 @@ function reduceApp (state, action) { networkNonce: null, defaultHdPaths: { trezor: `m/44'/60'/0'/0`, - ledger: `m/44'/60'/0'`, + ledger: `m/44'/60'/0'/0/0`, }, }, state.appState) -- cgit v1.2.3 From b77cc3d9690304362471fbfe207bdad461c2ca3a Mon Sep 17 00:00:00 2001 From: brunobar79 Date: Tue, 14 Aug 2018 03:42:23 -0400 Subject: fix tx tests --- .../components/pages/create-account/connect-hardware/account-list.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'ui') diff --git a/ui/app/components/pages/create-account/connect-hardware/account-list.js b/ui/app/components/pages/create-account/connect-hardware/account-list.js index c8fb5030b..0acaded6b 100644 --- a/ui/app/components/pages/create-account/connect-hardware/account-list.js +++ b/ui/app/components/pages/create-account/connect-hardware/account-list.js @@ -23,7 +23,8 @@ class AccountList extends Component { } goToNextPage = () => { - if (this.props.accounts === 5) { + // If we have < 5 accounts, it's restricted by BIP-44 + if (this.props.accounts.length === 5) { this.props.getPage(this.props.device, 1, this.props.selectedPath) } else { this.props.onAccountRestriction() -- cgit v1.2.3 From c72ced79aeb3d79d12ae240b680e0561122e5209 Mon Sep 17 00:00:00 2001 From: brunobar79 Date: Tue, 14 Aug 2018 19:22:00 -0400 Subject: ui fixes --- ui/app/components/modals/account-details-modal.js | 16 +++++++++++++-- .../connect-hardware/connect-screen.js | 15 +++++++------- .../pages/create-account/connect-hardware/index.js | 24 +++++++++++++--------- ui/app/css/itcss/components/new-account.scss | 6 +++--- 4 files changed, 38 insertions(+), 23 deletions(-) (limited to 'ui') diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js index 5607cf051..cc90cf578 100644 --- a/ui/app/components/modals/account-details-modal.js +++ b/ui/app/components/modals/account-details-modal.js @@ -14,6 +14,7 @@ function mapStateToProps (state) { return { network: state.metamask.network, selectedIdentity: getSelectedIdentity(state), + keyrings: state.metamask.keyrings, } } @@ -50,9 +51,20 @@ AccountDetailsModal.prototype.render = function () { network, showExportPrivateKeyModal, setAccountLabel, + keyrings, } = this.props const { name, address } = selectedIdentity + const keyring = keyrings.find((kr) => { + return kr.accounts.includes(address) + }) + + let exportPrivateKeyFeatureEnabled = true + // This feature is disabled for hardware wallets + if (keyring.type.search('Hardware') !== -1) { + exportPrivateKeyFeatureEnabled = false + } + return h(AccountModalContainer, {}, [ h(EditableLabel, { className: 'account-modal__name', @@ -73,9 +85,9 @@ AccountDetailsModal.prototype.render = function () { }, this.context.t('etherscanView')), // Holding on redesign for Export Private Key functionality - h('button.btn-primary.account-modal__button', { + exportPrivateKeyFeatureEnabled ? h('button.btn-primary.account-modal__button', { onClick: () => showExportPrivateKeyModal(), - }, this.context.t('exportPrivateKey')), + }, this.context.t('exportPrivateKey')) : null, ]) } 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 af144d410..0a62f1c1e 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 @@ -12,7 +12,7 @@ class ConnectScreen extends Component { h('div.new-account-connect-form.unsupported-browser', {}, [ h('div.hw-connect', [ h('h3.hw-connect__title', {}, this.context.t('browserNotSupported')), - h('p.hw-connect__msg', {}, this.context.t('chromeRequiredForTrezor')), + h('p.hw-connect__msg', {}, this.context.t('chromeRequiredForHardwareWallets')), ]), h( 'button.btn-primary.btn--large', @@ -30,8 +30,8 @@ class ConnectScreen extends Component { renderHeader () { return ( 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`)), + h('h3.hw-connect__header__title', {}, this.context.t(`hardwareWallets`)), + h('p.hw-connect__header__msg', {}, this.context.t(`hardwareWalletsMsg`)), ]) ) } @@ -50,7 +50,7 @@ class ConnectScreen extends Component { return h( 'button.btn-primary.btn--large', { onClick: this.props.connectToHardwareWallet.bind(this, 'trezor') }, - this.props.btnText + this.context.t('connectToTrezor') ) } @@ -58,7 +58,7 @@ class ConnectScreen extends Component { return h( 'button.btn-primary.btn--large', { onClick: this.props.connectToHardwareWallet.bind(this, 'ledger') }, - this.props.btnText.replace('Trezor', 'Ledger') + this.context.t('connectToLedger') ) } @@ -127,9 +127,9 @@ class ConnectScreen extends Component { return ( h('div.new-account-connect-form', {}, [ this.renderHeader(), - this.renderTrezorAffiliateLink(), - this.renderConnectToTrezorButton(), this.renderConnectToLedgerButton(), + this.renderConnectToTrezorButton(), + this.renderTrezorAffiliateLink(), this.renderLearnMore(), this.renderTutorialSteps(), this.renderFooter(), @@ -147,7 +147,6 @@ class ConnectScreen extends Component { ConnectScreen.propTypes = { connectToHardwareWallet: PropTypes.func.isRequired, - btnText: PropTypes.string.isRequired, browserSupported: PropTypes.bool.isRequired, } diff --git a/ui/app/components/pages/create-account/connect-hardware/index.js b/ui/app/components/pages/create-account/connect-hardware/index.js index e7e94686a..068b27cc2 100644 --- a/ui/app/components/pages/create-account/connect-hardware/index.js +++ b/ui/app/components/pages/create-account/connect-hardware/index.js @@ -6,14 +6,14 @@ const actions = require('../../../../actions') const ConnectScreen = require('./connect-screen') const AccountList = require('./account-list') const { DEFAULT_ROUTE } = require('../../../../routes') -const { formatBalance } = require('../../../../util') +const { formatBalance, getPlatform } = require('../../../../../../app/scripts/lib/util') +const { PLATFORM_FIREFOX } = require('../../../../../../app/scripts/lib/enums') class ConnectHardwareForm extends Component { constructor (props, context) { super(props) this.state = { error: null, - btnText: context.t('connectToTrezor'), selectedAccount: null, accounts: [], browserSupported: true, @@ -49,17 +49,22 @@ class ConnectHardwareForm extends Component { } connectToHardwareWallet = (device) => { + // None of the hardware wallets are supported + // At least for now + if (getPlatform() === PLATFORM_FIREFOX) { + this.setState({ browserSupported: false, error: null}) + return null + } + if (this.state.accounts.length) { return null } // Default values - this.setState({ btnText: this.context.t('connecting')}) this.getPage(device, 0, this.props.defaultHdPaths[device]) } onPathChange = (path) => { - console.log('BRUNO: path changed', path) this.props.setHardwareWalletDefaultHdPath({device: this.state.device, path}) this.getPage(this.state.device, 0, path) } @@ -92,7 +97,7 @@ class ConnectHardwareForm extends Component { this.showTemporaryAlert() } - const newState = { unlocked: true, device } + const newState = { unlocked: true, device, error: null } // Default to the first account if (this.state.selectedAccount === null) { accounts.forEach((a, i) => { @@ -119,9 +124,10 @@ class ConnectHardwareForm extends Component { }) .catch(e => { if (e === 'Window blocked') { - this.setState({ browserSupported: false }) + this.setState({ browserSupported: false, error: null}) + } else { + this.setState({ error: e.toString() }) } - this.setState({ btnText: this.context.t('connectToTrezor') }) }) } @@ -130,7 +136,6 @@ class ConnectHardwareForm extends Component { .then(_ => { this.setState({ error: null, - btnText: this.context.t('connectToTrezor'), selectedAccount: null, accounts: [], unlocked: false, @@ -160,7 +165,7 @@ class ConnectHardwareForm extends Component { renderError () { return this.state.error - ? h('span.error', { style: { marginBottom: 40 } }, this.state.error) + ? h('span.error', { style: { margin: '20px 20px 10px', display: 'block', textAlign: 'center' } }, this.state.error) : null } @@ -168,7 +173,6 @@ class ConnectHardwareForm extends Component { if (!this.state.accounts.length) { return h(ConnectScreen, { connectToHardwareWallet: this.connectToHardwareWallet, - btnText: this.state.btnText, browserSupported: this.state.browserSupported, }) } diff --git a/ui/app/css/itcss/components/new-account.scss b/ui/app/css/itcss/components/new-account.scss index 10d101601..b9e6ac000 100644 --- a/ui/app/css/itcss/components/new-account.scss +++ b/ui/app/css/itcss/components/new-account.scss @@ -174,7 +174,7 @@ font-size: 14px; color: #9b9b9b; margin-top: 10px; - margin-bottom: 0px; + margin-bottom: 20px; } } @@ -257,8 +257,8 @@ &__get-trezor { width: 100%; - padding-bottom: 20px; - padding-top: 20px; + padding-bottom: 10px; + padding-top: 10px; &__msg { font-size: 14px; -- cgit v1.2.3 From 19d1988715edfb6ee3ba8251af8ee9da20342234 Mon Sep 17 00:00:00 2001 From: brunobar79 Date: Tue, 14 Aug 2018 19:24:15 -0400 Subject: fix --- ui/app/components/pages/create-account/connect-hardware/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui') diff --git a/ui/app/components/pages/create-account/connect-hardware/index.js b/ui/app/components/pages/create-account/connect-hardware/index.js index 068b27cc2..4f01a2b0c 100644 --- a/ui/app/components/pages/create-account/connect-hardware/index.js +++ b/ui/app/components/pages/create-account/connect-hardware/index.js @@ -125,7 +125,7 @@ class ConnectHardwareForm extends Component { .catch(e => { if (e === 'Window blocked') { this.setState({ browserSupported: false, error: null}) - } else { + } else if (e !== 'Window closed') { this.setState({ error: e.toString() }) } }) -- cgit v1.2.3 From 53dcad5a3b89ca4f3a67c3f6b4d6b8f73ebd02e5 Mon Sep 17 00:00:00 2001 From: brunobar79 Date: Tue, 14 Aug 2018 19:38:23 -0400 Subject: more ui --- ui/app/components/pages/create-account/connect-hardware/index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'ui') diff --git a/ui/app/components/pages/create-account/connect-hardware/index.js b/ui/app/components/pages/create-account/connect-hardware/index.js index 4f01a2b0c..547df5223 100644 --- a/ui/app/components/pages/create-account/connect-hardware/index.js +++ b/ui/app/components/pages/create-account/connect-hardware/index.js @@ -6,7 +6,8 @@ const actions = require('../../../../actions') const ConnectScreen = require('./connect-screen') const AccountList = require('./account-list') const { DEFAULT_ROUTE } = require('../../../../routes') -const { formatBalance, getPlatform } = require('../../../../../../app/scripts/lib/util') +const { formatBalance } = require('../../../../util') +const { getPlatform } = require('../../../../../../app/scripts/lib/util') const { PLATFORM_FIREFOX } = require('../../../../../../app/scripts/lib/enums') class ConnectHardwareForm extends Component { -- cgit v1.2.3 From 82a5ed1e03e0a6a9bc19b946bc178b236d9aaa98 Mon Sep 17 00:00:00 2001 From: brunobar79 Date: Tue, 14 Aug 2018 22:40:29 -0400 Subject: remove console logs --- ui/app/selectors/confirm-transaction.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui') diff --git a/ui/app/selectors/confirm-transaction.js b/ui/app/selectors/confirm-transaction.js index aa1fc5404..6e760c429 100644 --- a/ui/app/selectors/confirm-transaction.js +++ b/ui/app/selectors/confirm-transaction.js @@ -159,7 +159,7 @@ export const approveTokenAmountAndToAddressSelector = createSelector( if (tokenDecimals) { tokenAmount = calcTokenAmount(value, tokenDecimals) } - + tokenAmount = roundExponential(tokenAmount) } -- cgit v1.2.3 From 2ea05e303dedfd75cad6fdfddfa82da2ee32e92d Mon Sep 17 00:00:00 2001 From: brunobar79 Date: Thu, 16 Aug 2018 19:39:52 -0400 Subject: connect screen ready --- .../connect-hardware/connect-screen.js | 88 ++++++++++++++++------ ui/app/css/itcss/components/new-account.scss | 63 +++++++++++++++- 2 files changed, 124 insertions(+), 27 deletions(-) (limited to 'ui') 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: `Trezor`, + ledger: `Ledger`, + } - 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; -- cgit v1.2.3 From 285814646fa147560ffe6a8903eec7220eff09bb Mon Sep 17 00:00:00 2001 From: brunobar79 Date: Thu, 16 Aug 2018 20:41:23 -0400 Subject: ui ready --- .../create-account/connect-hardware/account-list.js | 12 +++++++++--- ui/app/components/wallet-view.js | 16 +++++++++++++--- ui/app/css/itcss/components/new-account.scss | 18 +++++++++++++++--- 3 files changed, 37 insertions(+), 9 deletions(-) (limited to 'ui') diff --git a/ui/app/components/pages/create-account/connect-hardware/account-list.js b/ui/app/components/pages/create-account/connect-hardware/account-list.js index 0acaded6b..488a189ea 100644 --- a/ui/app/components/pages/create-account/connect-hardware/account-list.js +++ b/ui/app/components/pages/create-account/connect-hardware/account-list.js @@ -40,8 +40,9 @@ class AccountList extends Component { const options = this.getHdPaths() return h('div', [ + h('h3.hw-connect__hdPath__title', {}, this.context.t('selectHdPath')), + h('p.hw-connect__msg', {}, this.context.t('selectPathHelp')), h('div.hw-connect__hdPath', [ - h('h3.hw-connect__hdPath__title', {}, `HD Path`), h(Select, { className: 'hw-connect__hdPath__select', name: 'hd-path-select', @@ -53,18 +54,23 @@ class AccountList extends Component { }, }), ]), - h('p.hw-connect__msg', {}, this.context.t('selectPathHelp')), ]) } + + capitalizeDevice (device) { + return device.slice(0, 1).toUpperCase() + device.slice(1) + } + renderHeader () { const { device } = this.props return ( h('div.hw-connect', [ - h('h3.hw-connect__title', {}, `${device.toUpperCase()} - ${this.context.t('selectAnAccount')}`), + h('h3.hw-connect__unlock-title', {}, `${this.context.t('unlock')} ${this.capitalizeDevice(device)}`), device.toLowerCase() === 'ledger' ? this.renderHdPathSelector() : null, + h('h3.hw-connect__hdPath__title', {}, this.context.t('selectAnAccount')), h('p.hw-connect__msg', {}, this.context.t('selectAnAccountHelp')), ]) ) diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index 20c2be0f1..8e092364c 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -118,8 +118,18 @@ WalletView.prototype.render = function () { return kr.accounts.includes(selectedAddress) }) - const type = keyring.type - const isLoose = type !== 'HD Key Tree' + let label = '' + let type + if (keyring) { + type = keyring.type + if (type !== 'HD Key Tree') { + if (type.toLowerCase().search('hardware') !== -1) { + label = this.context.t('hardware') + } else { + label = this.context.t('imported') + } + } + } return h('div.wallet-view.flex-column' + (responsiveDisplayClassname || ''), { style: {}, @@ -133,7 +143,7 @@ WalletView.prototype.render = function () { onClick: hideSidebar, }), - h('div.wallet-view__keyring-label.allcaps', isLoose ? this.context.t('imported') : ''), + h('div.wallet-view__keyring-label.allcaps', label), h('div.flex-column.flex-center.wallet-view__name-container', { style: { margin: '0 auto' }, diff --git a/ui/app/css/itcss/components/new-account.scss b/ui/app/css/itcss/components/new-account.scss index ded5d11b5..e4c7a4e0d 100644 --- a/ui/app/css/itcss/components/new-account.scss +++ b/ui/app/css/itcss/components/new-account.scss @@ -162,6 +162,8 @@ } .hw-connect { + width: 100%; + &__header { &__title { margin-top: 5px; @@ -241,7 +243,7 @@ display: flex; flex-direction: row; margin-top: 15px; - margin-bottom: 15px; + margin-bottom: 30px; font-size: 14px; &__title { @@ -279,6 +281,13 @@ font-size: 18px; } + &__unlock-title { + padding-top: 10px; + font-weight: 400; + font-size: 22px; + margin-bottom: 15px; + } + &__msg { font-size: 14px; color: #9b9b9b; @@ -291,8 +300,6 @@ } &__footer { - width: 100%; - &__title { padding-top: 15px; padding-bottom: 12px; @@ -306,6 +313,9 @@ color: #9b9b9b; margin-top: 12px; margin-bottom: 27px; + width: 100%; + display: block; + margin-left: 20px; } &__link { @@ -468,6 +478,8 @@ &.account-list { height: auto; + padding-left: 20px; + padding-right: 20px; } &__buttons { -- cgit v1.2.3 From 51e4a6d3355524cd8622d6d2893cc878a64dc53e Mon Sep 17 00:00:00 2001 From: brunobar79 Date: Thu, 16 Aug 2018 21:15:50 -0400 Subject: fix ledger affiliate link --- .../components/pages/create-account/connect-hardware/connect-screen.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui') 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 ba78daed0..b3dfa4ee2 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 @@ -85,7 +85,7 @@ class ConnectScreen extends Component { getAffiliateLinks () { const links = { trezor: `Trezor`, - ledger: `Ledger`, + ledger: `Ledger`, } const text = this.context.t('orderOneHere') -- cgit v1.2.3