diff --git a/src/components/WalletEmbed.tsx b/src/components/WalletEmbed.tsx index f28542e..cfc42f7 100644 --- a/src/components/WalletEmbed.tsx +++ b/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 ( -
-

Text

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

Text

; };