refactor modal connect process

Author: theothersideofgods

packages/react/__tests__/store/store.test.ts

@@ -330,4 +330,16 @@ describe('InterchainStore', () => {
     useStore.getState().addChains(newChains, newAssetLists, newSignerOptions, newEndpointOptionss);
     expect(useStore.getState().endpointOptionsMap).toEqual({ chain2: newEndpointOptionss.endpoints?.chain2 ?? {} });
   })
+
+  it('should update wallet state to Connected and fetch account after connection', async () => {
+    const account = { address: 'address1' };
+    (walletManager.getAccount as jest.Mock).mockResolvedValueOnce(account);
+
+    await useStore.getState().connect('wallet1', 'chain1');
+
+    const state = useStore.getState().getChainWalletState('wallet1', 'chain1');
+    expect(state?.walletState).toBe(WalletState.Connected);
+    expect(walletManager.getAccount).toHaveBeenCalledWith('wallet1', 'chain1');
+    expect(state?.account).toBe(account);
+  });
 });

packages/react/src/modal/modal.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import {
   ConnectedContent,
   ConnectedHeader,
@@ -13,17 +12,8 @@ import {
   WalletListContent,
   WalletListHeader,
 } from "./views";
-import { useWalletModal } from "./provider";
-import { useChainWallet, useWalletManager } from "../hooks";
-import { useEffect, useMemo, useState } from "react";
-import {
-  ExtensionWallet,
-  WalletState,
-  WCWallet,
-  BaseWallet,
-  isInstanceOf,
-  DownloadInfo,
-} from "@interchain-kit/core";
+import { useMemo } from "react";
+import { BaseWallet, DownloadInfo } from "@interchain-kit/core";
 import {
   ConnectModal,
   Wallet as InterchainUIWalletType,

packages/react/src/modal/provider.tsx

@@ -1,4 +1,4 @@
-import { createContext, useContext, useEffect, useState } from "react";
+import { createContext, useContext, useState } from "react";
 import { WalletModal } from "./modal";
 import { WalletState } from "@interchain-kit/core";
 import { useChainWallet, useWalletManager } from "../hooks";
@@ -23,10 +23,6 @@ export const WalletModalProvider = ({
   const open = () => setModalIsOpen(true);
   const close = () => setModalIsOpen(false);
 
-  const [walletNameToConnect, setWalletNameToConnect] = useState<string | null>(
-    null
-  );
-
   const {
     chains,
     wallets,
@@ -36,9 +32,11 @@ export const WalletModalProvider = ({
     walletConnectQRCodeUri,
     getDownloadLink,
     getEnv,
+    connect,
+    getAccount,
   } = useWalletManager();
 
-  const { wallet, status, connect, disconnect, username, address, message } =
+  const { wallet, status, disconnect, username, address, message } =
     useChainWallet(currentChainName || chains[0].chainName, currentWalletName);
 
   const [shouldShowList, setShouldShowList] = useState(
@@ -49,27 +47,18 @@ export const WalletModalProvider = ({
     transferToWalletUISchema
   );
 
-  useEffect(() => {
-    const handleConnect = async () => {
-      if (walletNameToConnect) {
-        try {
-          await connect();
-          setWalletNameToConnect(null);
-          setShouldShowList(false);
-        } catch (error) {
-          console.error("Error connecting to wallet:", error);
-          throw error;
-        }
-      }
-    };
-    handleConnect();
-  }, [walletNameToConnect]);
-
   const handleCloseModal = () => {
     close();
     setShouldShowList(false);
   };
 
+  const handleConnectWallet = async (walletName: string) => {
+    const chainToConnect = currentChainName || chains[0].chainName;
+    setShouldShowList(false);
+    setCurrentWalletName(walletName);
+    await connect(walletName, chainToConnect);
+  };
+
   return (
     <WalletModalContext.Provider value={{ modalIsOpen, open, close }}>
       {children}
@@ -90,12 +79,9 @@ export const WalletModalProvider = ({
         isDisconnected={status === WalletState.Disconnected}
         isNotExist={status === WalletState.NotExist}
         errorMessage={message}
-        onSelectWallet={(w) => {
-          setWalletNameToConnect(w.info.name);
-          setCurrentWalletName(w.info.name);
-        }}
+        onSelectWallet={(w) => handleConnectWallet(w.info.name)}
         onBack={() => setShouldShowList(true)} // Add other required props with appropriate default or mock values
-        onReconnect={connect}
+        onReconnect={() => handleConnectWallet(currentWalletName)}
         getDownloadLink={() => getDownloadLink(wallet?.info.name)}
         getEnv={getEnv}
       />

packages/react/src/store/store.ts

@@ -204,6 +204,8 @@ export const createInterchainStore = (walletManager: WalletManager) => {
           })
         })
         get().updateChainWalletState(walletName, chainName, { walletState: WalletState.Connected })
+
+        await get().getAccount(walletName, chainName)
       } catch (error) {
         if ((error as any).message === 'Request rejected') {
           get().updateChainWalletState(walletName, chainName, { walletState: WalletState.Rejected, errorMessage: (error as any).message })