diff --git a/libs/wallet/src/connect-dialog/connect-dialog.tsx b/libs/wallet/src/connect-dialog/connect-dialog.tsx
index 7aa5c32e4..e3c0ed4dc 100644
--- a/libs/wallet/src/connect-dialog/connect-dialog.tsx
+++ b/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}
/>
)}
@@ -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 = ({
{connectors['snap'] !== undefined ? (
- {isSnapRunning ? (
+ {snapStatus === SnapStatus.INSTALLED ? (
) : (
-
-
- {t('Install Vega MetaMask Snap')}
-
-
-
-
- >
- }
- onClick={() => {
- requestSnap(DEFAULT_SNAP_ID);
- }}
- />
+ <>
+
+
+ {t('Install Vega MetaMask Snap')}
+
+
+
+
+ >
+ }
+ onClick={() => {
+ requestSnap(DEFAULT_SNAP_ID);
+ }}
+ />
+ {snapStatus === SnapStatus.NOT_SUPPORTED ? (
+
+ {t('No MetaMask version that supports snaps detected.')}{' '}
+ {t('Learn more about')}{' '}
+
+ MetaMask Snaps
+
+
+ ) : null}
+ >
)}
) : null}
diff --git a/libs/wallet/src/connectors/snap-connector.ts b/libs/wallet/src/connectors/snap-connector.ts
index ede6fa70e..861967a09 100644
--- a/libs/wallet/src/connectors/snap-connector.ts
+++ b/libs/wallet/src/connectors/snap-connector.ts
@@ -118,14 +118,10 @@ export const getSnap = async (
snapId: string,
version?: string
): Promise => {
- 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 (
diff --git a/libs/wallet/src/use-is-snap-running.ts b/libs/wallet/src/use-is-snap-running.ts
deleted file mode 100644
index ec44e2a36..000000000
--- a/libs/wallet/src/use-is-snap-running.ts
+++ /dev/null
@@ -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;
-};
diff --git a/libs/wallet/src/use-snap-status.ts b/libs/wallet/src/use-snap-status.ts
new file mode 100644
index 000000000..87c267aa9
--- /dev/null
+++ b/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.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;
+};