diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index ea27383488ac..6475c6c26012 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -1729,8 +1729,11 @@ "hardwareWallets": { "message": "Connect a hardware wallet" }, + "hardwareWalletsInfo": { + "message": "Hardware wallet integrations use API calls to external servers, which can see your IP address and the smart contract addresses you interact with." + }, "hardwareWalletsMsg": { - "message": "Select a hardware wallet you'd like to use with MetaMask." + "message": "Select a hardware wallet you would like to use with MetaMask." }, "here": { "message": "here", diff --git a/ui/pages/create-account/connect-hardware/__snapshots__/index.test.tsx.snap b/ui/pages/create-account/connect-hardware/__snapshots__/index.test.tsx.snap index 5284b9760b08..1037213fc026 100644 --- a/ui/pages/create-account/connect-hardware/__snapshots__/index.test.tsx.snap +++ b/ui/pages/create-account/connect-hardware/__snapshots__/index.test.tsx.snap @@ -6,18 +6,51 @@ exports[`ConnectHardwareForm should match snapshot 1`] = ` class="new-external-account-form" >
-

- Connect a hardware wallet -

-

+ Connect a hardware wallet + + +

+
- Select a hardware wallet you'd like to use with MetaMask. -

+
+ Select a hardware wallet you would like to use with MetaMask. +
+
+
+ +
+
+
{ }); const props = { - selectedPath: TREZOR_HD_PATHS[0].path, + selectedPath: TREZOR_HD_PATHS[0].value, device: 'trezor', accounts: [ { diff --git a/ui/pages/create-account/connect-hardware/index.js b/ui/pages/create-account/connect-hardware/index.js index b93a8671b297..224b11cf1011 100644 --- a/ui/pages/create-account/connect-hardware/index.js +++ b/ui/pages/create-account/connect-hardware/index.js @@ -371,6 +371,7 @@ class ConnectHardwareForm extends Component { connectToHardwareWallet={this.connectToHardwareWallet} browserSupported={this.state.browserSupported} ledgerTransportType={this.props.ledgerTransportType} + onCancel={this.onCancel} /> ); } diff --git a/ui/pages/create-account/connect-hardware/index.scss b/ui/pages/create-account/connect-hardware/index.scss index 3e9f1f79a0bd..c4e8a518e57a 100644 --- a/ui/pages/create-account/connect-hardware/index.scss +++ b/ui/pages/create-account/connect-hardware/index.scss @@ -8,21 +8,8 @@ .hw-connect { width: 100%; - &__header { - &__title { - @include H3; - - margin-top: 5px; - margin-bottom: 15px; - } - - &__msg { - @include H6; - - color: var(--color-text-muted); - margin-top: 10px; - margin-bottom: 20px; - } + &__header__title-wrapper { + width: 100%; } &__QR-subtitle { @@ -70,8 +57,8 @@ &__btn { background: var(--color-background-alternative); border: 1px solid var(--color-border-muted); - height: 100px; - width: 150px; + height: 148px; + width: 199px; flex: 1; display: flex; align-items: center; @@ -81,13 +68,13 @@ margin-right: 15px; &__img { - width: 95px; + width: 136px; } } &__btn.selected { border-color: var(--color-primary-default); - width: 149px; + width: 199px; } &__btn:first-child { @@ -118,13 +105,6 @@ } } - &__title { - @include H4; - - padding-top: 10px; - font-weight: 400; - } - &__unlock-title { @include H3; @@ -134,12 +114,6 @@ } &__msg { - @include H6; - - color: var(--color-text-muted); - margin-top: 10px; - margin-bottom: 15px; - &-link { @include H6; diff --git a/ui/pages/create-account/connect-hardware/index.test.tsx b/ui/pages/create-account/connect-hardware/index.test.tsx index 395fffaa1c59..b7503f9f2a44 100644 --- a/ui/pages/create-account/connect-hardware/index.test.tsx +++ b/ui/pages/create-account/connect-hardware/index.test.tsx @@ -28,19 +28,24 @@ jest.mock('../../../selectors', () => ({ }, })); +const MOCK_RECENT_PAGE = '/home'; jest.mock('../../../ducks/history/history', () => ({ - getMostRecentOverviewPage: () => '', + getMostRecentOverviewPage: jest + .fn() + .mockImplementation(() => MOCK_RECENT_PAGE), })); const mockTrackEvent = jest.fn(); - +const mockHistoryPush = jest.fn(); const mockProps = { forgetDevice: () => jest.fn(), showAlert: () => jest.fn(), hideAlert: () => jest.fn(), unlockHardwareWalletAccount: () => jest.fn(), setHardwareWalletDefaultHdPath: () => jest.fn(), - history: {}, + history: { + push: mockHistoryPush, + }, defaultHdPath: "m/44'/60'/0'/0", mostRecentOverviewPage: '', trackEvent: () => mockTrackEvent, @@ -83,6 +88,7 @@ const mockState = { describe('ConnectHardwareForm', () => { const mockStore = configureMockStore([thunk])(mockState); + it('should match snapshot', () => { const { container } = renderWithProvider( , @@ -92,6 +98,17 @@ describe('ConnectHardwareForm', () => { expect(container).toMatchSnapshot(); }); + it('should close the form when close button is clicked', () => { + const { getByTestId } = renderWithProvider( + , + mockStore, + ); + const closeButton = getByTestId('hardware-connect-close-btn'); + fireEvent.click(closeButton); + expect(mockHistoryPush).toHaveBeenCalledTimes(1); + expect(mockHistoryPush).toHaveBeenCalledWith(MOCK_RECENT_PAGE); + }); + describe('U2F Error', () => { it('should render a U2F error', async () => { mockConnectHardware.mockRejectedValue(new Error('U2F Error')); diff --git a/ui/pages/create-account/connect-hardware/select-hardware.js b/ui/pages/create-account/connect-hardware/select-hardware.js index 62cb61c8f49c..3ef4b7e68e74 100644 --- a/ui/pages/create-account/connect-hardware/select-hardware.js +++ b/ui/pages/create-account/connect-hardware/select-hardware.js @@ -1,6 +1,16 @@ import classnames from 'classnames'; import PropTypes from 'prop-types'; import React, { Component } from 'react'; +import { + Text, + Box, + Icon, + IconName, + IconSize, + ButtonIconSize, + ButtonIcon, + // Button, +} from '../../../components/component-library'; import Button from '../../../components/ui/button'; import LogoLedger from '../../../components/ui/logo/logo-ledger'; import LogoQRBased from '../../../components/ui/logo/logo-qr-based'; @@ -17,6 +27,16 @@ import ZENDESK_URLS from '../../../helpers/constants/zendesk-url'; import { MetaMetricsEventCategory } from '../../../../shared/constants/metametrics'; import { isManifestV3 } from '../../../../shared/modules/mv3.utils'; import { openWindow } from '../../../helpers/utils/window'; +import { + AlignItems, + Display, + FlexDirection, + FontWeight, + IconColor, + JustifyContent, + TextVariant, +} from '../../../helpers/constants/design-system'; +import Tooltip from '../../../components/ui/tooltip'; export default class SelectHardware extends Component { static contextTypes = { @@ -25,6 +45,7 @@ export default class SelectHardware extends Component { }; static propTypes = { + onCancel: PropTypes.func.isRequired, connectToHardwareWallet: PropTypes.func.isRequired, browserSupported: PropTypes.bool.isRequired, ledgerTransportType: PropTypes.oneOf(Object.values(LedgerTransportTypes)), @@ -141,14 +162,32 @@ export default class SelectHardware extends Component { renderUnsupportedBrowser() { return (
-
-

+ + {this.context.t('browserNotSupported')} -

-

+ + {this.context.t('chromeRequiredForHardwareWallets')} -

-
+ +
+ + + + {this.context.t('hardwareWallets')} + + + + + + {this.context.t('hardwareWalletsMsg')} + + + + + + ); } - renderTutorialsteps() { + renderTutorialSteps() { switch (this.state.selectedDevice) { case HardwareDeviceNames.ledger: return this.renderLedgerTutorialSteps(); @@ -233,7 +324,13 @@ export default class SelectHardware extends Component { return (
{steps.map((step, index) => ( -
+

{step.title}

{step.renderButtons ? ( <> @@ -274,7 +371,7 @@ export default class SelectHardware extends Component { alt="" /> )} -
+ ))}
); @@ -303,8 +400,15 @@ export default class SelectHardware extends Component { return (
{steps.map((step, index) => ( -
+

{step.title}

+
+ ))}
); @@ -369,7 +473,13 @@ export default class SelectHardware extends Component { return (
{steps.map((step, index) => ( -
+

{step.title}

+ ))}
); @@ -590,7 +700,7 @@ export default class SelectHardware extends Component {
{this.renderHeader()} {this.renderButtons()} - {this.state.selectedDevice ? this.renderTutorialsteps() : null} + {this.state.selectedDevice ? this.renderTutorialSteps() : null} {this.renderContinueButton()}
); diff --git a/ui/pages/create-account/connect-hardware/select-hardware.stories.js b/ui/pages/create-account/connect-hardware/select-hardware.stories.js index 40963b5297f7..aa72fb900eb7 100644 --- a/ui/pages/create-account/connect-hardware/select-hardware.stories.js +++ b/ui/pages/create-account/connect-hardware/select-hardware.stories.js @@ -10,6 +10,7 @@ export default { export const DefaultStory = () => { return ( null} browserSupported connectToHardwareWallet={(selectedDevice) => action(`Continue connect to ${selectedDevice}`)() @@ -24,6 +25,7 @@ DefaultStory.storyName = 'Default'; export const BrowserNotSupported = () => { return ( null} browserSupported={false} connectToHardwareWallet={() => undefined} ledgerTransportType={LedgerTransportTypes.live} diff --git a/ui/pages/create-account/create-account.component.js b/ui/pages/create-account/create-account.component.js index e25d95800596..f2bd2a14a92f 100644 --- a/ui/pages/create-account/create-account.component.js +++ b/ui/pages/create-account/create-account.component.js @@ -1,12 +1,12 @@ import React from 'react'; import { Route, Switch } from 'react-router-dom'; -import Box from '../../components/ui/box'; +import { Box } from '../../components/component-library'; import { CONNECT_HARDWARE_ROUTE } from '../../helpers/constants/routes'; import ConnectHardwareForm from './connect-hardware'; export default function CreateAccountPage() { return ( - + {