Detectar si el navegador es compatible con MetaMask.

MetaMask es una popular extensión del navegador que permite a los usuarios interactuar con aplicaciones basadas en Ethereum. Está disponible para Chrome, Firefox, Brave, Edge y Opera. En esta publicación, exploraremos cómo detectar si el navegador de un usuario es compatible con MetaMask.

Una forma de verificar la compatibilidad es simplemente comprobar si el objeto window.ethereum está presente. Este objeto solo está definido en los navegadores que tienen instalado MetaMask (incluido el navegador de MetaMask en dispositivos móviles), por lo que si está presente, podemos asumir que el navegador es compatible.

if (!!window.ethereum) {
	return true;
}

Sin embargo, es posible que también queramos verificar la compatibilidad incluso si MetaMask no está instalado. En este caso, podemos verificar el tipo de navegador del usuario y excluir los navegadores móviles, ya que MetaMask no está disponible actualmente en dispositivos móviles.

const isCompatible = /chrome|firefox/.test(navigator.userAgent.toLowerCase());
const isMobile = /android|iphone|ipad|ipod/.test(navigator.userAgent.toLowerCase());

if (isCompatible && !isMobile) {
	return true;
}

Juntando todo, podemos crear una función que devuelva un valor booleano que indique si el navegador es compatible con MetaMask.

function isMetaMaskSupportedBrowser() {
	// Si el usuario tiene MetaMask instalado, podemos asumir que está en un navegador compatible
	if (!!window.ethereum) {
		return true;
	}

	const isCompatible = /chrome|firefox/.test(navigator.userAgent.toLowerCase());
	const isMobile = /android|iphone|ipad|ipod/.test(navigator.userAgent.toLowerCase());

	return isCompatible && !isMobile;
}

Esta función puede ser útil para mostrar un mensaje de advertencia o error a los usuarios que utilicen un navegador no compatible, o para limitar la funcionalidad de una aplicación solo a navegadores compatibles.