Debug account not found in snowball tx

Part of https://www.notion.so/Revive-attestation-react-app-19da6b22d472809595c2fb9d2970849f

Co-authored-by: Shreerang Kale <shreerangkale@gmail.com>
Reviewed-on: cerc-io/laconic-wallet-web#22

.env.example

@@ -1,6 +1,8 @@
 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_AUTH_SECRET=
+
+REACT_APP_DEPLOY_APP_URL=

.eslintignore

@@ -0,0 +1 @@
+build

package.json

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

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 { retrieveSingleAccount } from "./utils/accounts";
+import useAccountsData from "./hooks/useAccountsData";
 
 const Stack = createStackNavigator<StackParamsList>();
 
@@ -49,6 +49,8 @@ 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<
@@ -227,7 +229,7 @@ const App = (): React.JSX.Element => {
     const handleCheckBalance = async (event: MessageEvent) => {
       if (event.data.type !== 'CHECK_BALANCE') return;
 
-      const { chainId, address, amount } = event.data;
+      const { chainId, amount } = event.data;
       const network = networksData.find(net => net.chainId === chainId);
 
       if (!network) {
@@ -235,11 +237,18 @@ const App = (): React.JSX.Element => {
         throw new Error('Requested network not supported.');
       }
 
-      const account = await retrieveSingleAccount(network.namespace, network.chainId, address);
-      if (!account) {
-        throw new Error('Account not found for the requested address.');
+      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;
@@ -256,7 +265,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);
     };
@@ -266,7 +275,7 @@ const App = (): React.JSX.Element => {
     return () => {
       window.removeEventListener('message', handleCheckBalance);
     };
-  }, [networksData]);
+  }, [networksData, getAccountsData]);
 
   const showWalletConnect = useMemo(() => accounts.length > 0, [accounts]);
 

src/context/NetworksContext.tsx

@@ -1,8 +1,9 @@
 import React, { createContext, useContext, useEffect, useState } from 'react';
 
 import { NetworksDataState } from '../types';
-import { retrieveNetworksData, storeNetworkData } from '../utils/accounts';
+import { retrieveNetworksData } from '../utils/accounts';
 import { DEFAULT_NETWORKS, EIP155 } from '../utils/constants';
+import { setInternetCredentials } from '../utils/key-store';
 
 const NetworksContext = createContext<{
   networksData: NetworksDataState[];
@@ -27,28 +28,38 @@ 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[]>([]);
+  const [networksData, setNetworksData] = useState<NetworksDataState[]>(DEFAULT_NETWORKS_DATA);
   const [networkType, setNetworkType] = useState<string>(EIP155);
   const [selectedNetwork, setSelectedNetwork] = useState<NetworksDataState>();
 
   useEffect(() => {
     const fetchData = async () => {
-      const retrievedNetworks = await retrieveNetworksData();
+      let retrievedNetworks = await retrieveNetworksData();
+
       if (retrievedNetworks.length === 0) {
-        for (const defaultNetwork of DEFAULT_NETWORKS) {
-          await storeNetworkData(defaultNetwork);
-        }
+        setInternetCredentials(
+          'networks',
+          '_',
+          JSON.stringify(DEFAULT_NETWORKS_DATA),
+        );
+
+        retrievedNetworks = DEFAULT_NETWORKS_DATA;
       }
-      const retrievedNewNetworks = await retrieveNetworksData();
-      setNetworksData(retrievedNewNetworks);
-      setSelectedNetwork(retrievedNewNetworks[0]);
+
+      setNetworksData(retrievedNetworks);
+      setSelectedNetwork(retrievedNetworks[0]);
     };
 
-    if (networksData.length === 0) {
-      fetchData();
-    }
-  }, [networksData]);
+    fetchData();
+  }, []);
 
   useEffect(() => {
     setSelectedNetwork(prevSelectedNetwork => {

src/hooks/useAccountsData.ts

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,41 @@
+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.map(account => account.address),
+        event.origin
+      );
+    };
+
+    window.addEventListener('message', handleCreateAccounts);
+
+    return () => {
+      window.removeEventListener('message', handleCreateAccounts);
+    };
+  }, [networksData, getAccountsData]);
+};
+
+export default useGetOrCreateAccounts;

src/screens/AutoSignIn.tsx

@@ -1,43 +1,26 @@
-import React, { useEffect, useCallback } from 'react';
+import React, { useEffect } 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 = 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);
-  };
+  const { getAccountsData } = useAccountsData();
 
   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) {
@@ -56,39 +39,8 @@ export const AutoSignIn = () => {
     };
   }, [networksData, getAccountsData]);
 
-  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]);
+  // Custom hook for adding listener to get accounts data
+  useGetOrCreateAccounts();
 
   return (
     <>

src/screens/WalletEmbed.tsx

@@ -15,7 +15,7 @@ import {
   SigningStargateClient,
 } from '@cosmjs/stargate';
 
-import { createWallet, 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';
@@ -24,6 +24,8 @@ 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;
@@ -45,22 +47,7 @@ export const WalletEmbed = () => {
   const txEventRef = useRef<MessageEvent | null>(null);
 
   const { networksData } = useNetworks();
-
-  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]);
+  const { getAccountsData } = useAccountsData();
 
   useEffect(() => {
     const handleGetAccounts = async (event: MessageEvent) => {
@@ -83,29 +70,8 @@ export const WalletEmbed = () => {
     };
   }, [getAccountsData]);
 
-  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]);
+  // Custom hook for adding listener to get accounts data
+  useGetOrCreateAccounts();
 
   const handleTxRequested = useCallback(
     async (event: MessageEvent) => {
@@ -122,6 +88,7 @@ export const WalletEmbed = () => {
           throw new Error('Requested network not supported.');
         }
 
+        console.log({ network, fromAddress, chainId, toAddress, amount });
         const account = await retrieveSingleAccount(network.namespace, network.chainId, fromAddress);
         if (!account) {
           throw new Error('Account not found for the requested address.');
@@ -168,8 +135,7 @@ export const WalletEmbed = () => {
         });
 
         if (!checkSufficientFunds(amount, balance.amount)) {
-          console.log("Insufficient funds detected");
-          sendMessage(event.source as Window, 'INSUFFICIENT_FUNDS', null, event.origin);
+          console.log("Insufficient funds detected. Throwing error.");
           throw new Error('Insufficient funds');
         }
 

src/utils/constants.ts

@@ -1,9 +1,11 @@
 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 = [
+
+export const DEFAULT_NETWORKS: NetworksFormData[] = [
   {
     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.gt(amountBigNum);
+  return balanceBigNum.gte(amountBigNum);
 };
 
 export {

src/utils/sign-message.ts

@@ -3,6 +3,7 @@ For more information, "visit https://docs.ethers.org/v5/cookbook/react-native/#c
 import 'react-native-get-random-values';
 
 import '@ethersproject/shims';
+import { fromBech32 } from '@cosmjs/encoding';
 
 import { Wallet } from 'ethers';
 import { SignDoc } from 'cosmjs-types/cosmos/tx/v1beta1/tx';
@@ -24,7 +25,7 @@ const signMessage = async ({
     case EIP155:
       return await signEthMessage(message, accountId, chainId);
     case COSMOS:
-      return await signCosmosMessage(message, path.path);
+      return await signCosmosMessage(message, path.path, path.address);
     default:
       throw new Error('Invalid wallet type');
   }
@@ -51,10 +52,13 @@ const signEthMessage = async (
 const signCosmosMessage = async (
   message: string,
   path: string,
+  cosmosAddress: string,
 ): Promise<string | undefined> => {
   try {
     const mnemonic = await getMnemonic();
-    const cosmosAccount = await getCosmosAccounts(mnemonic, path);
+    const addressPrefix = fromBech32(cosmosAddress).prefix
+
+    const cosmosAccount = await getCosmosAccounts(mnemonic, path, addressPrefix);
     const address = cosmosAccount.data.address;
     const cosmosSignature = await cosmosAccount.cosmosWallet.signAmino(
       address,

src/utils/wallet-connect/wallet-connect-requests.ts

@@ -9,6 +9,7 @@ import {
   StdFee,
   MsgSendEncodeObject
 } from '@cosmjs/stargate';
+import { fromBech32 } from '@cosmjs/encoding';
 import { EncodeObject } from '@cosmjs/proto-signing';
 import { LaconicClient } from '@cerc-io/registry-sdk';
 import { Buffer } from 'buffer';
@@ -19,6 +20,7 @@ import { Account } from '../../types';
 import { getMnemonic, getPathKey } from '../misc';
 import { getCosmosAccounts } from '../accounts';
 import { COSMOS_METHODS } from './COSMOSData';
+import { COSMOS } from '../constants';
 
 interface EthSendTransaction {
   type: 'eth_sendTransaction';
@@ -80,7 +82,13 @@ export async function approveWalletConnectRequest(
   const path = (await getPathKey(`${namespace}:${chainId}`, account.index))
     .path;
   const mnemonic = await getMnemonic();
-  const cosmosAccount = await getCosmosAccounts(mnemonic, path);
+
+  let addressPrefix: string | undefined
+  if (namespace === COSMOS) {
+    addressPrefix = fromBech32(account.address).prefix
+  }
+
+  const cosmosAccount = await getCosmosAccounts(mnemonic, path, addressPrefix);
   const address = account.address;
 
   switch (request.method) {

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

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

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

@@ -10,12 +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}"
 
 # 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,6 +63,10 @@ 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