Invisible webview

components/AmountDisplay.tsx

@@ -3,7 +3,7 @@ import { Text, TouchableOpacity, View, StyleSheet, Modal } from 'react-native'
 import { formatSatoshis, formatSatoshisAsFiat, satoshisOptions } from '@/utils/amountFormatHelpers'
 import { ExchangeRateContext } from '@/context/ExchangeRateContext'
 import { useTheme } from '@/context/theme/ThemeContext'
-import { useWallet } from '@/context/WalletContext'
+import { useWallet } from '@/context/WalletWebViewContext'
 
 type Props = {
   abbreviate?: boolean

components/Balance.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect } from 'react'
 import { View, Text, StyleSheet } from 'react-native'
 import { useTheme } from '@/context/theme/ThemeContext'
-import { useWallet } from '@/context/WalletContext'
+import { useWallet } from '@/context/WalletWebViewContext'
 import { sdk } from '@bsv/wallet-toolbox-mobile'
 import AmountDisplay from './AmountDisplay'
 import AppLogo from './AppLogo'

components/BasketAccessModal.tsx

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react'
 import { View, Text, StyleSheet, Modal, TouchableOpacity } from 'react-native'
-import { WalletContext } from '../context/WalletContext'
+import { WalletContext } from '../context/WalletWebViewContext'
 import { UserContext } from '../context/UserContext'
 import { useThemeStyles } from '../context/theme/useThemeStyles'
 import AppChip from './AppChip'

components/CertificateAccessModal.tsx

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react'
 import { View, Text, StyleSheet, Modal, TouchableOpacity, ScrollView } from 'react-native'
-import { WalletContext } from '../context/WalletContext'
+import { WalletContext } from '../context/WalletWebViewContext'
 import { UserContext } from '../context/UserContext'
 import { useThemeStyles } from '../context/theme/useThemeStyles'
 import AppChip from './AppChip'

components/ConfigModal.tsx

@@ -15,7 +15,7 @@ import { Ionicons } from '@expo/vector-icons'
 import { useTranslation } from 'react-i18next'
 import { useTheme } from '@/context/theme/ThemeContext'
 import { useThemeStyles } from '@/context/theme/useThemeStyles'
-import { useWallet, WABConfig } from '@/context/WalletContext'
+import { useWallet, WABConfig } from '@/context/WalletWebViewContext'
 
 interface ConfigModalProps {
   visible: boolean

components/PasswordHandler.tsx

@@ -13,7 +13,7 @@ import {
   Alert
 } from 'react-native'
 import { Ionicons } from '@expo/vector-icons'
-import { useWallet } from '@/context/WalletContext'
+import { useWallet } from '@/context/WalletWebViewContext'
 import { useTheme } from '@/context/theme/ThemeContext'
 import { useThemeStyles } from '@/context/theme/useThemeStyles'
 
@@ -39,14 +39,9 @@ const PasswordHandler: React.FC = () => {
   const [wasOriginallyFocused, setWasOriginallyFocused] = useState<boolean>(false)
   const [open, setOpen] = useState(false)
   const [reason, setReason] = useState('')
-  const [test, setTest] = useState<Function>(() => {
-    return Promise.resolve(true)
-  })
-  const [resolve, setResolve] = useState<Function>(() => {})
-  const [reject, setReject] = useState<Function>(() => {})
   const [password, setPassword] = useState('')
   const [showPassword, setShowPassword] = useState(false)
-  const { setPasswordRetriever } = useWallet()
+  const { webviewComingEvent, sendWebViewEvent } = useWallet()
 
   const manageFocus = useCallback(() => {
     focusHandler.isFocused().then(focused => {
@@ -57,40 +52,30 @@ const PasswordHandler: React.FC = () => {
     })
   }, [focusHandler])
 
-  // Define a dummy function for initialization
-  const dummyPasswordHandler = useCallback((reason: string, test: (pwd: string) => boolean): Promise<string> => {
-    console.warn('Password handler called before initialization')
-    return Promise.resolve('')
-  }, [])
-
-  // Create a ref to store the handler function
-  const handlerRef = useRef(dummyPasswordHandler)
-
-  // Set up the actual handler function
-  useEffect(() => {
-    handlerRef.current = (reason: string, testFn: (passwordCandidate: string) => boolean): Promise<string> => {
-      return new Promise<string>((resolvePromise: Function, rejectPromise: Function) => {
-        setReason(reason)
-        setTest(() => testFn)
-        setResolve(() => resolvePromise)
-        setReject(() => rejectPromise)
-        setOpen(true)
-        manageFocus()
-      })
-    }
-  }, [manageFocus])
-
-  // Register the handler exactly once on mount
   useEffect(() => {
-    // Provide a stable reference that delegates to our ref
-    const stableHandler = (): any => {
-      return (reason: string, test: (passwordCandidate: string) => boolean): Promise<string> => {
-        return handlerRef.current(reason, test)
+    // Handle incoming events from the webview
+    if (webviewComingEvent) {
+      const { name, results } = webviewComingEvent;
+
+      switch (name) {
+        case 'passwordRetriever.completed':
+          // setPasswordRetriver webview callback
+          setReason(results)
+          setOpen(true)
+          manageFocus()
+          break;
+        case 'testPassword.completed':
+        // Check password test success
+          if (results) {
+            sendWebViewEvent('testPasswordResolve')
+            handleClose()
+          } else {
+            Alert.alert('Error', 'Password validation failed')
+          }
+          break;
       }
     }
-
-    setPasswordRetriever(stableHandler)
-  }, [])
+  }, [webviewComingEvent])
 
   const handleClose = useCallback(() => {
     setOpen(false)
@@ -103,23 +88,15 @@ const PasswordHandler: React.FC = () => {
   }, [focusHandler, wasOriginallyFocused])
 
   const handleCancel = useCallback(() => {
-    reject(new Error('User cancelled'))
+    // Send the password rejected event
+    sendWebViewEvent('testPasswordReject', 'User cancelled')
     handleClose()
-  }, [handleClose, reject])
+  }, [handleClose])
 
   const handleSubmit = useCallback(async () => {
-    try {
-      const success = await test(password)
-      if (success) {
-        resolve(password)
-        handleClose()
-      } else {
-        Alert.alert('Error', 'Password validation failed')
-      }
-    } catch (error) {
-      Alert.alert('Error', 'Password validation failed')
-    }
-  }, [handleClose, password, resolve, test])
+    // Send the password to the webview
+    sendWebViewEvent('testPassword', password)
+  }, [handleClose, password])
 
   const toggleShowPassword = () => {
     setShowPassword(!showPassword)

components/ProtocolAccessModal.tsx

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react'
 import { View, Text, StyleSheet, Modal, TouchableOpacity } from 'react-native'
-import { WalletContext } from '../context/WalletContext'
+import { WalletContext } from '../context/WalletWebViewContext'
 import { UserContext } from '../context/UserContext'
 import { useThemeStyles } from '../context/theme/useThemeStyles'
 import AppChip from './AppChip'

components/RecommendedApps.tsx

@@ -14,7 +14,7 @@ import {
 import { Ionicons } from '@expo/vector-icons'
 import Fuse from 'fuse.js'
 import { useTheme } from '@/context/theme/ThemeContext'
-import { useWallet } from '@/context/WalletContext'
+import { useWallet } from '@/context/WalletWebViewContext'
 import { useBrowserMode } from '@/context/BrowserModeContext'
 import { useTranslation } from 'react-i18next'
 

components/RecoveryKeySaver.tsx

@@ -16,7 +16,7 @@ import {
 import * as Clipboard from 'expo-clipboard'
 import { Ionicons } from '@expo/vector-icons'
 import { Utils } from '@bsv/sdk'
-import { useWallet } from '@/context/WalletContext'
+import { useWallet } from '@/context/WalletWebViewContext'
 import { useTheme } from '@/context/theme/ThemeContext'
 import { useThemeStyles } from '@/context/theme/useThemeStyles'
 
@@ -27,44 +27,32 @@ const RecoveryKeySaver = () => {
 
   // State management
   const [open, setOpen] = useState(false)
-  const [wasOriginallyFocused, setWasOriginallyFocused] = useState<boolean>(false)
   const [recoveryKey, setRecoveryKey] = useState('')
-  const [resolve, setResolve] = useState<Function>(() => {})
-  const [reject, setReject] = useState<Function>(() => {})
   const [copied, setCopied] = useState(false)
 
   // Checkbox states
   const [affirmative1, setAffirmative1] = useState(false)
   const [affirmative2, setAffirmative2] = useState(false)
   const [affirmative3, setAffirmative3] = useState(false)
 
-  const { managers, setRecoveryKeySaver } = useWallet()
+  const { webviewComingEvent, sendWebViewEvent } = useWallet()
 
   const isAllChecked = affirmative1 && affirmative2 && affirmative3
 
-  // Define a dummy function for initialization
-  const dummyHandler = useCallback((key: number[]): Promise<true> => {
-    console.warn('Recovery key handler called before initialization')
-    return Promise.resolve(true)
-  }, [])
-
   useEffect(() => {
-    setRecoveryKeySaver((): any => {
-      return (key: number[]): Promise<true> => {
-        return new Promise((resolve, reject) => {
-          const keyAsStr = Utils.toBase64(key)
-          setResolve(() => {
-            return resolve
-          })
-          setReject(() => {
-            return reject
-          })
-          setRecoveryKey(keyAsStr)
+    // Handle incoming events from the webview
+    if (webviewComingEvent) {
+      const { name, results } = webviewComingEvent;
+
+      switch (name) {
+        case 'recoveryKey.completed':
+          // setPasswordRetriver webview callback
+          setRecoveryKey(results)
           setOpen(true)
-        })
+          break;
       }
-    })
-  }, [managers])
+    }
+  }, [webviewComingEvent])
 
   const handleClose = () => {
     setOpen(false)
@@ -75,12 +63,12 @@ const RecoveryKeySaver = () => {
   }
 
   const onAbandon = () => {
-    reject(new Error('User abandoned recovery key'))
+    sendWebViewEvent('recoveryKeyReject', 'User abandoned recovery key')
     handleClose()
   }
 
   const onKeySaved = () => {
-    resolve(true)
+    sendWebViewEvent('recoveryKeyResolve', true)
     handleClose()
   }
 

components/SpendingAuthorizationModal.tsx

@@ -1,6 +1,6 @@
 import React, { useContext, useState, useEffect } from 'react'
 import { View, Text, StyleSheet, Modal, TouchableOpacity, ScrollView } from 'react-native'
-import { WalletContext } from '../context/WalletContext'
+import { WalletContext } from '../context/WalletWebViewContext'
 import { UserContext } from '../context/UserContext'
 import { useThemeStyles } from '../context/theme/useThemeStyles'
 import { useTheme } from '../context/theme/ThemeContext'

context/WalletWebViewContext.tsx

@@ -36,7 +36,8 @@ import { router } from 'expo-router'
 import { logWithTimestamp } from '@/utils/logging'
 import WebView from 'react-native-webview'
 import { TouchableOpacity, View, Text } from 'react-native'
-import webviewSource from '../wallet/dist/index.html';
+// For react-native-webview, use a static asset or a URI. Example:
+const webviewSource = require('../wallet/dist/index.html');
 
 // -----
 // Context Types

ios/Metanet.xcodeproj/project.pbxproj

@@ -69,13 +69,13 @@
 			name = Metanet;
 			sourceTree = "<group>";
 		};
-		2D16E6871FA4F8E400B85C8A /* Frameworks */ = {
+		2C9848246E9E57E771D06B10 /* Metanet */ = {
 			isa = PBXGroup;
 			children = (
 				ED297162215061F000B7C4FE /* JavaScriptCore.framework */,
 				A5B9AAFEE92E6E025984C3D9 /* Pods_Metanet.framework */,
 			);
-			name = Frameworks;
+			name = Metanet;
 			sourceTree = "<group>";
 		};
 		7B5FFCC8BE8F659788D1A67B /* Pods */ = {
@@ -278,6 +278,25 @@
 			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-Metanet/Pods-Metanet-frameworks.sh\"\n";
 			showEnvVarsInLog = 0;
 		};
+		57DD25D2B98D13906BCD7932 /* [Expo] Configure project */ = {
+			isa = PBXShellScriptBuildPhase;
+			alwaysOutOfDate = 1;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			inputFileListPaths = (
+			);
+			inputPaths = (
+			);
+			name = "[Expo] Configure project";
+			outputFileListPaths = (
+			);
+			outputPaths = (
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+			shellPath = /bin/sh;
+			shellScript = "# This script configures Expo modules and generates the modules provider file.\nbash -l -c \"./Pods/Target\\ Support\\ Files/Pods-Metanet/expo-configure-project.sh\"\n";
+		};
 		800E24972A6A228C8D4807E9 /* [CP] Copy Pods Resources */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;

ios/Metanet/Info.plist

@@ -97,4 +97,4 @@
     <key>UIViewControllerBasedStatusBarAppearance</key>
     <false/>
   </dict>
-</plist>
+</plist>

ios/Metanet/Metanet.entitlements

@@ -7,4 +7,4 @@
     <key>com.apple.developer.web-browser</key>
     <true/>
   </dict>
-</plist>
+</plist>