javascript insertion

[wootzappcom]

this is our existing code - https://github.com/wootzapp/browser

1. this is an app that opens ANY webpage in react-native-webview. . Its simple, one-screen app
2. what we want : when webpage loads in react-native-webview...after loading, we inject one javascript file in page using DOM manipulation
3. we have given hints on how to do it.

HINTS

• which file to inject? https://github.com/rsksmart/rwallet/blob/8da44a5a68b156c07a99f522668e8ead95e63582/src/pages/dapp/browser.js#L82-L107

• This shows which file to inject and how to read the file
  https://github.com/rsksmart/rwallet/blob/8da44a5a68b156c07a99f522668e8ead95e63582/src/pages/dapp/browser.js#L153

• this file shows how to inject this javascript page into a DOM. this is done on injectedJavaScriptBeforeContentLoaded https://github.com/rsksmart/rwallet/blob/8da44a5a68b156c07a99f522668e8ead95e63582/src/pages/dapp/browser.js#L721

Testing criteria:

• app should open webpage either by putting address directly in address bar... or by clicking web link from any other app (like whatsapp). this app should be registered to handle http:// and https:// links
• connect remote debugging webviews - https://developer.chrome.com/docs/devtools/remote-debugging/webviews/
• check if the page has "ethereum" global object injected into the page

[wootzappcom]

https://github.com/rsksmart/rwallet/blob/8da44a5a68b156c07a99f522668e8ead95e63582/src/pages/dapp/browser.js#L81-L108

https://github.com/rsksmart/rwallet/blob/8da44a5a68b156c07a99f522668e8ead95e63582/src/pages/dapp/browser.js#L721 injectedJavaScriptBeforeContentLoaded

[wootzappcom]

The injected javascript code will trap all website calls and communicate with react-native https://github.com/rsksmart/rwallet/blob/8da44a5a68b156c07a99f522668e8ead95e63582/src/pages/dapp/browser.js#L301-L314

this will go through the Webview's "onMessage" function https://github.com/rsksmart/rwallet/blob/8da44a5a68b156c07a99f522668e8ead95e63582/src/pages/dapp/browser.js#L723

here you can handle all types of events https://github.com/rsksmart/rwallet/blob/8da44a5a68b156c07a99f522668e8ead95e63582/src/pages/dapp/browser.js#L636-L705

Test criteria

you can show popup at any event. Generally, "eth_requestAccounts" is the first event that is called.

Test sites

• https://pancakeswap.finance/
• https://sorbet-finance-git-fix-metamask-mobile-bug-2-gelato.vercel.app/

Test video

behavior should look like this

https://user-images.githubusercontent.com/90070064/133897557-dbfed8aa-410b-4ebe-a32e-5417b0cafa51.mp4

[wootzappcom]

Connect webview and react-native

this looks like a nicer and cleaner way to connect webview and react-native.

https://github.com/TryImpossible/react-native-diy/blob/ef6314f82179d9c3130468a9b440684f808d6ff0/webviewInvoker/example/App.js#L48-L58 (the difference is how the injectjavascript happens after webview init. this is explanation of why https://github.com/hieuandree/tcom-react-native-webview/blob/b50aa2bbe9f978f0fa744429af2a3f0e4ae4d4cd/docs/Guide.md#the-injectjavascript-method)

this is the injectscript. this is the init part - https://github.com/TryImpossible/react-native-diy/blob/ef6314f82179d9c3130468a9b440684f808d6ff0/webviewInvoker/src/invoker.js#L96-L102

and this is the inject part https://github.com/TryImpossible/react-native-diy/blob/ef6314f82179d9c3130468a9b440684f808d6ff0/webviewInvoker/src/invoker.js#L103-L110

inject javascript - https://github.com/kardiachain/kardia-web3-mobile-provider/blob/81453735a271f8b4be12acd4530b9de601aaf1a0/index.js