2023-02-23 17:39:48 +01:00
|
|
|
import React, { useContext } from 'react';
|
|
|
|
import { useHistory } from 'react-router-dom';
|
|
|
|
import { useSelector, useDispatch } from 'react-redux';
|
|
|
|
import browser from 'webextension-polyfill';
|
|
|
|
import { PairingKeyStatus } from '@metamask/desktop/dist/types';
|
|
|
|
import { I18nContext } from '../../../contexts/i18n';
|
|
|
|
import Button from '../../ui/button';
|
|
|
|
import {
|
|
|
|
DESKTOP_ERROR_ROUTE,
|
|
|
|
DESKTOP_PAIRING_ROUTE,
|
|
|
|
} from '../../../helpers/constants/routes';
|
|
|
|
import { EXTENSION_ERROR_PAGE_TYPES } from '../../../../shared/constants/desktop';
|
|
|
|
import { getIsDesktopEnabled } from '../../../selectors';
|
|
|
|
import {
|
|
|
|
hideLoadingIndication,
|
|
|
|
showLoadingIndication,
|
|
|
|
setDesktopEnabled as setDesktopEnabledAction,
|
|
|
|
testDesktopConnection,
|
|
|
|
disableDesktop,
|
|
|
|
} from '../../../store/actions';
|
|
|
|
import { SECOND } from '../../../../shared/constants/time';
|
2023-03-02 21:55:27 +01:00
|
|
|
import { MetaMetricsContext } from '../../../contexts/metametrics';
|
2023-04-03 17:31:04 +02:00
|
|
|
import { MetaMetricsEventCategory } from '../../../../shared/constants/metametrics';
|
2023-02-23 17:39:48 +01:00
|
|
|
|
|
|
|
const DESKTOP_ERROR_DESKTOP_OUTDATED_ROUTE = `${DESKTOP_ERROR_ROUTE}/${EXTENSION_ERROR_PAGE_TYPES.DESKTOP_OUTDATED}`;
|
|
|
|
const DESKTOP_ERROR_EXTENSION_OUTDATED_ROUTE = `${DESKTOP_ERROR_ROUTE}/${EXTENSION_ERROR_PAGE_TYPES.EXTENSION_OUTDATED}`;
|
|
|
|
const DESKTOP_ERROR_NOT_FOUND_ROUTE = `${DESKTOP_ERROR_ROUTE}/${EXTENSION_ERROR_PAGE_TYPES.NOT_FOUND}`;
|
|
|
|
const DESKTOP_ERROR_PAIRING_KEY_NOT_MATCH_ROUTE = `${DESKTOP_ERROR_ROUTE}/${EXTENSION_ERROR_PAGE_TYPES.PAIRING_KEY_NOT_MATCH}`;
|
|
|
|
const SKIP_PAIRING_RESTART_DELAY = 2 * SECOND;
|
2023-03-02 21:55:27 +01:00
|
|
|
const DESKTOP_UPDATE_SETTINGS_EVENT = 'Settings Updated';
|
2023-02-23 17:39:48 +01:00
|
|
|
|
|
|
|
export default function DesktopEnableButton() {
|
|
|
|
const t = useContext(I18nContext);
|
|
|
|
const dispatch = useDispatch();
|
|
|
|
const history = useHistory();
|
2023-03-02 21:55:27 +01:00
|
|
|
const trackEvent = useContext(MetaMetricsContext);
|
2023-02-23 17:39:48 +01:00
|
|
|
const showLoader = () => dispatch(showLoadingIndication());
|
|
|
|
const hideLoader = () => dispatch(hideLoadingIndication());
|
|
|
|
const desktopEnabled = useSelector(getIsDesktopEnabled);
|
|
|
|
const setDesktopEnabled = (val) => dispatch(setDesktopEnabledAction(val));
|
|
|
|
const restart = () => dispatch(browser.runtime.reload());
|
|
|
|
|
|
|
|
const onClick = async () => {
|
|
|
|
if (desktopEnabled) {
|
|
|
|
await disableDesktop();
|
|
|
|
setDesktopEnabled(false);
|
2023-03-02 21:55:27 +01:00
|
|
|
trackEvent({
|
2023-04-03 17:31:04 +02:00
|
|
|
category: MetaMetricsEventCategory.Desktop,
|
2023-03-02 21:55:27 +01:00
|
|
|
event: DESKTOP_UPDATE_SETTINGS_EVENT,
|
|
|
|
properties: {
|
|
|
|
desktop_enabled: false,
|
|
|
|
},
|
|
|
|
});
|
2023-02-23 17:39:48 +01:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
showLoader();
|
|
|
|
const testResult = await testDesktopConnection();
|
|
|
|
hideLoader();
|
|
|
|
|
|
|
|
if ([PairingKeyStatus.NO_MATCH].includes(testResult.pairingKeyCheck)) {
|
|
|
|
history.push(DESKTOP_ERROR_PAIRING_KEY_NOT_MATCH_ROUTE);
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (!testResult.isConnected) {
|
|
|
|
history.push(DESKTOP_ERROR_NOT_FOUND_ROUTE);
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (!testResult.versionCheck?.isExtensionVersionValid) {
|
|
|
|
history.push(DESKTOP_ERROR_EXTENSION_OUTDATED_ROUTE);
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (!testResult.versionCheck?.isDesktopVersionValid) {
|
|
|
|
history.push(DESKTOP_ERROR_DESKTOP_OUTDATED_ROUTE);
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (process.env.SKIP_OTP_PAIRING_FLOW) {
|
|
|
|
showLoader();
|
|
|
|
setDesktopEnabled(true);
|
|
|
|
|
|
|
|
// Wait for new state to persist before restarting
|
|
|
|
setTimeout(() => {
|
|
|
|
restart();
|
|
|
|
}, SKIP_PAIRING_RESTART_DELAY);
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2023-03-02 21:55:27 +01:00
|
|
|
trackEvent({
|
2023-04-03 17:31:04 +02:00
|
|
|
category: MetaMetricsEventCategory.Desktop,
|
2023-03-02 21:55:27 +01:00
|
|
|
event: 'Desktop Button Clicked',
|
|
|
|
properties: {
|
|
|
|
button_action: 'Enable MetaMask Desktop',
|
|
|
|
},
|
|
|
|
});
|
2023-02-23 17:39:48 +01:00
|
|
|
history.push(DESKTOP_PAIRING_ROUTE);
|
|
|
|
};
|
|
|
|
|
2023-03-02 21:55:27 +01:00
|
|
|
const getButtonText = (isDesktopEnabled) =>
|
|
|
|
isDesktopEnabled ? t('desktopDisableButton') : t('desktopEnableButton');
|
|
|
|
|
2023-02-23 17:39:48 +01:00
|
|
|
return (
|
|
|
|
<Button
|
|
|
|
type="primary"
|
|
|
|
large
|
|
|
|
onClick={(event) => {
|
|
|
|
event.preventDefault();
|
|
|
|
onClick();
|
|
|
|
}}
|
|
|
|
>
|
2023-03-02 21:55:27 +01:00
|
|
|
{getButtonText(desktopEnabled)}
|
2023-02-23 17:39:48 +01:00
|
|
|
</Button>
|
|
|
|
);
|
|
|
|
}
|