chore: remove mm flask mentions (#469)

* chore: update docs

* chore: update jsdoc

* chore: update README

* chore: remove flask from dapp

* chore: add changeset

* chore: add changeset

* chore: update connector

* chore: lint

* chore: update dapp

* chore: update connector methodž

* chore: update dapp

* chore: changeset

* fix: add version text

.changeset/gold-forks-exercise.md

@@ -0,0 +1,5 @@
+---
+'@blockchain-lab-um/masca-connector': minor
+---
+
+Added method to check if installed MetaMask supports snaps.

.changeset/great-radios-love.md

@@ -0,0 +1,5 @@
+---
+'@blockchain-lab-um/dapp': patch
+---
+
+Removed MetaMask Flask requirements.

.changeset/rich-rings-impress.md

@@ -0,0 +1,5 @@
+---
+'@blockchain-lab-um/masca-docs': patch
+---
+
+Removed mentions of MetaMask Flask.

README.md

@@ -48,8 +48,8 @@ Many new features are already in the works. For more information, please check t
 
 ### Prerequisites
 
-- [MetaMask Flask](https://metamask.io/flask/)
-  - ⚠️ You cannot have other versions of MetaMask installed
+- [MetaMask](https://metamask.io/)
+  - ⚠️ You need a version of MetaMask that supports Snaps
 - Node.js `18`. We **strongly** recommend you install via [NVM](https://github.com/creationix/nvm) to avoid incompatibility issues between different node projects.
   - Once installed, you should also install [pnpm](https://pnpm.io/) with `npm i -g pnpm` to make working with this repository easiest.
 

packages/connector/src/index.ts

@@ -20,15 +20,25 @@ export interface SnapInstallationParams {
 
 const defaultSnapOrigin = 'npm:@blockchain-lab-um/masca';
 
+export async function isMetamaskSnapsSupported(): Promise<boolean> {
+  try {
+    await window.ethereum.request({
+      method: 'wallet_getSnaps',
+    });
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+
 /**
  * Install and enable Masca
  * This is the main entry point for Masca
  *
- * Checks for existence of MetaMask Flask and installs Masca if not installed.
+ * Checks for existence of MetaMask and installs Masca if not installed.
  *
  * Set the Masca version to be installed and select the supported DID methods, as these are the only methods that will be available on the API returned from this function.
  *
- * **_Note: Flask should be the only enabled MetaMask extention in the browser_**
  * @param snapInstallationParams - set snapID, version and a list of supported methods
  * @return Masca - adapter object that exposes snap API
  */
@@ -49,14 +59,9 @@ export async function enableMasca(
     return ResultObject.error('No provider found');
   }
 
-  // web3_clientVersion returns the installed MetaMask version as a string
-  const mmVersion: string = await window.ethereum.request({
-    method: 'web3_clientVersion',
-  });
-
-  if (!mmVersion.includes('flask')) {
+  if (!(await isMetamaskSnapsSupported())) {
     return ResultObject.error(
-      'MetaMask is not supported. Please install MetaMask Flask.'
+      "Currently installed MetaMask version doesn't support snaps."
     );
   }
 

packages/dapp/src/components/AppNavbar/NavConnection.tsx

@@ -19,7 +19,7 @@ export const NavConnection = () => {
   const {
     isConnected,
     hasMM,
-    hasFlask,
+    hasSnaps,
     address,
     chainId,
     changeIsConnected,
@@ -28,7 +28,7 @@ export const NavConnection = () => {
   } = useGeneralStore((state) => ({
     isConnected: state.isConnected,
     hasMM: state.hasMetaMask,
-    hasFlask: state.isFlask,
+    hasSnaps: state.supportsSnaps,
     address: state.address,
     chainId: state.chainId,
     changeIsConnected: state.changeIsConnected,
@@ -72,7 +72,7 @@ export const NavConnection = () => {
     localStorage.setItem('isConnected', 'false');
   };
 
-  if (!hasMM || !hasFlask) return null;
+  if (!hasMM || !hasSnaps) return null;
 
   if (isConnected) {
     return (

packages/dapp/src/components/CheckMetaMaskCompatibility/index.tsx

@@ -1,7 +1,11 @@
 'use client';
 
 import { useEffect } from 'react';
-import { enableMasca, isError } from '@blockchain-lab-um/masca-connector';
+import {
+  enableMasca,
+  isError,
+  isMetamaskSnapsSupported,
+} from '@blockchain-lab-um/masca-connector';
 import detectEthereumProvider from '@metamask/detect-provider';
 
 import mascaVersionJson from '@/utils/masca.json';
@@ -13,14 +17,14 @@ const snapId =
     : 'npm:@blockchain-lab-um/masca';
 
 const CheckMetaMaskCompatibility = () => {
-  const { changeHasMetaMask, changeIsFlask } = useGeneralStore((state) => ({
+  const { changeHasMetaMask, changeHasSnaps } = useGeneralStore((state) => ({
     changeHasMetaMask: state.changeHasMetaMask,
-    changeIsFlask: state.changeIsFlask,
+    changeHasSnaps: state.changeSupportsSnaps,
   }));
 
   const {
     hasMM,
-    hasFlask,
+    hasSnaps,
     address,
     isConnected,
     isConnecting,
@@ -31,7 +35,7 @@ const CheckMetaMaskCompatibility = () => {
     changeChainId,
   } = useGeneralStore((state) => ({
     hasMM: state.hasMetaMask,
-    hasFlask: state.isFlask,
+    hasSnaps: state.supportsSnaps,
     address: state.address,
     isConnected: state.isConnected,
     isConnecting: state.isConnecting,
@@ -80,31 +84,14 @@ const CheckMetaMaskCompatibility = () => {
   };
 
   const checkMetaMaskCompatibility = async () => {
-    try {
-      const provider = await detectEthereumProvider({ mustBeMetaMask: true });
+    const provider = await detectEthereumProvider({ mustBeMetaMask: true });
 
-      if (!provider) {
-        changeHasMetaMask(false);
-        changeIsFlask(false);
-        return;
-      }
-    } catch (error) {
-      changeHasMetaMask(false);
-      changeIsFlask(false);
-    }
+    if (!provider || (provider as any)?.isBraveWallet) return;
 
     changeHasMetaMask(true);
 
-    const mmVersion = (await window.ethereum.request({
-      method: 'web3_clientVersion',
-    })) as string;
-
-    if (!mmVersion.includes('flask')) {
-      changeIsFlask(false);
-      return;
-    }
-
-    changeIsFlask(true);
+    const snaps = await isMetamaskSnapsSupported();
+    if (snaps) changeHasSnaps(true);
   };
 
   const enableMascaHandler = async () => {
@@ -170,7 +157,7 @@ const CheckMetaMaskCompatibility = () => {
   };
 
   useEffect(() => {
-    if (hasMM && hasFlask && window.ethereum) {
+    if (hasMM && hasSnaps && window.ethereum) {
       window.ethereum.on('accountsChanged', (...accounts) => {
         changeAddress((accounts[0] as string[])[0]);
       });
@@ -185,30 +172,30 @@ const CheckMetaMaskCompatibility = () => {
         window.ethereum.removeAllListeners('chainChanged');
       }
     };
-  }, [hasMM, hasFlask]);
+  }, [hasMM, hasSnaps]);
 
   useEffect(() => {
     const lsIsConnected = localStorage.getItem('isConnected');
     if (lsIsConnected !== 'true') return;
-    if (!hasMM || !hasFlask) return;
+    if (!hasMM || !hasSnaps) return;
     if (isConnected) return;
     if (isConnecting) return;
     changeIsConnecting(true);
     connectHandler().catch((err) => {
       console.error(err);
       changeIsConnecting(false);
     });
-  }, [hasMM, hasFlask]);
+  }, [hasMM, hasSnaps]);
 
   useEffect(() => {
-    if (!hasMM || !hasFlask || !address) return;
+    if (!hasMM || !hasSnaps || !address) return;
     console.log('Address changed to', address);
     enableMascaHandler().catch((err) => {
       console.error(err);
       changeIsConnecting(false);
       changeAddress('');
     });
-  }, [hasMM, hasFlask, address]);
+  }, [hasMM, hasSnaps, address]);
 
   useEffect(() => {
     checkMetaMaskCompatibility().catch((error) => {

packages/dapp/src/components/ConnectedProvider/index.tsx

@@ -26,8 +26,13 @@ const ConnectedProvider = ({ children }: ConnectedProviderProps) => {
   return (
     <div className="dark:bg-navy-blue-800 dark:text-navy-blue-400 flex-1 rounded-3xl bg-white shadow-lg">
       <div className="flex flex-col items-center justify-center px-6 py-12 sm:px-12">
-        <div className="text-h4 sm:text-h3 dark:text-navy-blue-50 text-center text-gray-900">
-          {t('connect')}
+        <div className="flex h-full flex-col items-center justify-center">
+          <h3 className="text-h4 sm:text-h3 dark:text-navy-blue-50 text-center text-gray-900">
+            {t('connect')}
+          </h3>
+          <h4 className="text-h4 md:text-h5 dark:text-navy-blue-50/50 mt-3 text-gray-900/50">
+            {t('version')}
+          </h4>
         </div>
         <div className="dark:border-navy-blue-500 mt-8 rounded-3xl border border-gray-500 px-6 py-8 sm:px-12 md:min-w-[40em]">
           <div className="flex items-center gap-x-6">

packages/dapp/src/components/MetaMaskProvider/index.tsx

@@ -13,30 +13,35 @@ interface MetaMaskProviderProps {
 const MetaMaskProvider = ({ children }: MetaMaskProviderProps) => {
   const t = useTranslations('MetaMaskProvider');
 
-  const { hasMM, hasFlask } = useGeneralStore((state) => ({
+  const { hasMM, hasSnaps } = useGeneralStore((state) => ({
     hasMM: state.hasMetaMask,
-    hasFlask: state.isFlask,
+    hasSnaps: state.supportsSnaps,
   }));
 
-  if (hasMM && hasFlask) {
+  if (hasMM && hasSnaps) {
     return <>{children}</>;
   }
 
   return (
     <div className="dark:bg-navy-blue-800 dark:text-navy-blue-400 flex-1 rounded-3xl bg-white shadow-lg">
       <div className="flex h-full items-center justify-center">
         <div>
-          <h3 className="text-h4 md:text-h3 dark:text-navy-blue-50 text-gray-800">
-            {t('flask')}
-          </h3>
+          <div className="flex flex-col items-center justify-center">
+            <h3 className="text-h4 md:text-h3 dark:text-navy-blue-50 text-gray-800">
+              {t('metamask')}
+            </h3>
+            <h4 className="text-h4 md:text-h5 dark:text-navy-blue-50/50 mt-3 text-gray-800/50">
+              {t('version')}
+            </h4>
+          </div>
           <div className="mt-16 flex items-center justify-center">
             <Button
               variant="gray"
               onClick={() => {
-                window.open('https://metamask.io/flask/');
+                window.open('https://metamask.io/download/');
               }}
             >
-              MetaMask Flask
+              MetaMask
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 fill="none"

packages/dapp/src/messages/en.json

@@ -74,6 +74,7 @@
   },
   "ConnectedProvider": {
     "connect": "Connect Wallet & Install Masca to continue",
+    "version": "Please install the latest version of MetaMask!",
     "masca": "Masca",
     "masca-desc": "Manage Decentralized Identity in MetaMask",
     "features": {
@@ -284,7 +285,8 @@
     "title": "Import Credential"
   },
   "MetaMaskProvider": {
-    "flask": "Install MetaMask Flask to use the dapp!"
+    "metamask": "Install MetaMask to use the dapp!",
+    "version": "Please install the latest version of MetaMask!"
   },
   "MethodDropdownMenu": {
     "switching": "Switching DID method",

packages/dapp/src/stores/generalStore.ts

@@ -7,18 +7,18 @@ interface GeneralStore {
   isConnecting: boolean;
   did: string;
   hasMetaMask: boolean;
-  isFlask: boolean;
   hasSnapInstalled: boolean;
   chainId: string;
+  supportsSnaps: boolean;
 
   changeAddress: (address: string) => void;
   changeIsConnected: (isConnected: boolean) => void;
   changeIsConnecting: (isConnecting: boolean) => void;
   changeDid: (did: string) => void;
   changeHasMetaMask: (hasMetaMask: boolean) => void;
-  changeIsFlask: (isFlask: boolean) => void;
   changeHasSnapInstalled: (hasSnapInstalled: boolean) => void;
   changeChainId: (chainId: string) => void;
+  changeSupportsSnaps: (supportsSnaps: boolean) => void;
 }
 
 export const generalStoreInitialState = {
@@ -27,9 +27,9 @@ export const generalStoreInitialState = {
   isConnecting: false,
   did: '',
   hasMetaMask: false,
-  isFlask: false,
   hasSnapInstalled: false,
   chainId: '',
+  supportsSnaps: false,
 };
 
 export const useGeneralStore = createWithEqualityFn<GeneralStore>()(
@@ -41,10 +41,10 @@ export const useGeneralStore = createWithEqualityFn<GeneralStore>()(
     changeIsConnecting: (isConnecting: boolean) => set({ isConnecting }),
     changeDid: (did: string) => set({ did }),
     changeHasMetaMask: (hasMetaMask: boolean) => set({ hasMetaMask }),
-    changeIsFlask: (isFlask: boolean) => set({ isFlask }),
     changeHasSnapInstalled: (hasSnapInstalled: boolean) =>
       set({ hasSnapInstalled }),
     changeChainId: (chainId: string) => set({ chainId }),
+    changeSupportsSnaps: (supportsSnaps: boolean) => set({ supportsSnaps }),
   }),
   shallow
 );

packages/docs/docs/apps/demo.md

@@ -16,4 +16,4 @@ In this demo, a user will install and approve Masca, get and store a VC after co
 
 </center>
 
-You can try the demo **[here](https://blockchain-lab-um.github.io/course-dapp/)**. You'll need to use **[MetaMask Flask](https://metamask.io/flask/)** (version >10.23.0).
+You can try the demo **[here](https://blockchain-lab-um.github.io/course-dapp/)**. You just need a MetaMask version that supports Snaps installed.

packages/docs/docs/faqs.md

@@ -33,27 +33,23 @@ Masca also allows you to store Credentials in MetaMask (or any other supported s
 
 ### How to install Masca?
 
-1. First you need to install [MetaMask Flask](https://metamask.io/flask/) and then install [Masca](https://www.npmjs.com/package/@blockchain-lab-um/masca) from the npm registry. We recommend that you use the latest version of Masca.
+1. First you need to install [MetaMask](https://metamask.io/download/) and then install [Masca](https://www.npmjs.com/package/@blockchain-lab-um/masca) from the npm registry. We recommend that you use the latest version of Masca.
 2. Connect to a dapp that supports Masca and accept the connection & installation prompts.
 3. Check out our [dapp](https://masca.io) to start using Masca.
 
-### Why do I have to use MetaMask Flask?
-
-Snaps are only available on the developer preview version of MetaMask, called MetaMask Flask. Snaps will be released in MetaMask later this year.
-
-### Why can't I install Masca in MetaMask?
-
-Snaps are only available on the developer preview version of MetaMask, called MetaMask Flask. Snaps will be released in MetaMask later this year.
-
 ### Can I use Masca without a dapp?
 
 No. For the moment, the only way to interact with Masca is through a dapp. We have built a [dedicated dapp](https://masca.io) that allows you to view and manage your DIDs and Credentials.
 
 MetaMask plans to add support for Snaps UI in MetaMask, which will allow us to implement custom UI to interact with Masca directly in MetaMask extension.
 
+### I have MetaMask installed, but it is not installing the snap.
+
+Please check that the version of MetaMask you have installed supports Snaps.
+
 ### Is Masca available on the Mobile MetaMask app?
 
-Snaps are only available in browser-based extension MetaMask Flask, however there are plans to add support for snaps in the Mobile extension.
+Currently, not all snaps are fully supported on mobile. Mobile support is still in development for now.
 
 ### What happens if I delete Masca in MetaMask?
 
@@ -65,6 +61,6 @@ Yes. Masca does not have access to users private keys! [Learn](./masca/design.md
 
 ### Are my Credentials private?
 
-Yes and No. Credentials can be stored directly in Masca or on Ceramic Network. Credentials stored in Masca are completely private and only available for user to see. Credentials stored on Ceramic Network are public for anybody to see (though accessing them is not as straightforward as searching address in a block explorer). We recommend users to save all Credentials that contain sensitive information in Masca.
+Yes and No. Credentials can be stored directly in Masca or on Ceramic Network. Credentials stored in Masca are completely private and only available for the user to see. Credentials stored on Ceramic Network are public for anybody to see (though accessing them is not as straightforward as searching an address in a block explorer). We recommend users to save all Credentials that contain sensitive information in Masca.
 
-Depending on the use case, dapps are likely to request Masca to share credentials with them. Always double check who you're sharing Credentials with as hostile dapps could potentially save your credentials.
+Depending on the use case, dapps are likely to request Masca to share credentials with them. Always double check who you're sharing Credentials with, as hostile dapps could potentially save your credentials.