Add iframe to add accounts

src/App.tsx

@@ -42,6 +42,7 @@ import { checkSufficientFunds, getPathKey, sendMessage } from "./utils/misc";
 import useAccountsData from "./hooks/useAccountsData";
 import { useWebViewHandler } from "./hooks/useWebViewHandler";
 import SignMessageEmbed from "./screens/SignMessageEmbed";
+import { AddAccountEmbed } from "./screens/AddAccountEmbed";
 
 const Stack = createStackNavigator<StackParamsList>();
 
@@ -391,6 +392,13 @@ const App = (): React.JSX.Element => {
             header: () => <></>,
           }}
         />
+        <Stack.Screen
+          name="add-account-embed"
+          component={AddAccountEmbed}
+          options={{
+            header: () => <></>,
+          }}
+        />
         <Stack.Screen
           name="sign-message-embed"
           component={SignMessageEmbed}

src/screens/AddAccountEmbed.tsx

@@ -0,0 +1,61 @@
+import React, { useEffect } from 'react';
+
+import { useNetworks } from '../context/NetworksContext';
+import { COSMOS } from '../utils/constants';
+import { sendMessage } from '../utils/misc';
+import useAccountsData from '../hooks/useAccountsData';
+import useGetOrCreateAccounts from '../hooks/useGetOrCreateAccounts';
+import { addAccount, retrieveSingleAccount } from '../utils/accounts';
+import { useAccounts } from '../context/AccountsContext';
+import { Account, NetworksDataState } from '../types';
+
+export const AddAccountEmbed = () => {
+  const { networksData } = useNetworks();
+  const { accounts, setAccounts, setCurrentIndex } =
+    useAccounts();
+  const { getAccountsData } = useAccountsData();
+
+  const addAccountHandler = async (network: NetworksDataState) => {
+    const newAccount = await addAccount(network);
+    if (newAccount) {
+      setAccounts([...accounts, newAccount]);
+      setCurrentIndex(newAccount.index);
+    }
+  };
+
+  useEffect(() => {
+    const handleAddAccount = async (event: MessageEvent) => {
+      if (event.data.type !== 'ADD_ACCOUNT') return;
+
+      if (event.origin !== process.env.REACT_APP_DEPLOY_APP_URL) {
+        console.log('Unauthorized app.');
+        return;
+      }
+
+      const network = networksData.find(network => network.chainId === event.data.chainId);
+
+      await addAccountHandler(network!);
+
+      const accountsData = await getAccountsData(event.data.chainId);
+
+      console.log({accountsData})
+
+      sendMessage(event.source as Window, 'ADD_ACCOUNT_RESPONSE', { message: event.data.message, accountsData }, event.origin);
+    };
+
+    window.addEventListener('message', handleAddAccount);
+
+    return () => {
+      window.removeEventListener('message', handleAddAccount);
+    };
+  }, [networksData, getAccountsData]);
+
+  // Custom hook for adding listener to get accounts data
+  useGetOrCreateAccounts();
+
+  console.log('wallet')
+  return (
+    <>
+    </>
+  )
+};

src/types.ts

@@ -41,6 +41,7 @@ export type StackParamsList = {
   "wallet-embed": undefined;
   "auto-sign-in": undefined;
   "sign-message-embed": undefined;
+  "add-account-embed": undefined;
 };
 
 export type Account = {