Add listener to fetch account balance details

.env.example

@@ -1,8 +1,6 @@
 REACT_APP_WALLET_CONNECT_PROJECT_ID=
-
 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=
+REACT_APP_AUTH_SECRET=

src/App.tsx

@@ -39,7 +39,7 @@ import { Header } from "./components/Header";
 import { WalletEmbed } from "./screens/WalletEmbed";
 import { AutoSignIn } from "./screens/AutoSignIn";
 import { checkSufficientFunds, getPathKey, sendMessage } from "./utils/misc";
-import useAccountsData from "./hooks/useAccountsData";
+import { retrieveSingleAccount } from "./utils/accounts";
 
 const Stack = createStackNavigator<StackParamsList>();
 
@@ -49,8 +49,6 @@ const App = (): React.JSX.Element => {
   const { web3wallet, setActiveSessions } = useWalletConnect();
   const { accounts, setCurrentIndex } = useAccounts();
   const { networksData, selectedNetwork, setSelectedNetwork } = useNetworks();
-  const { getAccountsData } = useAccountsData();
-
   const [modalVisible, setModalVisible] = useState(false);
   const [toastVisible, setToastVisible] = useState(false);
   const [currentProposal, setCurrentProposal] = useState<
@@ -229,7 +227,7 @@ const App = (): React.JSX.Element => {
     const handleCheckBalance = async (event: MessageEvent) => {
       if (event.data.type !== 'CHECK_BALANCE') return;
 
-      const { chainId, amount } = event.data;
+      const { chainId, address, amount } = event.data;
       const network = networksData.find(net => net.chainId === chainId);
 
       if (!network) {
@@ -237,18 +235,11 @@ const App = (): React.JSX.Element => {
         throw new Error('Requested network not supported.');
       }
 
-      if (network.namespace !== COSMOS) {
-        throw new Error('Unsupported network');
-      }
-
-      const accounts = await getAccountsData(chainId);
-      const account = accounts[0];
-
+      const account = await retrieveSingleAccount(network.namespace, network.chainId, address);
       if (!account) {
-        throw new Error(`No accounts in network ${chainId}`);
+        throw new Error('Account not found for the requested address.');
       }
 
-
       const cosmosPrivKey = (
         await getPathKey(`${network.namespace}:${chainId}`, account.index)
       ).privKey;
@@ -265,7 +256,7 @@ const App = (): React.JSX.Element => {
         network.nativeDenom!.toLowerCase()
       );
 
-      const areFundsSufficient = checkSufficientFunds(amount, balance.amount);
+      const areFundsSufficient = !checkSufficientFunds(amount, balance.amount);
 
       sendMessage(event.source as Window, 'IS_SUFFICIENT', areFundsSufficient, event.origin);
     };
@@ -275,7 +266,7 @@ const App = (): React.JSX.Element => {
     return () => {
       window.removeEventListener('message', handleCheckBalance);
     };
-  }, [networksData, getAccountsData]);
+  }, [networksData]);
 
   const showWalletConnect = useMemo(() => accounts.length > 0, [accounts]);
 

src/context/NetworksContext.tsx

@@ -1,9 +1,8 @@
 import React, { createContext, useContext, useEffect, useState } from 'react';
 
 import { NetworksDataState } from '../types';
-import { retrieveNetworksData } from '../utils/accounts';
+import { retrieveNetworksData, storeNetworkData } from '../utils/accounts';
 import { DEFAULT_NETWORKS, EIP155 } from '../utils/constants';
-import { setInternetCredentials } from '../utils/key-store';
 
 const NetworksContext = createContext<{
   networksData: NetworksDataState[];
@@ -28,34 +27,22 @@ const useNetworks = () => {
   return networksContext;
 };
 
-const DEFAULT_NETWORKS_DATA = DEFAULT_NETWORKS.map((defaultNetwork, index) => (
-  {
-    ...defaultNetwork,
-    networkId: index.toString()
-  })
-);
-
 const NetworksProvider = ({ children }: { children: React.ReactNode }) => {
-  const [networksData, setNetworksData] = useState<NetworksDataState[]>(DEFAULT_NETWORKS_DATA);
+  const [networksData, setNetworksData] = useState<NetworksDataState[]>([]);
   const [networkType, setNetworkType] = useState<string>(EIP155);
   const [selectedNetwork, setSelectedNetwork] = useState<NetworksDataState>();
 
   useEffect(() => {
     const fetchData = async () => {
-      let retrievedNetworks = await retrieveNetworksData();
-
+      const retrievedNetworks = await retrieveNetworksData();
       if (retrievedNetworks.length === 0) {
-        setInternetCredentials(
-          'networks',
-          '_',
-          JSON.stringify(DEFAULT_NETWORKS_DATA),
-        );
-
-        retrievedNetworks = DEFAULT_NETWORKS_DATA;
+        for (const defaultNetwork of DEFAULT_NETWORKS) {
+          await storeNetworkData(defaultNetwork);
+        }
       }
-
-      setNetworksData(retrievedNetworks);
-      setSelectedNetwork(retrievedNetworks[0]);
+      const retrievedNewNetworks = await retrieveNetworksData();
+      setNetworksData(retrievedNewNetworks);
+      setSelectedNetwork(retrievedNewNetworks[0]);
     };
 
     if (networksData.length === 0) {

src/hooks/useAccountsData.ts

@@ -1,23 +0,0 @@
-import { useCallback } from "react";
-
-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);
-
-    if (!targetNetwork) {
-      return [];
-    }
-
-    const accounts = await retrieveAccounts(targetNetwork);
-    return accounts || [];
-  }, [networksData]);
-
-  return { getAccountsData };
-};
-
-export default useAccountsData;

src/hooks/useGetOrCreateAccounts.ts

@@ -1,37 +0,0 @@
-import { useEffect } from "react";
-
-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;
-
-      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);
-      }
-
-      sendMessage(event.source as Window, 'WALLET_ACCOUNTS_DATA', accountsData, event.origin);
-    };
-
-    window.addEventListener('message', handleCreateAccounts);
-
-    return () => {
-      window.removeEventListener('message', handleCreateAccounts);
-    };
-  }, [networksData, getAccountsData ]);
-};
-
-export default useGetOrCreateAccounts;

src/screens/AutoSignIn.tsx

@@ -1,26 +1,43 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useCallback } from 'react';
 
+import { createWallet, retrieveAccounts } from '../utils/accounts';
 import { useNetworks } from '../context/NetworksContext';
+import { Account } from '../types';
 import { signMessage } from '../utils/sign-message';
 import { EIP155 } from '../utils/constants';
-import { sendMessage } from '../utils/misc';
-import useAccountsData from '../hooks/useAccountsData';
-import useGetOrCreateAccounts from '../hooks/useGetOrCreateAccounts';
 
 export const AutoSignIn = () => {
   const { networksData } = useNetworks();
 
-  const { getAccountsData } = useAccountsData();
+  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 sendMessage = (
+    source: Window | null,
+    type: string,
+    data: any,
+    origin: string
+  ): void => {
+    source?.postMessage({ type, data }, origin);
+  };
 
   useEffect(() => {
     const handleSignIn = async (event: MessageEvent) => {
       if (event.data.type !== 'AUTO_SIGN_IN') return;
 
-      if (event.origin !== process.env.REACT_APP_DEPLOY_APP_URL) {
-        console.log('Unauthorized app.');
-        return;
-      }
-
       const accountsData = await getAccountsData(event.data.chainId);
 
       if (!accountsData.length) {
@@ -39,8 +56,39 @@ export const AutoSignIn = () => {
     };
   }, [networksData, getAccountsData]);
 
-  // Custom hook for adding listener to get accounts data
-  useGetOrCreateAccounts();
+  useEffect(() => {
+    const getAccountAddress = async (event: MessageEvent) => {
+      if (event.data.type !== 'GET_ACCOUNT_ADDRESS') return;
+
+
+      if (event.data.secret !== process.env.REACT_APP_AUTH_SECRET) {
+        console.log('Unauthorized app.');
+        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);
+      }
+
+      if (!accountsData.length) {
+        return;
+      }
+
+      sendMessage(event.source as Window, 'ACCOUNT_ADDRESS_RESPONSE', accountsData[0].address, event.origin);
+    };
+
+    window.addEventListener('message', getAccountAddress);
+
+    return () => {
+      window.removeEventListener('message', getAccountAddress);
+    };
+  }, [networksData, getAccountsData]);
 
   return (
     <>

src/screens/WalletEmbed.tsx

@@ -15,7 +15,7 @@ import {
   SigningStargateClient,
 } from '@cosmjs/stargate';
 
-import { retrieveSingleAccount } from '../utils/accounts';
+import { createWallet, retrieveAccounts, retrieveSingleAccount } from '../utils/accounts';
 import AccountDetails from '../components/AccountDetails';
 import styles from '../styles/stylesheet';
 import DataBox from '../components/DataBox';
@@ -24,8 +24,6 @@ import { useNetworks } from '../context/NetworksContext';
 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;
@@ -47,7 +45,22 @@ export const WalletEmbed = () => {
   const txEventRef = useRef<MessageEvent | null>(null);
 
   const { networksData } = useNetworks();
-  const { getAccountsData } = useAccountsData();
+
+  const getAccountsData = useCallback(async (chainId: string): Promise<string[]> => {
+    const targetNetwork = networksData.find(network => network.chainId === chainId);
+
+    if (!targetNetwork) {
+      return [];
+    }
+
+    const accounts = await retrieveAccounts(targetNetwork);
+
+    if (!accounts || accounts.length === 0) {
+      return [];
+    }
+
+    return accounts.map(account => account.address);
+  }, [networksData]);
 
   useEffect(() => {
     const handleGetAccounts = async (event: MessageEvent) => {
@@ -70,8 +83,29 @@ export const WalletEmbed = () => {
     };
   }, [getAccountsData]);
 
-  // Custom hook for adding listener to get accounts data
-  useGetOrCreateAccounts();
+  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);
+      }
+
+      sendMessage(event.source as Window, 'WALLET_ACCOUNTS_DATA', accountsData, event.origin);
+    };
+
+    window.addEventListener('message', handleCreateAccounts);
+
+    return () => {
+      window.removeEventListener('message', handleCreateAccounts);
+    };
+  }, [networksData, getAccountsData]);
 
   const handleTxRequested = useCallback(
     async (event: MessageEvent) => {
@@ -134,7 +168,8 @@ export const WalletEmbed = () => {
         });
 
         if (!checkSufficientFunds(amount, balance.amount)) {
-          console.log("Insufficient funds detected. Throwing error.");
+          console.log("Insufficient funds detected");
+          sendMessage(event.source as Window, 'INSUFFICIENT_FUNDS', null, event.origin);
           throw new Error('Insufficient funds');
         }
 

src/utils/constants.ts

@@ -1,11 +1,9 @@
 import { COSMOS_TESTNET_CHAINS } from './wallet-connect/COSMOSData';
 import { EIP155_CHAINS } from './wallet-connect/EIP155Data';
-import { NetworksFormData } from '../types';
 
 export const EIP155 = 'eip155';
 export const COSMOS = 'cosmos';
-
-export const DEFAULT_NETWORKS: NetworksFormData[] = [
+export const DEFAULT_NETWORKS = [
   {
     chainId: 'laconic-testnet-2',
     networkName: 'laconicd testnet-2',

src/utils/misc.ts

@@ -162,7 +162,7 @@ const checkSufficientFunds = (amount: string, balance: string) => {
   const amountBigNum = BigNumber.from(String(amount));
   const balanceBigNum = BigNumber.from(balance);
 
-  return balanceBigNum.gte(amountBigNum);
+  return balanceBigNum.gt(amountBigNum);
 };
 
 export {

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

@@ -10,7 +10,6 @@ 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}
     command: ["bash", "/scripts/run.sh"]
     volumes:
       - ../config/app/run.sh:/scripts/run.sh

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

@@ -10,14 +10,12 @@ 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}"
 
 # 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 \
 yarn build
 
 # Define the directory and file path

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

@@ -63,10 +63,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