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 00000000..25a86115 Binary files /dev/null and b/packages/frontend/public/android-chrome-192x192.png differ diff --git a/packages/frontend/src/components/projects/create/ApproveTransactionModal.tsx b/packages/frontend/src/components/projects/create/ApproveTransactionModal.tsx index 1e7603fa..52adc443 100644 --- a/packages/frontend/src/components/projects/create/ApproveTransactionModal.tsx +++ b/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 ( 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;