fix: android and detox E2E issue

src/connections.js

@@ -1,5 +1,4 @@
 import { MetaMaskSDK } from '@metamask/sdk';
-import { createWeb3Modal, defaultConfig } from '@web3modal/ethers5';
 import {
   handleNewAccounts,
   handleNewProviderDetail,
@@ -16,12 +15,34 @@ const dappMetadata = {
   url: 'https://metamask.github.io/test-dapp/',
 };
 
+// eslint-disable-next-line require-unicode-regexp
+const isAndroid = /Android/i.test(navigator.userAgent);
+
 const sdk = new MetaMaskSDK({ dappMetadata });
 
-export const walletConnect = createWeb3Modal({
-  ethersConfig: defaultConfig({ metadata: dappMetadata }),
-  projectId: 'e6360eaee594162688065f1c70c863b7', // test id
-});
+export const initializeWeb3Modal = () => {
+  if (!isAndroid) {
+    try {
+      // eslint-disable-next-line node/global-require
+      const { createWeb3Modal, defaultConfig } = require('@web3modal/ethers5');
+
+      const web3Modal = createWeb3Modal({
+        ethersConfig: defaultConfig({ metadata: dappMetadata }),
+        projectId: 'e6360eaee594162688065f1c70c863b7',
+      });
+
+      console.log('Web3Modal initialized successfully');
+      return web3Modal;
+    } catch (error) {
+      console.error('Error initializing Web3Modal', error);
+    }
+  }
+
+  console.log('Web3Modal is not initialized');
+  return null;
+};
+
+export const walletConnect = initializeWeb3Modal();
 
 function _setProviderDetail(provider, name, uuid) {
   const providerDetail = {
@@ -51,7 +72,7 @@ export async function handleSdkConnect(name, button, isConnected) {
     const provider = sdk.getProvider();
     const uuid = sdk.getChannelId();
     const providerDetail = _setProviderDetail(provider, name, uuid);
-    setActiveProviderDetail(providerDetail);
+    await setActiveProviderDetail(providerDetail);
     handleNewProviderDetail(providerDetail);
     updateSdkConnectionState(true);
     button.innerText = 'Sdk Connect - Disconnect';
@@ -84,7 +105,7 @@ export async function handleWalletConnect(name, button, isConnected) {
     const { provider } = walletConnect.getWalletProvider();
     const uuid = provider.signer.uri;
     const providerDetail = _setProviderDetail(provider, name, uuid);
-    setActiveProviderDetail(providerDetail);
+    await setActiveProviderDetail(providerDetail);
     handleNewProviderDetail(providerDetail);
     updateWalletConnectState(true);
     button.innerText = 'Wallet Connect - Disconnect';

src/index.js

@@ -554,7 +554,7 @@ const detectEip6963 = () => {
 export const setActiveProviderDetail = async (providerDetail) => {
   closeProvider();
   provider = providerDetail.provider;
-  initializeProvider();
+  await initializeProvider();
 
   try {
     const newAccounts = await provider.request({
@@ -574,7 +574,7 @@ export const setActiveProviderDetail = async (providerDetail) => {
   updateFormElements();
 };
 
-const setActiveProviderDetailWindowEthereum = () => {
+const setActiveProviderDetailWindowEthereum = async () => {
   const providerDetail = {
     info: {
       uuid: '',
@@ -584,7 +584,7 @@ const setActiveProviderDetailWindowEthereum = () => {
     provider: window.ethereum,
   };
 
-  setActiveProviderDetail(providerDetail);
+  await setActiveProviderDetail(providerDetail);
 };
 
 const existsProviderDetail = (newProviderDetail) => {
@@ -3349,9 +3349,9 @@ const setDeeplinks = () => {
  */
 
 const initialize = async () => {
-  setActiveProviderDetailWindowEthereum();
+  await setActiveProviderDetailWindowEthereum();
   detectEip6963();
-  setActiveProviderDetail(providerDetails[0]);
+  await setActiveProviderDetail(providerDetails[0]);
   initializeFormElements();
   setDeeplinks();
 };