fix(wallet): check if snaps are supported (#4671)

libs/wallet/src/connect-dialog/connect-dialog.tsx

@@ -1,6 +1,7 @@
 import classNames from 'classnames';
 import {
   Dialog,
+  ExternalLink,
   Intent,
   Pill,
   TradingButton,
@@ -39,7 +40,7 @@ import { useVegaWallet } from '../use-vega-wallet';
 import { InjectedConnectorForm } from './injected-connector-form';
 import { isBrowserWalletInstalled } from '../utils';
 import { useIsWalletServiceRunning } from '../use-is-wallet-service-running';
-import { useIsSnapRunning } from '../use-is-snap-running';
+import { SnapStatus, useSnapStatus } from '../use-snap-status';
 import { useVegaWalletDialogStore } from './vega-wallet-dialog-store';
 
 export const CLOSE_DELAY = 1700;
@@ -158,7 +159,7 @@ const ConnectDialogContainer = ({
     appChainId
   );
 
-  const isSnapRunning = useIsSnapRunning(
+  const snapStatus = useSnapStatus(
     DEFAULT_SNAP_ID,
     Boolean(connectors['snap'])
   );
@@ -183,7 +184,7 @@ const ConnectDialogContainer = ({
             setWalletUrl={setWalletUrl}
             onSelect={handleSelect}
             isDesktopWalletRunning={isDesktopWalletRunning}
-            isSnapRunning={isSnapRunning}
+            snapStatus={snapStatus}
           />
         )}
       </ConnectDialogContent>
@@ -198,14 +199,14 @@ const ConnectorList = ({
   walletUrl,
   setWalletUrl,
   isDesktopWalletRunning,
-  isSnapRunning,
+  snapStatus,
 }: {
   connectors: Connectors;
   onSelect: (type: WalletType) => void;
   walletUrl: string;
   setWalletUrl: (value: string) => void;
   isDesktopWalletRunning: boolean | null;
-  isSnapRunning: boolean | null;
+  snapStatus: SnapStatus;
 }) => {
   const { pubKey, links } = useVegaWallet();
   const title = isBrowserWalletInstalled()
@@ -249,7 +250,7 @@ const ConnectorList = ({
         </div>
         {connectors['snap'] !== undefined ? (
           <div>
-            {isSnapRunning ? (
+            {snapStatus === SnapStatus.INSTALLED ? (
               <ConnectionOption
                 type="snap"
                 text={
@@ -267,22 +268,34 @@ const ConnectorList = ({
                 }}
               />
             ) : (
-              <ConnectionOption
+              <>
-                type="snap"
+                <ConnectionOption
-                text={
+                  type="snap"
-                  <>
+                  disabled={snapStatus === SnapStatus.NOT_SUPPORTED}
-                    <div className="flex items-center justify-center w-full h-full text-base gap-1">
+                  text={
-                      {t('Install Vega MetaMask Snap')}
+                    <>
-                    </div>
+                      <div className="flex items-center justify-center w-full h-full text-base gap-1">
-                    <div className="absolute top-0 flex items-center h-8 right-1">
+                        {t('Install Vega MetaMask Snap')}
-                      <VegaIcon name={VegaIconNames.METAMASK} size={24} />
+                      </div>
-                    </div>
+                      <div className="absolute top-0 flex items-center h-8 right-1">
-                  </>
+                        <VegaIcon name={VegaIconNames.METAMASK} size={24} />
-                }
+                      </div>
-                onClick={() => {
+                    </>
-                  requestSnap(DEFAULT_SNAP_ID);
+                  }
-                }}
+                  onClick={() => {
-              />
+                    requestSnap(DEFAULT_SNAP_ID);
+                  }}
+                />
+                {snapStatus === SnapStatus.NOT_SUPPORTED ? (
+                  <p className="pt-2 text-sm text-default">
+                    {t('No MetaMask version that supports snaps detected.')}{' '}
+                    {t('Learn more about')}{' '}
+                    <ExternalLink href="https://metamask.io/snaps/">
+                      MetaMask Snaps
+                    </ExternalLink>
+                  </p>
+                ) : null}
+              </>
             )}
           </div>
         ) : null}

libs/wallet/src/connectors/snap-connector.ts

@@ -118,14 +118,10 @@ export const getSnap = async (
   snapId: string,
   version?: string
 ): Promise<Snap | undefined> => {
-  try {
+  const snaps = await getSnaps();
-    const snaps = await getSnaps();
+  return Object.values(snaps).find(
-    return Object.values(snaps).find(
+    (snap) => snap.id === snapId && (!version || snap.version === version)
-      (snap) => snap.id === snapId && (!version || snap.version === version)
+  );
-    );
-  } catch (e) {
-    return undefined;
-  }
 };
 
 export const invokeSnap = async <T>(

libs/wallet/src/use-is-snap-running.ts

@@ -1,27 +0,0 @@
-import { useEffect, useState } from 'react';
-import { getSnap } from './connectors';
-
-const INTERVAL = 2_000;
-
-export const useIsSnapRunning = (snapId: string, shouldCheck: boolean) => {
-  const [running, setRunning] = useState(false);
-  useEffect(() => {
-    if (!shouldCheck) return;
-
-    const checkState = async () => {
-      const snap = await getSnap(snapId);
-      setRunning(!!snap);
-    };
-
-    const i = setInterval(() => {
-      checkState();
-    }, INTERVAL);
-
-    checkState();
-
-    return () => {
-      clearInterval(i);
-    };
-  }, [snapId, shouldCheck]);
-  return running;
-};

libs/wallet/src/use-snap-status.ts

@@ -0,0 +1,37 @@
+import { useEffect, useState } from 'react';
+import { getSnap } from './connectors';
+
+const INTERVAL = 2_000;
+
+export enum SnapStatus {
+  NOT_SUPPORTED,
+  INSTALLED,
+  NOT_INSTALLED,
+}
+
+export const useSnapStatus = (snapId: string, shouldCheck: boolean) => {
+  const [status, setStatus] = useState<SnapStatus>(SnapStatus.NOT_INSTALLED);
+  useEffect(() => {
+    if (!shouldCheck) return;
+
+    const checkState = async () => {
+      try {
+        const snap = await getSnap(snapId);
+        setStatus(snap ? SnapStatus.INSTALLED : SnapStatus.NOT_INSTALLED);
+      } catch (err) {
+        setStatus(SnapStatus.NOT_SUPPORTED);
+      }
+    };
+
+    const i = setInterval(() => {
+      checkState();
+    }, INTERVAL);
+
+    checkState();
+
+    return () => {
+      clearInterval(i);
+    };
+  }, [snapId, shouldCheck]);
+  return status;
+};