Handle android webview messages for sign request (#24)

Part of https://www.notion.so/Integrate-eSIM-buy-flow-into-app-18aa6b22d47280d4a77cf1b27e2ba193

Co-authored-by: pranavjadhav007 <jadhavpranav89@gmail.com>
Co-authored-by: AdityaSalunkhe21 <adityasalunkhe2204@gmail.com>
Reviewed-on: LaconicNetwork/laconic-wallet-web#24

src/hooks/useGetOrCreateAccounts.ts

@@ -1,27 +1,37 @@
-import { useEffect } from "react";
+import { useEffect, useCallback } from "react";
 
 import { createWallet } from "../utils/accounts";
 import { sendMessage } from "../utils/misc";
 import useAccountsData from "./useAccountsData";
 import { useNetworks } from "../context/NetworksContext";
+import { useAccounts } from "../context/AccountsContext";
 
 const useGetOrCreateAccounts = () => {
   const { networksData } = useNetworks();
   const { getAccountsData } = useAccountsData();
+  const { setAccounts } = useAccounts();
+
+  // Wrap the function in useCallback to prevent recreation on each render
+  const getOrCreateAccountsForChain = useCallback(async (chainId: string) => {
+    let accountsData = await getAccountsData(chainId);
+
+    if (accountsData.length === 0) {
+      console.log("Accounts not found, creating wallet...");
+      await createWallet(networksData);
+      accountsData = await getAccountsData(chainId);
+    }
+
+    // Update the AccountsContext with the new accounts
+    setAccounts(accountsData);
+
+    return accountsData;
+  }, [networksData, getAccountsData, setAccounts]);
 
   useEffect(() => {
     const handleCreateAccounts = async (event: MessageEvent) => {
       if (event.data.type !== 'REQUEST_CREATE_OR_GET_ACCOUNTS') return;
 
-      let accountsData = await getAccountsData(event.data.chainId);
-
-      if (accountsData.length === 0) {
-        console.log("Accounts not found, creating wallet...");
-        await createWallet(networksData);
-
-        // Re-fetch newly created accounts
-        accountsData = await getAccountsData(event.data.chainId);
-      }
+      const accountsData = await getOrCreateAccountsForChain(event.data.chainId);
 
       sendMessage(
         event.source as Window, 'WALLET_ACCOUNTS_DATA',
@@ -30,12 +40,35 @@ const useGetOrCreateAccounts = () => {
       );
     };
 
+    const autoCreateAccounts = async () => {
+      const defaultChainId = networksData[0]?.chainId;
+      
+      if (!defaultChainId) {
+        console.log('useGetOrCreateAccounts: No default chainId found');
+        return;
+      }
+      const accounts = await getOrCreateAccountsForChain(defaultChainId);
+
+      // Only notify Android when we actually have accounts
+      if (accounts.length > 0 && window.Android?.onAccountsReady) {
+        window.Android.onAccountsReady();
+      } else {
+        console.log('No accounts created or Android bridge not available');
+      }
+    };
+
     window.addEventListener('message', handleCreateAccounts);
 
+    const isAndroidWebView = !!(window.Android);
+    
+    if (isAndroidWebView) {
+      autoCreateAccounts();
+    }
+
     return () => {
       window.removeEventListener('message', handleCreateAccounts);
     };
-  }, [networksData, getAccountsData]);
+  }, [networksData, getAccountsData, getOrCreateAccountsForChain]);
 };
 
 export default useGetOrCreateAccounts;

src/hooks/useWebViewHandler.ts

@@ -0,0 +1,81 @@
+import { useEffect, 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 './useGetOrCreateAccounts';
+
+export const useWebViewHandler = () => {
+  // Navigation and context hooks
+  const navigation = useNavigation<NativeStackNavigationProp<StackParamsList>>();
+  const { selectedNetwork } = useNetworks();
+  const { accounts, currentIndex } = useAccounts();
+
+  // Initialize accounts
+  useGetOrCreateAccounts();
+
+  // Core navigation handler
+  const navigateToSignRequest = useCallback((message: string) => {
+    try {
+      // Validation checks
+      if (!selectedNetwork?.namespace || !selectedNetwork?.chainId) {
+        window.Android?.onSignatureError?.('Invalid network configuration');
+        return;
+      }
+
+      if (!accounts?.length) {
+        window.Android?.onSignatureError?.('No accounts available');
+        return;
+      }
+
+      const currentAccount = accounts[currentIndex];
+      if (!currentAccount) {
+        window.Android?.onSignatureError?.('Current account not found');
+        return;
+      }
+
+      // Create the path and validate with regex
+      const path = `/sign/${selectedNetwork.namespace}/${selectedNetwork.chainId}/${currentAccount.address}/${encodeURIComponent(message)}`;
+      const pathRegex = /^\/sign\/(eip155|cosmos)\/(.+)\/(.+)\/(.+)$/;
+      const match = path.match(pathRegex);
+      
+      if (!match) {
+        window.Android?.onSignatureError?.('Invalid signing path');
+        return;
+      }
+
+      const [, pathNamespace, pathChainId, pathAddress, pathMessage] = match;
+
+      // Reset navigation stack and navigate to sign request
+      navigation.reset({
+        index: 0,
+        routes: [
+          {
+            name: 'SignRequest',
+            path,
+            params: {
+              namespace: pathNamespace,
+              chainId: pathChainId,
+              address: pathAddress,
+              message: decodeURIComponent(pathMessage),
+              accountInfo: currentAccount,
+            },
+          },
+        ],
+      });
+    } catch (error) {
+      window.Android?.onSignatureError?.(`Navigation error: ${error}`);
+    }
+  }, [selectedNetwork, accounts, currentIndex, navigation]);
+
+  useEffect(() => {
+    // Assign the function to the window object
+    window.receiveSignRequestFromAndroid = navigateToSignRequest;
+
+    return () => {
+      window.receiveSignRequestFromAndroid = undefined;
+    };
+  }, [navigateToSignRequest]); // Only the function reference as dependency
+};