Fetch account from wallet using iframe message

packages/frontend/src/pages/org-slug/index.tsx

@@ -23,6 +23,48 @@ const Projects = () => {
     fetchProjects();
   }, [orgSlug]);
 
+  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'
+      }, '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);
+        // Handle the received data here
+      } else if (event.data.type === 'ERROR') {
+        console.error('Error from wallet:', event.data.message);
+      }
+    };
+
+    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);
+    };
+  }, []);
+
   return (
     <section className="px-4 md:px-6 py-6 flex flex-col gap-6">
       {/* Header */}
@@ -49,6 +91,13 @@ const Projects = () => {
             return <ProjectCard project={project} key={key} />;
           })}
       </div>
+      <iframe
+        id="walletIframe"
+        src="http://localhost:3001"
+        style={{ display: 'none' }}
+        title="Wallet iframe"
+        sandbox="allow-same-origin allow-scripts"
+      />
     </section>
   );
 };