From 74a645e957334957a5d26103d6f64eb72e688f22 Mon Sep 17 00:00:00 2001 From: Danica Shen Date: Mon, 24 Jul 2023 19:00:34 +0100 Subject: [PATCH] feat(874): add tooltip to connect hardwallet and style refactor (#20121) --- app/_locales/en/messages.json | 5 +- .../__snapshots__/index.test.tsx.snap | 43 ++- .../connect-hardware/account-list.js | 2 +- .../connect-hardware/account-list.test.js | 2 +- .../create-account/connect-hardware/index.js | 1 + .../connect-hardware/index.scss | 46 +-- .../connect-hardware/index.test.tsx | 23 +- .../connect-hardware/select-hardware.js | 322 +++++++++++++----- .../select-hardware.stories.js | 2 + .../create-account.component.js | 4 +- ui/pages/create-account/create-account.scss | 15 + ui/pages/pages.scss | 18 +- 12 files changed, 326 insertions(+), 157 deletions(-) create mode 100644 ui/pages/create-account/create-account.scss diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index de66494e2..c0564e7fc 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -1753,8 +1753,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 5284b9760..c91962937 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 @@ -3,21 +3,35 @@ exports[`ConnectHardwareForm should match snapshot 1`] = `
+
`; diff --git a/ui/pages/create-account/connect-hardware/account-list.js b/ui/pages/create-account/connect-hardware/account-list.js index 1100b5d15..f41bb0992 100644 --- a/ui/pages/create-account/connect-hardware/account-list.js +++ b/ui/pages/create-account/connect-hardware/account-list.js @@ -263,7 +263,7 @@ AccountList.propTypes = { onUnlockAccounts: PropTypes.func, onCancel: PropTypes.func, onAccountRestriction: PropTypes.func, - hdPaths: PropTypes.array.isRequired, + hdPaths: PropTypes.object.isRequired, }; AccountList.contextTypes = { diff --git a/ui/pages/create-account/connect-hardware/account-list.test.js b/ui/pages/create-account/connect-hardware/account-list.test.js index 608548117..d9922f882 100644 --- a/ui/pages/create-account/connect-hardware/account-list.test.js +++ b/ui/pages/create-account/connect-hardware/account-list.test.js @@ -14,7 +14,7 @@ const render = () => { }); 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 717192998..e55d16c01 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 3e9f1f79a..16d2f18b8 100644 --- a/ui/pages/create-account/connect-hardware/index.scss +++ b/ui/pages/create-account/connect-hardware/index.scss @@ -1,5 +1,4 @@ .hw-tutorial { - width: 375px; overflow: visible; display: block; padding: 15px 30px; @@ -8,21 +7,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 +56,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 +67,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 +104,6 @@ } } - &__title { - @include H4; - - padding-top: 10px; - font-weight: 400; - } - &__unlock-title { @include H3; @@ -134,12 +113,6 @@ } &__msg { - @include H6; - - color: var(--color-text-muted); - margin-top: 10px; - margin-bottom: 15px; - &-link { @include H6; @@ -270,10 +243,9 @@ } .new-external-account-form { - display: flex; - flex-flow: column; - align-items: center; - padding: 15px 30px 0; + &.footer { + width: 520px; + } &.unsupported-browser { height: 210px; diff --git a/ui/pages/create-account/connect-hardware/index.test.tsx b/ui/pages/create-account/connect-hardware/index.test.tsx index 395fffaa1..b7503f9f2 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 62cb61c8f..2f4383ff7 100644 --- a/ui/pages/create-account/connect-hardware/select-hardware.js +++ b/ui/pages/create-account/connect-hardware/select-hardware.js @@ -1,7 +1,16 @@ import classnames from 'classnames'; import PropTypes from 'prop-types'; import React, { Component } from 'react'; -import Button from '../../../components/ui/button'; +import { + Text, + Box, + IconName, + ButtonIconSize, + ButtonIcon, + Button, + BUTTON_SIZES, + BUTTON_VARIANT, +} from '../../../components/component-library'; import LogoLedger from '../../../components/ui/logo/logo-ledger'; import LogoQRBased from '../../../components/ui/logo/logo-qr-based'; import LogoTrezor from '../../../components/ui/logo/logo-trezor'; @@ -17,6 +26,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, + JustifyContent, + TextAlign, + TextColor, + TextVariant, +} from '../../../helpers/constants/design-system'; export default class SelectHardware extends Component { static contextTypes = { @@ -25,6 +44,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)), @@ -127,8 +147,8 @@ export default class SelectHardware extends Component { renderContinueButton() { return ( - + ); } renderHeader() { return ( -
-

- {this.context.t('hardwareWallets')} -

-

+ + + + {this.context.t('hardwareWallets')} + + + + + {this.context.t('hardwareWalletsMsg')} -

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

{step.title}

{step.renderButtons ? ( - <> + - + ) : null}

{step.message}

{step.asset && ( @@ -274,7 +378,7 @@ export default class SelectHardware extends Component { alt="" /> )} -
+ ))}
); @@ -303,34 +407,47 @@ export default class SelectHardware extends Component { return (
{steps.map((step, index) => ( -
+

{step.title}

- - + + +

{step.message}

{step.asset && ( )} -
+ ))}
); @@ -369,34 +486,48 @@ export default class SelectHardware extends Component { return (
{steps.map((step, index) => ( -
+

{step.title}

- - + + + +

{step.message}

{step.asset && ( )} -
+ ))}
); @@ -427,7 +558,7 @@ export default class SelectHardware extends Component {