Fix WALLET_ACCOUNTS_DATA iframe message data for Shopify app (#23)

Part of [Service provider auctions for web deployments](https://www.notion.so/Service-provider-auctions-for-web-deployments-104a6b22d47280dbad51d28aa3a91d75)

Reviewed-on: cerc-io/laconic-wallet-web#23
Co-authored-by: Nabarun <nabarun@deepstacksoft.com>
Co-committed-by: Nabarun <nabarun@deepstacksoft.com>

.env.example

@@ -1,5 +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.laconic.com
+REACT_APP_LACONICD_RPC_URL=https://laconicd-sapo.laconic.com
+
+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

@@ -4,6 +4,8 @@ import { TxBody, AuthInfo } from "cosmjs-types/cosmos/tx/v1beta1/tx";
 
 import { SignClientTypes } from "@walletconnect/types";
 import { useNavigation } from "@react-navigation/native";
+import { DirectSecp256k1Wallet } from "@cosmjs/proto-signing";
+import { SigningStargateClient } from "@cosmjs/stargate";
 import {
   createStackNavigator,
   StackNavigationProp,
@@ -34,6 +36,10 @@ import { NETWORK_METHODS } from "./utils/wallet-connect/common-data";
 import { COSMOS_METHODS } from "./utils/wallet-connect/COSMOSData";
 import styles from "./styles/stylesheet";
 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";
 
 const Stack = createStackNavigator<StackParamsList>();
 
@@ -43,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<
@@ -217,6 +225,58 @@ const App = (): React.JSX.Element => {
     };
   });
 
+  useEffect(() => {
+    const handleCheckBalance = async (event: MessageEvent) => {
+      if (event.data.type !== 'CHECK_BALANCE') return;
+
+      const { chainId, amount } = event.data;
+      const network = networksData.find(net => net.chainId === chainId);
+
+      if (!network) {
+        console.error('Network not found');
+        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];
+
+      if (!account) {
+        throw new Error(`No accounts in network ${chainId}`);
+      }
+
+
+      const cosmosPrivKey = (
+        await getPathKey(`${network.namespace}:${chainId}`, account.index)
+      ).privKey;
+
+      const sender = await DirectSecp256k1Wallet.fromKey(
+        Buffer.from(cosmosPrivKey.split('0x')[1], 'hex'),
+        network.addressPrefix
+      );
+
+      const client = await SigningStargateClient.connectWithSigner(network.rpcUrl!, sender);
+
+      const balance = await client.getBalance(
+        account.address,
+        network.nativeDenom!.toLowerCase()
+      );
+
+      const areFundsSufficient = checkSufficientFunds(amount, balance.amount);
+
+      sendMessage(event.source as Window, 'IS_SUFFICIENT', areFundsSufficient, event.origin);
+    };
+
+    window.addEventListener('message', handleCheckBalance);
+
+    return () => {
+      window.removeEventListener('message', handleCheckBalance);
+    };
+  }, [networksData, getAccountsData]);
+
   const showWalletConnect = useMemo(() => accounts.length > 0, [accounts]);
 
   return (
@@ -313,6 +373,20 @@ const App = (): React.JSX.Element => {
             header: () => <Header title="Wallet" />,
           }}
         />
+        <Stack.Screen
+          name="wallet-embed"
+          component={WalletEmbed}
+          options={{
+            header: () => <></>,
+          }}
+        />
+        <Stack.Screen
+          name="auto-sign-in"
+          component={AutoSignIn}
+          options={{
+            header: () => <></>,
+          }}
+        />
       </Stack.Navigator>
       <PairingModal
         visible={modalVisible}

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/AddNetwork.tsx

@@ -22,7 +22,6 @@ import {
   EMPTY_FIELD_ERROR,
   INVALID_URL_ERROR,
   IS_NUMBER_REGEX,
-  LACONIC,
 } from "../utils/constants";
 import { getCosmosAccounts } from "../utils/accounts";
 import ETH_CHAINS from "../assets/ethereum-chains.json";
@@ -163,7 +162,6 @@ const AddNetwork = () => {
           break;
 
         case COSMOS:
-        case LACONIC:
           address = (
             await getCosmosAccounts(
               mnemonic,

src/screens/AutoSignIn.tsx

@@ -0,0 +1,49 @@
+import React, { useEffect } from 'react';
+
+import { useNetworks } from '../context/NetworksContext';
+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();
+
+  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) {
+        return
+      }
+
+      const signature = await signMessage({ message: event.data.message, accountId: accountsData[0].index, chainId: event.data.chainId, namespace: EIP155 })
+
+      sendMessage(event.source as Window, 'SIGN_IN_RESPONSE', { message: event.data.message, signature }, event.origin);
+    };
+
+    window.addEventListener('message', handleSignIn);
+
+    return () => {
+      window.removeEventListener('message', handleSignIn);
+    };
+  }, [networksData, getAccountsData]);
+
+  // Custom hook for adding listener to get accounts data
+  useGetOrCreateAccounts();
+
+  return (
+    <>
+    </>
+  )
+};

src/screens/WalletEmbed.tsx

@@ -0,0 +1,317 @@
+import React, { useEffect, useState, useCallback, useRef } from 'react';
+import { ScrollView, View } from 'react-native';
+import {
+  ActivityIndicator,
+  Button,
+  Text,
+  TextInput,
+} from 'react-native-paper';
+import { BigNumber } from 'ethers';
+
+import { DirectSecp256k1Wallet } from '@cosmjs/proto-signing';
+import {
+  calculateFee,
+  GasPrice,
+  SigningStargateClient,
+} from '@cosmjs/stargate';
+
+import { retrieveSingleAccount } from '../utils/accounts';
+import AccountDetails from '../components/AccountDetails';
+import styles from '../styles/stylesheet';
+import DataBox from '../components/DataBox';
+import { checkSufficientFunds, getPathKey, sendMessage } from '../utils/misc';
+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;
+  fromAddress: string;
+  toAddress: string;
+  amount: string;
+  account: Account
+  balance: string;
+  requestedNetwork: NetworksDataState
+};
+
+export const WalletEmbed = () => {
+  const [isTxRequested, setIsTxRequested] = useState<boolean>(false);
+  const [transactionDetails, setTransactionDetails] = useState<TransactionDetails | null>(null);
+  const [fees, setFees] = useState<string>('');
+  const [gasLimit, setGasLimit] = useState<string>('');
+  const [isTxLoading, setIsTxLoading] = useState(false);
+  const [txError, setTxError] = useState<string | null>(null);
+  const txEventRef = useRef<MessageEvent | null>(null);
+
+  const { networksData } = useNetworks();
+  const { getAccountsData } = useAccountsData();
+
+  useEffect(() => {
+    const handleGetAccounts = async (event: MessageEvent) => {
+      if (event.data.type !== 'REQUEST_WALLET_ACCOUNTS') return;
+
+      const accountsData = await getAccountsData(event.data.chainId);
+
+      if (accountsData.length === 0) {
+        sendMessage(event.source as Window, 'ERROR', 'Wallet accounts not found', event.origin);
+        return;
+      }
+
+      sendMessage(
+        event.source as Window,
+        'WALLET_ACCOUNTS_DATA',
+        accountsData.map(account => account.address),
+        event.origin
+      );
+    };
+
+    window.addEventListener('message', handleGetAccounts);
+
+    return () => {
+      window.removeEventListener('message', handleGetAccounts);
+    };
+  }, [getAccountsData]);
+
+  // Custom hook for adding listener to get accounts data
+  useGetOrCreateAccounts();
+
+  const handleTxRequested = useCallback(
+    async (event: MessageEvent) => {
+      try {
+        if (event.data.type !== 'REQUEST_TX') return;
+
+        txEventRef.current = event;
+
+        const { chainId, fromAddress, toAddress, amount } = event.data;
+        const network = networksData.find(net => net.chainId === chainId);
+
+        if (!network) {
+          console.error('Network not found');
+          throw new Error('Requested network not supported.');
+        }
+
+        const account = await retrieveSingleAccount(network.namespace, network.chainId, fromAddress);
+        if (!account) {
+          throw new Error('Account not found for the requested address.');
+        }
+
+        const cosmosPrivKey = (
+          await getPathKey(`${network.namespace}:${chainId}`, account.index)
+        ).privKey;
+
+        const sender = await DirectSecp256k1Wallet.fromKey(
+          Buffer.from(cosmosPrivKey.split('0x')[1], 'hex'),
+          network.addressPrefix
+        );
+
+        const client = await SigningStargateClient.connectWithSigner(network.rpcUrl!, sender);
+
+        const balance = await client.getBalance(
+          account.address,
+          network.nativeDenom!.toLowerCase()
+        );
+
+        const sendMsg = {
+          typeUrl: '/cosmos.bank.v1beta1.MsgSend',
+          value: {
+            fromAddress: fromAddress,
+            toAddress: toAddress,
+            amount: [
+              {
+                amount: String(amount),
+                denom: network.nativeDenom!,
+              },
+            ],
+          },
+        };
+
+        setTransactionDetails({
+          chainId,
+          fromAddress,
+          toAddress,
+          amount,
+          account,
+          balance: balance.amount,
+          requestedNetwork: network,
+        });
+
+        if (!checkSufficientFunds(amount, balance.amount)) {
+          console.log("Insufficient funds detected. Throwing error.");
+          throw new Error('Insufficient funds');
+        }
+
+        const gasEstimation = await client.simulate(fromAddress, [sendMsg], MEMO);
+        const gasLimit = String(
+          Math.round(gasEstimation * Number(process.env.REACT_APP_GAS_ADJUSTMENT))
+        );
+        setGasLimit(gasLimit);
+
+        const gasPrice = GasPrice.fromString(`${network.gasPrice}${network.nativeDenom}`);
+        const cosmosFees = calculateFee(Number(gasLimit), gasPrice);
+        setFees(cosmosFees.amount[0].amount);
+
+        setIsTxRequested(true);
+      } catch (error) {
+        if (!(error instanceof Error)) {
+          throw error;
+        }
+        setTxError(error.message);
+      }
+    }, [networksData]);
+
+  useEffect(() => {
+    window.addEventListener('message', handleTxRequested);
+    return () => window.removeEventListener('message', handleTxRequested);
+  }, [handleTxRequested]);
+
+  const acceptRequestHandler = async () => {
+    try {
+      setIsTxLoading(true);
+      if (!transactionDetails) {
+        throw new Error('Tx details not set');
+      }
+      const balanceBigNum = BigNumber.from(transactionDetails.balance);
+      const amountBigNum = BigNumber.from(String(transactionDetails.amount));
+      if (amountBigNum.gte(balanceBigNum)) {
+        throw new Error('Insufficient funds');
+      }
+
+      const cosmosPrivKey = (
+        await getPathKey(`${transactionDetails.requestedNetwork.namespace}:${transactionDetails.chainId}`, transactionDetails.account.index)
+      ).privKey;
+
+      const sender = await DirectSecp256k1Wallet.fromKey(
+        Buffer.from(cosmosPrivKey.split('0x')[1], 'hex'),
+        transactionDetails.requestedNetwork.addressPrefix
+      );
+
+      const client = await SigningStargateClient.connectWithSigner(
+        transactionDetails.requestedNetwork.rpcUrl!,
+        sender
+      );
+
+      const fee = calculateFee(
+        Number(gasLimit),
+        GasPrice.fromString(`${transactionDetails.requestedNetwork.gasPrice}${transactionDetails.requestedNetwork.nativeDenom}`)
+      );
+
+      const txResult = await client.sendTokens(
+        transactionDetails.fromAddress,
+        transactionDetails.toAddress,
+        [{ amount: String(transactionDetails.amount), denom: transactionDetails.requestedNetwork.nativeDenom! }],
+        fee
+      );
+
+      const event = txEventRef.current;
+      if (event?.source) {
+        sendMessage(event.source as Window, 'TRANSACTION_RESPONSE', txResult.transactionHash, event.origin);
+      } else {
+        console.error('No event source available to send message');
+      }
+    } catch (error) {
+      if (!(error instanceof Error)) {
+        throw error;
+      }
+      setTxError(error.message);
+    } finally {
+      setIsTxLoading(false);
+    }
+  };
+
+  const rejectRequestHandler = () => {
+    const event = txEventRef.current;
+
+    setIsTxRequested(false);
+    setTransactionDetails(null);
+    if (event?.source) {
+      sendMessage(event.source as Window, 'TRANSACTION_RESPONSE', null, event.origin);
+    } else {
+      console.error('No event source available to send message');
+    }
+  };
+
+  return (
+    <>
+      {isTxRequested && transactionDetails ? (
+        <>
+          <ScrollView contentContainerStyle={styles.appContainer}>
+            <View style={styles.dataBoxContainer}>
+              <Text style={styles.dataBoxLabel}>From</Text>
+              <View style={styles.dataBox}>
+                <AccountDetails account={transactionDetails.account} />
+              </View>
+            </View>
+            <DataBox
+              label={`Balance (${transactionDetails.requestedNetwork.nativeDenom})`}
+              data={
+                transactionDetails.balance === '' ||
+                  transactionDetails.balance === undefined
+                  ? 'Loading balance...'
+                  : `${transactionDetails.balance}`
+              }
+            />
+            <View style={styles.approveTransfer}>
+              <DataBox label="To" data={transactionDetails.toAddress} />
+              <DataBox
+                label={`Amount (${transactionDetails.requestedNetwork.nativeDenom})`}
+                data={transactionDetails.amount}
+              />
+              <TextInput
+                mode="outlined"
+                label="Fee"
+                value={fees}
+                onChangeText={setFees}
+                style={styles.transactionFeesInput}
+              />
+              <TextInput
+                mode="outlined"
+                label="Gas Limit"
+                value={gasLimit}
+                onChangeText={value =>
+                  /^\d+$/.test(value) ? setGasLimit(value) : null
+                }
+              />
+            </View>
+          </ScrollView>
+          <View style={styles.buttonContainer}>
+            <Button
+              mode="contained"
+              onPress={acceptRequestHandler}
+              loading={isTxLoading}
+              disabled={!transactionDetails.balance || !fees || isTxLoading}
+            >
+              {isTxLoading ? 'Processing' : 'Yes'}
+            </Button>
+            <Button
+              mode="contained"
+              onPress={rejectRequestHandler}
+              buttonColor="#B82B0D"
+              disabled={isTxLoading}
+            >
+              No
+            </Button>
+          </View>
+        </>
+      ) : (
+        <View style={styles.spinnerContainer}>
+          <View style={{ marginTop: 50 }}></View>
+          <ActivityIndicator size="large" color="#0000ff" />
+        </View>
+      )}
+      <TxErrorDialog
+        error={txError!}
+        visible={!!txError}
+        hideDialog={() => {
+          setTxError(null)
+          if (window.parent) {
+            sendMessage(window.parent, 'TRANSACTION_RESPONSE', null, '*');
+            sendMessage(window.parent, 'closeIframe', null, '*');
+          }
+        }}
+      />
+    </>
+  );
+};

src/styles/stylesheet.js

@@ -288,7 +288,7 @@ const styles = StyleSheet.create({
     fontSize: 18,
     fontWeight: "bold",
     marginBottom: 3,
-    color: "black",
+    color: "white",
   },
   dataBox: {
     borderWidth: 1,

src/types.ts

@@ -36,6 +36,8 @@ export type StackParamsList = {
     requestEvent: Web3WalletTypes.SessionRequest;
     requestSessionData: SessionTypes.Struct;
   };
+  "wallet-embed": undefined;
+  "auto-sign-in": undefined;
 };
 
 export type Account = {

src/utils/constants.ts

@@ -1,22 +1,35 @@
 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 LACONIC = 'laconic';
-export const DEFAULT_NETWORKS = [
+
+export const DEFAULT_NETWORKS: NetworksFormData[] = [
   {
-    chainId: 'laconic_9000-1',
-    networkName: 'laconicd',
-    namespace: LACONIC,
+    chainId: 'laconic-testnet-2',
+    networkName: 'laconicd testnet-2',
+    namespace: COSMOS,
     rpcUrl: process.env.REACT_APP_LACONICD_RPC_URL!,
     blockExplorerUrl: '',
     nativeDenom: 'alnt',
     addressPrefix: 'laconic',
     coinType: '118',
-    gasPrice: '1',
+    gasPrice: '0.001',
     isDefault: true,
   },
+  {
+    chainId: 'laconic_9000-1',
+    networkName: 'laconicd',
+    namespace: COSMOS,
+    rpcUrl: "https://laconicd.laconic.com",
+    blockExplorerUrl: '',
+    nativeDenom: 'alnt',
+    addressPrefix: 'laconic',
+    coinType: '118',
+    gasPrice: '1',
+    isDefault: false,
+  },
   {
     chainId: '1',
     networkName: EIP155_CHAINS['eip155:1'].name,

src/utils/misc.ts

@@ -1,7 +1,11 @@
 /*  Importing this library provides react native with a secure random source.
 For more information, "visit https://docs.ethers.org/v5/cookbook/react-native/#cookbook-reactnative-security" */
 import 'react-native-get-random-values';
+import { BigNumber } from 'ethers';
 
+import { AccountData } from '@cosmjs/amino';
+import { DirectSecp256k1HdWallet } from '@cosmjs/proto-signing';
+import { stringToPath } from '@cosmjs/crypto';
 import '@ethersproject/shims';
 
 import {
@@ -9,10 +13,6 @@ import {
   resetInternetCredentials,
   setInternetCredentials,
 } from './key-store';
-
-import { AccountData } from '@cosmjs/amino';
-import { DirectSecp256k1HdWallet } from '@cosmjs/proto-signing';
-import { stringToPath } from '@cosmjs/crypto';
 import { EIP155 } from './constants';
 import { NetworksDataState } from '../types';
 
@@ -149,10 +149,28 @@ const resetKeyServers = async (namespace: string) => {
   });
 };
 
+const sendMessage = (
+  source: Window | null,
+  type: string,
+  data: any,
+  origin: string
+): void => {
+  source?.postMessage({ type, data }, origin);
+};
+
+const checkSufficientFunds = (amount: string, balance: string) => {
+  const amountBigNum = BigNumber.from(String(amount));
+  const balanceBigNum = BigNumber.from(balance);
+
+  return balanceBigNum.gte(amountBigNum);
+};
+
 export {
   getMnemonic,
   getPathKey,
   updateAccountIndices,
   getHDPath,
   resetKeyServers,
+  sendMessage,
+  checkSufficientFunds,
 };

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/helpers.ts

@@ -8,7 +8,7 @@ import { Account, NetworksDataState } from '../../types';
 import { EIP155_SIGNING_METHODS } from './EIP155Data';
 import { mergeWith } from 'lodash';
 import { retrieveAccounts } from '../accounts';
-import { COSMOS, EIP155, LACONIC } from '../constants';
+import { COSMOS, EIP155 } from '../constants';
 import { NETWORK_METHODS } from './common-data';
 import { COSMOS_METHODS } from './COSMOSData';
 
@@ -131,20 +131,6 @@ export const getNamespaces = async (
         ],
         accounts: requiredAddresses.filter(account => account.includes(COSMOS)),
       },
-      laconic: {
-        chains: walletConnectChains.filter(chain => chain.includes(LACONIC)),
-        methods: [
-          ...Object.values(COSMOS_METHODS),
-          ...Object.values(NETWORK_METHODS),
-          ...(optionalNamespaces.laconic?.methods ?? []),
-          ...(requiredNamespaces.laconic?.methods ?? []),
-        ],
-        events: [
-          ...(optionalNamespaces.laconic?.events ?? []),
-          ...(requiredNamespaces.laconic?.events ?? []),
-        ],
-        accounts: requiredAddresses.filter(account => account.includes(LACONIC)),
-      },
     };
 
     return newNamespaces;
@@ -175,12 +161,6 @@ export const getNamespaces = async (
             events: [],
             accounts: [],
           },
-          laconic: {
-            chains: [],
-            methods: [],
-            events: [],
-            accounts: [],
-          },
         };
       case COSMOS:
         return {
@@ -206,43 +186,6 @@ export const getNamespaces = async (
             events: [],
             accounts: [],
           },
-          laconic: {
-            chains: [],
-            methods: [],
-            events: [],
-            accounts: [],
-          },
-        };
-      case LACONIC:
-        return {
-          laconic: {
-            chains: [namespaceChainId],
-            methods: [
-              ...Object.values(COSMOS_METHODS),
-              ...Object.values(NETWORK_METHODS),
-              ...(optionalNamespaces.laconic?.methods ?? []),
-              ...(requiredNamespaces.laconic?.methods ?? []),
-            ],
-            events: [
-              ...(optionalNamespaces.laconic?.events ?? []),
-              ...(requiredNamespaces.laconic?.events ?? []),
-            ],
-            accounts: accounts.map(laconicAccount => {
-              return `${namespaceChainId}:${laconicAccount.address}`;
-            }),
-          },
-          eip155: {
-            chains: [],
-            methods: [],
-            events: [],
-            accounts: [],
-          },
-          cosmos: {
-            chains: [],
-            methods: [],
-            events: [],
-            accounts: [],
-          },
         };
       default:
         break;

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

@@ -6,9 +6,11 @@ services:
     environment:
       CERC_SCRIPT_DEBUG: ${CERC_SCRIPT_DEBUG}
       WALLET_CONNECT_ID: ${WALLET_CONNECT_ID}
+      WALLET_CONNECT_VERIFY_CODE: ${WALLET_CONNECT_VERIFY_CODE}
       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,23 @@ 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
+FILE_PATH="/app/build/.well-known/walletconnect.txt"
+
+# Create the directory if it doesn't exist
+mkdir -p "$(dirname "$FILE_PATH")"
+# Write verification code to the file
+echo "$WALLET_CONNECT_VERIFY_CODE" > "$FILE_PATH"
+
+# Serve build dir
 http-server --proxy http://localhost:80? -p 80 /app/build

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

@@ -51,6 +51,9 @@ Instructions for running the `laconic-wallet-web` using [laconic-so](https://git
 
   # Optional
 
+  # WalletConnect code for hostname verification
+  WALLET_CONNECT_VERIFY_CODE=
+
   # Default gas price for txs (default: 0.025)
   CERC_DEFAULT_GAS_PRICE=
 
@@ -60,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