feat: Use EIP-6963 for test-snaps (#3757)

Use EIP-6963 for the `test-snaps` page, preventing collisions with
wallets that don't support Snaps.

Mostly re-uses the logic from `snaps-directory`, adapting it to this
repo.

Fixes #3753

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Adopts EIP-6963 to discover a MetaMask provider that supports Snaps
and routes all RPC requests through it.
> 
> - **Provider discovery and Snaps support**:
> - Add `hasSnapsSupport`, `getMetaMaskEIP6963Provider`, and
`getSnapsProvider` to find a MetaMask provider via EIP-6963 and verify
`wallet_getSnaps` support.
> - Update `request` base query to use the discovered provider and
assert presence before RPC calls.
> - **Type augmentations**:
> - Extend `window.ethereum` to include `setProvider`, `detected`, and
`providers`.
> - Add `WindowEventMap` entries for `eip6963:requestProvider` and
`eip6963:announceProvider`.
> - **Imports**:
>   - Import EIP-6963 event types and `assert` from `@metamask/utils`.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
994719c. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: FrederikBolding

packages/test-snaps/src/api.ts

@@ -1,16 +1,28 @@
 import type {
+  EIP6963AnnounceProviderEvent,
+  EIP6963RequestProviderEvent,
   MetaMaskInpageProvider,
   RequestArguments,
 } from '@metamask/providers';
 import { logError } from '@metamask/snaps-utils';
-import type { JsonRpcError, JsonRpcParams } from '@metamask/utils';
+import { assert, type JsonRpcError, type JsonRpcParams } from '@metamask/utils';
 import type { BaseQueryFn } from '@reduxjs/toolkit/query/react';
 import { createApi } from '@reduxjs/toolkit/query/react';
 
 declare global {
   // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
   interface Window {
-    ethereum: MetaMaskInpageProvider;
+    ethereum: MetaMaskInpageProvider & {
+      setProvider?: (provider: MetaMaskInpageProvider) => void;
+      detected?: MetaMaskInpageProvider[];
+      providers?: MetaMaskInpageProvider[];
+    };
+  }
+
+  // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+  interface WindowEventMap {
+    'eip6963:requestProvider': EIP6963RequestProviderEvent;
+    'eip6963:announceProvider': EIP6963AnnounceProviderEvent;
   }
 }
 
@@ -22,6 +34,121 @@ export enum Tag {
   UnencryptedTestState = 'Unencrypted Test State',
 }
 
+/**
+ * Check if the current provider supports snaps by calling `wallet_getSnaps`.
+ *
+ * @param provider - The provider to use to check for snaps support. Defaults to
+ * `window.ethereum`.
+ * @returns True if the provider supports snaps, false otherwise.
+ */
+async function hasSnapsSupport(
+  provider: MetaMaskInpageProvider = window.ethereum,
+) {
+  try {
+    await provider.request({
+      method: 'wallet_getSnaps',
+    });
+
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Get a MetaMask provider using EIP6963. This will return the first provider
+ * reporting as MetaMask. If no provider is found after 500ms, this will
+ * return null instead.
+ *
+ * @returns A MetaMask provider if found, otherwise null.
+ */
+async function getMetaMaskEIP6963Provider() {
+  return new Promise<MetaMaskInpageProvider | null>((resolve) => {
+    // Timeout looking for providers after 500ms
+    const timeout = setTimeout(() => {
+      resolveWithCleanup(null);
+    }, 500);
+
+    /**
+     * Resolve the promise with a MetaMask provider and clean up.
+     *
+     * @param provider - A MetaMask provider if found, otherwise null.
+     */
+    function resolveWithCleanup(provider: MetaMaskInpageProvider | null) {
+      window.removeEventListener(
+        'eip6963:announceProvider',
+        onAnnounceProvider,
+      );
+      clearTimeout(timeout);
+      resolve(provider);
+    }
+
+    /**
+     * Listener for the EIP6963 announceProvider event.
+     *
+     * Resolves the promise if a MetaMask provider is found.
+     *
+     * @param event - The EIP6963 announceProvider event.
+     * @param event.detail - The details of the EIP6963 announceProvider event.
+     */
+    function onAnnounceProvider({ detail }: EIP6963AnnounceProviderEvent) {
+      if (!detail) {
+        return;
+      }
+
+      const { info, provider } = detail;
+
+      if (info.rdns.includes('io.metamask')) {
+        resolveWithCleanup(provider);
+      }
+    }
+
+    window.addEventListener('eip6963:announceProvider', onAnnounceProvider);
+
+    window.dispatchEvent(new Event('eip6963:requestProvider'));
+  });
+}
+
+/**
+ * Get a provider that supports snaps. This will loop through all the detected
+ * providers and return the first one that supports snaps.
+ *
+ * @returns The provider, or `null` if no provider supports snaps.
+ */
+async function getSnapsProvider() {
+  if (typeof window === 'undefined') {
+    return null;
+  }
+
+  const eip6963Provider = await getMetaMaskEIP6963Provider();
+
+  if (eip6963Provider && (await hasSnapsSupport(eip6963Provider))) {
+    return eip6963Provider;
+  }
+
+  if (await hasSnapsSupport()) {
+    return window.ethereum;
+  }
+
+  if (window.ethereum?.detected) {
+    for (const provider of window.ethereum.detected) {
+      if (await hasSnapsSupport(provider)) {
+        return provider;
+      }
+    }
+  }
+
+  if (window.ethereum?.providers) {
+    for (const provider of window.ethereum.providers) {
+      if (await hasSnapsSupport(provider)) {
+        return provider;
+      }
+    }
+  }
+
+  return null;
+}
+
 /**
  * Base request function for all API calls.
  *
@@ -35,7 +162,11 @@ export const request: BaseQueryFn<RequestArguments> = async ({
   params,
 }) => {
   try {
-    const data = await window.ethereum.request({ method, params });
+    const provider = await getSnapsProvider();
+
+    assert(provider, 'No Ethereum provider found.');
+
+    const data = await provider.request({ method, params });
 
     return { data };
   } catch (error: any) {