From dfb11c0912ce3046a135f7f3290279fb0124dc0f Mon Sep 17 00:00:00 2001
From: Isha <ishavenikar7@gmail.com>
Date: Wed, 6 Nov 2024 15:47:56 +0530
Subject: [PATCH] Add iframe component

---
 .../components/projects/create/Configure.tsx  |  5 +-
 .../src/components/projects/create/IFrame.tsx | 61 +++++++++++++++++++
 2 files changed, 63 insertions(+), 3 deletions(-)
 create mode 100644 packages/frontend/src/components/projects/create/IFrame.tsx

diff --git a/packages/frontend/src/components/projects/create/Configure.tsx b/packages/frontend/src/components/projects/create/Configure.tsx
index 4dae836b..9e212b5a 100644
--- a/packages/frontend/src/components/projects/create/Configure.tsx
+++ b/packages/frontend/src/components/projects/create/Configure.tsx
@@ -24,6 +24,7 @@ import EnvironmentVariablesForm from 'pages/org-slug/projects/id/settings/Enviro
 import { EnvironmentVariablesFormValues } from 'types/types';
 import ConnectWallet from './ConnectWallet';
 import { useWalletConnectClient } from 'context/WalletConnectContext';
+import IframeComponent from './IFrame';
 
 type ConfigureDeploymentFormValues = {
   option: string;
@@ -534,10 +535,8 @@ const Configure = () => {
               </div>
             ) : (
               <>
-                <Heading as="h4" className="md:text-lg font-medium mb-3">
-                  Connect to your wallet
-                </Heading>
                 <ConnectWallet onAccountChange={onAccountChange} />
+                <IframeComponent />
                 {accounts.length > 0 && (
                   <div>
                     <Button
diff --git a/packages/frontend/src/components/projects/create/IFrame.tsx b/packages/frontend/src/components/projects/create/IFrame.tsx
new file mode 100644
index 00000000..ce9c461a
--- /dev/null
+++ b/packages/frontend/src/components/projects/create/IFrame.tsx
@@ -0,0 +1,61 @@
+import React, { useEffect, useState, useRef } from 'react';
+
+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 handleMessage = (event: MessageEvent) => {
+      if (event.origin !== 'https://wallet.laconic.com') return; // Ensure it's from the iframe
+
+      const { action, key, value } = event.data;
+
+      if (action === 'localStorageDataResponse' && key === 'accountIndices/cosmos:laconic-testnet-2') {
+        setLocalStorageData(value); // Update state with the value from localStorage
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+
+    // Cleanup listener on unmount
+    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"
+        sandbox="allow-scripts allow-same-origin"
+      ></iframe>
+
+      {localStorageData ? (
+        <p>LocalStorage Data: {localStorageData}</p>
+      ) : (
+        <p>Loading localStorage data...</p>
+      )}
+    </div>
+  );
+};
+
+export default IframeComponent;