From 39da84d81a08b57cf5743895dcee7c2f61afa9b7 Mon Sep 17 00:00:00 2001 From: Nabarun Date: Tue, 17 Jun 2025 12:31:48 +0530 Subject: [PATCH] Fix accounts fetch after checking network in wallet --- build-webapp.sh | 1 - package.json | 5 +++-- packages/frontend/.env.example | 1 - .../public/android-chrome-192x192.png | Bin 0 -> 3224 bytes .../create/ApproveTransactionModal.tsx | 20 ++++++++++++------ .../components/projects/create/Configure.tsx | 5 +++-- packages/frontend/src/hooks/useAddNetwork.ts | 6 +++--- .../frontend/src/hooks/useCheckBalance.tsx | 12 ++++++++--- packages/frontend/src/utils/constants.ts | 1 - 9 files changed, 31 insertions(+), 20 deletions(-) create mode 100644 packages/frontend/public/android-chrome-192x192.png diff --git a/build-webapp.sh b/build-webapp.sh index 81599b2d..dad4f0c6 100755 --- a/build-webapp.sh +++ b/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' diff --git a/package.json b/package.json index 4942f53a..4451516e 100644 --- a/package.json +++ b/package.json @@ -14,5 +14,6 @@ "prepare": "husky install", "build": "lerna run build --stream", "lint": "lerna run lint --stream" - } -} \ No newline at end of file + }, + "packageManager": "yarn@1.22.19+sha1.4ba7fc5c6e704fce2066ecbfb0b0d8976fe62447" +} diff --git a/packages/frontend/.env.example b/packages/frontend/.env.example index b634634b..2fb5aa05 100644 --- a/packages/frontend/.env.example +++ b/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= diff --git a/packages/frontend/public/android-chrome-192x192.png b/packages/frontend/public/android-chrome-192x192.png new file mode 100644 index 0000000000000000000000000000000000000000..25a861158252d131639f2fe17d1cef51e9876954 GIT binary patch literal 3224 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 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 ( diff --git a/packages/frontend/src/components/projects/create/Configure.tsx b/packages/frontend/src/components/projects/create/Configure.tsx index 4c421efb..7e6c9624 100644 --- a/packages/frontend/src/components/projects/create/Configure.tsx +++ b/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({ 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, diff --git a/packages/frontend/src/hooks/useAddNetwork.ts b/packages/frontend/src/hooks/useAddNetwork.ts index 8c3febd5..39e8d708 100644 --- a/packages/frontend/src/hooks/useAddNetwork.ts +++ b/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 }; }; diff --git a/packages/frontend/src/hooks/useCheckBalance.tsx b/packages/frontend/src/hooks/useCheckBalance.tsx index be5ee33c..3b1bcdd3 100644 --- a/packages/frontend/src/hooks/useCheckBalance.tsx +++ b/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(); + 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) => { diff --git a/packages/frontend/src/utils/constants.ts b/packages/frontend/src/utils/constants.ts index f9135880..728624be 100644 --- a/packages/frontend/src/utils/constants.ts +++ b/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;