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>

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

@@ -23,7 +23,11 @@ const useGetOrCreateAccounts = () => {
         accountsData = await getAccountsData(event.data.chainId);
       }
 
-      sendMessage(event.source as Window, 'WALLET_ACCOUNTS_DATA', accountsData, event.origin);
+      sendMessage(
+        event.source as Window, 'WALLET_ACCOUNTS_DATA',
+        accountsData.map(account => account.address),
+        event.origin
+      );
     };
 
     window.addEventListener('message', handleCreateAccounts);
@@ -31,7 +35,7 @@ const useGetOrCreateAccounts = () => {
     return () => {
       window.removeEventListener('message', handleCreateAccounts);
     };
-  }, [networksData, getAccountsData ]);
+  }, [networksData, getAccountsData]);
 };
 
 export default useGetOrCreateAccounts;

src/screens/WalletEmbed.tsx

@@ -60,7 +60,12 @@ export const WalletEmbed = () => {
         return;
       }
 
-      sendMessage(event.source as Window, 'WALLET_ACCOUNTS_DATA', accountsData, event.origin);
+      sendMessage(
+        event.source as Window,
+        'WALLET_ACCOUNTS_DATA',
+        accountsData.map(account => account.address),
+        event.origin
+      );
     };
 
     window.addEventListener('message', handleGetAccounts);

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/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/stack/laconic-wallet-web/README.md

@@ -66,7 +66,7 @@ Instructions for running the `laconic-wallet-web` using [laconic-so](https://git
 
   # 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=
+  CERC_DEPLOY_APP_URL=
   ```
 
 ## Start the deployment