@interchain-kit/react 0.0.1-beta.4 → 0.0.1-beta.40

package/esm/modal/views/Connecting.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ConnectModalHead, ConnectModalStatus } from "@interchain-ui/react";
+import { useWalletModal } from "../provider";
+export const ConnectingHeader = ({ wallet, onBack, }) => {
+    const { close } = useWalletModal();
+    return (_jsx(ConnectModalHead, { title: wallet.info.prettyName, hasBackButton: true, onClose: close, onBack: onBack, closeButtonProps: {
+            onClick: close,
+        } }));
+};
+export const ConnectingContent = ({ wallet }) => {
+    const { info: { prettyName, mode }, } = wallet;
+    let title = "Requesting Connection";
+    let desc = mode === "wallet-connect"
+        ? `Approve ${prettyName} connection request on your mobile.`
+        : `Open the ${prettyName} browser extension to connect your wallet.`;
+    if (!wallet)
+        return null;
+    return (_jsx(ConnectModalStatus, { wallet: {
+            name: wallet.info.name,
+            prettyName: wallet.info.prettyName,
+            logo: wallet.info.logo,
+            mobileDisabled: true,
+        }, status: "Connecting", contentHeader: title, contentDesc: desc }));
+};

package/esm/modal/views/NotExist.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ConnectModalHead, ConnectModalStatus } from "@interchain-ui/react";
+import { useWalletManager } from "../../hooks"; // replace with the actual path
+import { useWalletModal } from "../provider";
+import { useMemo } from "react";
+import { FaAndroid } from "@react-icons/all-files/fa/FaAndroid";
+import { GoDesktopDownload } from "@react-icons/all-files/go/GoDesktopDownload";
+import { GrFirefox } from "@react-icons/all-files/gr/GrFirefox";
+import { RiAppStoreFill } from "@react-icons/all-files/ri/RiAppStoreFill";
+import { RiChromeFill } from "@react-icons/all-files/ri/RiChromeFill";
+export const NotExistHeader = ({ wallet, onBack, }) => {
+    const { close } = useWalletModal();
+    return (_jsx(ConnectModalHead, { title: wallet?.info?.prettyName || "", hasBackButton: true, onClose: close, onBack: onBack, closeButtonProps: { onClick: close } }));
+};
+export const NotExistContent = ({ wallet }) => {
+    const walletManager = useWalletManager();
+    const downloadLink = useMemo(() => {
+        return walletManager.getDownloadLink(wallet.info.name);
+    }, [wallet?.info?.name]);
+    const onInstall = () => {
+        if (downloadLink) {
+            window.open(downloadLink.link, "_blank");
+        }
+    };
+    const IconComp = getIcon(walletManager.getEnv());
+    return (_jsx(ConnectModalStatus, { status: "NotExist", wallet: {
+            name: wallet?.info?.prettyName,
+            logo: typeof wallet?.info?.logo === "string" ? wallet?.info?.logo : "",
+            mobileDisabled: true,
+        }, contentHeader: `${wallet?.info?.prettyName} Not Installed`, contentDesc: true
+            ? `If ${wallet?.info?.prettyName.toLowerCase()} is installed on your device, please refresh this page or follow the browser instruction.`
+            : `Download link not provided. Try searching it or consulting the developer team.`, onInstall: onInstall, installIcon: _jsx(IconComp, {}), disableInstall: downloadLink === null }));
+};
+function getIcon(env) {
+    if (env?.browser === "chrome")
+        return RiChromeFill;
+    if (env?.browser === "firefox")
+        return GrFirefox;
+    if (env?.os === "android")
+        return FaAndroid;
+    if (env?.os === "ios")
+        return RiAppStoreFill;
+    return GoDesktopDownload;
+}

package/esm/modal/views/QRCode.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ConnectModalHead, ConnectModalQRCode } from "@interchain-ui/react";
+import { useCurrentWallet, useWalletManager } from "../../hooks";
+import { useWalletModal } from "../provider";
+export const QRCodeHeader = ({ onBack }) => {
+    const currentWallet = useCurrentWallet();
+    const walletManager = useWalletManager();
+    const { close } = useWalletModal();
+    return (_jsx(ConnectModalHead, { title: currentWallet?.info?.prettyName || "", hasBackButton: true, onClose: () => void 0, onBack: async () => {
+            await walletManager.disconnect(currentWallet?.info?.name || "");
+            onBack();
+        }, closeButtonProps: { onClick: close } }));
+};
+export const QRCodeContent = () => {
+    const currentWallet = useCurrentWallet();
+    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/modal/views/Reject.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ConnectModalHead, ConnectModalStatus } from "@interchain-ui/react";
+import { useWalletModal } from "../provider";
+import { useWalletManager } from "../../hooks";
+import { getWalletInfo } from "../../utils";
+export const RejectHeader = ({ wallet, onBack, }) => {
+    const { close } = useWalletModal();
+    return (_jsx(ConnectModalHead, { title: wallet.info.prettyName, hasBackButton: true, onClose: close, onBack: onBack, closeButtonProps: { onClick: close } }));
+};
+export const RejectContent = ({ wallet }) => {
+    const walletManager = useWalletManager();
+    const { close } = useWalletModal();
+    return (_jsx(ConnectModalStatus, { status: "Rejected", wallet: getWalletInfo(wallet), contentHeader: "Request Rejected", contentDesc: wallet.errorMessage || "Connection permission is denied.", onConnect: () => walletManager.connect(wallet.info.name).then(close) }));
+};

package/esm/modal/views/WalletList.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ConnectModalHead, ConnectModalWalletList } from "@interchain-ui/react";
+import { useWalletModal } from "../provider";
+import { useWalletManager } from "../../hooks";
+export const WalletListHeader = () => {
+    const { close } = useWalletModal();
+    return (_jsx(ConnectModalHead, { title: "Select your wallet", hasBackButton: false, onClose: close, closeButtonProps: { onClick: close } }));
+};
+export const WalletListContent = ({ onSelectWallet, }) => {
+    const walletManager = useWalletManager();
+    const wallets = walletManager.wallets.map((w) => {
+        return {
+            name: w.info.name,
+            prettyName: w.info.prettyName,
+            logo: w.info.logo,
+            mobileDisabled: true,
+            shape: "list",
+            originalWallet: {
+                ...w,
+                pairing: null,
+            },
+        };
+    });
+    const wcWallet = walletManager.wallets.find((w) => w.info.mode === "wallet-connect");
+    if (wcWallet) {
+        const activePairings = wcWallet.getActivePairing();
+        activePairings.forEach((pairing) => {
+            wallets.push({
+                name: pairing?.peerMetadata?.name,
+                prettyName: pairing?.peerMetadata?.name,
+                logo: pairing?.peerMetadata?.icons?.[0],
+                mobileDisabled: true,
+                shape: "list",
+                originalWallet: { ...wcWallet, pairing },
+                subLogo: wcWallet.info.logo,
+            });
+        });
+    }
+    return (_jsx(ConnectModalWalletList, { wallets: wallets, onWalletItemClick: onSelectWallet }));
+};

package/esm/modal/views/index.js

@@ -0,0 +1,6 @@
+export * from './Connecting';
+export * from './WalletList';
+export * from './Connected';
+export * from './Reject';
+export * from './QRCode';
+export * from './NotExist';

package/esm/provider.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from "react";
 import { createContext, useContext } from "react";
-import { WalletManager } from '@interChain-kit/core';
-import { WalletModalProvider } from './modal';
-const InterChainWalletContext = createContext(null);
-export const ChainProvider = ({ chains, assetLists, wallets, signerOptions, endpointOptions, children }) => {
+import { WalletManager, } 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({}));
@@ -12,12 +12,12 @@ export const ChainProvider = ({ chains, assetLists, wallets, signerOptions, endp
     useEffect(() => {
         walletManager.init();
     }, []);
-    return (_jsx(InterChainWalletContext.Provider, { value: { walletManager }, children: _jsx(WalletModalProvider, { children: children }) }));
+    return (_jsx(InterchainWalletContext.Provider, { value: { walletManager }, children: _jsx(WalletModalProvider, { children: children }) }));
 };
-export const useInterChainWalletContext = () => {
-    const context = useContext(InterChainWalletContext);
+export const useInterchainWalletContext = () => {
+    const context = useContext(InterchainWalletContext);
     if (!context) {
-        throw new Error('useInterChainWalletContext must be used within a InterChainProvider');
+        throw new Error("useInterChainWalletContext must be used within a InterChainProvider");
     }
     return context;
 };

package/esm/types/index.js

@@ -1 +1,2 @@
 export * from './wallet';
+export * from './sign-client';

package/esm/types/sign-client.js

@@ -0,0 +1 @@
+export {};

package/esm/utils/index.js

@@ -1 +1 @@
-"use strict";
+export * from './wallet';

package/esm/utils/wallet.js

@@ -0,0 +1,8 @@
+export const getWalletInfo = (wallet) => {
+    return {
+        name: wallet.info.name,
+        prettyName: wallet.info.prettyName,
+        logo: wallet.info.logo,
+        mobileDisabled: true,
+    };
+};

package/hooks/index.d.ts

@@ -1,6 +1,7 @@
 export * from './useWalletManager';
-export * from './useActiveWallet';
+export * from './useCurrentWallet';
 export * from './useAccount';
 export * from './useChain';
 export * from './useConnect';
 export * from './useChainWallet';
+export * from './useConfig';

package/hooks/index.js

@@ -15,8 +15,9 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./useWalletManager"), exports);
-__exportStar(require("./useActiveWallet"), exports);
+__exportStar(require("./useCurrentWallet"), exports);
 __exportStar(require("./useAccount"), exports);
 __exportStar(require("./useChain"), exports);
 __exportStar(require("./useConnect"), exports);
 __exportStar(require("./useChainWallet"), exports);
+__exportStar(require("./useConfig"), exports);

package/hooks/useAccount.d.ts

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

package/hooks/useAccount.js

@@ -2,26 +2,40 @@
 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 useAccount = (chainName, walletName) => {
     const walletManager = (0, useWalletManager_1.useWalletManager)();
-    const wallet = walletManager.wallets.find(w => w.option.name === walletName);
+    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 = walletManager.chains.find(c => c.chainName === chainName);
+    const chain = (0, react_1.useMemo)(() => {
+        return walletManager.chains.find(c => c.chainName === chainName);
+    }, [walletManager, chainName]);
     const getAccount = async () => {
-        const account = await wallet.getAccount(chain.chainId);
-        setAccount(account);
-    };
-    (0, react_1.useEffect)(() => {
-        if (wallet) {
-            wallet.events.on('keystoreChange', getAccount);
+        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);
+            }
         }
-    }, [wallet]);
-    (0, react_1.useEffect)(() => {
         if (!wallet) {
             setAccount(null);
-            return;
         }
+    };
+    (0, react_1.useEffect)(() => {
+        if (wallet && walletManager.state === core_1.WalletManagerState.Initialized) {
+            wallet.events.on('accountChanged', getAccount);
+        }
+    }, [wallet, walletManager.state]);
+    (0, react_1.useEffect)(() => {
         getAccount();
     }, [wallet, chainName, wallet?.walletState]);
     return account;

package/hooks/useChain.js

@@ -3,20 +3,50 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useChain = void 0;
 const useWalletManager_1 = require("./useWalletManager");
 const useAccount_1 = require("./useAccount");
-const useActiveWallet_1 = require("./useActiveWallet");
+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 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 activeWallet = (0, useActiveWallet_1.useActiveWallet)();
-    const account = (0, useAccount_1.useAccount)(chainName, activeWallet.option.name);
-    const interchainClient = (0, useInterchainClient_1.useInterchainClient)(chainName, activeWallet.option.name);
+    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 { 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,
+        openView: open,
+        closeView: close,
+        getRpcEndpoint,
+        status: currentWallet?.walletState,
+        username: account?.username,
+        message: currentWallet?.errorMessage
+    };
     return {
+        logoUrl: walletManager.getChainLogoUrl(chainName),
         chain: chainToShow,
         assetList,
         address: account?.address,
-        wallet: activeWallet,
+        wallet: currentWallet,
+        ...cosmosKitUserChainReturnType, //for migration cosmos kit
         ...interchainClient
     };
 };

package/hooks/useChainWallet.d.ts

@@ -1,2 +1,2 @@
-import { UseChainReturnType } from "../types/chain";
-export declare const useChainWallet: (chainName: string, walletName: string) => UseChainReturnType;
+import { UseChainWalletReturnType } from "../types/chain";
+export declare const useChainWallet: (chainName: string, walletName: string) => UseChainWalletReturnType;

package/hooks/useChainWallet.js

@@ -3,15 +3,47 @@ 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 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.option.name === walletName);
+    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);
+    }, []);
     return {
+        connect,
+        disconnect,
+        getRpcEndpoint,
+        status: wallet?.walletState,
+        username: account?.username,
+        message: wallet?.errorMessage,
+        logoUrl: walletManager.getChainLogoUrl(chainName),
         chain: chainToShow,
         assetList,
         address: account?.address,

package/hooks/useConfig.d.ts

@@ -0,0 +1,8 @@
+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[];
+    updateSignerOptions: (signerOptions: SignerOptions) => SignerOptions;
+    updateEndpoints: (endpointOptions: EndpointOptions) => EndpointOptions;
+};

package/hooks/useConfig.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useConfig = void 0;
+const useWalletManager_1 = require("./useWalletManager");
+const useConfig = () => {
+    const walletManager = (0, useWalletManager_1.useWalletManager)();
+    return {
+        updateChains: (chains) => walletManager.chains = chains,
+        updateAssetLists: (assetLists) => walletManager.assetLists = assetLists,
+        updateSignerOptions: (signerOptions) => walletManager.signerOptions = signerOptions,
+        updateEndpoints: (endpointOptions) => walletManager.endpointOptions = endpointOptions,
+    };
+};
+exports.useConfig = useConfig;

package/hooks/useCurrentWallet.d.ts

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

package/hooks/useCurrentWallet.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCurrentWallet = void 0;
+const useWalletManager_1 = require("./useWalletManager");
+const modal_1 = require("../modal");
+const useCurrentWallet = () => {
+    const walletManager = (0, useWalletManager_1.useWalletManager)();
+    const { open } = (0, modal_1.useWalletModal)();
+    // useEffect(() => {
+    //   if (!walletManager.currentWalletName && walletManager.state === WalletManagerState.Initialized) {
+    //     open()
+    //   }
+    // }, [walletManager.currentWalletName, walletManager.state])
+    return walletManager.getCurrentWallet();
+};
+exports.useCurrentWallet = useCurrentWallet;

package/hooks/useInterchainClient.d.ts

@@ -1,15 +1,2 @@
-import { CosmWasmSigningClient } from 'interchainjs/cosmwasm-stargate';
-import { StargateSigningClient } from 'interchainjs/stargate';
-import { StargateClient, HttpEndpoint } from '@cosmjs/stargate';
-import { SigningClient } from 'interchainjs/signing-client';
-import { RpcQuery } from 'interchainjs/query/rpc';
-export declare const useInterchainClient: (chainName: string, walletName: string) => {
-    rpcEndpoint: string | HttpEndpoint;
-    signingClient: SigningClient;
-    client: RpcQuery;
-    stargateSigningClient: StargateSigningClient;
-    stargateClient: StargateClient;
-    cosmWasmSigningClient: CosmWasmSigningClient;
-    error: unknown;
-    isLoading: boolean;
-};
+import { UseInterchainClientReturnType } from '../types/chain';
+export declare const useInterchainClient: (chainName: string, walletName: string) => UseInterchainClientReturnType;

package/hooks/useInterchainClient.js

@@ -4,59 +4,41 @@ 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 [client, setClient] = (0, react_1.useState)(null);
-    const [stargateSigningClient, setStargateSigningClient] = (0, react_1.useState)(null);
-    const [stargateClient, setStargateClient] = (0, react_1.useState)();
-    const [cosmWasmSigningClient, setCosmWasmSigningClient] = (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 () => {
-        const wallet = walletManager.wallets.find((w) => w.option.name === walletName);
-        const chainToShow = walletManager.chains.find((c) => c.chainName === chainName);
-        if (!wallet) {
-            throw new Error('Wallet not found');
-        }
-        if (!chainToShow) {
-            throw new Error('Chain not found');
-        }
-        try {
-            setIsLoading(true);
-            const rpcEndpoint = await walletManager.getRpcEndpoint(wallet, chainName);
-            setRpcEndpoint(rpcEndpoint);
-            const clientFactory = await walletManager.createClientFactory(wallet, chainName);
-            const client = await clientFactory.getClient();
-            setClient(client);
-            const signingClient = await clientFactory.getSigningClient();
-            setSigningClient(signingClient);
-            const stargateClient = await clientFactory.getStargateClient();
-            setStargateClient(stargateClient);
-            const signingStargateClient = await clientFactory.getSigningStargateClient(chainToShow.bech32Prefix);
-            setStargateSigningClient(signingStargateClient);
-            const signingCosmwasmClient = await clientFactory.getSigningCosmwasmClient();
-            setCosmWasmSigningClient(signingCosmwasmClient);
-        }
-        catch (error) {
-            setError(error);
-        }
-        finally {
-            setIsLoading(false);
+        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);
+            }
         }
     };
     (0, react_1.useEffect)(() => {
         initialize();
-    }, [chainName, walletName, account?.address]);
+    }, [chainName, walletName, account, wallet?.walletState]);
     return {
         rpcEndpoint,
         signingClient,
-        client,
-        stargateSigningClient,
-        stargateClient,
-        cosmWasmSigningClient,
         error,
         isLoading
     };

package/hooks/useOfflineSigner.d.ts

@@ -0,0 +1,4 @@
+import { ICosmosGeneralOfflineSigner } from '@interchainjs/cosmos/types/wallet';
+export declare const useOfflineSigner: (chainName: string, walletName: string) => {
+    offlineSigner: ICosmosGeneralOfflineSigner;
+};

package/hooks/useOfflineSigner.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOfflineSigner = void 0;
+const react_1 = require("react");
+const useWalletManager_1 = require("./useWalletManager");
+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);
+    (0, react_1.useEffect)(() => {
+        if (wallet && chainName) {
+            setOfflineSigner(walletManager.getOfflineSigner(wallet, chainName));
+        }
+    }, [wallet, chainName]);
+    return {
+        offlineSigner
+    };
+};
+exports.useOfflineSigner = useOfflineSigner;

package/hooks/useWalletManager.d.ts

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

package/hooks/useWalletManager.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useWalletManager = void 0;
 const provider_1 = require("../provider");
 const useWalletManager = () => {
-    const { walletManager } = (0, provider_1.useInterChainWalletContext)();
+    const { walletManager } = (0, provider_1.useInterchainWalletContext)();
     return walletManager;
 };
 exports.useWalletManager = useWalletManager;