fix: enhance MetaMask extension ID detection with retry logic (#70)

* fix: enhance MetaMask extension ID detection with retry logic

* fix: improve MetaMask extension ID detection with request ID handling

* Revert "fix: improve MetaMask extension ID detection with request ID handling"

This reverts commit 229db69.

Author: baptiste-marchand

src/helpers/metamaskExtensionId.ts

@@ -1,4 +1,4 @@
-import { CONTENT_SCRIPT, INPAGE } from '../transports/constants';
+import { CONTENT_SCRIPT, INPAGE, METAMASK_EXTENSION_CONNECT_CAN_RETRY } from '../transports/constants';
 import { METAMASK_PROVIDER_STREAM_NAME } from '../transports/constants';
 
 /**
@@ -7,10 +7,16 @@ import { METAMASK_PROVIDER_STREAM_NAME } from '../transports/constants';
 export async function detectMetamaskExtensionId(): Promise<string> {
   return new Promise((resolve, reject) => {
     const messageHandler = (event: MessageEvent) => {
-      const { target, data } = event.data;
-      if (target === INPAGE && data?.name === METAMASK_PROVIDER_STREAM_NAME && event.origin === location.origin) {
-        const extensionId = data?.data?.result?.extensionId;
-        if (extensionId) {
+      if (isProviderMessage(event)) {
+        const data = event?.data?.data?.data;
+
+        // When a retry message is received, it means the previous getProviderState request was not received by the extension, so we need to retry
+        if (data?.method === METAMASK_EXTENSION_CONNECT_CAN_RETRY) {
+          getProviderState();
+        }
+        // Handle the provider state response
+        else if (data?.result?.extensionId) {
+          const extensionId = data?.result?.extensionId;
           resolve(extensionId);
           window.removeEventListener('message', messageHandler);
           clearTimeout(timeoutId);
@@ -21,16 +27,25 @@ export async function detectMetamaskExtensionId(): Promise<string> {
     const timeoutId = setTimeout(() => {
       window.removeEventListener('message', messageHandler);
       reject(new Error('MetaMask extension not found'));
-    }, 3000);
+    }, 10000);
 
     window.addEventListener('message', messageHandler);
 
-    window.postMessage(
-      {
-        target: CONTENT_SCRIPT,
-        data: { name: METAMASK_PROVIDER_STREAM_NAME, data: { method: 'metamask_getProviderState' } },
-      },
-      location.origin,
-    );
+    getProviderState();
   });
 }
+
+function getProviderState() {
+  window.postMessage(
+    {
+      target: CONTENT_SCRIPT,
+      data: { name: METAMASK_PROVIDER_STREAM_NAME, data: { method: 'metamask_getProviderState' } },
+    },
+    location.origin,
+  );
+}
+
+function isProviderMessage(event: MessageEvent) {
+  const { target, data } = event.data;
+  return target === INPAGE && data?.name === METAMASK_PROVIDER_STREAM_NAME && event.origin === location.origin;
+}

src/transports/constants.ts

@@ -4,3 +4,4 @@ export const CONTENT_SCRIPT = 'metamask-contentscript';
 export const INPAGE = 'metamask-inpage';
 export const MULTICHAIN_SUBSTREAM_NAME = 'metamask-multichain-provider';
 export const METAMASK_PROVIDER_STREAM_NAME = 'metamask-provider';
+export const METAMASK_EXTENSION_CONNECT_CAN_RETRY = 'METAMASK_EXTENSION_CONNECT_CAN_RETRY';