Fix accounts fetch after checking network in wallet

build-webapp.sh

@@ -15,7 +15,6 @@ VITE_GITHUB_CLIENT_ID = 'LACONIC_HOSTED_CONFIG_github_clientid'
 VITE_GITHUB_PWA_TEMPLATE_REPO = 'LACONIC_HOSTED_CONFIG_github_pwa_templaterepo'
 VITE_GITHUB_IMAGE_UPLOAD_PWA_TEMPLATE_REPO = 'LACONIC_HOSTED_CONFIG_github_image_upload_templaterepo'
 VITE_GITHUB_NEXT_APP_TEMPLATE_REPO = 'LACONIC_HOSTED_CONFIG_github_next_app_templaterepo'
-VITE_LACONICD_CHAIN_ID = 'LACONIC_HOSTED_CONFIG_laconicd_chain_id'
 VITE_WALLET_IFRAME_URL = 'LACONIC_HOSTED_CONFIG_wallet_iframe_url'
 VITE_LIT_RELAY_API_KEY = 'LACONIC_HOSTED_CONFIG_lit_relay_api_key'
 VITE_BUGSNAG_API_KEY = 'LACONIC_HOSTED_CONFIG_bugsnag_api_key'

package.json

@@ -14,5 +14,6 @@
     "prepare": "husky install",
     "build": "lerna run build --stream",
     "lint": "lerna run lint --stream"
-  }
+  },
-}
+  "packageManager": "yarn@1.22.19+sha1.4ba7fc5c6e704fce2066ecbfb0b0d8976fe62447"
+}

packages/frontend/.env.example

@@ -12,5 +12,4 @@ VITE_BUGSNAG_API_KEY=
 VITE_PASSKEY_WALLET_RPID=
 VITE_TURNKEY_API_BASE_URL=
 
-VITE_LACONICD_CHAIN_ID=
 VITE_WALLET_IFRAME_URL=

packages/frontend/src/components/projects/create/ApproveTransactionModal.tsx

@@ -3,7 +3,6 @@ import { useCallback, useEffect } from 'react';
 import { Box, Modal } from '@mui/material';
 
 import {
-  VITE_LACONICD_CHAIN_ID,
   VITE_WALLET_IFRAME_URL,
 } from 'utils/constants';
 import { REQUEST_WALLET_ACCOUNTS, WALLET_ACCOUNTS_DATA } from '../../../constants';
@@ -18,7 +17,7 @@ const ApproveTransactionModal = ({
   setIsDataReceived: (isReceived: boolean) => void;
   isVisible: boolean;
 }) => {
-  const { setIframe, isNetworkAvailable } = useAddNetwork();
+  const { setIframe, isNetworkAvailable, networkData } = useAddNetwork();
 
   useEffect(() => {
     const handleMessage = (event: MessageEvent) => {
@@ -28,7 +27,7 @@ const ApproveTransactionModal = ({
         setIsDataReceived(true);
 
         if (event.data.data.length === 0) {
-          console.error(`Accounts not present for chainId: ${VITE_LACONICD_CHAIN_ID}`);
+          console.error(`Accounts not present for chainId: ${networkData?.chainId}`);
           return;
         }
 
@@ -45,9 +44,14 @@ const ApproveTransactionModal = ({
     return () => {
       window.removeEventListener('message', handleMessage);
     };
-  }, []);
+  }, [networkData]);
 
   const getDataFromWallet = useCallback(() => {
+    if (!networkData) {
+      console.error('networkData should not be empty');
+      return;
+    }
+
     const iframe = document.getElementById('walletIframe') as HTMLIFrameElement;
 
     if (!iframe.contentWindow) {
@@ -58,14 +62,16 @@ const ApproveTransactionModal = ({
     iframe.contentWindow.postMessage(
       {
         type: REQUEST_WALLET_ACCOUNTS,
-        chainId: VITE_LACONICD_CHAIN_ID,
+        chainId: networkData.chainId,
       },
       VITE_WALLET_IFRAME_URL,
     );
-  }, []);
+  }, [networkData]);
 
   useEffect(() => {
-    getDataFromWallet()
+    if (isNetworkAvailable) {
+      getDataFromWallet();
+    }
   }, [isNetworkAvailable, getDataFromWallet])
 
   return (

packages/frontend/src/components/projects/create/Configure.tsx

@@ -25,10 +25,10 @@ import ApproveTransactionModal from './ApproveTransactionModal';
 import EnvironmentVariablesForm from 'pages/org-slug/projects/id/settings/EnvironmentVariablesForm';
 import { EnvironmentVariablesFormValues } from 'types/types';
 import {
-  VITE_LACONICD_CHAIN_ID,
   VITE_WALLET_IFRAME_URL,
 } from 'utils/constants';
 import CheckBalanceIframe from './CheckBalanceIframe';
+import { useAddNetwork } from '../../../hooks/useAddNetwork';
 
 type ConfigureDeploymentFormValues = {
   option: string;
@@ -71,6 +71,7 @@ const Configure = () => {
   const navigate = useNavigate();
   const { toast, dismiss } = useToast();
   const client = useGQLClient();
+  const { networkData } = useAddNetwork()
 
   const methods = useForm<ConfigureFormValues>({
     defaultValues: {
@@ -421,7 +422,7 @@ const Configure = () => {
     iframe.contentWindow.postMessage(
       {
         type: 'REQUEST_TX',
-        chainId: VITE_LACONICD_CHAIN_ID,
+        chainId: networkData?.chainId,
         fromAddress: sender,
         toAddress: recipient,
         amount,

packages/frontend/src/hooks/useAddNetwork.ts

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { VITE_LACONICD_CHAIN_ID, VITE_WALLET_IFRAME_URL } from 'utils/constants';
+import { VITE_WALLET_IFRAME_URL } from 'utils/constants';
 import { NETWORK_ADD_FAILED_RESPONSE, NETWORK_ADDED_RESPONSE, NETWORK_ALREADY_EXISTS_RESPONSE, REQUEST_ADD_NETWORK } from '../constants';
 
 interface NetworkData {
@@ -26,14 +26,13 @@ export const useAddNetwork = () => {
     }
 
     if (!iframe?.contentWindow) {
-      console.error('iframe not loaded');
       return;
     }
 
     iframe.contentWindow.postMessage(
       {
         type: REQUEST_ADD_NETWORK,
-        chainId: VITE_LACONICD_CHAIN_ID,
+        chainId: networkData.chainId,
         networkData,
       },
       VITE_WALLET_IFRAME_URL,
@@ -87,6 +86,7 @@ export const useAddNetwork = () => {
   return {
     networkData,
     isNetworkAvailable,
+    iframe,
     setIframe
   };
 };

packages/frontend/src/hooks/useCheckBalance.tsx

@@ -1,11 +1,17 @@
 import { useState, useEffect, useCallback } from 'react';
 
-import { VITE_LACONICD_CHAIN_ID } from 'utils/constants';
+import { useAddNetwork } from './useAddNetwork';
 
 const useCheckBalance = (amount: string, iframeId: string) => {
   const [isBalanceSufficient, setIsBalanceSufficient] = useState<boolean>();
 
+  const { networkData } = useAddNetwork()
+
   const checkBalance = useCallback(() => {
+    if (!networkData) {
+      return;
+    }
+
     const iframe = document.getElementById(iframeId) as HTMLIFrameElement;
 
     if (!iframe || !iframe.contentWindow) {
@@ -16,12 +22,12 @@ const useCheckBalance = (amount: string, iframeId: string) => {
     iframe.contentWindow.postMessage(
       {
         type: 'CHECK_BALANCE',
-        chainId: VITE_LACONICD_CHAIN_ID,
+        chainId: networkData.chainId,
         amount,
       },
       import.meta.env.VITE_WALLET_IFRAME_URL
     );
-  }, [iframeId, amount]);
+  }, [iframeId, amount, networkData]);
 
   useEffect(() => {
     const handleMessage = (event: MessageEvent) => {

packages/frontend/src/utils/constants.ts

@@ -10,5 +10,4 @@ export const VITE_GITHUB_NEXT_APP_TEMPLATE_REPO = import.meta.env
 export const VITE_GITHUB_CLIENT_ID = import.meta.env.VITE_GITHUB_CLIENT_ID;
 export const VITE_BUGSNAG_API_KEY = import.meta.env.VITE_BUGSNAG_API_KEY;
 export const VITE_LIT_RELAY_API_KEY = import.meta.env.VITE_LIT_RELAY_API_KEY;
-export const VITE_LACONICD_CHAIN_ID = import.meta.env.VITE_LACONICD_CHAIN_ID;
 export const VITE_WALLET_IFRAME_URL = import.meta.env.VITE_WALLET_IFRAME_URL;