@interchain-kit/react 0.0.1-beta.43 → 0.0.1-beta.45

package/esm/hooks/useAccount.js

@@ -1,39 +1,18 @@
-import { useEffect, useMemo, useState } from "react";
-import { WalletManagerState, WalletState } from "@interchain-kit/core";
+import { WalletState } from "@interchain-kit/core";
 import { useWalletManager } from './useWalletManager';
+import { useEffect } from "react";
 export const useAccount = (chainName, walletName) => {
     const walletManager = useWalletManager();
-    const [isFetching, setIsFetching] = useState(false);
-    const wallet = useMemo(() => {
-        return walletManager.wallets.find(w => w.info.name === walletName);
-    }, [walletManager, walletName]);
-    const [account, setAccount] = useState(null);
-    const chain = useMemo(() => {
-        return walletManager.chains.find(c => c.chainName === chainName);
-    }, [walletManager, chainName]);
-    const getAccount = async () => {
-        if (wallet && chain) {
-            if (wallet.walletState === WalletState.Connected && !isFetching) {
-                setIsFetching(true);
-                const account = await walletManager.getAccount(walletName, chainName);
-                setAccount(account);
-                setIsFetching(false);
-            }
-            if (wallet.walletState === WalletState.Disconnected) {
-                setAccount(null);
-            }
-        }
-        if (!wallet) {
-            setAccount(null);
-        }
-    };
+    const chainAccount = walletManager.getWalletRepositoryByName(walletName)?.getChainAccountByName(chainName);
     useEffect(() => {
-        if (wallet && walletManager.state === WalletManagerState.Initialized) {
-            wallet.events.on('accountChanged', getAccount);
+        if (chainAccount?.walletState === WalletState.Connected && !chainAccount?.account && chainName && walletName) {
+            chainAccount.getAccount();
         }
-    }, [wallet, walletManager.state]);
-    useEffect(() => {
-        getAccount();
-    }, [wallet, chainName, wallet?.walletState]);
-    return account;
+    }, [chainAccount?.walletState, chainName, walletName]);
+    return {
+        account: chainAccount?.account || undefined,
+        isLoading: chainAccount?.getAccountState().loading || false,
+        error: chainAccount?.getAccountState().error || undefined,
+        getAccount: chainAccount?.getAccount
+    };
 };

package/esm/hooks/useChain.js

@@ -3,47 +3,41 @@ import { useAccount } from "./useAccount";
 import { useCurrentWallet } from './useCurrentWallet';
 import { useInterchainClient } from './useInterchainClient';
 import { useWalletModal } from "../modal";
-import { ChainNameNotExist, WalletState } from "@interchain-kit/core";
-import { useCallback } from "react";
+import { useRpcEndpoint } from "./useRpcEndpoint";
 export const useChain = (chainName) => {
     const walletManager = useWalletManager();
-    const chainToShow = walletManager.chains.find((c) => c.chainName === chainName);
-    const assetList = walletManager.assetLists.find((a) => a.chainName === chainName);
     const currentWallet = useCurrentWallet();
-    const account = useAccount(chainName, currentWallet?.info?.name);
-    const interchainClient = useInterchainClient(chainName, currentWallet?.info?.name);
-    if (!chainToShow) {
-        throw new ChainNameNotExist(chainName);
-    }
+    const chainAccount = currentWallet?.getChainAccountByName?.(chainName);
+    const walletName = currentWallet?.info?.name;
+    const rpcEndpointHook = useRpcEndpoint(chainName, walletName);
+    const accountHook = useAccount(chainName, walletName);
+    const signingClientHook = useInterchainClient(chainName, walletName);
     const { open, close } = useWalletModal();
-    const getRpcEndpoint = useCallback(async () => {
-        return await walletManager.getRpcEndpoint(currentWallet, chainName);
-    }, [walletManager, currentWallet, chainName]);
-    const disconnect = useCallback(() => {
-        walletManager.disconnect(currentWallet?.info?.name);
-    }, [walletManager, currentWallet]);
     const cosmosKitUserChainReturnType = {
-        connect: () => {
-            if (currentWallet?.walletState === WalletState.Connected) {
-                return;
-            }
-            open();
-        },
-        disconnect,
+        connect: () => chainAccount.connect(),
+        disconnect: () => chainAccount.disconnect(),
         openView: open,
         closeView: close,
-        getRpcEndpoint,
+        getRpcEndpoint: () => chainAccount.getRpcEndpoint(),
         status: currentWallet?.walletState,
-        username: account?.username,
+        username: accountHook.account?.username,
         message: currentWallet?.errorMessage
     };
     return {
         logoUrl: walletManager.getChainLogoUrl(chainName),
-        chain: chainToShow,
-        assetList,
-        address: account?.address,
+        chain: chainAccount?.chain,
+        assetList: chainAccount?.assetList,
+        address: accountHook.account?.address,
         wallet: currentWallet,
+        rpcEndpoint: rpcEndpointHook.rpcEndpoint,
         ...cosmosKitUserChainReturnType, //for migration cosmos kit
-        ...interchainClient
+        signingClient: signingClientHook.signingClient,
+        isRpcEndpointLoading: rpcEndpointHook.isLoading,
+        isAccountLoading: accountHook.isLoading,
+        isSigningClientLoading: signingClientHook.isLoading,
+        isLoading: rpcEndpointHook.isLoading || accountHook.isLoading || signingClientHook.isLoading,
+        getRpcEndpointError: rpcEndpointHook.error,
+        getSigningClientError: signingClientHook.error,
+        getAccountError: accountHook.error
     };
 };

package/esm/hooks/useChainWallet.js

@@ -1,50 +1,34 @@
 import { useWalletManager } from "./useWalletManager";
 import { useAccount } from "./useAccount";
-import { ChainNotExist, WalletNotExist, WalletState } from "@interchain-kit/core";
 import { useInterchainClient } from "./useInterchainClient";
-import { useCallback } from "react";
+import { useRpcEndpoint } from "./useRpcEndpoint";
 export const useChainWallet = (chainName, walletName) => {
     const walletManager = useWalletManager();
-    const chainToShow = walletManager.chains.find((c) => c.chainName === chainName);
-    const assetList = walletManager.assetLists.find((a) => a.chainName === chainName);
-    const wallet = walletManager.wallets.find((w) => w.info.name === walletName);
-    const account = useAccount(chainName, walletName);
-    const interchainClient = useInterchainClient(chainName, walletName);
-    const connect = useCallback(() => {
-        if (!wallet) {
-            const error = new WalletNotExist(walletName);
-            console.error(error.message);
-            return;
-        }
-        if (!chainToShow) {
-            const error = new ChainNotExist(chainName);
-            console.error(error.message);
-            return;
-        }
-        if (wallet.walletState !== WalletState.Connected) {
-            walletManager.connect(wallet.info.name);
-        }
-    }, [chainName, walletName]);
-    const disconnect = useCallback(() => {
-        if (wallet.walletState === WalletState.Connected) {
-            walletManager.disconnect(wallet.info.name);
-        }
-    }, [chainName, walletName]);
-    const getRpcEndpoint = useCallback(async () => {
-        return walletManager.getRpcEndpoint(wallet, chainName);
-    }, []);
+    const walletRepository = walletManager.getWalletRepositoryByName(walletName);
+    const chainAccount = walletRepository.getChainAccountByName(chainName);
+    const rpcEndpointHook = useRpcEndpoint(chainName, walletName);
+    const accountHook = useAccount(chainName, walletName);
+    const signingClientHook = useInterchainClient(chainName, walletName);
     return {
-        connect,
-        disconnect,
-        getRpcEndpoint,
-        status: wallet?.walletState,
-        username: account?.username,
-        message: wallet?.errorMessage,
+        connect: () => chainAccount.connect(),
+        disconnect: () => chainAccount.disconnect(),
+        getRpcEndpoint: () => chainAccount.getRpcEndpoint(),
+        status: chainAccount.walletState,
+        username: accountHook.account?.username,
+        message: chainAccount.errorMessage,
         logoUrl: walletManager.getChainLogoUrl(chainName),
-        chain: chainToShow,
-        assetList,
-        address: account?.address,
-        wallet,
-        ...interchainClient
+        rpcEndpoint: rpcEndpointHook.rpcEndpoint,
+        chain: chainAccount.chain,
+        assetList: chainAccount.assetList,
+        address: accountHook.account?.address,
+        wallet: walletRepository,
+        signingClient: signingClientHook.signingClient,
+        isRpcEndpointLoading: rpcEndpointHook.isLoading,
+        isAccountLoading: accountHook.isLoading,
+        isSigningClientLoading: signingClientHook.isLoading,
+        isLoading: rpcEndpointHook.isLoading || accountHook.isLoading || signingClientHook.isLoading,
+        getRpcEndpointError: rpcEndpointHook.error,
+        getSigningClientError: signingClientHook.error,
+        getAccountError: accountHook.error
     };
 };

package/esm/hooks/useCurrentWallet.js

@@ -1,5 +1,6 @@
 import { useWalletManager } from "./useWalletManager";
 import { useWalletModal } from "../modal";
+import { bindAllMethodsToContext } from "../utils/helpers";
 export const useCurrentWallet = () => {
     const walletManager = useWalletManager();
     const { open } = useWalletModal();
@@ -8,5 +9,9 @@ export const useCurrentWallet = () => {
     //     open()
     //   }
     // }, [walletManager.currentWalletName, walletManager.state])
-    return walletManager.getCurrentWallet();
+    const wallet = walletManager.getCurrentWallet();
+    if (wallet) {
+        return bindAllMethodsToContext(wallet);
+    }
+    return {};
 };

package/esm/hooks/useInterchainClient.js

@@ -1,42 +1,18 @@
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import { useWalletManager } from './useWalletManager';
-import { useAccount } from './useAccount';
 import { WalletState } from '@interchain-kit/core';
 export const useInterchainClient = (chainName, walletName) => {
-    const [rpcEndpoint, setRpcEndpoint] = useState();
-    //signing
-    const [signingClient, setSigningClient] = useState(null);
-    const [error, setError] = useState(null);
-    const [isLoading, setIsLoading] = useState(false);
     const walletManager = useWalletManager();
-    const account = useAccount(chainName, walletName);
-    const wallet = walletManager.wallets.find((w) => w.info.name === walletName);
-    const chainToShow = walletManager.chains.find((c) => c.chainName === chainName);
-    const initialize = async () => {
-        if (wallet && chainToShow && wallet?.walletState === WalletState.Connected) {
-            try {
-                setIsLoading(true);
-                const rpcEndpoint = await walletManager.getRpcEndpoint(wallet, chainName);
-                setRpcEndpoint(rpcEndpoint);
-                const signingClient = await walletManager.getSigningClient(walletName, chainName);
-                setSigningClient(signingClient);
-            }
-            catch (error) {
-                setError(error);
-                console.log("create client error", error);
-            }
-            finally {
-                setIsLoading(false);
-            }
-        }
-    };
+    const chainAccount = walletManager.getWalletRepositoryByName(walletName)?.getChainAccountByName(chainName);
     useEffect(() => {
-        initialize();
-    }, [chainName, walletName, account, wallet?.walletState]);
+        if (chainAccount?.walletState === WalletState.Connected && !chainAccount.signingClient && chainName && walletName) {
+            chainAccount.getSigningClient();
+        }
+    }, [chainAccount?.walletState, chainName, walletName]);
     return {
-        rpcEndpoint,
-        signingClient,
-        error,
-        isLoading
+        signingClient: chainAccount?.signingClient,
+        isLoading: chainAccount?.getSigningClientState().loading,
+        error: chainAccount?.getSigningClientState().error,
+        getSigningClient: chainAccount?.getSigningClient
     };
 };

package/esm/hooks/useOfflineSigner.js

@@ -1,15 +1,18 @@
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import { useWalletManager } from "./useWalletManager";
+import { WalletState } from "@interchain-kit/core";
 export const useOfflineSigner = (chainName, walletName) => {
     const walletManager = useWalletManager();
-    const wallet = walletManager.wallets.find((w) => w.info.name === walletName);
-    const [offlineSigner, setOfflineSigner] = useState(null);
+    const chainAccount = walletManager.getWalletRepositoryByName(walletName)?.getChainAccountByName(chainName);
     useEffect(() => {
-        if (wallet && chainName) {
-            setOfflineSigner(walletManager.getOfflineSigner(wallet, chainName));
+        if (chainAccount?.walletState === WalletState.Connected && !chainAccount.offlineSigner && chainName && walletName) {
+            chainAccount.getOfflineSigner();
         }
-    }, [wallet, chainName]);
+    }, [chainAccount?.walletState, chainName, walletName]);
     return {
-        offlineSigner
+        offlineSigner: chainAccount?.offlineSigner,
+        isLoading: chainAccount?.getOfflineSignerState().loading,
+        error: chainAccount?.getOfflineSignerState().error,
+        getOfflineSigner: chainAccount?.getOfflineSigner
     };
 };

package/esm/hooks/useRpcEndpoint.js

@@ -0,0 +1,18 @@
+import { useEffect } from "react";
+import { useWalletManager } from "./useWalletManager";
+import { WalletState } from "@interchain-kit/core";
+export const useRpcEndpoint = (chainName, walletName) => {
+    const walletManager = useWalletManager();
+    const chainAccount = walletManager.getWalletRepositoryByName(walletName)?.getChainAccountByName(chainName);
+    useEffect(() => {
+        if (chainAccount?.walletState === WalletState.Connected && !chainAccount.rpcEndpoint && chainName && walletName) {
+            chainAccount.getRpcEndpoint();
+        }
+    }, [chainAccount?.walletState, walletName, chainName]);
+    return {
+        rpcEndpoint: chainAccount?.rpcEndpoint,
+        isLoading: chainAccount?.getRpcEndpointState().loading,
+        error: chainAccount?.getRpcEndpointState().error,
+        getRpcEndpoint: chainAccount?.getRpcEndpoint
+    };
+};

package/esm/hooks/useWalletManager.js

@@ -1,5 +1,6 @@
 import { useInterchainWalletContext } from "../provider";
+import { bindAllMethodsToContext } from '../utils/helpers';
 export const useWalletManager = () => {
     const { walletManager } = useInterchainWalletContext();
-    return walletManager;
+    return bindAllMethodsToContext(walletManager);
 };

package/esm/modal/views/Connected.js

@@ -12,7 +12,7 @@ export const ConnectedHeader = ({ onBack }) => {
 export const ConnectedContent = () => {
     const currentWallet = useCurrentWallet();
     const walletManager = useWalletManager();
-    const account = useAccount(walletManager.chains[0].chainName, currentWallet?.info?.name);
+    const { account } = useAccount(currentWallet.currentChainName, currentWallet?.info?.name);
     const { close } = useWalletModal();
     if (!currentWallet) {
         return null;

package/esm/modal/views/QRCode.js

@@ -12,7 +12,8 @@ export const QRCodeHeader = ({ onBack }) => {
         }, closeButtonProps: { onClick: close } }));
 };
 export const QRCodeContent = () => {
-    const currentWallet = useCurrentWallet();
+    const currentWalletRepository = useCurrentWallet();
+    const currentWallet = currentWalletRepository.wallet;
     const walletManager = useWalletManager();
     const data = currentWallet.pairingUri;
     return (_jsx(ConnectModalQRCode, { status: data ? "Done" : "Pending", link: data, description: "Open App to connect", errorTitle: "errorTitle", errorDesc: currentWallet.errorMessage || "", onRefresh: () => walletManager.connect(currentWallet?.info?.name || "") }));

package/esm/provider.js

@@ -1,17 +1,23 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from "react";
 import { createContext, useContext } from "react";
-import { WalletManager, } from "@interchain-kit/core";
+import { WalletManager, WalletManagerState, } from "@interchain-kit/core";
 import { WalletModalProvider } from "./modal";
 const InterchainWalletContext = createContext(null);
 export const ChainProvider = ({ chains, assetLists, wallets, signerOptions, endpointOptions, children, }) => {
     const [_, forceRender] = useState({});
     const walletManager = useMemo(() => {
-        return new WalletManager(chains, assetLists, wallets, signerOptions, endpointOptions, () => forceRender({}));
+        const wm = new WalletManager(chains, assetLists, wallets, signerOptions, endpointOptions);
+        return wm.getObservableObj(() => {
+            forceRender({});
+        });
     }, []);
     useEffect(() => {
         walletManager.init();
     }, []);
+    if (walletManager.state === WalletManagerState.Initializing) {
+        return _jsx("div", { children: "Interchain Kit Initializing..." });
+    }
     return (_jsx(InterchainWalletContext.Provider, { value: { walletManager }, children: _jsx(WalletModalProvider, { children: children }) }));
 };
 export const useInterchainWalletContext = () => {

package/esm/utils/helpers.js

@@ -0,0 +1,11 @@
+export function bindAllMethodsToContext(context) {
+    return new Proxy(context, {
+        get(target, prop, receiver) {
+            const value = Reflect.get(target, prop, receiver);
+            if (typeof value === 'function') {
+                return value.bind(context);
+            }
+            return value;
+        }
+    });
+}

package/hooks/useAccount.d.ts

@@ -1,2 +1,6 @@
-import { WalletAccount } from "@interchain-kit/core";
-export declare const useAccount: (chainName: string, walletName: string) => WalletAccount | null;
+export declare const useAccount: (chainName: string, walletName: string) => {
+    account: any;
+    isLoading: any;
+    error: any;
+    getAccount: any;
+};

package/hooks/useAccount.js

@@ -1,43 +1,22 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useAccount = void 0;
-const react_1 = require("react");
 const core_1 = require("@interchain-kit/core");
 const useWalletManager_1 = require("./useWalletManager");
+const react_1 = require("react");
 const useAccount = (chainName, walletName) => {
     const walletManager = (0, useWalletManager_1.useWalletManager)();
-    const [isFetching, setIsFetching] = (0, react_1.useState)(false);
-    const wallet = (0, react_1.useMemo)(() => {
-        return walletManager.wallets.find(w => w.info.name === walletName);
-    }, [walletManager, walletName]);
-    const [account, setAccount] = (0, react_1.useState)(null);
-    const chain = (0, react_1.useMemo)(() => {
-        return walletManager.chains.find(c => c.chainName === chainName);
-    }, [walletManager, chainName]);
-    const getAccount = async () => {
-        if (wallet && chain) {
-            if (wallet.walletState === core_1.WalletState.Connected && !isFetching) {
-                setIsFetching(true);
-                const account = await walletManager.getAccount(walletName, chainName);
-                setAccount(account);
-                setIsFetching(false);
-            }
-            if (wallet.walletState === core_1.WalletState.Disconnected) {
-                setAccount(null);
-            }
-        }
-        if (!wallet) {
-            setAccount(null);
-        }
-    };
+    const chainAccount = walletManager.getWalletRepositoryByName(walletName)?.getChainAccountByName(chainName);
     (0, react_1.useEffect)(() => {
-        if (wallet && walletManager.state === core_1.WalletManagerState.Initialized) {
-            wallet.events.on('accountChanged', getAccount);
+        if (chainAccount?.walletState === core_1.WalletState.Connected && !chainAccount?.account && chainName && walletName) {
+            chainAccount.getAccount();
         }
-    }, [wallet, walletManager.state]);
-    (0, react_1.useEffect)(() => {
-        getAccount();
-    }, [wallet, chainName, wallet?.walletState]);
-    return account;
+    }, [chainAccount?.walletState, chainName, walletName]);
+    return {
+        account: chainAccount?.account || undefined,
+        isLoading: chainAccount?.getAccountState().loading || false,
+        error: chainAccount?.getAccountState().error || undefined,
+        getAccount: chainAccount?.getAccount
+    };
 };
 exports.useAccount = useAccount;

package/hooks/useChain.js

@@ -6,48 +6,42 @@ const useAccount_1 = require("./useAccount");
 const useCurrentWallet_1 = require("./useCurrentWallet");
 const useInterchainClient_1 = require("./useInterchainClient");
 const modal_1 = require("../modal");
-const core_1 = require("@interchain-kit/core");
-const react_1 = require("react");
+const useRpcEndpoint_1 = require("./useRpcEndpoint");
 const useChain = (chainName) => {
     const walletManager = (0, useWalletManager_1.useWalletManager)();
-    const chainToShow = walletManager.chains.find((c) => c.chainName === chainName);
-    const assetList = walletManager.assetLists.find((a) => a.chainName === chainName);
     const currentWallet = (0, useCurrentWallet_1.useCurrentWallet)();
-    const account = (0, useAccount_1.useAccount)(chainName, currentWallet?.info?.name);
-    const interchainClient = (0, useInterchainClient_1.useInterchainClient)(chainName, currentWallet?.info?.name);
-    if (!chainToShow) {
-        throw new core_1.ChainNameNotExist(chainName);
-    }
+    const chainAccount = currentWallet?.getChainAccountByName?.(chainName);
+    const walletName = currentWallet?.info?.name;
+    const rpcEndpointHook = (0, useRpcEndpoint_1.useRpcEndpoint)(chainName, walletName);
+    const accountHook = (0, useAccount_1.useAccount)(chainName, walletName);
+    const signingClientHook = (0, useInterchainClient_1.useInterchainClient)(chainName, walletName);
     const { open, close } = (0, modal_1.useWalletModal)();
-    const getRpcEndpoint = (0, react_1.useCallback)(async () => {
-        return await walletManager.getRpcEndpoint(currentWallet, chainName);
-    }, [walletManager, currentWallet, chainName]);
-    const disconnect = (0, react_1.useCallback)(() => {
-        walletManager.disconnect(currentWallet?.info?.name);
-    }, [walletManager, currentWallet]);
     const cosmosKitUserChainReturnType = {
-        connect: () => {
-            if (currentWallet?.walletState === core_1.WalletState.Connected) {
-                return;
-            }
-            open();
-        },
-        disconnect,
+        connect: () => chainAccount.connect(),
+        disconnect: () => chainAccount.disconnect(),
         openView: open,
         closeView: close,
-        getRpcEndpoint,
+        getRpcEndpoint: () => chainAccount.getRpcEndpoint(),
         status: currentWallet?.walletState,
-        username: account?.username,
+        username: accountHook.account?.username,
         message: currentWallet?.errorMessage
     };
     return {
         logoUrl: walletManager.getChainLogoUrl(chainName),
-        chain: chainToShow,
-        assetList,
-        address: account?.address,
+        chain: chainAccount?.chain,
+        assetList: chainAccount?.assetList,
+        address: accountHook.account?.address,
         wallet: currentWallet,
+        rpcEndpoint: rpcEndpointHook.rpcEndpoint,
         ...cosmosKitUserChainReturnType, //for migration cosmos kit
-        ...interchainClient
+        signingClient: signingClientHook.signingClient,
+        isRpcEndpointLoading: rpcEndpointHook.isLoading,
+        isAccountLoading: accountHook.isLoading,
+        isSigningClientLoading: signingClientHook.isLoading,
+        isLoading: rpcEndpointHook.isLoading || accountHook.isLoading || signingClientHook.isLoading,
+        getRpcEndpointError: rpcEndpointHook.error,
+        getSigningClientError: signingClientHook.error,
+        getAccountError: accountHook.error
     };
 };
 exports.useChain = useChain;

package/hooks/useChainWallet.js

@@ -3,52 +3,36 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useChainWallet = void 0;
 const useWalletManager_1 = require("./useWalletManager");
 const useAccount_1 = require("./useAccount");
-const core_1 = require("@interchain-kit/core");
 const useInterchainClient_1 = require("./useInterchainClient");
-const react_1 = require("react");
+const useRpcEndpoint_1 = require("./useRpcEndpoint");
 const useChainWallet = (chainName, walletName) => {
     const walletManager = (0, useWalletManager_1.useWalletManager)();
-    const chainToShow = walletManager.chains.find((c) => c.chainName === chainName);
-    const assetList = walletManager.assetLists.find((a) => a.chainName === chainName);
-    const wallet = walletManager.wallets.find((w) => w.info.name === walletName);
-    const account = (0, useAccount_1.useAccount)(chainName, walletName);
-    const interchainClient = (0, useInterchainClient_1.useInterchainClient)(chainName, walletName);
-    const connect = (0, react_1.useCallback)(() => {
-        if (!wallet) {
-            const error = new core_1.WalletNotExist(walletName);
-            console.error(error.message);
-            return;
-        }
-        if (!chainToShow) {
-            const error = new core_1.ChainNotExist(chainName);
-            console.error(error.message);
-            return;
-        }
-        if (wallet.walletState !== core_1.WalletState.Connected) {
-            walletManager.connect(wallet.info.name);
-        }
-    }, [chainName, walletName]);
-    const disconnect = (0, react_1.useCallback)(() => {
-        if (wallet.walletState === core_1.WalletState.Connected) {
-            walletManager.disconnect(wallet.info.name);
-        }
-    }, [chainName, walletName]);
-    const getRpcEndpoint = (0, react_1.useCallback)(async () => {
-        return walletManager.getRpcEndpoint(wallet, chainName);
-    }, []);
+    const walletRepository = walletManager.getWalletRepositoryByName(walletName);
+    const chainAccount = walletRepository.getChainAccountByName(chainName);
+    const rpcEndpointHook = (0, useRpcEndpoint_1.useRpcEndpoint)(chainName, walletName);
+    const accountHook = (0, useAccount_1.useAccount)(chainName, walletName);
+    const signingClientHook = (0, useInterchainClient_1.useInterchainClient)(chainName, walletName);
     return {
-        connect,
-        disconnect,
-        getRpcEndpoint,
-        status: wallet?.walletState,
-        username: account?.username,
-        message: wallet?.errorMessage,
+        connect: () => chainAccount.connect(),
+        disconnect: () => chainAccount.disconnect(),
+        getRpcEndpoint: () => chainAccount.getRpcEndpoint(),
+        status: chainAccount.walletState,
+        username: accountHook.account?.username,
+        message: chainAccount.errorMessage,
         logoUrl: walletManager.getChainLogoUrl(chainName),
-        chain: chainToShow,
-        assetList,
-        address: account?.address,
-        wallet,
-        ...interchainClient
+        rpcEndpoint: rpcEndpointHook.rpcEndpoint,
+        chain: chainAccount.chain,
+        assetList: chainAccount.assetList,
+        address: accountHook.account?.address,
+        wallet: walletRepository,
+        signingClient: signingClientHook.signingClient,
+        isRpcEndpointLoading: rpcEndpointHook.isLoading,
+        isAccountLoading: accountHook.isLoading,
+        isSigningClientLoading: signingClientHook.isLoading,
+        isLoading: rpcEndpointHook.isLoading || accountHook.isLoading || signingClientHook.isLoading,
+        getRpcEndpointError: rpcEndpointHook.error,
+        getSigningClientError: signingClientHook.error,
+        getAccountError: accountHook.error
     };
 };
 exports.useChainWallet = useChainWallet;

package/hooks/useConfig.d.ts

@@ -1,5 +1,4 @@
 import { AssetList, Chain } from "@chain-registry/v2-types";
-import { EndpointOptions, SignerOptions } from "@interchain-kit/core";
 export declare const useConfig: () => {
     updateChains: (chains: Chain[]) => Chain[];
     updateAssetLists: (assetLists: AssetList[]) => AssetList[];

package/hooks/useCurrentWallet.d.ts

@@ -1 +1 @@
-export declare const useCurrentWallet: () => import("@interchain-kit/core").BaseWallet;
+export declare const useCurrentWallet: () => WalletRepository;

package/hooks/useCurrentWallet.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCurrentWallet = void 0;
 const useWalletManager_1 = require("./useWalletManager");
 const modal_1 = require("../modal");
+const helpers_1 = require("../utils/helpers");
 const useCurrentWallet = () => {
     const walletManager = (0, useWalletManager_1.useWalletManager)();
     const { open } = (0, modal_1.useWalletModal)();
@@ -11,6 +12,10 @@ const useCurrentWallet = () => {
     //     open()
     //   }
     // }, [walletManager.currentWalletName, walletManager.state])
-    return walletManager.getCurrentWallet();
+    const wallet = walletManager.getCurrentWallet();
+    if (wallet) {
+        return (0, helpers_1.bindAllMethodsToContext)(wallet);
+    }
+    return {};
 };
 exports.useCurrentWallet = useCurrentWallet;

package/hooks/useInterchainClient.d.ts

@@ -1,2 +1,6 @@
-import { UseInterchainClientReturnType } from '../types/chain';
-export declare const useInterchainClient: (chainName: string, walletName: string) => UseInterchainClientReturnType;
+export declare const useInterchainClient: (chainName: string, walletName: string) => {
+    signingClient: any;
+    isLoading: any;
+    error: any;
+    getSigningClient: any;
+};

package/hooks/useInterchainClient.js

@@ -3,44 +3,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useInterchainClient = void 0;
 const react_1 = require("react");
 const useWalletManager_1 = require("./useWalletManager");
-const useAccount_1 = require("./useAccount");
 const core_1 = require("@interchain-kit/core");
 const useInterchainClient = (chainName, walletName) => {
-    const [rpcEndpoint, setRpcEndpoint] = (0, react_1.useState)();
-    //signing
-    const [signingClient, setSigningClient] = (0, react_1.useState)(null);
-    const [error, setError] = (0, react_1.useState)(null);
-    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
     const walletManager = (0, useWalletManager_1.useWalletManager)();
-    const account = (0, useAccount_1.useAccount)(chainName, walletName);
-    const wallet = walletManager.wallets.find((w) => w.info.name === walletName);
-    const chainToShow = walletManager.chains.find((c) => c.chainName === chainName);
-    const initialize = async () => {
-        if (wallet && chainToShow && wallet?.walletState === core_1.WalletState.Connected) {
-            try {
-                setIsLoading(true);
-                const rpcEndpoint = await walletManager.getRpcEndpoint(wallet, chainName);
-                setRpcEndpoint(rpcEndpoint);
-                const signingClient = await walletManager.getSigningClient(walletName, chainName);
-                setSigningClient(signingClient);
-            }
-            catch (error) {
-                setError(error);
-                console.log("create client error", error);
-            }
-            finally {
-                setIsLoading(false);
-            }
-        }
-    };
+    const chainAccount = walletManager.getWalletRepositoryByName(walletName)?.getChainAccountByName(chainName);
     (0, react_1.useEffect)(() => {
-        initialize();
-    }, [chainName, walletName, account, wallet?.walletState]);
+        if (chainAccount?.walletState === core_1.WalletState.Connected && !chainAccount.signingClient && chainName && walletName) {
+            chainAccount.getSigningClient();
+        }
+    }, [chainAccount?.walletState, chainName, walletName]);
     return {
-        rpcEndpoint,
-        signingClient,
-        error,
-        isLoading
+        signingClient: chainAccount?.signingClient,
+        isLoading: chainAccount?.getSigningClientState().loading,
+        error: chainAccount?.getSigningClientState().error,
+        getSigningClient: chainAccount?.getSigningClient
     };
 };
 exports.useInterchainClient = useInterchainClient;

package/hooks/useOfflineSigner.d.ts

@@ -1,4 +1,6 @@
-import { ICosmosGenericOfflineSigner } from '@interchainjs/cosmos/types/wallet';
 export declare const useOfflineSigner: (chainName: string, walletName: string) => {
-    offlineSigner: ICosmosGenericOfflineSigner;
+    offlineSigner: any;
+    isLoading: any;
+    error: any;
+    getOfflineSigner: any;
 };

package/hooks/useOfflineSigner.js

@@ -3,17 +3,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useOfflineSigner = void 0;
 const react_1 = require("react");
 const useWalletManager_1 = require("./useWalletManager");
+const core_1 = require("@interchain-kit/core");
 const useOfflineSigner = (chainName, walletName) => {
     const walletManager = (0, useWalletManager_1.useWalletManager)();
-    const wallet = walletManager.wallets.find((w) => w.info.name === walletName);
-    const [offlineSigner, setOfflineSigner] = (0, react_1.useState)(null);
+    const chainAccount = walletManager.getWalletRepositoryByName(walletName)?.getChainAccountByName(chainName);
     (0, react_1.useEffect)(() => {
-        if (wallet && chainName) {
-            setOfflineSigner(walletManager.getOfflineSigner(wallet, chainName));
+        if (chainAccount?.walletState === core_1.WalletState.Connected && !chainAccount.offlineSigner && chainName && walletName) {
+            chainAccount.getOfflineSigner();
         }
-    }, [wallet, chainName]);
+    }, [chainAccount?.walletState, chainName, walletName]);
     return {
-        offlineSigner
+        offlineSigner: chainAccount?.offlineSigner,
+        isLoading: chainAccount?.getOfflineSignerState().loading,
+        error: chainAccount?.getOfflineSignerState().error,
+        getOfflineSigner: chainAccount?.getOfflineSigner
     };
 };
 exports.useOfflineSigner = useOfflineSigner;

package/hooks/useRpcEndpoint.d.ts

@@ -0,0 +1,6 @@
+export declare const useRpcEndpoint: (chainName: string, walletName: string) => {
+    rpcEndpoint: any;
+    isLoading: any;
+    error: any;
+    getRpcEndpoint: any;
+};

package/hooks/useRpcEndpoint.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRpcEndpoint = void 0;
+const react_1 = require("react");
+const useWalletManager_1 = require("./useWalletManager");
+const core_1 = require("@interchain-kit/core");
+const useRpcEndpoint = (chainName, walletName) => {
+    const walletManager = (0, useWalletManager_1.useWalletManager)();
+    const chainAccount = walletManager.getWalletRepositoryByName(walletName)?.getChainAccountByName(chainName);
+    (0, react_1.useEffect)(() => {
+        if (chainAccount?.walletState === core_1.WalletState.Connected && !chainAccount.rpcEndpoint && chainName && walletName) {
+            chainAccount.getRpcEndpoint();
+        }
+    }, [chainAccount?.walletState, walletName, chainName]);
+    return {
+        rpcEndpoint: chainAccount?.rpcEndpoint,
+        isLoading: chainAccount?.getRpcEndpointState().loading,
+        error: chainAccount?.getRpcEndpointState().error,
+        getRpcEndpoint: chainAccount?.getRpcEndpoint
+    };
+};
+exports.useRpcEndpoint = useRpcEndpoint;

package/hooks/useWalletManager.d.ts

@@ -1,2 +1 @@
-import { WalletManager } from '@interchain-kit/core';
 export declare const useWalletManager: () => WalletManager;

package/hooks/useWalletManager.js

@@ -2,8 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useWalletManager = void 0;
 const provider_1 = require("../provider");
+const helpers_1 = require("../utils/helpers");
 const useWalletManager = () => {
     const { walletManager } = (0, provider_1.useInterchainWalletContext)();
-    return walletManager;
+    return (0, helpers_1.bindAllMethodsToContext)(walletManager);
 };
 exports.useWalletManager = useWalletManager;

package/modal/views/Connected.js

@@ -16,7 +16,7 @@ exports.ConnectedHeader = ConnectedHeader;
 const ConnectedContent = () => {
     const currentWallet = (0, hooks_1.useCurrentWallet)();
     const walletManager = (0, hooks_1.useWalletManager)();
-    const account = (0, hooks_1.useAccount)(walletManager.chains[0].chainName, currentWallet?.info?.name);
+    const { account } = (0, hooks_1.useAccount)(currentWallet.currentChainName, currentWallet?.info?.name);
     const { close } = (0, provider_1.useWalletModal)();
     if (!currentWallet) {
         return null;

package/modal/views/QRCode.js

@@ -16,7 +16,8 @@ const QRCodeHeader = ({ onBack }) => {
 };
 exports.QRCodeHeader = QRCodeHeader;
 const QRCodeContent = () => {
-    const currentWallet = (0, hooks_1.useCurrentWallet)();
+    const currentWalletRepository = (0, hooks_1.useCurrentWallet)();
+    const currentWallet = currentWalletRepository.wallet;
     const walletManager = (0, hooks_1.useWalletManager)();
     const data = currentWallet.pairingUri;
     return ((0, jsx_runtime_1.jsx)(react_1.ConnectModalQRCode, { status: data ? "Done" : "Pending", link: data, description: "Open App to connect", errorTitle: "errorTitle", errorDesc: currentWallet.errorMessage || "", onRefresh: () => walletManager.connect(currentWallet?.info?.name || "") }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@interchain-kit/react",
-  "version": "0.0.1-beta.43",
+  "version": "0.0.1-beta.45",
   "author": "cosmology-tech <developers@cosmology.zone>",
   "description": "interchain-kit wallet connector react package",
   "main": "index.js",
@@ -33,17 +33,20 @@
   "keywords": [],
   "dependencies": {
     "@chain-registry/v2-types": "^0.53.40",
-    "@interchain-kit/core": "0.0.1-beta.43",
+    "@interchain-kit/core": "0.0.1-beta.45",
     "@interchain-ui/react": "1.26.1",
     "@interchainjs/cosmos": "1.6.3",
     "@interchainjs/cosmos-types": "1.6.3",
+    "@nx-js/observer-util": "^4.2.2",
     "@react-icons/all-files": "^4.1.0",
-    "@types/react": "^19.0.2",
-    "@types/react-dom": "^19.0.2",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vue/reactivity": "^3.5.13",
     "@walletconnect/types": "^2.17.3",
     "interchainjs": "1.6.3",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "observable-slim": "^0.1.6",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
-  "gitHead": "afa55d5476570d30de21cb3673f5963a4493e9e2"
+  "gitHead": "1d52b0d7c0616c204434fb6a10e8d5a2fca62d92"
 }

package/provider.js

@@ -10,11 +10,17 @@ const InterchainWalletContext = (0, react_2.createContext)(null);
 const ChainProvider = ({ chains, assetLists, wallets, signerOptions, endpointOptions, children, }) => {
     const [_, forceRender] = (0, react_1.useState)({});
     const walletManager = (0, react_1.useMemo)(() => {
-        return new core_1.WalletManager(chains, assetLists, wallets, signerOptions, endpointOptions, () => forceRender({}));
+        const wm = new core_1.WalletManager(chains, assetLists, wallets, signerOptions, endpointOptions);
+        return wm.getObservableObj(() => {
+            forceRender({});
+        });
     }, []);
     (0, react_1.useEffect)(() => {
         walletManager.init();
     }, []);
+    if (walletManager.state === core_1.WalletManagerState.Initializing) {
+        return (0, jsx_runtime_1.jsx)("div", { children: "Interchain Kit Initializing..." });
+    }
     return ((0, jsx_runtime_1.jsx)(InterchainWalletContext.Provider, { value: { walletManager }, children: (0, jsx_runtime_1.jsx)(modal_1.WalletModalProvider, { children: children }) }));
 };
 exports.ChainProvider = ChainProvider;

package/types/chain.d.ts

@@ -20,12 +20,16 @@ export type UseChainReturnType = {
     wallet: BaseWallet;
     rpcEndpoint: string | HttpEndpoint;
     signingClient: SigningClient;
+    isRpcEndpointLoading: boolean;
+    isAccountLoading: boolean;
+    isSigningClientLoading: boolean;
     isLoading: boolean;
-    error: unknown;
+    getRpcEndpointError: Error | null;
+    getSigningClientError: Error | null;
+    getAccountError: Error | null;
 } & CosmosKitUseChainReturnType;
 export type UseChainWalletReturnType = Omit<UseChainReturnType, 'openView' | 'closeView'>;
 export type UseInterchainClientReturnType = {
-    rpcEndpoint: string | HttpEndpoint | undefined;
     signingClient: SigningClient | null;
     error: string | unknown | null;
     isLoading: boolean;

package/utils/helpers.d.ts

@@ -0,0 +1 @@
+export declare function bindAllMethodsToContext<T extends object>(context: T): T;

package/utils/helpers.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.bindAllMethodsToContext = void 0;
+function bindAllMethodsToContext(context) {
+    return new Proxy(context, {
+        get(target, prop, receiver) {
+            const value = Reflect.get(target, prop, receiver);
+            if (typeof value === 'function') {
+                return value.bind(context);
+            }
+            return value;
+        }
+    });
+}
+exports.bindAllMethodsToContext = bindAllMethodsToContext;

package/utils/wallet.d.ts

@@ -1,7 +1,6 @@
-import { BaseWallet } from "@interchain-kit/core";
 export declare const getWalletInfo: (wallet: BaseWallet) => {
-    name: string;
-    prettyName: string;
+    name: any;
+    prettyName: any;
     logo: string;
     mobileDisabled: boolean;
 };