1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 01:39:44 +01:00

fix tx submit button when using Ledger

This commit is contained in:
Matthias Kretschmann 2023-06-29 16:31:20 +01:00
parent 4988e033ad
commit 350132ae03
Signed by: m
GPG Key ID: 606EEEF3C479A91F
2 changed files with 6 additions and 127 deletions

View File

@ -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 color={color} as="h6">
{text}
</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 (
<div>
<div className="confirm-detail-row">
<BannerAlert severity={SEVERITIES.INFO}>
<div className="ledger-live-dialog">
{renderInstructionStep(t('ledgerConnectionInstructionHeader'))}
{renderInstructionStep(
`${t('ledgerConnectionInstructionStepOne')}`,
!isFirefox && usingLedgerLive,
)}
{renderInstructionStep(
`${t('ledgerConnectionInstructionStepTwo')}`,
!isFirefox && usingLedgerLive,
)}
{renderInstructionStep(
`${t('ledgerConnectionInstructionStepThree')}`,
)}
{renderInstructionStep(
`${t('ledgerConnectionInstructionStepFour')}`,
showDataInstruction,
)}
{renderInstructionStep(
<span>
<ButtonLink
textAlign={TextAlign.Left}
onClick={async () => {
if (environmentTypeIsFullScreen) {
window.location.reload();
} else {
global.platform.openExtensionInBrowser(null, null, true);
}
}}
>
{t('ledgerConnectionInstructionCloseOtherApps')}
</ButtonLink>
</span>,
transportStatus === HardwareTransportStates.deviceOpenFailure,
)}
{renderInstructionStep(
<span>
<ButtonLink
textAlign={TextAlign.Left}
onClick={async () => {
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')}
</ButtonLink>
</span>,
usingWebHID &&
webHidConnectedStatus === WebHIDConnectedStatuses.notConnected,
TextColor.WARNING_DEFAULT,
)}
</div>
</BannerAlert>
</div>
</div>
);
return null;
}
LedgerInstructionField.propTypes = {
// whether or not to show the data instruction
showDataInstruction: PropTypes.bool,
};

View File

@ -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,