Add bundled method to create account

src/components/WalletEmbed.tsx

@@ -1,64 +1,77 @@
-import React, { useEffect } from 'react'
+import React, { useEffect } from 'react';
+import { createWallet } from '../utils/accounts';
+import { useNetworks } from '../context/NetworksContext';
 
 export const WalletEmbed = () => {
+  const { networksData } = useNetworks();
+
+  const getAccountsData = (chainId: string): string => {
+    const accountCount = localStorage.getItem(`addAccountCounter/cosmos:${chainId}`);
+    if (!accountCount) return '';
+
+    let accountsData = '';
+    for (let i = 0; i < Number(accountCount); i++) {
+      const account = localStorage.getItem(`accounts/cosmos:${chainId}/${i}`);
+      if (account) accountsData += `${account},`;
+    }
+
+    return accountsData.slice(0, -1); // Remove trailing comma
+  };
+
+  const getAddressesFromData = (accountsData: string): string[] => {
+    return accountsData
+      ? accountsData.split(',').filter((_, index) => (index + 1) % 4 === 0)
+      : [];
+  };
+
+  const sendMessage = (
+    source: Window | null,
+    type: string,
+    data: any,
+    origin: string
+  ): void => {
+    source?.postMessage({ type, data }, origin);
+  };
+
   useEffect(() => {
-    const handleMessage = (event: MessageEvent) => {
-      // Not checking for event origin as only account addresses are returned
+    const handleGetAccounts = (event: MessageEvent) => {
+      if (event.data.type !== 'REQUEST_WALLET_ACCOUNTS') 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,
-            },
-            event.origin
-          );
-
-        } catch (error) {
-          (event.source as Window)?.postMessage({
-            type: 'ERROR',
-            message: 'Error accessing wallet accounts data'
-          }, event.origin);
-        }
+      const accountsData = getAccountsData(event.data.chainId);
+      if (!accountsData) {
+        sendMessage(event.source as Window, 'ERROR', 'Wallet accounts not found in local storage', event.origin);
+        return;
       }
+
+      const addresses = getAddressesFromData(accountsData);
+      sendMessage(event.source as Window, 'WALLET_ACCOUNTS_DATA', addresses, event.origin);
     };
 
-    // Set up the message event listener
-    window.addEventListener('message', handleMessage);
-
-    // Clean up the event listener on component unmount
-    return () => {
-      window.removeEventListener('message', handleMessage);
-    };
+    window.addEventListener('message', handleGetAccounts);
+    return () => window.removeEventListener('message', handleGetAccounts);
   }, []);
 
-  return (
-    <div>
-      <p style={{ color: 'white' }}>Text</p>
-    </div>
-  );
+  useEffect(() => {
+    const handleCreateAccounts = async (event: MessageEvent) => {
+      if (event.data.type !== 'REQUEST_CREATE_OR_GET_ACCOUNTS') return;
+
+      let accountsData = getAccountsData(event.data.chainId);
+
+      if (!accountsData) {
+        console.log("Accounts not found, creating wallet...");
+        await createWallet(networksData);
+
+        // Re-fetch newly created accounts
+        accountsData = getAccountsData(event.data.chainId);
+      }
+
+      const addresses = getAddressesFromData(accountsData);
+      sendMessage(event.source as Window, 'WALLET_ACCOUNTS_DATA', addresses, event.origin);
+    };
+
+    window.addEventListener('message', handleCreateAccounts);
+    return () => window.removeEventListener('message', handleCreateAccounts);
+  }, [networksData]);
+
+  return <p style={{ color: 'white' }}>Text</p>;
 };