updated contracts + install metamask if not installed

src/components/ConnectWallet.vue

@@ -11,7 +11,14 @@
 					<div class="connector-icon">
 						<img :src="`/assets/img/connectors/${connector.id}.svg`" :alt="`${connector.name} Logo`" />
 					</div>
-					<div class="connector-name">{{ connector.name }}</div>
+					<div class="connector-name">
+						<template
+							v-if="connector.id !== 'metaMask' || (connector.id === 'metaMask' && isMetaMaskInstalled())"
+						>
+							{{ connector.name }}
+						</template>
+						<template v-else> Install {{ connector.name }} </template>
+					</div>
 				</div>
 			</div>
 			<div>Are you coming from Binance, Bybit, Kucoin or any other crypto exchange?</div>
@@ -82,8 +89,8 @@ const fromAddress = ref(null);
 
 const accountSub = ref(null);
 
+const metaMaskInstalled = ref(false);
 const instance = getCurrentInstance();
-
 async function disconnectWallet() {
 	console.log("disconnectWallet");
 	try {
@@ -96,6 +103,15 @@ async function disconnectWallet() {
 	}
 }
 
+function isMetaMaskInstalled() {
+	//metamask is not installed but showing true, is that a bug?
+	if (typeof window.ethereum !== "undefined" && window.ethereum?.isMetaMask && !window.ethereum.isBraveWallet) {
+		console.log("MetaMask is installed!", window.ethereum);
+		return true;
+	}
+	return false;
+}
+
 function badgeClick(token) {
 	var tokenData = tokenStore.getToken(token.contractAddress);
 	tokenStore.activeToken = tokenData;
@@ -113,9 +129,17 @@ function badgeClick(token) {
 }
 
 async function connectWallet(connector) {
+	if (connector.id === "metaMask" && !isMetaMaskInstalled()) {
+		window.open(" https://metamask.io/", "_blank");
+		return;
+	}
 	instance.parent.emit("update:modelValue", false);
 	await walletStore.connectWallet(toRaw(connector));
 }
+
+onMounted(async () => {
+	console.log("window.ethereum", window.ethereum);
+});
 </script>
 
 <style lang="sass">