Bugfix/wallet adapter

src/features/browser/BrowserWebViewScreen.tsx

@@ -66,7 +66,7 @@ const BrowserWebViewScreen = () => {
   const { favorites, addFavorite, removeFavorite } = useBrowser()
   const isAndroid = useMemo(() => Platform.OS === 'android', [])
   const spacing = useSpacing()
-  const [injected, setInjected] = useState(false)
+  const [isScriptInjected, setIsScriptInjected] = useState(false)
 
   const isFavorite = useMemo(() => {
     return favorites.some((favorite) => favorite === currentUrl)
@@ -376,6 +376,8 @@ const BrowserWebViewScreen = () => {
   )
 
   const injectedJavascript = useCallback(() => {
+    if (isScriptInjected) return ''
+
     const script = `
     ${injectWalletStandard.toString()}
 
@@ -387,15 +389,43 @@ const BrowserWebViewScreen = () => {
     `
 
     return script
-  }, [accountAddress, isAndroid])
+  }, [accountAddress, isAndroid, isScriptInjected])
 
-  // Inject wallet standard into the webview
   const injectModule = useCallback(() => {
-    if (!webview?.current) return
+    if (!webview?.current || isScriptInjected) return
+    setIsScriptInjected(true)
+
+    const injectionScript = `
+      (function() {
+        function injectWhenReady() {
+          ${injectedJavascript()}
+        }
+
+        if (document.readyState === 'loading') {
+          document.addEventListener('DOMContentLoaded', injectWhenReady);
+        } else {
+          injectWhenReady();
+        }
+      })();
+    `
 
-    const script = injectedJavascript()
-    webview?.current?.injectJavaScript(script)
-  }, [injectedJavascript])
+    webview.current.injectJavaScript(injectionScript)
+  }, [injectedJavascript, isScriptInjected])
+
+  const onLoadStart = useCallback(() => {
+    setIsScriptInjected(false)
+  }, [])
+
+  const onLoadEnd = useCallback(() => {
+    if (!isScriptInjected) {
+      injectModule()
+    }
+  }, [isScriptInjected, injectModule])
+
+  const onRefresh = useCallback(() => {
+    setIsScriptInjected(false)
+    webview.current?.reload()
+  }, [])
 
   const onNavigationChange = useCallback((event: WebViewNavigation) => {
     const baseUrl = event.url.replace('https://', '').split('/')
@@ -450,20 +480,6 @@ const BrowserWebViewScreen = () => {
     }
   }, [addFavorite, removeFavorite, isFavorite, currentUrl])
 
-  const onRefresh = useCallback(() => {
-    webview.current?.injectJavaScript('')
-    webview.current?.reload()
-    injectModule()
-  }, [injectModule])
-
-  const onLoadEnd = useCallback(() => {
-    if (!injected) {
-      webview.current?.injectJavaScript('')
-      webview.current?.injectJavaScript(injectedJavascript())
-      setInjected(true)
-    }
-  }, [injectedJavascript, injected, setInjected])
-
   const BrowserFooter = useCallback(() => {
     return (
       <Box padding="m" flexDirection="row" backgroundColor="black900">
@@ -512,7 +528,9 @@ const BrowserWebViewScreen = () => {
             ref={webview}
             originWhitelist={['*']}
             javaScriptEnabled
+            onLoadStart={onLoadStart}
             onLoadEnd={onLoadEnd}
+            injectedJavaScriptBeforeContentLoaded={injectedJavascript()}
             onNavigationStateChange={onNavigationChange}
             onMessage={onMessage}
             source={{ uri }}

src/features/browser/walletStandard.js

@@ -397,7 +397,7 @@ class HeliumWallet {
                         })),
                     }
                 })
-                
+
                 resolve(signedMessages)
               }
             }
@@ -406,26 +406,24 @@ class HeliumWallet {
     }
 }
 
-window.heliumWallet = wallet
 const walletObj = new HeliumWallet(wallet)
 
-const registerEvent = new CustomEvent('wallet-standard:register-wallet', {
-    bubbles: false,
-    cancelable: false,
-    composed: false,
-    detail: ({ register }) => register(walletObj),
-})
-
-window.dispatchEvent(registerEvent)
-
-// Attach the reference to the window, guarding against errors.
 try {
     Object.defineProperty(window, 'heliumWallet', { value: wallet })
 } catch (error) {
     console.error(error)
 }
 
-parent.addEventListener('wallet-standard:app-ready', function (event) {
+// Listen for the 'wallet-standard:app-ready' event
+window.addEventListener('wallet-standard:app-ready', function (event) {
+    const registerEvent = new CustomEvent('wallet-standard:register-wallet', {
+        bubbles: false,
+        cancelable: false,
+        composed: false,
+        detail: ({ register }) => register(walletObj),
+    })
+
+    window.dispatchEvent(registerEvent)
     event.detail.register(walletObj)
 })
 }`