@interchain-kit/react 0.3.23 → 0.3.24

package/esm/hooks/index.js

@@ -3,3 +3,4 @@ export * from './useChain';
 export * from './useChainWallet';
 export * from './useSigningClient';
 export * from './useAsync';
+export * from './useWalletModal';

package/esm/hooks/useChain.js

@@ -1,15 +1,15 @@
-import { useWalletModal } from "../modal";
 import { useWalletManager } from './useWalletManager';
 import { ChainNameNotExist } from '@interchain-kit/core';
 import { useSigningClient } from './useSigningClient';
+import { useWalletModal } from './useWalletModal';
 export const useChain = (chainName) => {
-    const { assetLists, currentWalletName, disconnect, setCurrentChainName, getChainByName, getWalletByName, getChainWalletState, getChainLogoUrl, connect, getSigningClient, getRpcEndpoint, getAccount } = useWalletManager();
+    const { assetLists, currentWalletName, disconnect, setCurrentChainName, getChainByName, getWalletByName, getChainWalletState, getChainLogoUrl, connect, getSigningClient, getRpcEndpoint, getAccount, getStatefulWalletByName } = useWalletManager();
     const chain = getChainByName(chainName);
     if (!chain) {
         throw new ChainNameNotExist(chainName);
     }
     const assetList = assetLists.find(a => a.chainName === chainName);
-    const wallet = getWalletByName(currentWalletName);
+    const wallet = getStatefulWalletByName(currentWalletName);
     const chainWalletStateToShow = getChainWalletState(currentWalletName, chainName);
     const { open, close } = useWalletModal();
     const { signingClient, isLoading: isSigningClientLoading, error: signingClientError } = useSigningClient(chainName, currentWalletName);

package/esm/hooks/useChainWallet.js

@@ -1,9 +1,9 @@
 import { useWalletManager } from "./useWalletManager";
 import { useSigningClient } from "./useSigningClient";
 export const useChainWallet = (chainName, walletName) => {
-    const { assetLists, disconnect, setCurrentChainName, setCurrentWalletName, getChainByName, getWalletByName, getChainWalletState, getChainLogoUrl, connect, getSigningClient, getRpcEndpoint, getAccount } = useWalletManager();
+    const { assetLists, disconnect, setCurrentChainName, setCurrentWalletName, getChainByName, getWalletByName, getChainWalletState, getChainLogoUrl, connect, getSigningClient, getRpcEndpoint, getAccount, getStatefulWalletByName } = useWalletManager();
     const chain = getChainByName(chainName);
-    const wallet = getWalletByName(walletName);
+    const wallet = getStatefulWalletByName(walletName);
     const assetList = assetLists.find(a => a.chainName === chainName);
     const chainWalletStateToShow = getChainWalletState(walletName, chainName);
     const { signingClient, isLoading: isSigningClientLoading, error: signingClientError } = useSigningClient(chainName, walletName);

package/esm/hooks/useWalletModal.js

@@ -0,0 +1,7 @@
+import { useWalletManager } from "./useWalletManager";
+export const useWalletModal = () => {
+    const { modalIsOpen, openModal, closeModal } = useWalletManager();
+    return {
+        modalIsOpen, open: openModal, close: closeModal
+    };
+};

package/esm/modal/index.js

@@ -1,2 +1 @@
 export * from './modal';
-export * from './provider';

package/esm/modal/modal.js

@@ -1,15 +1,51 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { ConnectedContent, ConnectedHeader, ConnectingContent, ConnectingHeader, NotExistContent, NotExistHeader, QRCodeContent, QRCodeHeader, RejectContent, RejectHeader, WalletListContent, WalletListHeader, } from "./views";
-import { useMemo } from "react";
+import { ConnectedContent, ConnectedHeader, ConnectingContent, ConnectingHeader, ErrorContent, ErrorHeader, NotExistContent, NotExistHeader, QRCodeContent, QRCodeHeader, RejectContent, RejectHeader, WalletListContent, WalletListHeader, } from "./views";
+import { useMemo, useState } from "react";
+import { WalletState } from "@interchain-kit/core";
 import { ConnectModal, } from "@interchain-ui/react";
+import { useWalletManager } from "../hooks";
+import { transferToWalletUISchema } from "../utils";
+export const InterchainWalletModal = () => {
+    const [shouldShowList, setShouldShowList] = useState(false);
+    const { modalIsOpen: isOpen, walletConnectQRCodeUri, wallets: statefulWallets, getChainWalletState, currentWalletName, currentChainName, openModal: open, closeModal: close, chains, setCurrentWalletName, getDownloadLink, getEnv, } = useWalletManager();
+    const walletsForUI = statefulWallets.map((w) => transferToWalletUISchema(w));
+    const chainNameToConnect = currentChainName || chains[0].chainName;
+    const chainToConnect = chains.find((chain) => chain.chainName === chainNameToConnect);
+    const currentWallet = statefulWallets.find((w) => w.info.name === currentWalletName);
+    const { account, errorMessage } = getChainWalletState(currentWalletName, currentChainName) ||
+        {};
+    const disconnect = () => {
+        currentWallet.disconnect(chainToConnect.chainId);
+    };
+    const onSelectWallet = (wallet) => {
+        setShouldShowList(false);
+        return wallet.connect(chainToConnect.chainId);
+    };
+    const onBack = () => setShouldShowList(true);
+    const handleCloseModal = () => {
+        close();
+        setShouldShowList(false);
+    };
+    const onReconnect = () => {
+        currentWallet.connect(chainToConnect.chainId);
+    };
+    return (_jsx(WalletModal, { shouldShowList: shouldShowList, username: account?.username, address: account?.address, disconnect: disconnect, isOpen: isOpen, open: open, close: handleCloseModal, wallets: walletsForUI, walletConnectQRCodeUri: walletConnectQRCodeUri, currentWallet: currentWallet, isConnecting: currentWallet?.walletState === WalletState.Connecting, isConnected: currentWallet?.walletState === WalletState.Connected, isRejected: currentWallet?.walletState === WalletState.Rejected, isDisconnected: currentWallet?.walletState === WalletState.Disconnected, isNotExist: currentWallet?.walletState === WalletState.NotExist, errorMessage: errorMessage, onSelectWallet: (w) => onSelectWallet(w), onBack: () => setShouldShowList(true), onReconnect: () => onSelectWallet(currentWallet), getDownloadLink: () => getDownloadLink(currentWallet?.info.name), getEnv: getEnv }));
+};
 export const WalletModal = ({ shouldShowList, isOpen, walletConnectQRCodeUri, wallets, username, address, currentWallet, isConnecting, isConnected, isRejected, isDisconnected, isNotExist, errorMessage, open, close, disconnect, onSelectWallet, onBack, onReconnect, getDownloadLink, getEnv, }) => {
     const { header, content } = useMemo(() => {
-        if (shouldShowList || isDisconnected) {
+        if (shouldShowList ||
+            (isDisconnected && currentWallet.errorMessage === "")) {
             return {
                 header: _jsx(WalletListHeader, { close: close }),
                 content: (_jsx(WalletListContent, { onSelectWallet: onSelectWallet, wallets: wallets })),
             };
         }
+        if (currentWallet && currentWallet.errorMessage) {
+            return {
+                header: (_jsx(ErrorHeader, { wallet: currentWallet, close: close, onBack: onBack })),
+                content: _jsx(ErrorContent, { wallet: currentWallet, onBack: onBack }),
+            };
+        }
         if (currentWallet &&
             walletConnectQRCodeUri &&
             currentWallet.info.name === "WalletConnect") {
@@ -57,3 +93,11 @@ export const WalletModal = ({ shouldShowList, isOpen, walletConnectQRCodeUri, wa
     ]);
     return (_jsx(ConnectModal, { isOpen: isOpen, header: header, onOpen: open, onClose: close, children: content }));
 };
+export const ModalRenderer = ({ walletModal: ProvidedWalletModal, }) => {
+    if (!ProvidedWalletModal) {
+        throw new Error(`InterchainWalletProvider: walletModal is required. Please provide a wallet modal component. or use InterchainkitWalletModal/n
+      Example: <ChainProvider chains={chains} assetLists={assetLists} wallets={wallets} walletModal={InterchainKitWalletModal} />`);
+    }
+    const { modalIsOpen, openModal, closeModal, wallets, currentWalletName } = useWalletManager();
+    return (_jsx(ProvidedWalletModal, { wallets: wallets, isOpen: modalIsOpen, open: openModal, close: closeModal, currentWallet: wallets.find((w) => w.info.name === currentWalletName) }));
+};

package/esm/modal/provider.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, useContext, useEffect, useRef, useState } from "react";
-import { WalletModal } from "./modal";
 import { WalletState } from "@interchain-kit/core";
 import { useChainWallet, useWalletManager } from "../hooks";
 import { transferToWalletUISchema } from "../utils";
+import { InterchainWalletModal } from "./modal";
 const WalletModalContext = createContext(null);
 export const WalletModalProvider = ({ children, }) => {
     const [modalIsOpen, setModalIsOpen] = useState(false);
@@ -27,7 +27,7 @@ export const WalletModalProvider = ({ children, }) => {
         setCurrentWalletName(walletName);
         await connect(walletName, chainToConnect);
     };
-    return (_jsxs(WalletModalContext.Provider, { value: { modalIsOpen, open, close }, children: [children, _jsx(WalletModal, { shouldShowList: shouldShowList, username: username, address: address, disconnect: disconnect, isOpen: modalIsOpen, open: open, close: handleCloseModal, wallets: walletsForUI, walletConnectQRCodeUri: walletConnectQRCodeUri, currentWallet: wallet, isConnecting: status === WalletState.Connecting, isConnected: status === WalletState.Connected, isRejected: status === WalletState.Rejected, isDisconnected: status === WalletState.Disconnected, isNotExist: status === WalletState.NotExist, errorMessage: message, onSelectWallet: (w) => handleConnectWallet(w.info.name), onBack: () => setShouldShowList(true), onReconnect: () => handleConnectWallet(currentWalletName), getDownloadLink: () => getDownloadLink(wallet?.info.name), getEnv: getEnv })] }));
+    return (_jsxs(WalletModalContext.Provider, { value: { modalIsOpen, open, close }, children: [children, _jsx(InterchainWalletModal, { shouldShowList: shouldShowList, username: username, address: address, disconnect: disconnect, isOpen: modalIsOpen, open: open, close: handleCloseModal, wallets: walletsForUI, walletConnectQRCodeUri: walletConnectQRCodeUri, currentWallet: wallet, isConnecting: status === WalletState.Connecting, isConnected: status === WalletState.Connected, isRejected: status === WalletState.Rejected, isDisconnected: status === WalletState.Disconnected, isNotExist: status === WalletState.NotExist, errorMessage: message, onSelectWallet: (w) => handleConnectWallet(w.info.name), onBack: () => setShouldShowList(true), onReconnect: () => handleConnectWallet(currentWalletName), getDownloadLink: () => getDownloadLink(wallet?.info.name), getEnv: getEnv })] }));
 };
 export const useWalletModal = () => {
     const context = useContext(WalletModalContext);

package/esm/modal/views/Error.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ConnectModalHead, ConnectModalStatus } from "@interchain-ui/react";
+import { getWalletInfo } from "../../utils";
+export const ErrorHeader = ({ wallet, close, onBack, }) => {
+    return (_jsx(ConnectModalHead, { title: wallet.info.prettyName, hasBackButton: true, onClose: close, onBack: onBack, closeButtonProps: { onClick: close } }));
+};
+export const ErrorContent = ({ wallet, onBack, }) => {
+    return (_jsx(ConnectModalStatus, { status: "Error", wallet: getWalletInfo(wallet), contentHeader: "Oops! Something wrong...", contentDesc: wallet.errorMessage, onChangeWallet: onBack }));
+};

package/esm/modal/views/index.js

@@ -4,3 +4,4 @@ export * from './Connected';
 export * from './Reject';
 export * from './QRCode';
 export * from './NotExist';
+export * from './Error';

package/esm/provider.js

@@ -1,11 +1,11 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef } from "react";
 import { createContext, useContext } from "react";
 import { WalletManager, } from "@interchain-kit/core";
-import { WalletModalProvider } from "./modal";
+import { ModalRenderer } from "./modal";
 import { createInterchainStore } from "./store";
 const InterchainWalletContext = createContext(null);
-export const ChainProvider = ({ chains, assetLists, wallets, signerOptions, endpointOptions, children, }) => {
+export const ChainProvider = ({ chains, assetLists, wallets, signerOptions, endpointOptions, children, walletModal: ProviderWalletModal, }) => {
     // const [_, forceRender] = useState({});
     const walletManager = new WalletManager(chains, assetLists, wallets, signerOptions, endpointOptions);
     const store = useRef(createInterchainStore(walletManager));
@@ -13,7 +13,7 @@ export const ChainProvider = ({ chains, assetLists, wallets, signerOptions, endp
         // walletManager.init();
         store.current.getState().init();
     }, []);
-    return (_jsx(InterchainWalletContext.Provider, { value: store.current, children: _jsx(WalletModalProvider, { children: children }) }));
+    return (_jsxs(InterchainWalletContext.Provider, { value: store.current, children: [children, _jsx(ModalRenderer, { walletModal: ProviderWalletModal })] }));
 };
 export const useInterchainWalletContext = () => {
     const context = useContext(InterchainWalletContext);

package/esm/store/stateful-wallet.js

@@ -0,0 +1,117 @@
+import { BaseWallet, WalletState, WCWallet } from "@interchain-kit/core";
+export class StatefulWallet extends BaseWallet {
+    originalWallet;
+    walletName;
+    walletSet;
+    walletGet;
+    set;
+    get;
+    constructor(wallet, walletSet, walletGet, set, get) {
+        super(wallet.info);
+        this.originalWallet = wallet;
+        this.walletName = wallet.info.name;
+        this.walletState = WalletState.Disconnected;
+        this.errorMessage = "";
+        this.walletSet = walletSet;
+        this.walletGet = walletGet;
+        this.set = set;
+        this.get = get;
+    }
+    getChainToConnect(chainId) {
+        const { currentChainName, chains } = this.get();
+        const lastChainName = currentChainName;
+        const lastChain = chains.find((chain) => chain.chainName === lastChainName);
+        return chainId ? this.originalWallet.getChainById(chainId) : lastChain;
+    }
+    async init() {
+        return this.originalWallet.init();
+    }
+    async connect(chainId) {
+        const { get, set, walletName, walletGet, walletSet, originalWallet } = this;
+        const chainToConnect = this.getChainToConnect(chainId);
+        const state = get().getChainWalletState(walletName, chainToConnect.chainName)?.walletState;
+        if (state === WalletState.NotExist) {
+            return;
+        }
+        if (walletName === 'WalletConnect' && state === WalletState.Connected) {
+            return;
+        }
+        set(draft => {
+            draft.currentChainName = chainToConnect.chainName;
+            draft.currentWalletName = walletName;
+            draft.walletConnectQRCodeUri = '';
+        });
+        walletSet(draft => {
+            draft.walletState = WalletState.Connecting;
+        });
+        get().updateChainWalletState(walletName, chainToConnect.chainName, { walletState: WalletState.Connecting, errorMessage: '' });
+        try {
+            if (originalWallet instanceof WCWallet) {
+                originalWallet.setOnPairingUriCreatedCallback((uri) => {
+                    set(draft => {
+                        draft.walletConnectQRCodeUri = uri;
+                    });
+                });
+            }
+            await originalWallet.connect(chainToConnect.chainId);
+            get().updateChainWalletState(walletName, chainToConnect.chainName, { walletState: WalletState.Connected });
+            walletSet(draft => {
+                draft.walletState = WalletState.Connected;
+            });
+            await walletGet().getAccount(chainToConnect.chainId);
+        }
+        catch (error) {
+            if (error.message === 'Request rejected') {
+                get().updateChainWalletState(walletName, chainToConnect.chainName, { walletState: WalletState.Rejected, errorMessage: error.message });
+                walletSet(draft => {
+                    draft.walletState = WalletState.Rejected;
+                    draft.errorMessage = error.message;
+                });
+                return;
+            }
+            get().updateChainWalletState(walletName, chainToConnect.chainName, { walletState: WalletState.Disconnected, errorMessage: error.message });
+            walletSet(draft => {
+                draft.walletState = WalletState.Disconnected;
+                draft.errorMessage = error.message;
+            });
+        }
+    }
+    async disconnect(chainId) {
+        const { get, walletName, walletSet, originalWallet } = this;
+        const chainToConnect = this.getChainToConnect(chainId);
+        try {
+            await originalWallet.disconnect(chainToConnect.chainId);
+            get().updateChainWalletState(walletName, chainToConnect.chainName, { walletState: WalletState.Disconnected, account: null });
+            walletSet(draft => {
+                draft.walletState = WalletState.Disconnected;
+                draft.errorMessage = "";
+            });
+        }
+        catch (error) {
+        }
+    }
+    async getAccount(chainId) {
+        const chainToConnect = this.getChainToConnect(chainId);
+        const { get, walletName, originalWallet } = this;
+        try {
+            const account = await originalWallet.getAccount(chainToConnect.chainId);
+            get().updateChainWalletState(walletName, chainToConnect.chainName, { account });
+            return account;
+        }
+        catch (error) {
+            console.log(error);
+        }
+    }
+    getOfflineSigner(chainId) {
+        return this.originalWallet.getOfflineSigner(chainId);
+    }
+    addSuggestChain(chainId) {
+        return this.originalWallet.addSuggestChain(chainId);
+    }
+    getProvider(chainId) {
+        return this.originalWallet.getProvider(chainId);
+    }
+    getChainById(chainId) {
+        return this.originalWallet.getChainById(chainId);
+    }
+}

package/esm/store/store.js

@@ -1,9 +1,9 @@
-import { clientNotExistError, WalletState, WCWallet } from "@interchain-kit/core";
+import { clientNotExistError, WalletState } from "@interchain-kit/core";
 import { createStore } from "zustand";
 import { immer } from "zustand/middleware/immer";
 import { persist, createJSONStorage } from 'zustand/middleware';
 import { dedupeAsync } from '../utils';
-import { decorateWallet } from '../utils/decorateWallet';
+import { StatefulWallet } from './stateful-wallet';
 const immerSyncUp = (newWalletManager) => {
     return (draft) => {
         draft.chains = newWalletManager.chains;
@@ -17,15 +17,18 @@ const immerSyncUp = (newWalletManager) => {
     };
 };
 export const createInterchainStore = (walletManager) => {
-    const { chains, assetLists, wallets, signerOptions, endpointOptions } = walletManager;
-    // const walletManager = new WalletManager(chains, assetLists, wallets, signerOptions, endpointOptions)
     return createStore(persist(immer((set, get) => ({
         chainWalletState: [],
         currentWalletName: '',
         currentChainName: '',
         chains: [...walletManager.chains],
         assetLists: [...walletManager.assetLists],
-        wallets: [],
+        wallets: walletManager.wallets.map(wallet => {
+            const walletSet = (fn) => {
+                set((draft) => fn(draft.wallets.find(w => w.info.name === wallet.info.name)));
+            };
+            return new StatefulWallet(wallet, walletSet, () => get().wallets.find(w => w.info.name === wallet.info.name), set, get);
+        }),
         signerOptions: walletManager.signerOptions,
         endpointOptions: walletManager.endpointOptions,
         preferredSignTypeMap: { ...walletManager.preferredSignTypeMap },
@@ -33,151 +36,49 @@ export const createInterchainStore = (walletManager) => {
         endpointOptionsMap: { ...walletManager.endpointOptionsMap },
         walletConnectQRCodeUri: '',
         isReady: false,
-        updateWalletState: (walletName, data) => {
+        modalIsOpen: false,
+        openModal: () => {
             set(draft => {
-                let targetWalletIndex = draft.wallets.findIndex(w => w.info.name === walletName);
-                draft.wallets[targetWalletIndex].walletState = data.walletState;
+                draft.modalIsOpen = true;
+            });
+        },
+        closeModal: () => {
+            set(draft => {
+                draft.modalIsOpen = false;
+                draft.walletConnectQRCodeUri = ''; // reset the QR code uri when modal is closed
             });
         },
         updateChainWalletState: (walletName, chainName, data) => {
             set(draft => {
                 let targetIndex = draft.chainWalletState.findIndex(cws => cws.walletName === walletName && cws.chainName === chainName);
                 draft.chainWalletState[targetIndex] = { ...draft.chainWalletState[targetIndex], ...data };
-                if (data.walletState) {
-                    get().updateWalletState(walletName, data);
-                }
             });
         },
         createStatefulWallet: () => {
             const wallets = walletManager.wallets.map(wallet => {
-                // safeStrictBatchPatch(wallet, {
-                //   connect: async (original, chainId) => {
-                //     const walletName = wallet.info.name
-                //     const chainName = get().chains.find(chain => chain.chainId === chainId)?.chainName
-                //     const state = get().getChainWalletState(walletName, chainName)?.walletState
-                //     if (state === WalletState.NotExist) {
-                //       return
-                //     }
-                //     if (walletName === 'WalletConnect' && state === WalletState.Connected) {
-                //       return
-                //     }
-                //     set(draft => {
-                //       draft.currentChainName = chainName
-                //       draft.currentWalletName = walletName
-                //       draft.walletConnectQRCodeUri = ''
-                //     })
-                //     get().updateChainWalletState(walletName, chainName, { walletState: WalletState.Connecting, errorMessage: '' })
-                //     try {
-                //       if (wallet instanceof WCWallet) {
-                //         wallet.setOnPairingUriCreatedCallback((uri) => {
-                //           set(draft => {
-                //             draft.walletConnectQRCodeUri = uri
-                //           })
-                //         })
-                //       }
-                //       await original(chainId)
-                //       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 })
-                //         return
-                //       }
-                //       get().updateChainWalletState(walletName, chainName, { walletState: WalletState.Disconnected, errorMessage: (error as any).message })
-                //     }
-                //   },
-                //   disconnect: async (original, chainId) => {
-                //     const walletName = wallet.info.name
-                //     const chainName = get().chains.find(chain => chain.chainId === chainId)?.chainName
-                //     try {
-                //       await original(chainId)
-                //       get().updateChainWalletState(walletName, chainName, { walletState: WalletState.Disconnected, account: null })
-                //     } catch (error) {
-                //     }
-                //   },
-                //   getAccount: async (original, chainId) => {
-                //     const walletName = wallet.info.name
-                //     const chainName = get().chains.find(chain => chain.chainId === chainId)?.chainName
-                //     try {
-                //       const account = await original(chainId)
-                //       get().updateChainWalletState(walletName, chainName, { account })
-                //       return account
-                //     } catch (error) {
-                //       console.log(error)
-                //     }
-                //   },
-                //   walletState: get().getChainWalletState(wallet.info.name, walletManager.chains?.[0].chainName)?.walletState || WalletState.Disconnected
-                // })
-                // return wallet
-                return decorateWallet(wallet, {
-                    connect: async (chainId) => {
-                        const walletName = wallet.info.name;
-                        const chainName = get().chains.find(chain => chain.chainId === chainId)?.chainName;
-                        const state = get().getChainWalletState(walletName, chainName)?.walletState;
-                        if (state === WalletState.NotExist) {
-                            return;
-                        }
-                        if (walletName === 'WalletConnect' && state === WalletState.Connected) {
-                            return;
-                        }
-                        set(draft => {
-                            draft.currentChainName = chainName;
-                            draft.currentWalletName = walletName;
-                            draft.walletConnectQRCodeUri = '';
-                        });
-                        get().updateChainWalletState(walletName, chainName, { walletState: WalletState.Connecting, errorMessage: '' });
-                        try {
-                            if (wallet instanceof WCWallet) {
-                                wallet.setOnPairingUriCreatedCallback((uri) => {
-                                    set(draft => {
-                                        draft.walletConnectQRCodeUri = uri;
-                                    });
-                                });
-                            }
-                            await wallet.connect(chainId);
-                            get().updateChainWalletState(walletName, chainName, { walletState: WalletState.Connected });
-                            await get().getAccount(walletName, chainName);
-                        }
-                        catch (error) {
-                            if (error.message === 'Request rejected') {
-                                get().updateChainWalletState(walletName, chainName, { walletState: WalletState.Rejected, errorMessage: error.message });
-                                return;
-                            }
-                            get().updateChainWalletState(walletName, chainName, { walletState: WalletState.Disconnected, errorMessage: error.message });
-                        }
-                    },
-                    disconnect: async (chainId) => {
-                        const walletName = wallet.info.name;
-                        const chainName = get().chains.find(chain => chain.chainId === chainId)?.chainName;
-                        try {
-                            await wallet.disconnect(chainId);
-                            get().updateChainWalletState(walletName, chainName, { walletState: WalletState.Disconnected, account: null });
-                        }
-                        catch (error) {
-                        }
-                    },
-                    getAccount: async (chainId) => {
-                        const walletName = wallet.info.name;
-                        const chainName = get().chains.find(chain => chain.chainId === chainId)?.chainName;
-                        try {
-                            const account = await wallet.getAccount(chainId);
-                            get().updateChainWalletState(walletName, chainName, { account });
-                            return account;
-                        }
-                        catch (error) {
-                            console.log(error);
-                        }
-                    },
-                    walletState: get().getChainWalletState(wallet.info.name, walletManager.chains?.[0].chainName)?.walletState || WalletState.Disconnected
-                });
+                const walletSet = (fn) => {
+                    set((draft) => fn(draft.wallets.find(w => w.info.name === wallet.info.name)));
+                };
+                return new StatefulWallet(wallet, walletSet, () => get().wallets.find(w => w.info.name === wallet.info.name), set, get);
             });
             set(draft => {
                 draft.wallets = wallets;
             });
+            const defaultWalletStates = get().chainWalletState.reduce((acc, cws) => {
+                if (acc[cws.walletName] && cws.walletState === WalletState.Connected) {
+                    return acc;
+                }
+                return { ...acc, [cws.walletName]: cws.walletState };
+            }, {});
+            set(draft => {
+                draft.wallets.forEach(wallet => {
+                    wallet.walletState = defaultWalletStates[wallet.info.name];
+                });
+            });
         },
         init: async () => {
             const oldChainWalletStatesMap = new Map(get().chainWalletState.map(cws => [cws.walletName + cws.chainName, cws]));
-            get().createStatefulWallet();
+            // get().createStatefulWallet()
             // should remove wallet that already disconnected ,for hydrain back from localstorage
             // const oldChainWalletStateMap = new Map()
             // get().chainWalletState.forEach(cws => {
@@ -217,7 +118,6 @@ export const createInterchainStore = (walletManager) => {
             set(draft => {
                 draft.chainWalletState = draft.chainWalletState.map(cws => {
                     if (NotExistWallets.includes(cws.walletName)) {
-                        get().updateWalletState(cws.walletName, { walletState: WalletState.NotExist });
                         return { ...cws, walletState: WalletState.NotExist };
                     }
                     return cws;
@@ -225,7 +125,6 @@ export const createInterchainStore = (walletManager) => {
                 draft.chainWalletState = draft.chainWalletState.map(cws => {
                     if (ExistWallets.includes(cws.walletName)) {
                         const newState = cws.walletState === WalletState.NotExist ? WalletState.Disconnected : cws.walletState;
-                        get().updateWalletState(cws.walletName, { walletState: newState });
                         return { ...cws, walletState: newState };
                     }
                     return cws;
@@ -295,53 +194,37 @@ export const createInterchainStore = (walletManager) => {
             });
         },
         connect: async (walletName, chainName) => {
-            const state = get().getChainWalletState(walletName, chainName)?.walletState;
-            if (state === WalletState.NotExist) {
-                return;
-            }
-            if (walletName === 'WalletConnect' && state === WalletState.Connected) {
-                return;
-            }
-            set(draft => {
-                draft.currentChainName = chainName;
-                draft.currentWalletName = walletName;
-                draft.walletConnectQRCodeUri = '';
-            });
-            get().updateChainWalletState(walletName, chainName, { walletState: WalletState.Connecting, errorMessage: '' });
-            try {
-                await walletManager.connect(walletName, chainName, (uri) => {
-                    set(draft => {
-                        draft.walletConnectQRCodeUri = uri;
-                    });
-                });
-                get().updateChainWalletState(walletName, chainName, { walletState: WalletState.Connected });
-                await get().getAccount(walletName, chainName);
+            const wallet = get().wallets.find(w => w.info.name === walletName);
+            const chain = get().chains.find(c => c.chainName === chainName);
+            if (!wallet) {
+                throw new Error(`Wallet ${walletName} not found`);
             }
-            catch (error) {
-                if (error.message === 'Request rejected') {
-                    get().updateChainWalletState(walletName, chainName, { walletState: WalletState.Rejected, errorMessage: error.message });
-                    return;
-                }
-                get().updateChainWalletState(walletName, chainName, { walletState: WalletState.Disconnected, errorMessage: error.message });
+            if (!chain) {
+                throw new Error(`Chain ${chainName} not found`);
             }
+            return wallet.connect(chain.chainId);
         },
         disconnect: async (walletName, chainName) => {
-            try {
-                await walletManager.disconnect(walletName, chainName);
-                get().updateChainWalletState(walletName, chainName, { walletState: WalletState.Disconnected, account: null });
+            const wallet = get().wallets.find(w => w.info.name === walletName);
+            const chain = get().chains.find(c => c.chainName === chainName);
+            if (!wallet) {
+                throw new Error(`Wallet ${walletName} not found`);
             }
-            catch (error) {
+            if (!chain) {
+                throw new Error(`Chain ${chainName} not found`);
             }
+            return wallet.disconnect(chain.chainId);
         },
         getAccount: async (walletName, chainName) => {
-            try {
-                const account = await walletManager.getAccount(walletName, chainName);
-                get().updateChainWalletState(walletName, chainName, { account });
-                return account;
+            const wallet = get().wallets.find(w => w.info.name === walletName);
+            const chain = get().chains.find(c => c.chainName === chainName);
+            if (!wallet) {
+                throw new Error(`Wallet ${walletName} not found`);
             }
-            catch (error) {
-                console.log(error);
+            if (!chain) {
+                throw new Error(`Chain ${chainName} not found`);
             }
+            return wallet.getAccount(chain.chainId);
         },
         getRpcEndpoint: async (walletName, chainName) => {
             return dedupeAsync(`${chainName}-rpcEndpoint`, async () => {
@@ -380,6 +263,9 @@ export const createInterchainStore = (walletManager) => {
         getWalletByName(walletName) {
             return walletManager.getWalletByName(walletName);
         },
+        getStatefulWalletByName(walletName) {
+            return get().wallets.find(w => w.info.name === walletName);
+        },
         async getSigningClient(walletName, chainName) {
             return walletManager.getSigningClient(walletName, chainName);
         },

package/hooks/index.d.ts

@@ -3,3 +3,4 @@ export * from './useChain';
 export * from './useChainWallet';
 export * from './useSigningClient';
 export * from './useAsync';
+export * from './useWalletModal';

package/hooks/index.js

@@ -19,3 +19,4 @@ __exportStar(require("./useChain"), exports);
 __exportStar(require("./useChainWallet"), exports);
 __exportStar(require("./useSigningClient"), exports);
 __exportStar(require("./useAsync"), exports);
+__exportStar(require("./useWalletModal"), exports);