Notify users that we are dropping support for their current browser

[Gudahtt]

We would like to notify users when we are planning to drop support for the browser they are currently using, so that users have at least once release to learn about this change and how it will impact them.

[Gudahtt]

The best way to do this is probably to utilize the home notification system, which you can see here:

metamask-extension/ui/pages/home/home.component.js

Lines 304 to 551 in c519d3e

	<MultipleNotifications>
	{
	///: BEGIN:ONLY_INCLUDE_IN(flask)
	shouldShowErrors
	? Object.entries(errorsToShow).map(([errorId, error]) => {
	return (
	<HomeNotification
	classNames={['home__error-message']}
	infoText={error.data.snapId}
	descriptionText={
	<>
	<Typography
	color={COLORS.TEXT_ALTERNATIVE}
	variant={TYPOGRAPHY.H5}
	fontWeight={FONT_WEIGHT.NORMAL}
	>
	{t('somethingWentWrong')}
	</Typography>
	<Typography
	color={COLORS.TEXT_ALTERNATIVE}
	variant={TYPOGRAPHY.H7}
	fontWeight={FONT_WEIGHT.NORMAL}
	>
	{t('snapError', [error.message, error.code])}
	</Typography>
	</>
	}
	onIgnore={async () => {
	await removeSnapError(errorId);
	}}
	ignoreText="Dismiss"
	key="home-error-message"
	/>
	);
	})
	: null
	///: END:ONLY_INCLUDE_IN
	}
	{newCollectibleAddedMessage === 'success' ? (
	<ActionableMessage
	type="success"
	className="home__new-network-notification"
	message={
	<Box display={DISPLAY.INLINE_FLEX}>
	<i className="fa fa-check-circle home__new-nft-notification-icon" />
	<Typography
	variant={TYPOGRAPHY.H7}
	fontWeight={FONT_WEIGHT.NORMAL}
	>
	{t('newCollectibleAddedMessage')}
	</Typography>
	<button
	className="fas fa-times home__new-nft-notification-close"
	title={t('close')}
	onClick={() => setNewCollectibleAddedMessage('')}
	/>
	</Box>
	}
	/>
	) : null}
	{newNetworkAdded ? (
	<ActionableMessage
	type="success"
	className="home__new-network-notification"
	message={
	<Box display={DISPLAY.INLINE_FLEX}>
	<i className="fa fa-check-circle home__new-network-notification-icon" />
	<Typography
	variant={TYPOGRAPHY.H7}
	fontWeight={FONT_WEIGHT.NORMAL}
	>
	{t('newNetworkAdded', [newNetworkAdded])}
	</Typography>
	<button
	className="fas fa-times home__new-network-notification-close"
	title={t('close')}
	onClick={() => setNewNetworkAdded('')}
	/>
	</Box>
	}
	/>
	) : null}
	{newTokensImported ? (
	<ActionableMessage
	type="success"
	className="home__new-tokens-imported-notification"
	message={
	<Box display={DISPLAY.INLINE_FLEX}>
	<i className="fa fa-check-circle home__new-tokens-imported-notification-icon" />
	<Box>
	<Typography
	className="home__new-tokens-imported-notification-title"
	variant={TYPOGRAPHY.H6}
	fontWeight={FONT_WEIGHT.BOLD}
	>
	{t('newTokensImportedTitle')}
	</Typography>
	<Typography
	className="home__new-tokens-imported-notification-message"
	variant={TYPOGRAPHY.H7}
	fontWeight={FONT_WEIGHT.NORMAL}
	>
	{t('newTokensImportedMessage', [newTokensImported])}
	</Typography>
	</Box>
	<button
	className="fas fa-times home__new-tokens-imported-notification-close"
	title={t('close')}
	onClick={() => setNewTokensImported('')}
	/>
	</Box>
	}
	/>
	) : null}
	{shouldShowWeb3ShimUsageNotification ? (
	<HomeNotification
	descriptionText={t('web3ShimUsageNotification', [
	<span
	key="web3ShimUsageNotificationLink"
	className="home-notification__text-link"
	onClick={() =>
	global.platform.openTab({ url: ZENDESK_URLS.LEGACY_WEB3 })
	}
	>
	{t('here')}
	</span>,
	])}
	ignoreText={t('dismiss')}
	onIgnore={(disable) => {
	setWeb3ShimUsageAlertDismissed(originOfCurrentTab);
	if (disable) {
	disableWeb3ShimUsageAlert();
	}
	}}
	checkboxText={t('dontShowThisAgain')}
	checkboxTooltipText={t('canToggleInSettings')}
	key="home-web3ShimUsageNotification"
	/>
	) : null}
	{shouldShowSeedPhraseReminder ? (
	<HomeNotification
	descriptionText={t('backupApprovalNotice')}
	acceptText={t('backupNow')}
	onAccept={() => {
	if (isPopup) {
	global.platform.openExtensionInBrowser(
	INITIALIZE_BACKUP_SEED_PHRASE_ROUTE,
	);
	} else {
	history.push(INITIALIZE_BACKUP_SEED_PHRASE_ROUTE);
	}
	}}
	infoText={t('backupApprovalInfo')}
	key="home-backupApprovalNotice"
	/>
	) : null}
	{threeBoxLastUpdated && showRestorePrompt ? (
	<HomeNotification
	descriptionText={t('restoreWalletPreferences', [
	formatDate(threeBoxLastUpdated, 'M/d/y'),
	])}
	acceptText={t('restore')}
	ignoreText={t('noThanks')}
	infoText={t('dataBackupFoundInfo')}
	onAccept={() => {
	restoreFromThreeBox(selectedAddress).then(() => {
	turnThreeBoxSyncingOn();
	});
	}}
	onIgnore={() => {
	setShowRestorePromptToFalse();
	}}
	key="home-privacyModeDefault"
	/>
	) : null}
	{infuraBlocked && this.state.canShowBlockageNotification ? (
	<HomeNotification
	descriptionText={t('infuraBlockedNotification', [
	<span
	key="infuraBlockedNotificationLink"
	className="home-notification__text-link"
	onClick={() =>
	global.platform.openTab({ url: ZENDESK_URLS.INFURA_BLOCKAGE })
	}
	>
	{t('here')}
	</span>,
	])}
	ignoreText={t('dismiss')}
	onIgnore={() => {
	this.setState({
	canShowBlockageNotification: false,
	});
	}}
	key="home-infuraBlockedNotification"
	/>
	) : null}
	{Object.keys(newCustomNetworkAdded).length !== 0 && (
	<Popover className="home__new-network-added">
	<i className="fa fa-check-circle fa-2x home__new-network-added__check-circle" />
	<Typography
	variant={TYPOGRAPHY.H4}
	marginTop={5}
	marginRight={9}
	marginLeft={9}
	marginBottom={0}
	fontWeight={FONT_WEIGHT.BOLD}
	>
	{t('networkAddedSuccessfully')}
	</Typography>
	<Box marginTop={8} marginRight={8} marginLeft={8} marginBottom={5}>
	<Button
	type="primary"
	className="home__new-network-added__switch-to-button"
	onClick={() => {
	setRpcTarget(
	newCustomNetworkAdded.rpcUrl,
	newCustomNetworkAdded.chainId,
	newCustomNetworkAdded.ticker,
	newCustomNetworkAdded.chainName,
	);
	clearNewCustomNetworkAdded();
	}}
	>
	<Typography
	variant={TYPOGRAPHY.H6}
	fontWeight={FONT_WEIGHT.NORMAL}
	color={COLORS.PRIMARY_INVERSE}
	>
	{t('switchToNetwork', [newCustomNetworkAdded.chainName])}
	</Typography>
	</Button>
	<Button
	type="secondary"
	onClick={() => clearNewCustomNetworkAdded()}
	>
	<Typography
	variant={TYPOGRAPHY.H6}
	fontWeight={FONT_WEIGHT.NORMAL}
	color={COLORS.PRIMARY_DEFAULT}
	>
	{t('dismiss')}
	</Typography>
	</Button>
	</Box>
	</Popover>
	)}
	</MultipleNotifications>

We can add a new conditional notification that is only displayed for users of browsers that are planned to be deprecated soon. For now, we can use the range suggested in this PR, but this range will change over time.

For reference, here is the live Storybook page for the Home notification component: https://metamask.github.io/metamask-storybook/?path=/story/components-app-homenotification--default-story

Open questions:

• Should we let the user dismiss this notification? If we do allow it to be dismissed, should this be a high-friction dismissal with an additional warning/confirmation step?
• What should the copy be for this warning?

[bschorchit]

When we were warning users about the deprecation of the test networks, we allowed the warning to be dismissible as it could get in the way of users doing important things, but the warning would re-appear once the user switched back to a test network that was going to be deprecated or closed and re-opened MM (annoying but hopefully effective). Maybe a similar approach could make sense here - for reference: #15725

What happens to an user if they continue to use their current unsupported browser? Will they loose access to MM or will they be stuck at the last MM version that supports that browser?

[Gudahtt]

What happens to an user if they continue to use their current unsupported browser? Will they loose access to MM or will they be stuck at the last MM version that supports that browser?

Great question! MetaMask will continue working, but they won't be able to update MetaMask until updating the browser first.

we allowed the warning to be dismissible as it could get in the way of users doing important things, but the warning would re-appear once the user switched back to a test network that was going to be deprecated or closed and re-opened MM (annoying but hopefully effective).

Good example. I agree, a similar approach could work well here. It does make sense to allow the notice to be dismissed, but keep reminding the user about it.

I wonder what interval we could use here though, as it's not tied to any user action. Maybe once per day, or something like that?

[Gudahtt]

OK, I think it makes the most sense for this to be a dismiss-able alert that comes back after some period of time. Providing no way to dismiss the notification would be unacceptably irritating, and we don't have a good justification for considering it. But it would also be unsafe and confusing if we never showed the user the warning again after the first dismissal.

My remaining questions are:

• What should the copy be for this notification?
• When/how often should we show the warning again after it is dismissed?
• Should we add a checkbox to allow the user to disable the warning altogether?
  • We have a pattern for this already, if we want to go this route. The "Alerts" section of settings tracks notifications/alerts that normally recur but have been disabled. This at least allows the user to see that this is a thing they disabled, and it lets them re-enable it again later.

[Gudahtt]

For the copy, I think this is what we want to communicate:

• Your browser is outdated, and probably has security vulnerabilities making it unsafe for general use.
• MetaMask will soon stop updating unless you update your browser. This is bad because you won't get future improvements and security patches.

[coreyjanssen]

Thoughts @bschorchit @Gudahtt?

Proposed copy:
Your browser is out of date
If you don't update your browser, you won't be able to get security patches and new features from MetaMask.
[Button] Got it

[Gudahtt]

Thanks @coreyjanssen !

That looks good to me, it has all of the information we wanted. The tone doesn't strike me as particularly urgent, but maybe that's OK.

[kevinghim]

When/how often should we show the warning again after it is dismissed?

Had a discussion with @Gudahtt about alert intervals -- every other day would be appropriate as to not annoy users, but encourage them to update browser versions.