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:
parent
4988e033ad
commit
350132ae03
@ -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,
|
||||
};
|
||||
|
@ -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,
|
||||
|
Loading…
Reference in New Issue
Block a user