Refactor custom hooks code

src/App.tsx

@@ -49,7 +49,7 @@ const App = (): React.JSX.Element => {
   const { web3wallet, setActiveSessions } = useWalletConnect();
   const { accounts, setCurrentIndex } = useAccounts();
   const { networksData, selectedNetwork, setSelectedNetwork } = useNetworks();
-  const { getAccountsData } = useAccountsData(networksData);
+  const { getAccountsData } = useAccountsData();
 
   const [modalVisible, setModalVisible] = useState(false);
   const [toastVisible, setToastVisible] = useState(false);
@@ -237,15 +237,18 @@ const App = (): React.JSX.Element => {
         throw new Error('Requested network not supported.');
       }
 
-      const account = (await getAccountsData(chainId))[0];
-      if (!account) {
-        throw new Error('Account not found');
-      }
-
       if (network.namespace !== COSMOS) {
         throw new Error('Unsupported network');
       }
 
+      const accounts = await getAccountsData(chainId);
+      const account = accounts[0];
+
+      if (!account) {
+        throw new Error(`No accounts in network ${chainId}`);
+      }
+
+
       const cosmosPrivKey = (
         await getPathKey(`${network.namespace}:${chainId}`, account.index)
       ).privKey;

src/hooks/useAccountsData.ts

@@ -1,8 +1,11 @@
 import { useCallback } from "react";
-import { retrieveAccounts } from "../utils/accounts";
-import { NetworksDataState } from "../types";
 
-const useAccountsData = (networksData: NetworksDataState[]) => {
+import { retrieveAccounts } from "../utils/accounts";
+import { useNetworks } from "../context/NetworksContext";
+
+const useAccountsData = () => {
+  const { networksData } = useNetworks();
+
   const getAccountsData = useCallback(async (chainId: string) => {
     const targetNetwork = networksData.find(network => network.chainId === chainId);
 

src/hooks/useGetOrCreateAccounts.ts

@@ -1,9 +1,14 @@
 import { useEffect } from "react";
-import { createWallet } from "../utils/accounts";
-import { Account, NetworksDataState } from "../types";
-import { sendMessage } from "../utils/misc";
 
-const useGetOrCreateAccounts = (networksData: NetworksDataState[], getAccountsData: (chainId: string) => Promise<Account[]>) => {
+import { createWallet } from "../utils/accounts";
+import { sendMessage } from "../utils/misc";
+import useAccountsData from "./useAccountsData";
+import { useNetworks } from "../context/NetworksContext";
+
+const useGetOrCreateAccounts = () => {
+  const { networksData } = useNetworks();
+  const { getAccountsData } = useAccountsData();
+
   useEffect(() => {
     const handleCreateAccounts = async (event: MessageEvent) => {
       if (event.data.type !== 'REQUEST_CREATE_OR_GET_ACCOUNTS') return;

src/screens/AutoSignIn.tsx

@@ -10,7 +10,7 @@ import useGetOrCreateAccounts from '../hooks/useGetOrCreateAccounts';
 export const AutoSignIn = () => {
   const { networksData } = useNetworks();
 
-  const { getAccountsData } = useAccountsData(networksData);
+  const { getAccountsData } = useAccountsData();
 
   useEffect(() => {
     const handleSignIn = async (event: MessageEvent) => {
@@ -40,7 +40,7 @@ export const AutoSignIn = () => {
   }, [networksData, getAccountsData]);
 
   // Custom hook for adding listener to get accounts data
-  useGetOrCreateAccounts(networksData, getAccountsData)
+  useGetOrCreateAccounts();
 
   return (
     <>

src/screens/WalletEmbed.tsx

@@ -15,7 +15,7 @@ import {
   SigningStargateClient,
 } from '@cosmjs/stargate';
 
-import { retrieveAccounts, retrieveSingleAccount } from '../utils/accounts';
+import { retrieveSingleAccount } from '../utils/accounts';
 import AccountDetails from '../components/AccountDetails';
 import styles from '../styles/stylesheet';
 import DataBox from '../components/DataBox';
@@ -25,6 +25,7 @@ import TxErrorDialog from '../components/TxErrorDialog';
 import { MEMO } from '../screens/ApproveTransfer';
 import { Account, NetworksDataState } from '../types';
 import useGetOrCreateAccounts from '../hooks/useGetOrCreateAccounts';
+import useAccountsData from '../hooks/useAccountsData';
 
 type TransactionDetails = {
   chainId: string;
@@ -46,22 +47,7 @@ export const WalletEmbed = () => {
   const txEventRef = useRef<MessageEvent | null>(null);
 
   const { networksData } = useNetworks();
-
-  const getAccountsData = useCallback(async (chainId: string): Promise<Account[]> => {
-    const targetNetwork = networksData.find(network => network.chainId === chainId);
-
-    if (!targetNetwork) {
-      return [];
-    }
-
-    const accounts = await retrieveAccounts(targetNetwork);
-
-    if (!accounts || accounts.length === 0) {
-      return [];
-    }
-
-    return accounts;
-  }, [networksData]);
+  const { getAccountsData } = useAccountsData();
 
   useEffect(() => {
     const handleGetAccounts = async (event: MessageEvent) => {
@@ -85,7 +71,7 @@ export const WalletEmbed = () => {
   }, [getAccountsData]);
 
   // Custom hook for adding listener to get accounts data
-  useGetOrCreateAccounts(networksData, getAccountsData);
+  useGetOrCreateAccounts();
 
   const handleTxRequested = useCallback(
     async (event: MessageEvent) => {

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

@@ -65,6 +65,7 @@ Instructions for running the `laconic-wallet-web` using [laconic-so](https://git
   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
   REACT_APP_DEPLOY_APP_URL=
   ```