diff --git a/src/connections.js b/src/connections.js index e9228f88..c0f8133f 100644 --- a/src/connections.js +++ b/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'; diff --git a/src/index.js b/src/index.js index 896c4622..6f8eb22d 100644 --- a/src/index.js +++ b/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(); };