From 3c01011ffe4415d44e5a00c202ca04e001e8e71a Mon Sep 17 00:00:00 2001 From: flexa-rob <82925669+flexa-rob@users.noreply.github.com> Date: Fri, 21 Apr 2023 13:21:31 +1000 Subject: [PATCH] 17873 ledger instruction banner (#17937) * switched to use banner alert and added story * enabled dismiss functionality * remove close button * bump global branches coverage target * replace Typography with Text and (link) Button with ButtonLink * unit test for component rendering * left-align button links to match text * update copy to reflect figma mock ups * update unit test snapshot * bump coverage threshold * update snapshot to reflect button component changes * update snapshot to reflect box changes --- app/_locales/en/messages.json | 10 ++-- .../ledger-instruction-field.test.js.snap | 52 +++++++++++++++++++ .../ledger-instruction-field.js | 46 +++++++--------- .../ledger-instruction-field.stories.js | 17 ++++++ .../ledger-instruction-field.test.js | 28 ++++++++++ 5 files changed, 122 insertions(+), 31 deletions(-) create mode 100644 ui/components/app/ledger-instruction-field/__snapshots__/ledger-instruction-field.test.js.snap create mode 100644 ui/components/app/ledger-instruction-field/ledger-instruction-field.stories.js create mode 100644 ui/components/app/ledger-instruction-field/ledger-instruction-field.test.js diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index bd64bcf17..327d80642 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -1987,16 +1987,16 @@ "message": "Prior to clicking confirm:" }, "ledgerConnectionInstructionStepFour": { - "message": "Enable \"smart contract data\" or \"blind signing\" on your Ledger device" + "message": "Enable \"smart contract data\" or \"blind signing\" on your Ledger device." }, "ledgerConnectionInstructionStepOne": { - "message": "Enable Use Ledger Live under Settings > Advanced" + "message": "Enable Use Ledger Live under Settings > Advanced." }, "ledgerConnectionInstructionStepThree": { - "message": "Plug in your Ledger device and select the Ethereum app" + "message": "Be sure your Ledger is plugged in and to select the Ethereum app." }, "ledgerConnectionInstructionStepTwo": { - "message": "Open and unlock Ledger Live App" + "message": "Open and unlock Ledger Live App." }, "ledgerConnectionPreferenceDescription": { "message": "Customize how you connect your Ledger to MetaMask. $1 is recommended, but other options are available. Read more here: $2", @@ -2795,7 +2795,7 @@ "message": "Open Codefi Compliance" }, "openFullScreenForLedgerWebHid": { - "message": "Open MetaMask in full screen to connect your ledger via WebHID.", + "message": "Go to full screen to connect your Ledger.", "description": "Shown to the user on the confirm screen when they are viewing MetaMask in a popup window but need to connect their ledger via webhid." }, "openInBlockExplorer": { diff --git a/ui/components/app/ledger-instruction-field/__snapshots__/ledger-instruction-field.test.js.snap b/ui/components/app/ledger-instruction-field/__snapshots__/ledger-instruction-field.test.js.snap new file mode 100644 index 000000000..4dc118b20 --- /dev/null +++ b/ui/components/app/ledger-instruction-field/__snapshots__/ledger-instruction-field.test.js.snap @@ -0,0 +1,52 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`LedgerInstructionField Component rendering should render properly with data instruction 1`] = ` +
+
+
+
+ +
+
+
+ Prior to clicking confirm: +
+
+ • Be sure your Ledger is plugged in and to select the Ethereum app. +
+
+ • Enable "smart contract data" or "blind signing" on your Ledger device. +
+
+ + + +
+
+
+
+
+
+
+`; diff --git a/ui/components/app/ledger-instruction-field/ledger-instruction-field.js b/ui/components/app/ledger-instruction-field/ledger-instruction-field.js index 1552dd0a6..272c1aa59 100644 --- a/ui/components/app/ledger-instruction-field/ledger-instruction-field.js +++ b/ui/components/app/ledger-instruction-field/ledger-instruction-field.js @@ -19,15 +19,13 @@ import { getLedgerTransportStatus, } from '../../../ducks/app/app'; -import Typography from '../../ui/typography/typography'; -import Button from '../../ui/button'; +import { BannerAlert, ButtonLink, Text } from '../../component-library'; import { useI18nContext } from '../../../hooks/useI18nContext'; import { - FONT_WEIGHT, + SEVERITIES, + TEXT_ALIGN, TextColor, - TypographyVariant, } from '../../../helpers/constants/design-system'; -import Dialog from '../../ui/dialog'; import { getPlatform, getEnvironmentType, @@ -42,14 +40,9 @@ const renderInstructionStep = ( ) => { return ( show && ( - + {text} - + ) ); }; @@ -71,8 +64,8 @@ export default function LedgerInstructionField({ showDataInstruction }) { ledgerTransportType === LedgerTransportTypes.webhid && webHidConnectedStatus !== WebHIDConnectedStatuses.connected ) { - const devices = await window.navigator.hid.getDevices(); - const webHidIsConnected = devices.some( + const devices = await window.navigator?.hid?.getDevices(); + const webHidIsConnected = devices?.some( (device) => device.vendorId === Number(LEDGER_USB_VENDOR_ID), ); dispatch( @@ -136,28 +129,28 @@ export default function LedgerInstructionField({ showDataInstruction }) { return (
- +
{renderInstructionStep(t('ledgerConnectionInstructionHeader'))} {renderInstructionStep( - `- ${t('ledgerConnectionInstructionStepOne')}`, + `• ${t('ledgerConnectionInstructionStepOne')}`, !isFirefox && usingLedgerLive, )} {renderInstructionStep( - `- ${t('ledgerConnectionInstructionStepTwo')}`, + `• ${t('ledgerConnectionInstructionStepTwo')}`, !isFirefox && usingLedgerLive, )} {renderInstructionStep( - `- ${t('ledgerConnectionInstructionStepThree')}`, + `• ${t('ledgerConnectionInstructionStepThree')}`, )} {renderInstructionStep( - `- ${t('ledgerConnectionInstructionStepFour')}`, + `• ${t('ledgerConnectionInstructionStepFour')}`, showDataInstruction, )} {renderInstructionStep( - + , transportStatus === HardwareTransportStates.deviceOpenFailure, )} {renderInstructionStep( - + , usingWebHID && webHidConnectedStatus === WebHIDConnectedStatuses.notConnected, TextColor.WARNING_DEFAULT, )}
- +
); } LedgerInstructionField.propTypes = { + // whether or not to show the data instruction showDataInstruction: PropTypes.bool, }; diff --git a/ui/components/app/ledger-instruction-field/ledger-instruction-field.stories.js b/ui/components/app/ledger-instruction-field/ledger-instruction-field.stories.js new file mode 100644 index 000000000..44e4e0c0a --- /dev/null +++ b/ui/components/app/ledger-instruction-field/ledger-instruction-field.stories.js @@ -0,0 +1,17 @@ +import React from 'react'; +import LedgerInstructionField from '.'; + +export default { + title: 'Components/App/LedgerInstructionField', + argTypes: { + showDataInstruction: { + control: { + type: 'boolean', + }, + }, + }, +}; + +export const DefaultStory = (args) => ; + +DefaultStory.storyName = 'Default'; diff --git a/ui/components/app/ledger-instruction-field/ledger-instruction-field.test.js b/ui/components/app/ledger-instruction-field/ledger-instruction-field.test.js new file mode 100644 index 000000000..7a523395c --- /dev/null +++ b/ui/components/app/ledger-instruction-field/ledger-instruction-field.test.js @@ -0,0 +1,28 @@ +import React from 'react'; +import configureMockStore from 'redux-mock-store'; +import { renderWithProvider } from '../../../../test/lib/render-helpers'; +import LedgerInstructionField from '.'; + +describe('LedgerInstructionField Component', () => { + const mockStore = { + appState: { + ledgerWebHidConnectedStatus: 'notConnected', + }, + metamask: { + ledgerTransportType: 'webhid', + }, + }; + + describe('rendering', () => { + it('should render properly with data instruction', () => { + const store = configureMockStore()(mockStore); + + const { container } = renderWithProvider( + , + store, + ); + + expect(container).toMatchSnapshot(); + }); + }); +});