From d58d015c7d178578dac04b41de6f3247b1ed072c Mon Sep 17 00:00:00 2001
From: Adw8 <adwaitgharpure@gmail.com>
Date: Wed, 6 Nov 2024 19:13:06 +0530
Subject: [PATCH] Get data from wallet in iframe component

---
 .../src/components/projects/create/IFrame.tsx | 68 ++++++++++---------
 .../frontend/src/pages/org-slug/index.tsx     | 49 -------------
 2 files changed, 35 insertions(+), 82 deletions(-)

diff --git a/packages/frontend/src/components/projects/create/IFrame.tsx b/packages/frontend/src/components/projects/create/IFrame.tsx
index ce9c461a..ba337ed5 100644
--- a/packages/frontend/src/components/projects/create/IFrame.tsx
+++ b/packages/frontend/src/components/projects/create/IFrame.tsx
@@ -1,59 +1,61 @@
-import React, { useEffect, useState, useRef } from 'react';
+import React, { useEffect } from 'react';
+// import {
+//   VITE_LACONICD_CHAIN_ID,
+// } from 'utils/constants';
 
 const IframeComponent: React.FC = () => {
-  const [localStorageData, setLocalStorageData] = useState<string | null>(null);
-  const iframeRef = useRef<HTMLIFrameElement | null>(null);
 
   useEffect(() => {
-    // Listen for messages from the iframe
+    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) => {
-      if (event.origin !== 'https://wallet.laconic.com') return; // Ensure it's from the iframe
+      // Always verify origin for security
+      if (event.origin !== 'http://localhost:3001') return;
 
-      const { action, key, value } = event.data;
-
-      if (action === 'localStorageDataResponse' && key === 'accountIndices/cosmos:laconic-testnet-2') {
-        setLocalStorageData(value); // Update state with the value from localStorage
+      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);
 
-    // Cleanup listener on unmount
+    // Request data once iframe is loaded
+    const iframe = document.getElementById('walletIframe');
+    if (iframe) {
+      iframe.onload = getDataFromWallet;
+    }
+
+    // Cleanup
     return () => {
       window.removeEventListener('message', handleMessage);
     };
   }, []);
 
-  // Send a message to the iframe to get data from localStorage
-  const requestLocalStorageData = (key: string) => {
-    if (iframeRef.current && iframeRef.current.contentWindow) {
-      iframeRef.current.contentWindow.postMessage(
-        { action: 'getLocalStorageData', key }, // Send key to request data
-        'https://wallet.laconic.com'
-      );
-    }
-  };
-
-  // Call to request localStorage data when component mounts
-  useEffect(() => {
-    requestLocalStorageData('accountIndices/cosmos:laconic-testnet-2');
-  }, []);
-
   return (
     <div>
       <iframe
-        // ref={iframeRef}
         id="walletIframe"
-        src="https://wallet.laconic.com"
-         width="500" height="300"
+        src="http://localhost:3001"
+        width="500" height="300"
         sandbox="allow-scripts allow-same-origin"
       ></iframe>
 
-      {localStorageData ? (
-        <p>LocalStorage Data: {localStorageData}</p>
-      ) : (
-        <p>Loading localStorage data...</p>
-      )}
     </div>
   );
 };
diff --git a/packages/frontend/src/pages/org-slug/index.tsx b/packages/frontend/src/pages/org-slug/index.tsx
index a496998b..a7125b79 100644
--- a/packages/frontend/src/pages/org-slug/index.tsx
+++ b/packages/frontend/src/pages/org-slug/index.tsx
@@ -23,48 +23,6 @@ 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 */}
@@ -91,13 +49,6 @@ 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>
   );
 };