chore: wording

libs/proposals/src/components/protocol-upgrade-in-progress-notification.tsx

@@ -26,36 +26,22 @@ export const ProtocolUpgradeInProgressNotification = () => {
   const [nextUpgrade] = useLocalStorageSnapshot(
     NEXT_PROTOCOL_UPGRADE_PROPOSAL_SNAPSHOT
   );
+  const { blocksRising, block } = useBlockRising();
   const detailsLink = useProtocolUpgradeProposalLink();
 
   let vegaReleaseTag: string | undefined;
   let upgradeBlockHeight: string | undefined;
 
-  const hasData = data && !error;
-  const hasStoredData = nextUpgrade && ALLOW_STORED_PROPOSAL_DATA;
-
-  if (hasData) {
-    // gets tag and height from the data api
-    vegaReleaseTag = data.vegaReleaseTag;
-    upgradeBlockHeight = data.upgradeBlockHeight;
-  } else if (hasStoredData) {
-    // gets tag and height from stored value if data api is unavailable
+  if (error && !data && nextUpgrade && ALLOW_STORED_PROPOSAL_DATA) {
     try {
       const stored = JSON.parse(nextUpgrade) as StoredNextProtocolUpgradeData;
       vegaReleaseTag = stored.vegaReleaseTag;
       upgradeBlockHeight = stored.upgradeBlockHeight;
     } catch {
-      // NOOP - could not parse stored data
+      // no op
     }
   }
 
-  const hasUpgradeInfo = vegaReleaseTag && upgradeBlockHeight;
-
-  const { blocksRising, block } = useBlockRising(
-    // skips querying blocks if there's no upgrade information available
-    !hasUpgradeInfo
-  );
-
   /**
    * If upgrade is in progress then none of the nodes should produce blocks,
    * same should be with the tendermint block info otherwise it's a network
@@ -64,7 +50,10 @@ export const ProtocolUpgradeInProgressNotification = () => {
    * Once the networks is back then the notification disappears.
    */
   const upgradeInProgress =
-    hasUpgradeInfo && !blocksRising && block <= Number(upgradeBlockHeight);
+    vegaReleaseTag &&
+    upgradeBlockHeight &&
+    !blocksRising &&
+    block <= Number(upgradeBlockHeight);
 
   if (!upgradeInProgress) return null;
 

libs/proposals/src/lib/protocol-upgrade-proposals/use-block-rising.ts

@@ -15,33 +15,31 @@ const CHECK_INTERVAL = 5000; // ms
  */
 const ALLOW_STALE = 2; // times -> MAX(this, 1) * CHECK_INTERVAL ~> min check time
 
-export const useBlockRising = (skip = false) => {
+export const useBlockRising = () => {
   const [blocksRising, setBlocksRising] = useState(true);
   const [block, setBlock] = useState(0);
   const nodes = useEnvironment((state) => state.nodes);
   const clients = useMemo(() => {
-    return nodes.map((n) => {
-      if (n && n.length > 0) {
-        const client = createClient({
+    return nodes.map(
+      (n) =>
+        n &&
+        n.length > 0 &&
+        createClient({
           url: n,
           cacheConfig: undefined,
           retry: false,
           connectToDevTools: false,
           connectToHeaderStore: true,
-        });
-        return client;
-      }
-      return undefined;
-    });
+        })
+    );
   }, [nodes]);
 
   const { refetch: fetchBlockInfo } = useBlockInfo();
   useEffect(() => {
-    if (skip) return;
     let stale = 0;
     let prev = 0;
     const check = async () => {
-      const queries = clients.map((client) =>
+      const queries = clients.map((client, index) =>
         client
           ? client
               .query<BlockStatisticsQuery>({
@@ -49,16 +47,18 @@ export const useBlockRising = (skip = false) => {
                 fetchPolicy: 'network-only',
                 errorPolicy: 'ignore',
               })
-              .catch(() => {
-                // NOOP - could not retrieve statistics for that node (network error)
-              })
+              .catch((err) =>
+                Promise.reject(
+                  `could not retrieve statistics from ${nodes[index]}`
+                )
+              )
           : undefined
       );
 
       const blockInfo = await fetchBlockInfo();
       const results = (await Promise.allSettled(compact(queries))).map(
         (res) => {
-          if (res && res.status === 'fulfilled' && res.value) {
+          if (res && res.status === 'fulfilled') {
             return res.value.data.statistics;
           } else {
             return undefined;
@@ -86,7 +86,7 @@ export const useBlockRising = (skip = false) => {
     return () => {
       clearInterval(interval);
     };
-  }, [clients, fetchBlockInfo, blocksRising, nodes, skip]);
+  }, [clients, fetchBlockInfo, blocksRising, nodes]);
 
   return { blocksRising, block };
 };

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"
-                text={
-                  <>
-                    <div className="flex items-center justify-center w-full h-full text-base gap-1">
-                      {t('Install Vega MetaMask Snap')}
-                    </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);
-                }}
-              />
+              <>
+                <ConnectionOption
+                  type="snap"
+                  disabled={snapStatus === SnapStatus.NOT_SUPPORTED}
+                  text={
+                    <>
+                      <div className="flex items-center justify-center w-full h-full text-base gap-1">
+                        {t('Install Vega MetaMask Snap')}
+                      </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);
+                  }}
+                />
+                {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();
-    return Object.values(snaps).find(
-      (snap) => snap.id === snapId && (!version || snap.version === version)
-    );
-  } catch (e) {
-    return undefined;
-  }
+  const snaps = await getSnaps();
+  return Object.values(snaps).find(
+    (snap) => snap.id === snapId && (!version || snap.version === version)
+  );
 };
 
 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;
+};