From 9ab44230f311abdb43bd53caa24579aafcc43b61 Mon Sep 17 00:00:00 2001
From: Adw8 <adwaitgharpure@gmail.com>
Date: Thu, 7 Nov 2024 10:36:32 +0530
Subject: [PATCH] Add component to handle iframe messages

---
 src/App.tsx                    |  5 ++++
 src/components/WalletEmbed.tsx | 48 ++++++++++++++++++++++++++++++++++
 src/types.ts                   |  1 +
 3 files changed, 54 insertions(+)
 create mode 100644 src/components/WalletEmbed.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 49881f8..d2f255c 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -34,6 +34,7 @@ import { NETWORK_METHODS } from "./utils/wallet-connect/common-data";
 import { COSMOS_METHODS } from "./utils/wallet-connect/COSMOSData";
 import styles from "./styles/stylesheet";
 import { Header } from "./components/Header";
+import { WalletEmbed } from "./components/WalletEmbed";
 
 const Stack = createStackNavigator<StackParamsList>();
 
@@ -313,6 +314,10 @@ const App = (): React.JSX.Element => {
             header: () => <Header title="Wallet" />,
           }}
         />
+        <Stack.Screen
+          name="WalletEmbed"
+          component={WalletEmbed}
+        />
       </Stack.Navigator>
       <PairingModal
         visible={modalVisible}
diff --git a/src/components/WalletEmbed.tsx b/src/components/WalletEmbed.tsx
new file mode 100644
index 0000000..ade33bb
--- /dev/null
+++ b/src/components/WalletEmbed.tsx
@@ -0,0 +1,48 @@
+import React, { useEffect } from 'react'
+
+export const WalletEmbed = () => {
+  useEffect(() => {
+    const handleMessage = (event: MessageEvent) => {
+      if (event.origin !== 'http://localhost:3000') return;
+
+      if (event.data.type === 'REQUEST_WALLET_ACCOUNTS') {
+        try {
+          const accountsData = localStorage.getItem('accounts/cosmos:laconic-testnet-2/0');
+
+          if (!accountsData) {
+            (event.source as Window)?.postMessage({
+              type: 'ERROR',
+              message: 'Wallet accounts not found in local storage'
+            }, 'http://localhost:3000');
+            return;
+          }
+
+          (event.source as Window)?.postMessage({
+            type: 'WALLET_ACCOUNTS_DATA',
+            data: accountsData
+          }, 'http://localhost:3000');
+
+        } catch (error) {
+          (event.source as Window)?.postMessage({
+            type: 'ERROR',
+            message: 'Error accessing wallet accounts data'
+          }, 'http://localhost:3000');
+        }
+      }
+    };
+
+    // Set up the message event listener
+    window.addEventListener('message', handleMessage);
+
+    // Clean up the event listener on component unmount
+    return () => {
+      window.removeEventListener('message', handleMessage);
+    };
+  }, []);
+
+  return (
+    <div>
+      <p style={{ color: 'white' }}>Text</p>
+    </div>
+  );
+};
diff --git a/src/types.ts b/src/types.ts
index e6c37c1..a6499ac 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -36,6 +36,7 @@ export type StackParamsList = {
     requestEvent: Web3WalletTypes.SessionRequest;
     requestSessionData: SessionTypes.Struct;
   };
+  WalletEmbed: undefined;
 };
 
 export type Account = {