Use RPC URL from external app if the network already exists (#15)

Part of https://plan.wireit.in/deepstack/browse/VUL-327/

Reviewed-on: #15
Co-authored-by: Shreerang Kale <shree@deepstacksoft.com>
Co-committed-by: Shreerang Kale <shree@deepstacksoft.com>

.env.example

@@ -1,5 +1,3 @@
-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

.gitea/workflows/lint-and-build.yml

@@ -3,17 +3,20 @@ name: Lint and Build
 on:
   pull_request:
     branches: [ main ]
+  push:
+    branches: [ main ]
 
 jobs:
   lint-and-build:
     name: Run lint and build checks
     runs-on: ubuntu-latest
+
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v2
-        
+        uses: actions/checkout@v4
+
       - name: Setup Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: '22'
 
@@ -22,9 +25,9 @@ jobs:
 
       - name: Install dependencies
         run: yarn install --frozen-lockfile
-        
+
       - name: Run ESLint
         run: yarn lint
-        
+
       - name: Run build
         run: yarn build

config-overrides.js

@@ -54,5 +54,20 @@ module.exports = function override(config, env) {
 
   config.resolve.alias['react-native$'] = require.resolve('react-native-web');
 
+  // Ignore source map warnings from third-party packages. Ref: https://github.com/facebook/create-react-app/discussions/11767#discussioncomment-3416044
+  const ignoreSourceMapPackages = [
+    '@cosmjs',
+    '@confio/ics23',
+    '@json-rpc-tools',
+    '@pedrouid/environment',
+    '@walletconnect',
+    'cosmjs-types',
+  ];
+
+  config.ignoreWarnings = ignoreSourceMapPackages.map(pkg => ({
+    module: new RegExp(`node_modules/${pkg.replace('/', '\\/')}`),
+    message: /Failed to parse source map/,
+  }));
+
   return config;
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "web-wallet",
-  "version": "0.1.7-zenith-0.2.1",
+  "version": "0.1.7-zenith-0.2.4",
   "private": true,
   "dependencies": {
     "@laconic-network/cosmjs-util": "^0.1.0",

src/hooks/useCreateNetwork.ts

@@ -1,6 +1,6 @@
 import { useEffect, useCallback } from "react";
 
-import { addNewNetwork, createWallet, checkNetworkForChainID, isWalletCreated } from "../utils/accounts";
+import { addNewNetwork, createWallet, checkNetworkForChainID, isWalletCreated, updateNetworkRpcUrl } from "../utils/accounts";
 import { useNetworks } from "../context/NetworksContext";
 import { NETWORK_ADDED_RESPONSE, NETWORK_ADD_FAILED_RESPONSE, NETWORK_ALREADY_EXISTS_RESPONSE, REQUEST_ADD_NETWORK } from "../utils/constants";
 import { NetworksFormData } from "../types";
@@ -52,6 +52,11 @@ const useCreateNetwork = () => {
             chainId
           }, sourceOrigin);
         } else {
+          console.log("Network already exists. Updating RPC URL");
+
+          const retrievedNetworksData = await updateNetworkRpcUrl(chainId, networkData.rpcUrl);
+          setNetworksData(retrievedNetworksData);
+
           sendMessage(window.parent, NETWORK_ALREADY_EXISTS_RESPONSE, {
             type: NETWORK_ALREADY_EXISTS_RESPONSE,
             chainId

src/hooks/useInitialization.ts

@@ -20,6 +20,10 @@ export default function useInitialization(
   }, [setWeb3wallet]);
 
   useEffect(() => {
+    if (!import.meta.env.REACT_APP_WALLET_CONNECT_PROJECT_ID) {
+      return;
+    }
+
     if (!initialized) {
       onInitialize();
     }

src/utils/accounts.ts

@@ -459,6 +459,35 @@ const checkNetworkForChainID = async (
   return networksData.some((network) => network.chainId === chainId);
 }
 
+const updateNetworkRpcUrl = async (
+  chainId: string,
+  rpcUrl: string,
+): Promise<NetworksDataState[]> => {
+  const networks = await getInternetCredentials('networks');
+
+  if (!networks) {
+    throw new Error('Networks not found');
+  }
+
+  const networksData: NetworksDataState[] = JSON.parse(networks);
+
+  const networkIndex = networksData.findIndex((network) => network.chainId === chainId);
+
+  if (networkIndex === -1) {
+    throw new Error('Network not found');
+  }
+
+  networksData[networkIndex].rpcUrl = rpcUrl;
+
+  await setInternetCredentials(
+    'networks',
+    '_',
+    JSON.stringify(networksData),
+  );
+
+  return networksData;
+}
+
 const isWalletCreated = async (
 ): Promise<boolean> => {
   const mnemonicServer = await getInternetCredentials("mnemonicServer");
@@ -483,5 +512,6 @@ export {
   getCosmosAccountByHDPath,
   addNewNetwork,
   checkNetworkForChainID,
-  isWalletCreated
+  isWalletCreated,
+  updateNetworkRpcUrl
 };

src/utils/wallet-connect/COSMOSData.ts

@@ -38,5 +38,5 @@ export const COSMOS_SIGNING_METHODS = {
 export const COSMOS_METHODS = {
   ...COSMOS_SIGNING_METHODS,
   COSMOS_SEND_TOKENS: 'cosmos_sendTokens', // Added for pay.laconic.com
-  COSMOS_SEND_TRANSACTION: 'cosmos_sendTransaction', // Added for testnet onboarding app
+  COSMOS_SEND_TRANSACTION: 'cosmos_sendTransaction', // Added for onboarding app
 };

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

@@ -5,7 +5,6 @@ services:
     image: cerc/zenith-wallet-web:local
     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}

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

@@ -6,13 +6,11 @@ if [ -n "$CERC_SCRIPT_DEBUG" ]; then
 fi
 
 echo "Using the following env variables:"
-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_ALLOWED_URLS: ${CERC_ALLOWED_URLS}"
 
 # Build with required env
-export REACT_APP_WALLET_CONNECT_PROJECT_ID=$WALLET_CONNECT_ID
 export REACT_APP_DEFAULT_GAS_PRICE=$CERC_DEFAULT_GAS_PRICE
 export REACT_APP_GAS_ADJUSTMENT=$CERC_GAS_ADJUSTMENT
 export REACT_APP_ALLOWED_URLS=$CERC_ALLOWED_URLS