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: #26
Co-authored-by: ishavenikar <ishavenikar@noreply.git.vdb.to>
Co-committed-by: ishavenikar <ishavenikar@noreply.git.vdb.to>

.env.example

@@ -4,4 +4,6 @@ REACT_APP_DEFAULT_GAS_PRICE=0.025
 # Reference: https://github.com/cosmos/cosmos-sdk/issues/16020
 REACT_APP_GAS_ADJUSTMENT=2
 REACT_APP_LACONICD_RPC_URL=https://laconicd-sapo.laconic.com
-REACT_APP_DEPLOY_APP_URL=
+
+# Example: https://example-url-1.com,https://example-url-2.com
+REACT_APP_ALLOWED_URLS=

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,8 +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 { AddAccountEmbed } from "./screens/AddAccountEmbed";
+import SignRequestEmbed from "./screens/SignRequestEmbed";
+import useAddAccountEmbed from "./hooks/useAddAccountEmbed";
+import useExportPKEmbed from "./hooks/useExportPrivateKeyEmbed";
 
 const Stack = createStackNavigator<StackParamsList>();
 
@@ -283,6 +284,8 @@ const App = (): React.JSX.Element => {
   const showWalletConnect = useMemo(() => accounts.length > 0, [accounts]);
 
   useWebViewHandler();
+  useAddAccountEmbed();
+  useExportPKEmbed();
 
   return (
     <Surface style={styles.appSurface}>
@@ -393,17 +396,9 @@ const App = (): React.JSX.Element => {
           }}
         />
         <Stack.Screen
-          name="add-account-embed"
-          component={AddAccountEmbed}
+          name="sign-request-embed"
+          component={SignRequestEmbed}
           options={{
-            header: () => <></>,
-          }}
-        />
-        <Stack.Screen
-          name="sign-message-embed"
-          component={SignMessageEmbed}
-          options={{
-            // eslint-disable-next-line react/no-unstable-nested-components
             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

@@ -1,32 +1,39 @@
-import React, { useEffect } from 'react';
+import { useEffect, useCallback } from 'react';
 
 import { useNetworks } from '../context/NetworksContext';
 import { sendMessage } from '../utils/misc';
 import useAccountsData from '../hooks/useAccountsData';
-import useGetOrCreateAccounts from '../hooks/useGetOrCreateAccounts';
-import { addAccount, retrieveSingleAccount } from '../utils/accounts';
+import { addAccount } from '../utils/accounts';
 import { useAccounts } from '../context/AccountsContext';
 import { Account, NetworksDataState } from '../types';
 
-export const AddAccountEmbed = () => {
+const REACT_APP_ALLOWED_URLS = process.env.REACT_APP_ALLOWED_URLS;
+
+const useAddAccountEmbed = () => {
   const { networksData } = useNetworks();
-  const { accounts, setAccounts, setCurrentIndex } =
-    useAccounts();
+  const { setAccounts, setCurrentIndex } = useAccounts();
   const { getAccountsData } = useAccountsData();
 
-  const addAccountHandler = async (network: NetworksDataState) => {
+  const addAccountHandler = useCallback(async (network: NetworksDataState) => {
     const newAccount = await addAccount(network);
     if (newAccount) {
-      setAccounts([...accounts, newAccount]);
+      setAccounts(prev => [...prev, newAccount]);
       setCurrentIndex(newAccount.index);
     }
-  };
+  }, [setAccounts, setCurrentIndex]);
 
   useEffect(() => {
     const handleAddAccount = async (event: MessageEvent) => {
       if (event.data.type !== 'ADD_ACCOUNT') return;
 
-      if (event.origin !== process.env.REACT_APP_DEPLOY_APP_URL) {
+      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;
       }
@@ -34,10 +41,10 @@ export const AddAccountEmbed = () => {
       const network = networksData.find(network => network.chainId === event.data.chainId);
 
       await addAccountHandler(network!);
-      const accounts = await getAccountsData(event.data.chainId);
-      const accountsData: string[] = accounts.map((account: Account) => account.address);
+      const updatedAccounts = await getAccountsData(event.data.chainId);
+      const addresses = updatedAccounts.map((account: Account) => account.address);
 
-      sendMessage(event.source as Window, 'ADD_ACCOUNT_RESPONSE', accountsData, event.origin);
+      sendMessage(event.source as Window, 'ADD_ACCOUNT_RESPONSE', addresses, event.origin);
     };
 
     window.addEventListener('message', handleAddAccount);
@@ -45,14 +52,7 @@ export const AddAccountEmbed = () => {
     return () => {
       window.removeEventListener('message', handleAddAccount);
     };
-  }, [networksData, getAccountsData]);
-
-  // Custom hook for adding listener to get accounts data
-  useGetOrCreateAccounts();
-
-  console.log('wallet')
-  return (
-    <>
-    </>
-  )
+  }, [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

@@ -6,6 +6,8 @@ import useAccountsData from "./useAccountsData";
 import { useNetworks } from "../context/NetworksContext";
 import { useAccounts } from "../context/AccountsContext";
 
+const REACT_APP_ALLOWED_URLS = process.env.REACT_APP_ALLOWED_URLS;
+
 const useGetOrCreateAccounts = () => {
   const { networksData } = useNetworks();
   const { getAccountsData } = useAccountsData();
@@ -31,6 +33,18 @@ const useGetOrCreateAccounts = () => {
     const handleCreateAccounts = async (event: MessageEvent) => {
       if (event.data.type !== 'REQUEST_CREATE_OR_GET_ACCOUNTS') return;
 
+      if (!REACT_APP_ALLOWED_URLS) {
+        console.log('Allowed URLs are not set');
+        return;
+      }
+
+      const allowedUrls = REACT_APP_ALLOWED_URLS.split(',').map(url => url.trim());
+
+      if (!allowedUrls.includes(event.origin)) {
+        console.log('Unauthorized app.');
+        return;
+      }
+
       const accountsData = await getOrCreateAccountsForChain(event.data.chainId);
 
       sendMessage(
@@ -42,7 +56,7 @@ const useGetOrCreateAccounts = () => {
 
     const autoCreateAccounts = async () => {
       const defaultChainId = networksData[0]?.chainId;
-      
+
       if (!defaultChainId) {
         console.log('useGetOrCreateAccounts: No default chainId found');
         return;
@@ -60,7 +74,7 @@ const useGetOrCreateAccounts = () => {
     window.addEventListener('message', handleCreateAccounts);
 
     const isAndroidWebView = !!(window.Android);
-    
+
     if (isAndroidWebView) {
       autoCreateAccounts();
     }

src/hooks/useWebViewHandler.ts

@@ -40,7 +40,7 @@ export const useWebViewHandler = () => {
       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;

src/screens/AutoSignIn.tsx

@@ -7,6 +7,8 @@ import { sendMessage } from '../utils/misc';
 import useAccountsData from '../hooks/useAccountsData';
 import useGetOrCreateAccounts from '../hooks/useGetOrCreateAccounts';
 
+const REACT_APP_ALLOWED_URLS = process.env.REACT_APP_ALLOWED_URLS;
+
 export const AutoSignIn = () => {
   const { networksData } = useNetworks();
 
@@ -16,7 +18,14 @@ export const AutoSignIn = () => {
     const handleSignIn = async (event: MessageEvent) => {
       if (event.data.type !== 'AUTO_SIGN_IN') return;
 
-      if (event.origin !== process.env.REACT_APP_DEPLOY_APP_URL) {
+      if (!REACT_APP_ALLOWED_URLS) {
+        console.log('Allowed URLs are not set');
+        return;
+      }
+
+      const allowedUrls = REACT_APP_ALLOWED_URLS.split(',').map(url => url.trim());
+
+      if (!allowedUrls.includes(event.origin)) {
         console.log('Unauthorized app.');
         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';
 
@@ -16,9 +16,11 @@ import { getCosmosAccounts, retrieveSingleAccount } from '../utils/accounts';
 import { getMnemonic, getPathKey, sendMessage } from '../utils/misc';
 import { COSMOS } from '../utils/constants';
 
-type SignRequestProps = NativeStackScreenProps<StackParamsList, 'sign-message-embed'>;
+const REACT_APP_ALLOWED_URLS = process.env.REACT_APP_ALLOWED_URLS;
 
-const SignMessageEmbed = ({ route }: SignRequestProps) => {
+type SignRequestProps = NativeStackScreenProps<StackParamsList, 'sign-request-embed'>;
+
+const SignRequestEmbed = ({ route }: SignRequestProps) => {
   const [displayAccount, setDisplayAccount] = useState<Account>();
   const [message, setMessage] = useState<string>('');
   const [chainId, setChainId] = useState<string>('');
@@ -70,8 +72,7 @@ const SignMessageEmbed = ({ route }: SignRequestProps) => {
     }
   };
 
-
-  const rejectRequestHandler = async () => {
+  const rejectRequestHandler = useCallback(async () => {
     if (sourceWindow && origin) {
       sendMessage(
         sourceWindow,
@@ -80,13 +81,25 @@ const SignMessageEmbed = ({ route }: SignRequestProps) => {
         origin,
       );
     }
-    navigation.navigate('Home');
-  };
+  }, [sourceWindow, origin]);
 
   useEffect(() => {
     const handleCosmosSignMessage = async (event: MessageEvent) => {
       if (event.data.type !== 'SIGN_ZENITH_MESSAGE') return;
 
+
+      if (!REACT_APP_ALLOWED_URLS) {
+        console.log('Allowed URLs are not set');
+        return;
+      }
+
+      const allowedUrls = REACT_APP_ALLOWED_URLS.split(',').map(url => url.trim());
+
+      if (!allowedUrls.includes(event.origin)) {
+        console.log('Unauthorized app.');
+        return;
+      }
+
       try {
         const { signerAddress, signDoc } = event.data.params;
 
@@ -102,7 +115,7 @@ const SignMessageEmbed = ({ route }: SignRequestProps) => {
           event.data.chainId,
           signerAddress,
         );
-        
+
         setDisplayAccount(requestAccount);
         setIsLoading(false);
       } catch (err) {
@@ -136,8 +149,7 @@ const SignMessageEmbed = ({ route }: SignRequestProps) => {
         );
       },
     });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [navigation, route.name]);
+  }, [navigation, rejectRequestHandler]);
 
   return (
     <>
@@ -174,4 +186,4 @@ const SignMessageEmbed = ({ route }: SignRequestProps) => {
   );
 };
 
-export default SignMessageEmbed;
+export default SignRequestEmbed;

src/types.ts

@@ -40,8 +40,7 @@ export type StackParamsList = {
   };
   "wallet-embed": undefined;
   "auto-sign-in": undefined;
-  "sign-message-embed": undefined;
-  "add-account-embed": undefined;
+  "sign-request-embed": undefined;
 };
 
 export type Account = {

src/utils/constants.ts

@@ -22,7 +22,7 @@ export const DEFAULT_NETWORKS: NetworksFormData[] = [
     chainId: 'zenith-testnet',
     networkName: 'zenithd testnet',
     namespace: COSMOS,
-    rpcUrl: 'http://127.0.0.1:26657',
+    rpcUrl: 'https://zenith-node-rpc.com',
     blockExplorerUrl: '',
     nativeDenom: 'znt',
     addressPrefix: 'zenith',

stack/stack-orchestrator/compose/docker-compose-laconic-wallet-web.yml

@@ -10,7 +10,7 @@ services:
       CERC_DEFAULT_GAS_PRICE: ${CERC_DEFAULT_GAS_PRICE:-0.025}
       CERC_GAS_ADJUSTMENT: ${CERC_GAS_ADJUSTMENT:-2}
       CERC_LACONICD_RPC_URL: ${CERC_LACONICD_RPC_URL:-https://laconicd.laconic.com}
-      CERC_DEPLOY_APP_URL: ${CERC_DEPLOY_APP_URL}
+      CERC_ALLOWED_URLS: ${CERC_ALLOWED_URLS}
     command: ["bash", "/scripts/run.sh"]
     volumes:
       - ../config/app/run.sh:/scripts/run.sh

stack/stack-orchestrator/config/app/run.sh

@@ -10,14 +10,14 @@ echo "WALLET_CONNECT_ID: ${WALLET_CONNECT_ID}"
 echo "CERC_DEFAULT_GAS_PRICE: ${CERC_DEFAULT_GAS_PRICE}"
 echo "CERC_GAS_ADJUSTMENT: ${CERC_GAS_ADJUSTMENT}"
 echo "CERC_LACONICD_RPC_URL: ${CERC_LACONICD_RPC_URL}"
-echo "CERC_DEPLOY_APP_URL: ${CERC_DEPLOY_APP_URL}"
+echo "CERC_ALLOWED_URLS: ${CERC_ALLOWED_URLS}"
 
 # Build with required env
 REACT_APP_WALLET_CONNECT_PROJECT_ID=$WALLET_CONNECT_ID \
 REACT_APP_DEFAULT_GAS_PRICE=$CERC_DEFAULT_GAS_PRICE \
 REACT_APP_GAS_ADJUSTMENT=$CERC_GAS_ADJUSTMENT \
 REACT_APP_LACONICD_RPC_URL=$CERC_LACONICD_RPC_URL \
-REACT_APP_DEPLOY_APP_URL=$CERC_DEPLOY_APP_URL \
+REACT_APP_ALLOWED_URLS=$CERC_ALLOWED_URLS \
 yarn build
 
 # Define the directory and file path

stack/stack-orchestrator/stack/laconic-wallet-web/README.md

@@ -49,6 +49,9 @@ Instructions for running the `laconic-wallet-web` using [laconic-so](https://git
   # WalletConnect project ID, same should be used in the laconic-wallet
   WALLET_CONNECT_ID=
 
+  # Allowed urls is a comma separated list of allowed urls
+  CERC_ALLOWED_URLS=
+
   # Optional
 
   # WalletConnect code for hostname verification
@@ -63,10 +66,6 @@ Instructions for running the `laconic-wallet-web` using [laconic-so](https://git
 
   # RPC endpoint of laconicd node (default: https://laconicd.laconic.com)
   CERC_LACONICD_RPC_URL=
-
-  # Deploy app URL used for checking origin of the messages for auto-sign-in route
-  # Deploy app repo: https://git.vdb.to/cerc-io/snowballtools-base
-  CERC_DEPLOY_APP_URL=
   ```
 
 ## Start the deployment