{title}
- {description}
+ {renderDescription(description)}
{date}
{title}
- {description}
+ {renderDescription(description)}
{date}
+
{
// If we have < 5 accounts, it's restricted by BIP-44
if (this.props.accounts.length === 5) {
@@ -19,8 +25,13 @@ class AccountList extends Component {
this.props.getPage(this.props.device, -1, this.props.selectedPath);
};
+ setPath(pathValue) {
+ this.setState({ pathValue });
+ }
+
renderHdPathSelector() {
- const { onPathChange, selectedPath, hdPaths } = this.props;
+ const { selectedPath, hdPaths } = this.props;
+ const { pathValue } = this.state;
return (
);
@@ -193,7 +211,44 @@ class AccountList extends Component {
);
}
+ renderSelectPathPopover() {
+ const { pathValue } = this.state;
+ const { onPathChange } = this.props;
+
+ const footer = (
+
+ {this.renderHdPathSelector()}
+
+ );
+ }
+
render() {
+ const { showPopover } = this.state;
return (
-
);
}
+ renderContinueButton() {
+ return (
+
+ );
+ }
+
renderUnsupportedBrowser() {
return (
@@ -32,9 +43,9 @@ class AccountList extends Component {
{
- onPathChange(value);
+ this.setPath(value);
}}
/>
@@ -47,18 +58,25 @@ class AccountList extends Component {
}
renderHeader() {
- const { device } = this.props;
return (
- {`${this.context.t('unlock')} ${this.capitalizeDevice(device)}`} + {this.context.t('selectAnAccount')}
- {device.toLowerCase() === 'ledger' ? this.renderHdPathSelector() : null}{this.context.t('selectAnAccount')}
{this.context.t('selectAnAccountHelp')} + {this.context.t('selectAnAccountHelpDirections', [ + , + ])}
+
+
+
+ );
+
+ return (
+
{this.renderHeader()}
@@ -201,6 +256,7 @@ class AccountList extends Component {
{this.renderPagination()}
{this.renderButtons()}
{this.renderForgetDevice()}
+ {showPopover && this.renderSelectPathPopover()}
);
}
diff --git a/ui/app/pages/create-account/connect-hardware/index.js b/ui/app/pages/create-account/connect-hardware/index.js
index 67051c213..ef9cc3f80 100644
--- a/ui/app/pages/create-account/connect-hardware/index.js
+++ b/ui/app/pages/create-account/connect-hardware/index.js
@@ -139,11 +139,24 @@ class ConnectHardwareForm extends Component {
this.setState({ browserSupported: false, error: null });
} else if (errorMessage.includes(U2F_ERROR)) {
this.setState({ error: U2F_ERROR });
+ } else if (
+ errorMessage === 'LEDGER_LOCKED' ||
+ errorMessage === 'LEDGER_WRONG_APP'
+ ) {
+ this.setState({
+ error: this.context.t('ledgerLocked'),
+ });
+ } else if (errorMessage.includes('timeout')) {
+ this.setState({
+ error: this.context.t('ledgerTimeout'),
+ });
} else if (
errorMessage !== 'Window closed' &&
errorMessage !== 'Popup closed'
) {
- this.setState({ error: errorMessage });
+ this.setState({
+ error: errorMessage,
+ });
}
});
};
@@ -248,6 +261,7 @@ class ConnectHardwareForm extends Component {
@@ -117,131 +123,120 @@ export default class SelectHardware extends Component {
);
}
- getAffiliateLinks() {
- const links = {
- trezor: `Trezor`,
- ledger: `Ledger`,
- };
-
- const text = this.context.t('orderOneHere');
- const response = text
- .replace('Trezor', links.trezor)
- .replace('Ledger', links.ledger);
-
- return (
-
- );
- }
-
- renderTrezorAffiliateLink() {
- return (
-
-
- );
+ renderTutorialsteps() {
+ switch (this.state.selectedDevice) {
+ case 'ledger':
+ return this.renderLedgerTutorialSteps();
+ case 'trezor':
+ return this.renderTrezorTutorialSteps();
+ default:
+ return '';
+ }
}
- scrollToTutorial = () => {
- if (this.referenceNode) {
- this.referenceNode.scrollIntoView({ behavior: 'smooth' });
+ renderLedgerTutorialSteps() {
+ const steps = [];
+ if (this.props.useLedgerLive) {
+ steps.push({
+ title: this.context.t('step1LedgerWallet'),
+ message: this.context.t('step1LedgerWalletMsg', [
+
+ {this.context.t('ledgerLiveApp')}
+ ,
+ ]),
+ });
}
- };
- renderLearnMore() {
+ steps.push({
+ asset: 'plug-in-wallet',
+ dimensions: { width: '225px', height: '75px' },
+ title: this.context.t('step2LedgerWallet'),
+ message: this.context.t('step2LedgerWalletMsg', [
+
+ {this.context.t('hardwareWalletSupportLinkConversion')}
+ ,
+ ]),
+ });
+
return (
- - {this.context.t('dontHaveAHardwareWallet')} -
- {this.getAffiliateLinks()} -
- {this.context.t('learnMore')}
- 
-
+ {steps.map((step, index) => (
+
);
}
- renderTutorialSteps() {
+ renderTrezorTutorialSteps() {
const steps = [
{
- asset: 'hardware-wallet-step-1',
+ asset: 'plug-in-wallet',
dimensions: { width: '225px', height: '75px' },
- title: this.context.t('step1HardwareWallet'),
- message: this.context.t('step1HardwareWalletMsg'),
- },
- {
- asset: 'hardware-wallet-step-2',
- dimensions: { width: '300px', height: '100px' },
- title: this.context.t('step2HardwareWallet'),
- message: this.context.t('step2HardwareWalletMsg'),
- },
- {
- asset: 'hardware-wallet-step-3',
- dimensions: { width: '120px', height: '90px' },
- title: this.context.t('step3HardwareWallet'),
- message: this.context.t('step3HardwareWalletMsg'),
+ title: this.context.t('step1TrezorWallet'),
+ message: this.context.t('step1TrezorWalletMsg', [
+
+ {this.context.t('hardwareWalletSupportLinkConversion')}
+ ,
+ ]),
},
];
return (
-
+ 
+ )}
+
+ ))}
+ {step.title}
+{step.message}
+ {step.asset && ( +
+ )}
+ {
- this.referenceNode = node;
- }}
- >
+
{steps.map((step, index) => (
+ {step.asset && (
+
+ )}
))}
);
}
- renderFooter() {
- return (
- {step.title}
{step.message}
-
+ {step.asset && (
+
+ )}
-
- );
- }
-
renderConnectScreen() {
return (
- {this.context.t('readyToConnect')} -
- {this.renderButtons()} -- {this.context.t('havingTroubleConnecting')} - - {this.context.t('getHelp')} - -
-
{this.renderHeader()}
{this.renderButtons()}
- {this.renderTrezorAffiliateLink()}
- {this.renderLearnMore()}
- {this.renderTutorialSteps()}
- {this.renderFooter()}
+ {this.state.selectedDevice && this.renderTutorialsteps()}
+ {this.renderContinueButton()}
);
}
diff --git a/ui/app/pages/create-account/create-account.component.js b/ui/app/pages/create-account/create-account.component.js
index 4eaefce52..4cba7b261 100644
--- a/ui/app/pages/create-account/create-account.component.js
+++ b/ui/app/pages/create-account/create-account.component.js
@@ -1,7 +1,6 @@
import React, { Component } from 'react';
-import { Switch, Route, matchPath } from 'react-router-dom';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
+import { Switch, Route } from 'react-router-dom';
+
import {
NEW_ACCOUNT_ROUTE,
IMPORT_ACCOUNT_ROUTE,
@@ -12,53 +11,9 @@ import NewAccountImportForm from './import-account';
import ConnectHardwareForm from './connect-hardware';
export default class CreateAccountPage extends Component {
- renderTabs() {
- const {
- history,
- location: { pathname },
- } = this.props;
- const getClassNames = (path) =>
- classnames('new-account__tabs__tab', {
- 'new-account__tabs__selected': matchPath(pathname, {
- path,
- exact: true,
- }),
- });
-
- return (
-
-
- );
- }
-
render() {
return (
history.push(NEW_ACCOUNT_ROUTE)}
- >
- {this.context.t('create')}
-
- history.push(IMPORT_ACCOUNT_ROUTE)}
- >
- {this.context.t('import')}
-
- history.push(CONNECT_HARDWARE_ROUTE)}
- >
- {this.context.t('hardware')}
-
-
-
{
- let wrapper;
-
- const props = {
- history: {
- push: sinon.spy(),
- },
- location: {
- pathname: '/new-account',
- },
- };
-
- beforeAll(() => {
- wrapper = mountWithRouter(
);
}
diff --git a/ui/app/pages/settings/advanced-tab/advanced-tab.component.test.js b/ui/app/pages/settings/advanced-tab/advanced-tab.component.test.js
index fc133a5d1..b73b90212 100644
--- a/ui/app/pages/settings/advanced-tab/advanced-tab.component.test.js
+++ b/ui/app/pages/settings/advanced-tab/advanced-tab.component.test.js
@@ -23,7 +23,7 @@ describe('AdvancedTab Component', () => {
},
);
- expect(root.find('.settings-page__content-row')).toHaveLength(10);
+ expect(root.find('.settings-page__content-row')).toHaveLength(11);
});
it('should update autoLockTimeLimit', () => {
diff --git a/ui/app/pages/settings/advanced-tab/advanced-tab.container.js b/ui/app/pages/settings/advanced-tab/advanced-tab.container.js
index 1bfa82f30..2fe9eaf39 100644
--- a/ui/app/pages/settings/advanced-tab/advanced-tab.container.js
+++ b/ui/app/pages/settings/advanced-tab/advanced-tab.container.js
@@ -11,6 +11,7 @@ import {
turnThreeBoxSyncingOnAndInitialize,
setUseNonceField,
setIpfsGateway,
+ setLedgerLivePreference,
} from '../../../store/actions';
import { getPreferences } from '../../../selectors';
import AdvancedTab from './advanced-tab.component';
@@ -26,6 +27,7 @@ export const mapStateToProps = (state) => {
threeBoxDisabled,
useNonceField,
ipfsGateway,
+ useLedgerLive,
} = metamask;
const { showFiatInTestnets, autoLockTimeLimit } = getPreferences(state);
@@ -39,6 +41,7 @@ export const mapStateToProps = (state) => {
threeBoxDisabled,
useNonceField,
ipfsGateway,
+ useLedgerLive,
};
};
@@ -68,6 +71,8 @@ export const mapDispatchToProps = (dispatch) => {
setIpfsGateway: (value) => {
return dispatch(setIpfsGateway(value));
},
+ setLedgerLivePreference: (value) =>
+ dispatch(setLedgerLivePreference(value)),
};
};
diff --git a/ui/app/store/actions.js b/ui/app/store/actions.js
index cbd90fe84..f3c2c03ea 100644
--- a/ui/app/store/actions.js
+++ b/ui/app/store/actions.js
@@ -2845,6 +2845,14 @@ export function getCurrentWindowTab() {
};
}
+export function setLedgerLivePreference(value) {
+ return async (dispatch) => {
+ dispatch(showLoadingIndication());
+ await promisifiedBackground.setLedgerLivePreference(value);
+ dispatch(hideLoadingIndication());
+ };
+}
+
// MetaMetrics
/**
* @typedef {import('../../../shared/constants/metametrics').MetaMetricsEventPayload} MetaMetricsEventPayload
diff --git a/yarn.lock b/yarn.lock
index c40f5432a..f72b8435e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2704,14 +2704,14 @@
resolved "https://registry.yarnpkg.com/@metamask/eslint-config/-/eslint-config-6.0.0.tgz#ec53e8ab278073e882411ed89705bc7d06b78c81"
integrity sha512-LyakGYGwM8UQOGhwWa+5erAI1hXuiTgf/y7USzOomX6H9KiuY09IAUYnPh7ToPG2sedD2F48UF1bUm8yvCoZOw==
-"@metamask/eth-ledger-bridge-keyring@^0.3.0":
- version "0.3.0"
- resolved "https://registry.yarnpkg.com/@metamask/eth-ledger-bridge-keyring/-/eth-ledger-bridge-keyring-0.3.0.tgz#4fc2a6345199e18f94c098d8c632d3d55add5c36"
- integrity sha512-Iv9fmxPClBohIK6ciy0ZVYNTUodlmrdQt19cZDAicSfFdR2Gcgbq2FDA75o63+fW8TwPEohhDRV/vWQ0MU5esw==
+"@metamask/eth-ledger-bridge-keyring@^0.4.0":
+ version "0.4.0"
+ resolved "https://registry.yarnpkg.com/@metamask/eth-ledger-bridge-keyring/-/eth-ledger-bridge-keyring-0.4.0.tgz#764834adf146fc86ab7688a6c8f1e08708ed0d71"
+ integrity sha512-FkoAsP19YMKHNQzfPL5l9QJwp4YsEaN8d5pbJc+VcMzoC5rkt1iyDQdderERUV9DQlS3flBjxECCZ+QX54HD5w==
dependencies:
eth-sig-util "^1.4.2"
ethereumjs-tx "^1.3.4"
- ethereumjs-util "^5.1.5"
+ ethereumjs-util "^7.0.9"
events "^2.0.0"
hdkey "0.8.0"
-
- {this.renderTabs()}
-
-
+
+ );
+ }
+
handleIpfsGatewayChange(url) {
const { t } = this.context;
@@ -478,6 +510,7 @@ export default class AdvancedTab extends PureComponent {
{this.renderAutoLockTimeLimit()}
{this.renderThreeBoxControl()}
{this.renderIpfsGatewayControl()}
+ {this.renderLedgerLiveControl()}
+ {t('ledgerLiveAdvancedSetting')}
+
+
+ {t('ledgerLiveAdvancedSettingDescription')}
+
+
+
+
+ setLedgerLivePreference(!value)}
+ offLabel={t('off')}
+ onLabel={t('on')}
+ disabled={getPlatform() === PLATFORM_FIREFOX}
+ />
+
+