Add component to handle iframe messages

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}

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>
+  );
+};

src/types.ts

@@ -36,6 +36,7 @@ export type StackParamsList = {
     requestEvent: Web3WalletTypes.SessionRequest;
     requestSessionData: SessionTypes.Struct;
   };
+  WalletEmbed: undefined;
 };
 
 export type Account = {