Implement hardware connectivity confirmation screens

app/scripts/metamask-controller.js

@@ -1537,6 +1537,11 @@ export default class MetamaskController extends EventEmitter {
       establishLedgerTransportPreference: this.establishLedgerTransportPreference.bind(
         this,
       ),
+      checkDeviceReady: this.checkDeviceReady.bind(this),
+      startDeviceConnectionPolling: this.startDeviceConnectionPolling.bind(
+        this,
+      ),
+      stopDeviceConnectionPolling: this.stopDeviceConnectionPolling.bind(this),
 
       // qr hardware devices
       submitQRHardwareCryptoHDKey: qrHardwareKeyring.submitCryptoHDKey.bind(
@@ -2527,6 +2532,34 @@ export default class MetamaskController extends EventEmitter {
     return { ...keyState, identities };
   }
 
+  async checkDeviceReady(address) {
+    const keyring = await this.keyringController.getKeyringForAccount(address);
+    if (!keyring) {
+      throw new Error('No keyring could be found for this address');
+    }
+
+    const isReady = Boolean(keyring?.isConnected?.());
+    return isReady;
+  }
+
+  async startDeviceConnectionPolling(address) {
+    const keyring = await this.keyringController.getKeyringForAccount(address);
+    if (!keyring) {
+      throw new Error('No keyring could be found for this address');
+    }
+
+    keyring?.startConnectionPolling?.();
+  }
+
+  async stopDeviceConnectionPolling(address) {
+    const keyring = await this.keyringController.getKeyringForAccount(address);
+    if (!keyring) {
+      throw new Error('No keyring could be found for this address');
+    }
+
+    keyring?.stopConnectionPolling?.();
+  }
+
   //
   // Account Management
   //

ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js

@@ -54,6 +54,8 @@ export default class ConfirmPageContainerContent extends Component {
     toAddress: PropTypes.string,
     transactionType: PropTypes.string,
     isBuyableChain: PropTypes.bool,
+    hideConfirmPageContainerSummaryAndButtons: PropTypes.bool.isRequired,
+    showHardwareConnectionContents: PropTypes.bool,
   };
 
   renderContent() {
@@ -127,6 +129,8 @@ export default class ConfirmPageContainerContent extends Component {
       toAddress,
       transactionType,
       isBuyableChain,
+      hideConfirmPageContainerSummaryAndButtons,
+      showHardwareConnectionContents,
     } = this.props;
 
     const { t } = this.context;
@@ -146,24 +150,26 @@ export default class ConfirmPageContainerContent extends Component {
         {ethGasPriceWarning && (
           <ConfirmPageContainerWarning warning={ethGasPriceWarning} />
         )}
-        <ConfirmPageContainerSummary
-          className={classnames({
-            'confirm-page-container-summary--border':
-              !detailsComponent || !dataComponent,
-          })}
-          action={action}
-          title={title}
-          image={image}
-          titleComponent={titleComponent}
-          subtitleComponent={subtitleComponent}
-          hideSubtitle={hideSubtitle}
-          tokenAddress={tokenAddress}
-          nonce={nonce}
-          origin={origin}
-          hideTitle={hideTitle}
-          toAddress={toAddress}
-          transactionType={transactionType}
-        />
+        {showHardwareConnectionContents ? null : (
+          <ConfirmPageContainerSummary
+            className={classnames({
+              'confirm-page-container-summary--border':
+                !detailsComponent || !dataComponent,
+            })}
+            action={action}
+            title={title}
+            image={image}
+            titleComponent={titleComponent}
+            subtitleComponent={subtitleComponent}
+            hideSubtitle={hideSubtitle}
+            tokenAddress={tokenAddress}
+            nonce={nonce}
+            origin={origin}
+            hideTitle={hideTitle}
+            toAddress={toAddress}
+            transactionType={transactionType}
+          />
+        )}
         {this.renderContent()}
         {!supportsEIP1559V2 &&
           (errorKey || errorMessage) &&
@@ -209,17 +215,19 @@ export default class ConfirmPageContainerContent extends Component {
           </div>
         )}
 
-        <PageContainerFooter
-          onCancel={onCancel}
-          cancelText={cancelText}
-          onSubmit={onSubmit}
-          submitText={submitText}
-          disabled={disabled}
-        >
-          {unapprovedTxCount > 1 ? (
-            <a onClick={onCancelAll}>{rejectNText}</a>
-          ) : null}
-        </PageContainerFooter>
+        {hideConfirmPageContainerSummaryAndButtons ? null : (
+          <PageContainerFooter
+            onCancel={onCancel}
+            cancelText={cancelText}
+            onSubmit={onSubmit}
+            submitText={submitText}
+            disabled={disabled}
+          >
+            {unapprovedTxCount > 1 ? (
+              <a onClick={onCancelAll}>{rejectNText}</a>
+            ) : null}
+          </PageContainerFooter>
+        )}
       </div>
     );
   }

ui/components/app/confirm-page-container/confirm-page-container.component.js

@@ -22,6 +22,7 @@ import { INSUFFICIENT_FUNDS_ERROR_KEY } from '../../../helpers/constants/error-k
 import Typography from '../../ui/typography';
 import { TYPOGRAPHY } from '../../../helpers/constants/design-system';
 
+import HardwareConnectivityPopover from '../../../pages/confirm-transaction-base/hardware-connectivity/hardware-connectivity-popover';
 import EnableEIP1559V2Notice from './enableEIP1559V2-notice';
 import {
   ConfirmPageContainerHeader,
@@ -97,6 +98,10 @@ export default class ConfirmPageContainer extends Component {
     nativeCurrency: PropTypes.string,
     showBuyModal: PropTypes.func,
     isBuyableChain: PropTypes.bool,
+    // Hardware
+    showHardwareConnectionContents: PropTypes.bool,
+    showHardwareConnectionAdvancedPopover: PropTypes.bool,
+    closeHardwareConnectionAdvancedPopover: PropTypes.func,
   };
 
   render() {
@@ -153,6 +158,9 @@ export default class ConfirmPageContainer extends Component {
       showBuyModal,
       isBuyableChain,
       networkIdentifier,
+      showHardwareConnectionContents,
+      showHardwareConnectionAdvancedPopover,
+      closeHardwareConnectionAdvancedPopover,
     } = this.props;
 
     const showAddToAddressDialog =
@@ -261,6 +269,9 @@ export default class ConfirmPageContainer extends Component {
               toAddress={toAddress}
               transactionType={currentTransaction.type}
               isBuyableChain={isBuyableChain}
+              hideConfirmPageContainerSummaryAndButtons={
+                showHardwareConnectionContents
+              }
             />
           )}
           {shouldDisplayWarning && errorKey === INSUFFICIENT_FUNDS_ERROR_KEY && (
@@ -330,6 +341,11 @@ export default class ConfirmPageContainer extends Component {
               <AdvancedGasFeePopover />
             </>
           )}
+          {showHardwareConnectionAdvancedPopover ? (
+            <HardwareConnectivityPopover
+              onClose={closeHardwareConnectionAdvancedPopover}
+            />
+          ) : null}
         </div>
       </GasFeeContextProvider>
     );

ui/components/app/ledger-transport-dropdown/index.js

@@ -0,0 +1,121 @@
+import React, { useState } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { useI18nContext } from '../../../hooks/useI18nContext';
+
+import Dialog from '../../ui/dialog';
+import Button from '../../ui/button';
+import Dropdown from '../../ui/dropdown/dropdown';
+
+import {
+  LEDGER_TRANSPORT_TYPES,
+  LEDGER_USB_VENDOR_ID,
+} from '../../../../shared/constants/hardware-wallets';
+import ZENDESK_URLS from '../../../helpers/constants/zendesk-url';
+
+import {
+  getLedgerTransportType,
+  doesUserHaveALedgerAccount,
+} from '../../../ducks/metamask/metamask';
+
+import { setLedgerTransportPreference } from '../../../store/actions';
+
+export default function LedgerTransportDropdown() {
+  const [showLedgerTransportWarning, setShowLedgerTransportWarning] = useState(
+    false,
+  );
+
+  const [ledgerTransportType, setLedgerTransportType] = useState(
+    useSelector(getLedgerTransportType),
+  );
+
+  const dispatch = useDispatch();
+
+  const t = useI18nContext();
+
+  const userHasALedgerAccount = useSelector(doesUserHaveALedgerAccount);
+
+  const LEDGER_TRANSPORT_NAMES = {
+    LIVE: t('ledgerLive'),
+    WEBHID: t('webhid'),
+    U2F: t('u2f'),
+  };
+
+  const transportTypeOptions = [
+    {
+      name: LEDGER_TRANSPORT_NAMES.LIVE,
+      value: LEDGER_TRANSPORT_TYPES.LIVE,
+    },
+    {
+      name: LEDGER_TRANSPORT_NAMES.U2F,
+      value: LEDGER_TRANSPORT_TYPES.U2F,
+    },
+  ];
+
+  if (window.navigator.hid) {
+    transportTypeOptions.push({
+      name: LEDGER_TRANSPORT_NAMES.WEBHID,
+      value: LEDGER_TRANSPORT_TYPES.WEBHID,
+    });
+  }
+
+  const recommendedLedgerOption = window.navigator.hid
+    ? LEDGER_TRANSPORT_NAMES.WEBHID
+    : LEDGER_TRANSPORT_NAMES.U2F;
+
+  return (
+    <div className="settings-page__content-row">
+      <div className="settings-page__content-item">
+        <span>{t('preferredLedgerConnectionType')}</span>
+        <div className="settings-page__content-description">
+          {t('ledgerConnectionPreferenceDescription', [
+            recommendedLedgerOption,
+            <Button
+              key="ledger-connection-settings-learn-more"
+              type="link"
+              href={ZENDESK_URLS.HARDWARE_WALLET_HELP}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="settings-page__inline-link"
+            >
+              {t('learnMore')}
+            </Button>,
+          ])}
+        </div>
+      </div>
+      <div className="settings-page__content-item">
+        <div className="settings-page__content-item-col">
+          <Dropdown
+            id="ledger-transport-dropdown"
+            options={transportTypeOptions}
+            selectedOption={ledgerTransportType}
+            onChange={async (transportType) => {
+              if (
+                ledgerTransportType === LEDGER_TRANSPORT_TYPES.LIVE &&
+                transportType === LEDGER_TRANSPORT_TYPES.WEBHID
+              ) {
+                setShowLedgerTransportWarning(true);
+              }
+              setLedgerTransportType(transportType);
+              dispatch(setLedgerTransportPreference(transportType));
+              if (
+                transportType === LEDGER_TRANSPORT_TYPES.WEBHID &&
+                userHasALedgerAccount
+              ) {
+                await window.navigator.hid.requestDevice({
+                  filters: [{ vendorId: LEDGER_USB_VENDOR_ID }],
+                });
+              }
+            }}
+          />
+          {showLedgerTransportWarning ? (
+            <Dialog type="message">
+              <div className="settings-page__content-item-dialog">
+                {t('ledgerTransportChangeWarning')}
+              </div>
+            </Dialog>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  );
+}

ui/components/app/ledger-transport-dropdown/index.stories.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import LedgerTransportDropdown from '.';
+
+export default {
+  title: 'Components/App/LedgerTransportDropdown',
+  id: __filename,
+};
+
+export const DefaultStory = (args) => {
+  return <LedgerTransportDropdown {...args} />;
+};
+
+DefaultStory.storyName = 'Default';
+
+DefaultStory.args = {};

ui/components/ui/actionable-message/index.scss

@@ -134,6 +134,7 @@
 
   &--success {
     border: 1px solid var(--color-success-default);
+    color: var(--color-success-default);
 
     &::before {
       background: var(--color-success-muted);

ui/helpers/constants/zendesk-url.js

@@ -11,6 +11,8 @@ const ZENDESK_URLS = {
     'https://metamask.zendesk.com/hc/en-us/articles/360060826432-What-is-a-Secret-Recovery-Phrase-and-how-to-keep-your-crypto-wallet-secure',
   PASSWORD_ARTICLE:
     'https://metamask.zendesk.com/hc/en-us/articles/4404722782107',
+  HARDWARE_WALLET_HELP:
+    'https://metamask.zendesk.com/hc/en-us/articles/4408552261275-Hardware-Wallet-Hub',
 };
 
 export default ZENDESK_URLS;