diff --git a/packages/frontend/src/components/projects/create/IFrame.tsx b/packages/frontend/src/components/projects/create/IFrame.tsx index 1329a43d..14685191 100644 --- a/packages/frontend/src/components/projects/create/IFrame.tsx +++ b/packages/frontend/src/components/projects/create/IFrame.tsx @@ -1,43 +1,20 @@ -import { useEffect, useState } from 'react'; - +import { useCallback, useEffect, useState } from 'react'; import { Select, Option } from '@snowballtools/material-tailwind-react-fork'; - -import { - VITE_LACONICD_CHAIN_ID, -} from 'utils/constants'; +import { VITE_LACONICD_CHAIN_ID } from 'utils/constants'; const IFrame = ({ onAccountChange, }: { onAccountChange: (selectedAccount: string) => void; }) => { - const [accounts, setAccounts] = useState([]); + useEffect(() => { - const getDataFromWallet = () => { - const iframe = document.getElementById('walletIframe') as HTMLIFrameElement; - - if (!iframe.contentWindow) { - console.error('Iframe not found or not loaded'); - return; - } - - // Request data from wallet - iframe.contentWindow.postMessage({ - type: 'REQUEST_WALLET_ACCOUNTS', - chainId: VITE_LACONICD_CHAIN_ID, - }, 'http://localhost:3001'); - }; - - // Listen for response from wallet const handleMessage = (event: MessageEvent) => { - // Always verify origin for security if (event.origin !== 'http://localhost:3001') return; if (event.data.type === 'WALLET_ACCOUNTS_DATA') { - console.log('Received data:', event.data.data); setAccounts(event.data.data); - // Handle the received data here } else if (event.data.type === 'ERROR') { console.error('Error from wallet:', event.data.message); } @@ -45,39 +22,55 @@ const IFrame = ({ window.addEventListener('message', handleMessage); - // Request data once iframe is loaded const iframe = document.getElementById('walletIframe'); if (iframe) { iframe.onload = getDataFromWallet; } - // Cleanup return () => { window.removeEventListener('message', handleMessage); }; }, []); - console.log({accounts}) + const getDataFromWallet = useCallback(() => { + const iframe = document.getElementById('walletIframe') as HTMLIFrameElement; + + if (!iframe.contentWindow) { + console.error('Iframe not found or not loaded'); + return; + } + + iframe.contentWindow.postMessage({ + type: 'REQUEST_WALLET_ACCOUNTS', + chainId: VITE_LACONICD_CHAIN_ID, + }, 'http://localhost:3001'); + }, []); + return ( -
- {accounts.length === 0 ? ( -
- no accounts.. go to 'store.laconic.com' to create wallet +
+ {!accounts.length ? ( +
+

+ No accounts found. Please visit{' '} + + store.laconic.com + {' '} + to create a wallet. +

) : (
-
)} +
); };