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; +};