Implement common hooks instead of SignRequestHandler component

src/App.tsx

@@ -40,7 +40,7 @@ import { WalletEmbed } from "./screens/WalletEmbed";
 import { AutoSignIn } from "./screens/AutoSignIn";
 import { checkSufficientFunds, getPathKey, sendMessage } from "./utils/misc";
 import useAccountsData from "./hooks/useAccountsData";
-import { SignRequestAndroid } from "./components/SignRequestHandler";
+import { useSignRequestHandler } from "./hooks/useSignRequestHandler";
 
 const Stack = createStackNavigator<StackParamsList>();
 
@@ -302,6 +302,8 @@ const App = (): React.JSX.Element => {
 
   const showWalletConnect = useMemo(() => accounts.length > 0, [accounts]);
 
+  useSignRequestHandler();
+
   return (
     <Surface style={styles.appSurface}>
       <Stack.Navigator
@@ -425,7 +427,6 @@ const App = (): React.JSX.Element => {
       >
         Session approved
       </Snackbar>
-      <SignRequestAndroid />
     </Surface>
   );
 };

src/hooks/useSignRequestHandler.ts

@@ -1,23 +1,16 @@
-import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { useState, useEffect, useRef, useCallback } from 'react';
 import { useNavigation } from '@react-navigation/native';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { useAccounts } from '../context/AccountsContext';
 import { useNetworks } from '../context/NetworksContext';
 import { StackParamsList } from '../types';
-import useGetOrCreateAccounts from '../hooks/useGetOrCreateAccounts';
+import useGetOrCreateAccounts from './useGetOrCreateAccounts';
 
-export const SignRequestAndroid: React.FC = () => {
-  const navigation = useNavigation<NativeStackNavigationProp<StackParamsList>>();
-  const { accounts, currentIndex } = useAccounts();
+export const useSignRequestData = () => {
   const { selectedNetwork } = useNetworks();
-
-  const pendingMessageRef = useRef<string | null>(null);
+  const { accounts, currentIndex } = useAccounts();
   const [isDataReady, setIsDataReady] = useState(false);
 
-  // Run on mount
-  useGetOrCreateAccounts();
-
-  // Check if data is ready
   useEffect(() => {
     const logData = {
       selectedNetwork: selectedNetwork ? {
@@ -38,7 +31,14 @@ export const SignRequestAndroid: React.FC = () => {
     }
   }, [selectedNetwork, accounts, currentIndex]);
 
-  // Handle navigation to SignRequest screen
+  return { isDataReady, selectedNetwork, accounts, currentIndex };
+};
+
+export const useSignRequestNavigation = () => {
+  const navigation = useNavigation<NativeStackNavigationProp<StackParamsList>>();
+  const { isDataReady, selectedNetwork, accounts, currentIndex } = useSignRequestData();
+  const pendingMessageRef = useRef<string | null>(null);
+
   const navigateToSignRequest = useCallback(async (message: string) => {
     const logData = {
       isDataReady,
@@ -163,7 +163,12 @@ export const SignRequestAndroid: React.FC = () => {
     }
   }, [isDataReady, navigateToSignRequest]);
 
-  // Setup Android bridge and message handler
+  return { navigateToSignRequest };
+};
+
+export const useAndroidBridge = () => {
+  const { navigateToSignRequest } = useSignRequestNavigation();
+
   useEffect(() => {
     window.receiveSignRequestFromAndroid = (message: string) => {
       console.log('Sign request received with message:', message);
@@ -190,6 +195,11 @@ export const SignRequestAndroid: React.FC = () => {
       window.receiveCreateOrGetAccountsRequestFromAndroid = undefined;
     };
   }, [navigateToSignRequest]);
-
-  return null;
+};
+
+export const useSignRequestHandler = () => {
+  useGetOrCreateAccounts();
+  useSignRequestData();
+  useSignRequestNavigation();
+  useAndroidBridge();
 };

src/screens/HomeScreen.tsx

@@ -18,7 +18,7 @@ import { useNetworks } from "../context/NetworksContext";
 import ImportWalletDialog from "../components/ImportWalletDialog";
 import { MnemonicDialog } from "../components/MnemonicDialog";
 import { Container } from "../components/Container";
-import { SignRequestAndroid } from '../components/SignRequestHandler';
+import { useSignRequestHandler } from '../hooks/useSignRequestHandler';
 import useGetOrCreateAccounts from '../hooks/useGetOrCreateAccounts';
 import { IS_IMPORT_WALLET_ENABLED } from "../utils/constants";
 
@@ -142,6 +142,8 @@ const HomeScreen = () => {
     setCurrentIndex(0);
   };
 
+  useSignRequestHandler();
+
   return (
     <View style={styles.appContainer}>
       <Container>
@@ -185,7 +187,6 @@ const HomeScreen = () => {
             )}
           </>
         )}
-        <SignRequestAndroid />
         <ImportWalletDialog
           visible={importWalletDialog}
           hideDialog={() => setImportWalletDialog(false)}