Can we inject WalletConnect's EthereumProvider to React Native Webview?

[williamliangwl]

Our app has been using @walletconnect/web3wallet to connect our users' wallet to the dapp. Our flow currently is very similar with the React Native example here

We are now exploring to have in-app-browser that users can open any dapp and then they can connect to the dapp.

I saw many examples are suggesting to use the @metamask/mobile-provider and inject it into react-native-webview. I believe the idea of @metamask/mobile-provider is to inject a EIP1193 Provider into window.ethereum object in the dapp. The result, when I try it, some dapp only shows Metamask as the only option of connecting the wallet and there are callbacks / RPCs happening.

However, we are wondering if we can change the option shown to user, from Metamask to WalletConnect instead, so that we just reuse our current flow, rather than having to handle the RPCs from 0. We saw there's @walletconnect/ethereum-provider. So we are wondering if we can inject that provider into the react-native-webview as well ? or actually it is very different with the Metamask's one?

sorry for the noob question, I am still new to this field 🙏

[engrwaqasali]

+1
i want to inject ethereum into webview

 const injectedScript = `
            window.ethereum = {
                request: async function({method, params}) {
                    return new Promise((resolve, reject) => {
                      const messageId = Date.now() * Math.pow(10, 3) +  Math.floor(Math.random() * Math.pow(10, 3));
                      window.ReactNativeWebView.postMessage(JSON.stringify({
                          id: messageId,
                          method: method,
                          params: params
                      }));

                      const functionToCall = (event) => {
                          const data = JSON.parse(event.data);
                          if (data.id && data.id === messageId) {
                            window.ReactNativeWebView.postMessage(JSON.stringify({
                              id: messageId,
                              method: method,
                              params: params,
                              debug: 'message received',
                              data: data
                            }));
                            if (data?.error) {
                              reject(data.error);
                            } else {
                              console.log('data.result success', data.result);
                              if(data.result){
                              resolve(data.result);
                              } else {
                                resolve();
                              }
                            }
                          }

                      }
                      if(${isIos}) {
                        window.addEventListener("message", functionToCall);
                      } else {
                        document.addEventListener("message", functionToCall);
                      }
                    });
                },
                isConnected: () => true,
            };
            // window.web3 = { currentProvider: window.ethereum };
            true;  // ensure the injected script doesn't return a value
        `;
        
        

i have this simple injector but its not working for things like event emitters and stuff like i get errors on window.ethereum.emit cuz clearly its not injected and undefined