Add hooks to add accounts and export private key from iframe (#26)

Co-authored-by: Shreerang Kale <shreerangkale@gmail.com>
Co-authored-by: IshaVenikar <ishavenikar7@gmail.com>
Co-authored-by: AdityaSalunkhe21 <adityasalunkhe2204@gmail.com>
Reviewed-on: LaconicNetwork/laconic-wallet-web#26
Co-authored-by: ishavenikar <ishavenikar@noreply.git.vdb.to>
Co-committed-by: ishavenikar <ishavenikar@noreply.git.vdb.to>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "web-wallet",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "private": true,
   "dependencies": {
     "@cerc-io/registry-sdk": "^0.2.5",

src/App.tsx

@@ -41,7 +41,9 @@ import { AutoSignIn } from "./screens/AutoSignIn";
 import { checkSufficientFunds, getPathKey, sendMessage } from "./utils/misc";
 import useAccountsData from "./hooks/useAccountsData";
 import { useWebViewHandler } from "./hooks/useWebViewHandler";
-import SignMessageEmbed from "./screens/SignMessageEmbed";
+import SignRequestEmbed from "./screens/SignRequestEmbed";
+import useAddAccountEmbed from "./hooks/useAddAccountEmbed";
+import useExportPKEmbed from "./hooks/useExportPrivateKeyEmbed";
 
 const Stack = createStackNavigator<StackParamsList>();
 
@@ -282,6 +284,8 @@ const App = (): React.JSX.Element => {
   const showWalletConnect = useMemo(() => accounts.length > 0, [accounts]);
 
   useWebViewHandler();
+  useAddAccountEmbed();
+  useExportPKEmbed();
 
   return (
     <Surface style={styles.appSurface}>
@@ -393,7 +397,7 @@ const App = (): React.JSX.Element => {
         />
         <Stack.Screen
           name="sign-request-embed"
-          component={SignMessageEmbed}
+          component={SignRequestEmbed}
           options={{
             header: () => <Header title="Wallet" />,
           }}

src/context/AccountsContext.tsx

@@ -4,7 +4,7 @@ import { Account } from '../types';
 
 const AccountsContext = createContext<{
   accounts: Account[];
-  setAccounts: (account: Account[]) => void;
+  setAccounts: React.Dispatch<React.SetStateAction<Account[]>>;
   currentIndex: number;
   setCurrentIndex: (index: number) => void;
     }>({

src/hooks/useAddAccountEmbed.ts

@@ -0,0 +1,58 @@
+import { useEffect, useCallback } from 'react';
+
+import { useNetworks } from '../context/NetworksContext';
+import { sendMessage } from '../utils/misc';
+import useAccountsData from '../hooks/useAccountsData';
+import { addAccount } from '../utils/accounts';
+import { useAccounts } from '../context/AccountsContext';
+import { Account, NetworksDataState } from '../types';
+
+const REACT_APP_ALLOWED_URLS = process.env.REACT_APP_ALLOWED_URLS;
+
+const useAddAccountEmbed = () => {
+  const { networksData } = useNetworks();
+  const { setAccounts, setCurrentIndex } = useAccounts();
+  const { getAccountsData } = useAccountsData();
+
+  const addAccountHandler = useCallback(async (network: NetworksDataState) => {
+    const newAccount = await addAccount(network);
+    if (newAccount) {
+      setAccounts(prev => [...prev, newAccount]);
+      setCurrentIndex(newAccount.index);
+    }
+  }, [setAccounts, setCurrentIndex]);
+
+  useEffect(() => {
+    const handleAddAccount = async (event: MessageEvent) => {
+      if (event.data.type !== 'ADD_ACCOUNT') return;
+
+      if (!REACT_APP_ALLOWED_URLS) {
+        console.log('Unauthorized app origin:', event.origin);
+        return;
+      }
+
+      const allowedUrls = REACT_APP_ALLOWED_URLS.split(',').map(url => url.trim());
+
+      if (!allowedUrls.includes(event.origin)) {
+        console.log('Unauthorized app.');
+        return;
+      }
+
+      const network = networksData.find(network => network.chainId === event.data.chainId);
+
+      await addAccountHandler(network!);
+      const updatedAccounts = await getAccountsData(event.data.chainId);
+      const addresses = updatedAccounts.map((account: Account) => account.address);
+
+      sendMessage(event.source as Window, 'ADD_ACCOUNT_RESPONSE', addresses, event.origin);
+    };
+
+    window.addEventListener('message', handleAddAccount);
+
+    return () => {
+      window.removeEventListener('message', handleAddAccount);
+    };
+  }, [networksData, getAccountsData, addAccountHandler]);
+};
+
+export default useAddAccountEmbed;

src/hooks/useExportPrivateKeyEmbed.ts

@@ -0,0 +1,42 @@
+import { useEffect } from 'react';
+
+import { useAccounts } from '../context/AccountsContext';
+import { getPathKey, sendMessage } from '../utils/misc';
+
+const useExportPKEmbed = () => {
+  const {  accounts } = useAccounts();
+
+  useEffect(() => {
+    const handleMessage = async (event: MessageEvent) => {
+      const { type, chainId, address } = event.data;
+
+      if (type !== 'REQUEST_ACCOUNT_PK') return;
+
+      try {
+        const selectedAccount = accounts.find(account => account.address === address);
+        if (!selectedAccount) {
+          throw new Error("Account not found")
+        }
+
+        const pathKey = await getPathKey(chainId, selectedAccount.index);
+        const privateKey = pathKey.privKey;
+
+        sendMessage(
+          event.source as Window,
+          'ACCOUNT_PK_DATA',
+          { privateKey },
+          event.origin,
+        );
+      } catch (error) {
+        console.error('Error fetching private key:', error);
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+    return () => {
+      window.removeEventListener('message', handleMessage);
+    };
+  }, [accounts]);
+};
+
+export default useExportPKEmbed;

src/hooks/useGetOrCreateAccounts.ts

@@ -34,7 +34,7 @@ const useGetOrCreateAccounts = () => {
       if (event.data.type !== 'REQUEST_CREATE_OR_GET_ACCOUNTS') return;
 
       if (!REACT_APP_ALLOWED_URLS) {
-        console.log('allowed URLs are not set.');
+        console.log('Allowed URLs are not set');
         return;
       }
 

src/screens/AutoSignIn.tsx

@@ -19,7 +19,7 @@ export const AutoSignIn = () => {
       if (event.data.type !== 'AUTO_SIGN_IN') return;
 
       if (!REACT_APP_ALLOWED_URLS) {
-        console.log('allowed URLs are not set.');
+        console.log('Allowed URLs are not set');
         return;
       }
 

src/screens/SignRequestEmbed.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { ScrollView, View } from 'react-native';
 import { ActivityIndicator, Button, Text, Appbar } from 'react-native-paper';
 
@@ -20,7 +20,7 @@ const REACT_APP_ALLOWED_URLS = process.env.REACT_APP_ALLOWED_URLS;
 
 type SignRequestProps = NativeStackScreenProps<StackParamsList, 'sign-request-embed'>;
 
-const SignMessageEmbed = ({ route }: SignRequestProps) => {
+const SignRequestEmbed = ({ route }: SignRequestProps) => {
   const [displayAccount, setDisplayAccount] = useState<Account>();
   const [message, setMessage] = useState<string>('');
   const [chainId, setChainId] = useState<string>('');
@@ -72,7 +72,7 @@ const SignMessageEmbed = ({ route }: SignRequestProps) => {
     }
   };
 
-  const rejectRequestHandler = async () => {
+  const rejectRequestHandler = useCallback(async () => {
     if (sourceWindow && origin) {
       sendMessage(
         sourceWindow,
@@ -81,8 +81,7 @@ const SignMessageEmbed = ({ route }: SignRequestProps) => {
         origin,
       );
     }
-    navigation.navigate('Home');
+  }, [sourceWindow, origin]);
-  };
 
   useEffect(() => {
     const handleCosmosSignMessage = async (event: MessageEvent) => {
@@ -90,7 +89,7 @@ const SignMessageEmbed = ({ route }: SignRequestProps) => {
 
 
       if (!REACT_APP_ALLOWED_URLS) {
-        console.log('allowed URLs are not set.');
+        console.log('Allowed URLs are not set');
         return;
       }
 
@@ -150,8 +149,7 @@ const SignMessageEmbed = ({ route }: SignRequestProps) => {
         );
       },
     });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [navigation, rejectRequestHandler]);
-  }, [navigation]);
 
   return (
     <>
@@ -188,4 +186,4 @@ const SignMessageEmbed = ({ route }: SignRequestProps) => {
   );
 };
 
-export default SignMessageEmbed;
+export default SignRequestEmbed;