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 5de3aa97a..3f17d6804 100644 --- a/ui/components/app/ledger-instruction-field/ledger-instruction-field.js +++ b/ui/components/app/ledger-instruction-field/ledger-instruction-field.js @@ -1,16 +1,11 @@ -import React, { useEffect } from 'react'; +import { useEffect } from 'react'; import { useDispatch, useSelector } from 'react-redux'; -import PropTypes from 'prop-types'; import { LedgerTransportTypes, WebHIDConnectedStatuses, HardwareTransportStates, LEDGER_USB_VENDOR_ID, } from '../../../../shared/constants/hardware-wallets'; -import { - PLATFORM_FIREFOX, - ENVIRONMENT_TYPE_FULLSCREEN, -} from '../../../../shared/constants/app'; import { setLedgerWebHidConnectedStatus, @@ -19,44 +14,15 @@ import { getLedgerTransportStatus, } from '../../../ducks/app/app'; -import { BannerAlert, ButtonLink, Text } from '../../component-library'; -import { useI18nContext } from '../../../hooks/useI18nContext'; -import { - SEVERITIES, - TextAlign, - TextColor, -} from '../../../helpers/constants/design-system'; -import { - getPlatform, - getEnvironmentType, -} from '../../../../app/scripts/lib/util'; import { getLedgerTransportType } from '../../../ducks/metamask/metamask'; import { attemptLedgerTransportCreation } from '../../../store/actions'; -const renderInstructionStep = ( - text, - show = true, - color = TextColor.textDefault, -) => { - return ( - show && ( - - {text} - - ) - ); -}; - -export default function LedgerInstructionField({ showDataInstruction }) { - const t = useI18nContext(); +export default function LedgerInstructionField() { const dispatch = useDispatch(); const webHidConnectedStatus = useSelector(getLedgerWebHidConnectedStatus); const ledgerTransportType = useSelector(getLedgerTransportType); const transportStatus = useSelector(getLedgerTransportStatus); - const environmentType = getEnvironmentType(); - const environmentTypeIsFullScreen = - environmentType === ENVIRONMENT_TYPE_FULLSCREEN; useEffect(() => { const initialConnectedDeviceCheck = async () => { @@ -121,92 +87,5 @@ export default function LedgerInstructionField({ showDataInstruction }) { }; }, [dispatch]); - const usingLedgerLive = ledgerTransportType === LedgerTransportTypes.live; - const usingWebHID = ledgerTransportType === LedgerTransportTypes.webhid; - - const isFirefox = getPlatform() === PLATFORM_FIREFOX; - - return ( -
-
- -
- {renderInstructionStep(t('ledgerConnectionInstructionHeader'))} - {renderInstructionStep( - `• ${t('ledgerConnectionInstructionStepOne')}`, - !isFirefox && usingLedgerLive, - )} - {renderInstructionStep( - `• ${t('ledgerConnectionInstructionStepTwo')}`, - !isFirefox && usingLedgerLive, - )} - {renderInstructionStep( - `• ${t('ledgerConnectionInstructionStepThree')}`, - )} - {renderInstructionStep( - `• ${t('ledgerConnectionInstructionStepFour')}`, - showDataInstruction, - )} - {renderInstructionStep( - - { - if (environmentTypeIsFullScreen) { - window.location.reload(); - } else { - global.platform.openExtensionInBrowser(null, null, true); - } - }} - > - {t('ledgerConnectionInstructionCloseOtherApps')} - - , - transportStatus === HardwareTransportStates.deviceOpenFailure, - )} - {renderInstructionStep( - - { - if (environmentTypeIsFullScreen) { - const connectedDevices = - await window.navigator.hid.requestDevice({ - filters: [{ vendorId: LEDGER_USB_VENDOR_ID }], - }); - const webHidIsConnected = connectedDevices.some( - (device) => - device.vendorId === Number(LEDGER_USB_VENDOR_ID), - ); - dispatch( - setLedgerWebHidConnectedStatus({ - webHidConnectedStatus: webHidIsConnected - ? WebHIDConnectedStatuses.connected - : WebHIDConnectedStatuses.notConnected, - }), - ); - } else { - global.platform.openExtensionInBrowser(null, null, true); - } - }} - > - {environmentTypeIsFullScreen - ? t('clickToConnectLedgerViaWebHID') - : t('openFullScreenForLedgerWebHid')} - - , - usingWebHID && - webHidConnectedStatus === WebHIDConnectedStatuses.notConnected, - TextColor.WARNING_DEFAULT, - )} -
-
-
-
- ); + return null; } - -LedgerInstructionField.propTypes = { - // whether or not to show the data instruction - showDataInstruction: PropTypes.bool, -}; diff --git a/ui/pages/confirm-transaction-base/confirm-transaction-base.container.js b/ui/pages/confirm-transaction-base/confirm-transaction-base.container.js index 5bf31a206..2518e3ee6 100644 --- a/ui/pages/confirm-transaction-base/confirm-transaction-base.container.js +++ b/ui/pages/confirm-transaction-base/confirm-transaction-base.container.js @@ -44,7 +44,7 @@ import { } from '../../selectors'; import { getMostRecentOverviewPage } from '../../ducks/history/history'; import { - // isAddressLedger, + isAddressLedger, updateGasFees, getIsGasEstimatesLoading, getNativeCurrency, @@ -213,7 +213,7 @@ const mapStateToProps = (state, ownProps) => { const gasFeeIsCustom = fullTxData.userFeeLevel === CUSTOM_GAS_ESTIMATE || txParamsAreDappSuggested(fullTxData); - // const fromAddressIsLedger = isAddressLedger(state, fromAddress); + const fromAddressIsLedger = isAddressLedger(state, fromAddress); const nativeCurrency = getNativeCurrency(state); ///: BEGIN:ONLY_INCLUDE_IN(build-mmi) const accountType = getAccountType(state, fromAddress); @@ -272,7 +272,7 @@ const mapStateToProps = (state, ownProps) => { maxPriorityFeePerGas: gasEstimationObject.maxPriorityFeePerGas, baseFeePerGas: gasEstimationObject.baseFeePerGas, gasFeeIsCustom, - showLedgerSteps: false, + showLedgerSteps: fromAddressIsLedger, nativeCurrency, hardwareWalletRequiresConnection, isMultiLayerFeeNetwork,