1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-05 23:44:56 +01:00
metamask-extension/ui/components/app/qr-hardware-popover/qr-hardware-popover.js

103 lines
3.1 KiB
JavaScript
Raw Normal View History

import React, { useCallback, useMemo, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { getCurrentQRHardwareState } from '../../../selectors';
import Popover from '../../ui/popover';
import { useI18nContext } from '../../../hooks/useI18nContext';
import {
cancelSyncQRHardware as cancelSyncQRHardwareAction,
cancelQRHardwareSignRequest as cancelQRHardwareSignRequestAction,
cancelTx,
cancelPersonalMsg,
cancelMsg,
cancelTypedMsg,
} from '../../../store/actions';
import { MESSAGE_TYPE } from '../../../../shared/constants/app';
import QRHardwareWalletImporter from './qr-hardware-wallet-importer';
import QRHardwareSignRequest from './qr-hardware-sign-request';
const QRHardwarePopover = () => {
const t = useI18nContext();
const qrHardware = useSelector(getCurrentQRHardwareState);
const { sync, sign } = qrHardware;
const showWalletImporter = sync?.reading;
const showSignRequest = sign?.request;
const showPopover = showWalletImporter || showSignRequest;
const [errorTitle, setErrorTitle] = useState('');
const { txData } = useSelector((state) => {
return state.confirmTransaction;
});
// the confirmTransaction's life cycle is not consistent with QR hardware wallet;
// the confirmTransaction will change after the previous tx is confirmed or cancel,
// we want to block the changing by sign request id;
const _txData = useMemo(() => {
return txData;
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [sign?.request?.requestId]);
const dispatch = useDispatch();
const walletImporterCancel = useCallback(
() => dispatch(cancelSyncQRHardwareAction()),
[dispatch],
);
const signRequestCancel = useCallback(() => {
let action = cancelTx;
switch (_txData.type) {
case MESSAGE_TYPE.PERSONAL_SIGN: {
action = cancelPersonalMsg;
break;
}
case MESSAGE_TYPE.ETH_SIGN: {
action = cancelMsg;
break;
}
case MESSAGE_TYPE.ETH_SIGN_TYPED_DATA: {
action = cancelTypedMsg;
break;
}
default: {
action = cancelTx;
}
}
dispatch(action(_txData));
dispatch(cancelQRHardwareSignRequestAction());
}, [dispatch, _txData]);
const title = useMemo(() => {
let _title = '';
if (showSignRequest) {
_title = t('QRHardwareSignRequestTitle');
} else if (showWalletImporter) {
_title = t('QRHardwareWalletImporterTitle');
}
if (errorTitle !== '') {
_title = errorTitle;
}
return _title;
}, [showSignRequest, showWalletImporter, t, errorTitle]);
return showPopover ? (
<Popover
title={title}
onClose={showWalletImporter ? walletImporterCancel : signRequestCancel}
>
{showWalletImporter && (
<QRHardwareWalletImporter
handleCancel={walletImporterCancel}
setErrorTitle={setErrorTitle}
/>
)}
{showSignRequest && (
<QRHardwareSignRequest
setErrorTitle={setErrorTitle}
handleCancel={signRequestCancel}
request={sign.request}
/>
)}
</Popover>
) : null;
};
export default QRHardwarePopover;