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,64 @@
+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 {
+          let accountsData = '';
+          const indices = localStorage.getItem(`addAccountCounter/cosmos:${event.data.chainId}`);
+          for (let i = 0; i < Number(indices); i++) {
+            const account = localStorage.getItem(`accounts/cosmos:${event.data.chainId}/${i}`);
+            if (account) {
+              accountsData += `${account},`;
+            }
+          }
+
+          // Remove trailing comma
+          accountsData = accountsData.slice(0, -1);
+
+          if (!accountsData) {
+            event.source?.postMessage({
+              type: 'ERROR',
+              message: 'Wallet accounts not found in local storage',
+            });
+            return;
+          }
+
+          const elements = accountsData.split(',');
+          const addresses = elements.filter((_, index) => (index + 1) % 4 === 0);
+
+          (event.source as Window)?.postMessage(
+            {
+              type: 'WALLET_ACCOUNTS_DATA',
+              data: addresses,
+            },
+            '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 = {