@interchain-kit/react 0.0.1-beta.23 → 0.0.1-beta.25

package/README.md

@@ -15,17 +15,19 @@ yarn add @interchain-kit/react
 
 ## Usage
 ### Setup
+#### import chain registry info that you need
 ```js
 import { ChainProvider, useChain } from "@interchain-kit/react";
-import { assetLists, chains } from "@chain-registry/v2";
 import { keplrWallet } from "@interchain-kit/keplr-extension";
 import { ThemeProvider } from "@interchain-ui/react";
 import "@interchain-ui/react/styles";
 
-const chainName = 'cosmoshub'
+import { chain as junoChain, assetList as junoAssetList } from "@chain-registry/v2/mainnet/juno";
+import { chain as osmosisChain,assetList as osmosisAssetList } from "@chain-registry/v2/mainnet/osmosis";
+import { chain as cosmoshubChain, assetList as cosmoshubAssetList } from "@chain-registry/v2/mainnet/cosmoshub";
 
 const Show = () => {
-  const {address} = useChain(chainName);
+  const {address} = useChain('osmosis');
   // will show cosmoshub address from what you selected wallet in modal
   return <div>{address}</div>;
 };
@@ -34,8 +36,42 @@ function App() {
   return (
     <ThemeProvider>
       <ChainProvider
-        chains={chains.filter((c) => c.chainName === chainName)}
-        assetLists={assetLists.filter((c) => c.chainName === chainName)}
+        chains={[osmosisChain, junoChain, cosmoshubChain]}
+        assetLists={[osmosisAssetList, junoAssetList, cosmoshubAssetList]}
+        wallets={[keplrWallet]}
+        signerOptions={{}}
+        endpointOptions={{}}
+      >
+        <Show />
+      </ChainProvider>
+    </ThemeProvider>
+  );
+}
+
+export default App;
+```
+
+#### or import all chain registry
+```js
+import { ChainProvider, useChain } from "@interchain-kit/react";
+import { keplrWallet } from "@interchain-kit/keplr-extension";
+import { ThemeProvider } from "@interchain-ui/react";
+import "@interchain-ui/react/styles";
+import { chains, assetLists } from '@chain-registry/v2/mainnet'
+ 
+
+const Show = () => {
+  const {address} = useChain('osmosis');
+  // will show cosmoshub address from what you selected wallet in modal
+  return <div>{address}</div>;
+};
+
+function App() {
+  return (
+    <ThemeProvider>
+      <ChainProvider
+        chains={chains}
+        assetLists={assetLists}
         wallets={[keplrWallet]}
         signerOptions={{}}
         endpointOptions={{}}
@@ -103,9 +139,9 @@ function App() {
 export default App;
 ```
 
-### useActiveWallet
+### useCurrentWallet
 ```js
-const wallet = useActiveWallet()
+const wallet = useCurrentWallet()
 
 console.log(wallet) // current connected wallet
 

package/esm/hooks/index.js

@@ -1,5 +1,5 @@
 export * from './useWalletManager';
-export * from './useActiveWallet';
+export * from './useCurrentWallet';
 export * from './useAccount';
 export * from './useChain';
 export * from './useConnect';

package/esm/hooks/useChain.js

@@ -1,6 +1,6 @@
 import { useWalletManager } from "./useWalletManager";
 import { useAccount } from "./useAccount";
-import { useActiveWallet } from './useActiveWallet';
+import { useCurrentWallet } from './useCurrentWallet';
 import { useInterchainClient } from './useInterchainClient';
 import { useWalletModal } from "../modal";
 import { ChainNameNotExist } from "@interchain-kit/core";
@@ -9,35 +9,35 @@ 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 activeWallet = useActiveWallet();
-    const account = useAccount(chainName, activeWallet?.option?.name);
-    const interchainClient = useInterchainClient(chainName, activeWallet?.option?.name);
+    const currentWallet = useCurrentWallet();
+    const account = useAccount(chainName, currentWallet?.option?.name);
+    const interchainClient = useInterchainClient(chainName, currentWallet?.option?.name);
     if (!chainToShow) {
         throw new ChainNameNotExist(chainName);
     }
     const { open, close } = useWalletModal();
     const cosmosKitUserChainReturnType = {
         connect: () => {
-            if (activeWallet) {
+            if (currentWallet) {
                 return;
             }
             open();
         },
         openView: open,
         closeView: close,
-        getRpcEndpoint: () => walletManager.getRpcEndpoint(activeWallet, chainName),
-        status: activeWallet?.walletState,
+        getRpcEndpoint: () => walletManager.getRpcEndpoint(currentWallet, chainName),
+        status: currentWallet?.walletState,
         username: account?.username,
-        message: activeWallet?.errorMessage,
-        getSigningCosmWasmClient: () => walletManager.getSigningCosmwasmClient(activeWallet.option.name, chainName),
-        getSigningCosmosClient: () => walletManager.getSigningCosmosClient(activeWallet.option.name, chainName),
+        message: currentWallet?.errorMessage,
+        getSigningCosmWasmClient: () => walletManager.getSigningCosmwasmClient(currentWallet.option.name, chainName),
+        getSigningCosmosClient: () => walletManager.getSigningCosmosClient(currentWallet.option.name, chainName),
     };
     return {
         logoUrl: getChainLogoUrl(assetList),
         chain: chainToShow,
         assetList,
         address: account?.address,
-        wallet: activeWallet,
+        wallet: currentWallet,
         ...cosmosKitUserChainReturnType, //for migration cosmos kit
         ...interchainClient
     };

package/esm/hooks/useCurrentWallet.js

@@ -0,0 +1,16 @@
+import { useEffect } from "react";
+import { useWalletManager } from "./useWalletManager";
+import { useWalletModal } from "../modal";
+import { WalletManagerState } from "@interchain-kit/core";
+export const useCurrentWallet = () => {
+    const walletManager = useWalletManager();
+    const { open } = useWalletModal();
+    useEffect(() => {
+        console.log(walletManager.currentWalletName, walletManager.state);
+        if (!walletManager.currentWalletName && walletManager.state === WalletManagerState.Initialized) {
+            console.log('do i open this ?');
+            open();
+        }
+    }, [walletManager.currentWalletName, walletManager.state]);
+    return walletManager.getCurrentWallet();
+};

package/esm/modal/modal.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { ConnectModal } from "@interchain-ui/react";
 import { ConnectedContent, ConnectedHeader, ConnectingContent, ConnectingHeader, QRCodeContent, QRCodeHeader, RejectContent, RejectHeader, WalletListContent, WalletListHeader, } from "./views";
 import { useWalletModal } from "./provider";
-import { useActiveWallet } from "../hooks";
+import { useCurrentWallet } from "../hooks";
 import { useEffect, useState } from "react";
 import { WalletState } from "@interchain-kit/core";
 const defaultModalView = {
@@ -11,27 +11,30 @@ const defaultModalView = {
 };
 export const WalletModal = () => {
     const { modalIsOpen, open, close } = useWalletModal();
-    const activeWallet = useActiveWallet();
+    const currentWallet = useCurrentWallet();
     const [modalView, setModalView] = useState(defaultModalView);
     const gotoWalletList = () => setModalView(defaultModalView);
     useEffect(() => {
         switch (true) {
-            case activeWallet?.option?.mode === "wallet-connect":
-                setModalView({ header: _jsx(QRCodeHeader, {}), content: _jsx(QRCodeContent, {}) });
+            case currentWallet?.option?.mode === "wallet-connect":
+                setModalView({
+                    header: _jsx(QRCodeHeader, { onBack: gotoWalletList }),
+                    content: _jsx(QRCodeContent, {}),
+                });
                 break;
-            case activeWallet?.walletState === WalletState.Connecting:
+            case currentWallet?.walletState === WalletState.Connecting:
                 setModalView({
                     header: _jsx(ConnectingHeader, { onBack: gotoWalletList }),
                     content: _jsx(ConnectingContent, {}),
                 });
                 break;
-            case activeWallet?.walletState === WalletState.Connected:
+            case currentWallet?.walletState === WalletState.Connected:
                 setModalView({
                     header: _jsx(ConnectedHeader, { onBack: gotoWalletList }),
                     content: _jsx(ConnectedContent, {}),
                 });
                 break;
-            case activeWallet?.walletState === WalletState.Reject:
+            case currentWallet?.walletState === WalletState.Reject:
                 setModalView({
                     header: _jsx(RejectHeader, { onBack: gotoWalletList }),
                     content: _jsx(RejectContent, {}),
@@ -40,6 +43,6 @@ export const WalletModal = () => {
             default:
                 setModalView(defaultModalView);
         }
-    }, [activeWallet, activeWallet?.walletState]);
+    }, [currentWallet, currentWallet?.walletState]);
     return (_jsx(ConnectModal, { isOpen: modalIsOpen, header: modalView.header, onOpen: open, onClose: close, children: modalView.content }));
 };

package/esm/modal/views/Connected.js

@@ -1,32 +1,32 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ConnectModalHead, ConnectModalStatus } from "@interchain-ui/react";
-import { useAccount, useActiveWallet, useWalletManager } from "../../hooks";
+import { useAccount, useCurrentWallet, useWalletManager } from "../../hooks";
 import { useWalletModal } from "../provider";
 import { getWalletInfo } from "../../utils";
 import { AstronautSvg } from "./Astronaut";
 export const ConnectedHeader = ({ onBack }) => {
-    const activeWallet = useActiveWallet();
+    const currentWallet = useCurrentWallet();
     const { close } = useWalletModal();
-    return (_jsx(ConnectModalHead, { title: activeWallet?.option?.prettyName || '', hasBackButton: true, onClose: close, onBack: onBack, closeButtonProps: { onClick: close } }));
+    return (_jsx(ConnectModalHead, { title: currentWallet?.option?.prettyName || "", hasBackButton: true, onClose: close, onBack: onBack, closeButtonProps: { onClick: close } }));
 };
 export const ConnectedContent = () => {
-    const activeWallet = useActiveWallet();
+    const currentWallet = useCurrentWallet();
     const walletManager = useWalletManager();
-    const account = useAccount(walletManager.chains[0].chainName, activeWallet?.option?.name);
+    const account = useAccount(walletManager.chains[0].chainName, currentWallet?.option?.name);
     const { close } = useWalletModal();
-    if (!activeWallet) {
+    if (!currentWallet) {
         return null;
     }
-    return (_jsx(ConnectModalStatus, { wallet: getWalletInfo(activeWallet), status: 'Connected', connectedInfo: {
-            name: account?.username || 'Wallet',
+    return (_jsx(ConnectModalStatus, { wallet: getWalletInfo(currentWallet), status: "Connected", connectedInfo: {
+            name: account?.username || "Wallet",
             avatar: (_jsx(AstronautSvg, { style: {
-                    fontSize: 'inherit',
-                    width: '100%',
-                    height: '100%',
+                    fontSize: "inherit",
+                    width: "100%",
+                    height: "100%",
                 } })),
             address: account?.address,
         }, onDisconnect: async () => {
-            await walletManager.disconnect(activeWallet?.option?.name);
+            await walletManager.disconnect(currentWallet?.option?.name);
             close();
         } }));
 };

package/esm/modal/views/Connecting.js

@@ -1,33 +1,33 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { ConnectModalHead, ConnectModalStatus } from '@interchain-ui/react';
-import { useActiveWallet, useWalletManager } from '../../hooks';
-import { useWalletModal } from '../provider';
+import { ConnectModalHead, ConnectModalStatus } from "@interchain-ui/react";
+import { useCurrentWallet, useWalletManager } from "../../hooks";
+import { useWalletModal } from "../provider";
 export const ConnectingHeader = ({ onBack }) => {
-    const wallet = useActiveWallet();
+    const currentWallet = useCurrentWallet();
     const { close } = useWalletModal();
     const walletManager = useWalletManager();
-    if (!wallet)
+    if (!currentWallet)
         return null;
-    return (_jsx(ConnectModalHead, { title: wallet.option.prettyName, hasBackButton: true, onClose: close, onBack: onBack, closeButtonProps: {
+    return (_jsx(ConnectModalHead, { title: currentWallet.option.prettyName, hasBackButton: true, onClose: close, onBack: onBack, closeButtonProps: {
             onClick: async () => {
-                await walletManager.disconnect(wallet.option.name);
+                await walletManager.disconnect(currentWallet.option.name);
                 close();
-            }
+            },
         } }));
 };
 export const ConnectingContent = () => {
-    const activeWallet = useActiveWallet();
-    const { option: { prettyName, mode } } = activeWallet;
-    let title = 'Requesting Connection';
-    let desc = mode === 'wallet-connect'
+    const currentWallet = useCurrentWallet();
+    const { option: { prettyName, mode }, } = currentWallet;
+    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 (!activeWallet)
+    if (!currentWallet)
         return null;
     return (_jsx(ConnectModalStatus, { wallet: {
-            name: activeWallet.option.name,
-            prettyName: activeWallet.option.prettyName,
-            logo: activeWallet.option.logo,
+            name: currentWallet.option.name,
+            prettyName: currentWallet.option.prettyName,
+            logo: currentWallet.option.logo,
             mobileDisabled: true,
-        }, status: 'Connecting', contentHeader: title, contentDesc: desc }));
+        }, status: "Connecting", contentHeader: title, contentDesc: desc }));
 };

package/esm/modal/views/QRCode.js

@@ -1,15 +1,19 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ConnectModalHead, ConnectModalQRCode } from "@interchain-ui/react";
-import { useActiveWallet, useWalletManager } from "../../hooks";
+import { useCurrentWallet, useWalletManager } from "../../hooks";
 import { useWalletModal } from "../provider";
-export const QRCodeHeader = () => {
-    const activeWallet = useActiveWallet();
+export const QRCodeHeader = ({ onBack }) => {
+    const currentWallet = useCurrentWallet();
+    const walletManager = useWalletManager();
     const { close } = useWalletModal();
-    return (_jsx(ConnectModalHead, { title: activeWallet?.option?.prettyName || "", hasBackButton: true, onClose: () => void 0, onBack: () => void 0, closeButtonProps: { onClick: close } }));
+    return (_jsx(ConnectModalHead, { title: currentWallet?.option?.prettyName || "", hasBackButton: true, onClose: () => void 0, onBack: async () => {
+            await walletManager.disconnect(currentWallet?.option?.name || "");
+            onBack();
+        }, closeButtonProps: { onClick: close } }));
 };
 export const QRCodeContent = () => {
-    const activeWallet = useActiveWallet();
+    const currentWallet = useCurrentWallet();
     const walletManager = useWalletManager();
-    const data = activeWallet.pairingUri;
-    return (_jsx(ConnectModalQRCode, { status: data ? "Done" : "Pending", link: data, description: "Open App to connect", errorTitle: "errorTitle", errorDesc: activeWallet.errorMessage || "", onRefresh: () => walletManager.connect(activeWallet?.option?.name || "") }));
+    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?.option?.name || "") }));
 };

package/esm/modal/views/Reject.js

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

package/hooks/index.d.ts

@@ -1,5 +1,5 @@
 export * from './useWalletManager';
-export * from './useActiveWallet';
+export * from './useCurrentWallet';
 export * from './useAccount';
 export * from './useChain';
 export * from './useConnect';

package/hooks/index.js

@@ -15,7 +15,7 @@ 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);

package/hooks/useChain.js

@@ -3,7 +3,7 @@ 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");
@@ -12,35 +12,35 @@ 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?.option?.name);
+    const interchainClient = (0, useInterchainClient_1.useInterchainClient)(chainName, currentWallet?.option?.name);
     if (!chainToShow) {
         throw new core_1.ChainNameNotExist(chainName);
     }
     const { open, close } = (0, modal_1.useWalletModal)();
     const cosmosKitUserChainReturnType = {
         connect: () => {
-            if (activeWallet) {
+            if (currentWallet) {
                 return;
             }
             open();
         },
         openView: open,
         closeView: close,
-        getRpcEndpoint: () => walletManager.getRpcEndpoint(activeWallet, chainName),
-        status: activeWallet?.walletState,
+        getRpcEndpoint: () => walletManager.getRpcEndpoint(currentWallet, chainName),
+        status: currentWallet?.walletState,
         username: account?.username,
-        message: activeWallet?.errorMessage,
-        getSigningCosmWasmClient: () => walletManager.getSigningCosmwasmClient(activeWallet.option.name, chainName),
-        getSigningCosmosClient: () => walletManager.getSigningCosmosClient(activeWallet.option.name, chainName),
+        message: currentWallet?.errorMessage,
+        getSigningCosmWasmClient: () => walletManager.getSigningCosmwasmClient(currentWallet.option.name, chainName),
+        getSigningCosmosClient: () => walletManager.getSigningCosmosClient(currentWallet.option.name, chainName),
     };
     return {
         logoUrl: (0, utils_1.getChainLogoUrl)(assetList),
         chain: chainToShow,
         assetList,
         address: account?.address,
-        wallet: activeWallet,
+        wallet: currentWallet,
         ...cosmosKitUserChainReturnType, //for migration cosmos kit
         ...interchainClient
     };

package/hooks/useCurrentWallet.d.ts

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

package/hooks/useCurrentWallet.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCurrentWallet = void 0;
+const react_1 = require("react");
+const useWalletManager_1 = require("./useWalletManager");
+const modal_1 = require("../modal");
+const core_1 = require("@interchain-kit/core");
+const useCurrentWallet = () => {
+    const walletManager = (0, useWalletManager_1.useWalletManager)();
+    const { open } = (0, modal_1.useWalletModal)();
+    (0, react_1.useEffect)(() => {
+        console.log(walletManager.currentWalletName, walletManager.state);
+        if (!walletManager.currentWalletName && walletManager.state === core_1.WalletManagerState.Initialized) {
+            console.log('do i open this ?');
+            open();
+        }
+    }, [walletManager.currentWalletName, walletManager.state]);
+    return walletManager.getCurrentWallet();
+};
+exports.useCurrentWallet = useCurrentWallet;

package/modal/modal.js

@@ -14,27 +14,30 @@ const defaultModalView = {
 };
 const WalletModal = () => {
     const { modalIsOpen, open, close } = (0, provider_1.useWalletModal)();
-    const activeWallet = (0, hooks_1.useActiveWallet)();
+    const currentWallet = (0, hooks_1.useCurrentWallet)();
     const [modalView, setModalView] = (0, react_2.useState)(defaultModalView);
     const gotoWalletList = () => setModalView(defaultModalView);
     (0, react_2.useEffect)(() => {
         switch (true) {
-            case activeWallet?.option?.mode === "wallet-connect":
-                setModalView({ header: (0, jsx_runtime_1.jsx)(views_1.QRCodeHeader, {}), content: (0, jsx_runtime_1.jsx)(views_1.QRCodeContent, {}) });
+            case currentWallet?.option?.mode === "wallet-connect":
+                setModalView({
+                    header: (0, jsx_runtime_1.jsx)(views_1.QRCodeHeader, { onBack: gotoWalletList }),
+                    content: (0, jsx_runtime_1.jsx)(views_1.QRCodeContent, {}),
+                });
                 break;
-            case activeWallet?.walletState === core_1.WalletState.Connecting:
+            case currentWallet?.walletState === core_1.WalletState.Connecting:
                 setModalView({
                     header: (0, jsx_runtime_1.jsx)(views_1.ConnectingHeader, { onBack: gotoWalletList }),
                     content: (0, jsx_runtime_1.jsx)(views_1.ConnectingContent, {}),
                 });
                 break;
-            case activeWallet?.walletState === core_1.WalletState.Connected:
+            case currentWallet?.walletState === core_1.WalletState.Connected:
                 setModalView({
                     header: (0, jsx_runtime_1.jsx)(views_1.ConnectedHeader, { onBack: gotoWalletList }),
                     content: (0, jsx_runtime_1.jsx)(views_1.ConnectedContent, {}),
                 });
                 break;
-            case activeWallet?.walletState === core_1.WalletState.Reject:
+            case currentWallet?.walletState === core_1.WalletState.Reject:
                 setModalView({
                     header: (0, jsx_runtime_1.jsx)(views_1.RejectHeader, { onBack: gotoWalletList }),
                     content: (0, jsx_runtime_1.jsx)(views_1.RejectContent, {}),
@@ -43,7 +46,7 @@ const WalletModal = () => {
             default:
                 setModalView(defaultModalView);
         }
-    }, [activeWallet, activeWallet?.walletState]);
+    }, [currentWallet, currentWallet?.walletState]);
     return ((0, jsx_runtime_1.jsx)(react_1.ConnectModal, { isOpen: modalIsOpen, header: modalView.header, onOpen: open, onClose: close, children: modalView.content }));
 };
 exports.WalletModal = WalletModal;

package/modal/views/Connected.js

@@ -8,29 +8,29 @@ const provider_1 = require("../provider");
 const utils_1 = require("../../utils");
 const Astronaut_1 = require("./Astronaut");
 const ConnectedHeader = ({ onBack }) => {
-    const activeWallet = (0, hooks_1.useActiveWallet)();
+    const currentWallet = (0, hooks_1.useCurrentWallet)();
     const { close } = (0, provider_1.useWalletModal)();
-    return ((0, jsx_runtime_1.jsx)(react_1.ConnectModalHead, { title: activeWallet?.option?.prettyName || '', hasBackButton: true, onClose: close, onBack: onBack, closeButtonProps: { onClick: close } }));
+    return ((0, jsx_runtime_1.jsx)(react_1.ConnectModalHead, { title: currentWallet?.option?.prettyName || "", hasBackButton: true, onClose: close, onBack: onBack, closeButtonProps: { onClick: close } }));
 };
 exports.ConnectedHeader = ConnectedHeader;
 const ConnectedContent = () => {
-    const activeWallet = (0, hooks_1.useActiveWallet)();
+    const currentWallet = (0, hooks_1.useCurrentWallet)();
     const walletManager = (0, hooks_1.useWalletManager)();
-    const account = (0, hooks_1.useAccount)(walletManager.chains[0].chainName, activeWallet?.option?.name);
+    const account = (0, hooks_1.useAccount)(walletManager.chains[0].chainName, currentWallet?.option?.name);
     const { close } = (0, provider_1.useWalletModal)();
-    if (!activeWallet) {
+    if (!currentWallet) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(react_1.ConnectModalStatus, { wallet: (0, utils_1.getWalletInfo)(activeWallet), status: 'Connected', connectedInfo: {
-            name: account?.username || 'Wallet',
+    return ((0, jsx_runtime_1.jsx)(react_1.ConnectModalStatus, { wallet: (0, utils_1.getWalletInfo)(currentWallet), status: "Connected", connectedInfo: {
+            name: account?.username || "Wallet",
             avatar: ((0, jsx_runtime_1.jsx)(Astronaut_1.AstronautSvg, { style: {
-                    fontSize: 'inherit',
-                    width: '100%',
-                    height: '100%',
+                    fontSize: "inherit",
+                    width: "100%",
+                    height: "100%",
                 } })),
             address: account?.address,
         }, onDisconnect: async () => {
-            await walletManager.disconnect(activeWallet?.option?.name);
+            await walletManager.disconnect(currentWallet?.option?.name);
             close();
         } }));
 };

package/modal/views/Connecting.js

@@ -6,33 +6,33 @@ const react_1 = require("@interchain-ui/react");
 const hooks_1 = require("../../hooks");
 const provider_1 = require("../provider");
 const ConnectingHeader = ({ onBack }) => {
-    const wallet = (0, hooks_1.useActiveWallet)();
+    const currentWallet = (0, hooks_1.useCurrentWallet)();
     const { close } = (0, provider_1.useWalletModal)();
     const walletManager = (0, hooks_1.useWalletManager)();
-    if (!wallet)
+    if (!currentWallet)
         return null;
-    return ((0, jsx_runtime_1.jsx)(react_1.ConnectModalHead, { title: wallet.option.prettyName, hasBackButton: true, onClose: close, onBack: onBack, closeButtonProps: {
+    return ((0, jsx_runtime_1.jsx)(react_1.ConnectModalHead, { title: currentWallet.option.prettyName, hasBackButton: true, onClose: close, onBack: onBack, closeButtonProps: {
             onClick: async () => {
-                await walletManager.disconnect(wallet.option.name);
+                await walletManager.disconnect(currentWallet.option.name);
                 close();
-            }
+            },
         } }));
 };
 exports.ConnectingHeader = ConnectingHeader;
 const ConnectingContent = () => {
-    const activeWallet = (0, hooks_1.useActiveWallet)();
-    const { option: { prettyName, mode } } = activeWallet;
-    let title = 'Requesting Connection';
-    let desc = mode === 'wallet-connect'
+    const currentWallet = (0, hooks_1.useCurrentWallet)();
+    const { option: { prettyName, mode }, } = currentWallet;
+    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 (!activeWallet)
+    if (!currentWallet)
         return null;
     return ((0, jsx_runtime_1.jsx)(react_1.ConnectModalStatus, { wallet: {
-            name: activeWallet.option.name,
-            prettyName: activeWallet.option.prettyName,
-            logo: activeWallet.option.logo,
+            name: currentWallet.option.name,
+            prettyName: currentWallet.option.prettyName,
+            logo: currentWallet.option.logo,
             mobileDisabled: true,
-        }, status: 'Connecting', contentHeader: title, contentDesc: desc }));
+        }, status: "Connecting", contentHeader: title, contentDesc: desc }));
 };
 exports.ConnectingContent = ConnectingContent;

package/modal/views/QRCode.d.ts

@@ -1,2 +1,4 @@
-export declare const QRCodeHeader: () => import("react/jsx-runtime").JSX.Element;
+export declare const QRCodeHeader: ({ onBack }: {
+    onBack: () => void;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const QRCodeContent: () => import("react/jsx-runtime").JSX.Element;

package/modal/views/QRCode.js

@@ -5,16 +5,20 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@interchain-ui/react");
 const hooks_1 = require("../../hooks");
 const provider_1 = require("../provider");
-const QRCodeHeader = () => {
-    const activeWallet = (0, hooks_1.useActiveWallet)();
+const QRCodeHeader = ({ onBack }) => {
+    const currentWallet = (0, hooks_1.useCurrentWallet)();
+    const walletManager = (0, hooks_1.useWalletManager)();
     const { close } = (0, provider_1.useWalletModal)();
-    return ((0, jsx_runtime_1.jsx)(react_1.ConnectModalHead, { title: activeWallet?.option?.prettyName || "", hasBackButton: true, onClose: () => void 0, onBack: () => void 0, closeButtonProps: { onClick: close } }));
+    return ((0, jsx_runtime_1.jsx)(react_1.ConnectModalHead, { title: currentWallet?.option?.prettyName || "", hasBackButton: true, onClose: () => void 0, onBack: async () => {
+            await walletManager.disconnect(currentWallet?.option?.name || "");
+            onBack();
+        }, closeButtonProps: { onClick: close } }));
 };
 exports.QRCodeHeader = QRCodeHeader;
 const QRCodeContent = () => {
-    const activeWallet = (0, hooks_1.useActiveWallet)();
+    const currentWallet = (0, hooks_1.useCurrentWallet)();
     const walletManager = (0, hooks_1.useWalletManager)();
-    const data = activeWallet.pairingUri;
-    return ((0, jsx_runtime_1.jsx)(react_1.ConnectModalQRCode, { status: data ? "Done" : "Pending", link: data, description: "Open App to connect", errorTitle: "errorTitle", errorDesc: activeWallet.errorMessage || "", onRefresh: () => walletManager.connect(activeWallet?.option?.name || "") }));
+    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?.option?.name || "") }));
 };
 exports.QRCodeContent = QRCodeContent;

package/modal/views/Reject.js

@@ -8,14 +8,14 @@ const hooks_1 = require("../../hooks");
 const utils_1 = require("../../utils");
 const RejectHeader = ({ onBack }) => {
     const { close } = (0, provider_1.useWalletModal)();
-    const activeWallet = (0, hooks_1.useActiveWallet)();
-    return ((0, jsx_runtime_1.jsx)(react_1.ConnectModalHead, { title: activeWallet.option.prettyName, hasBackButton: true, onClose: close, onBack: onBack, closeButtonProps: { onClick: close } }));
+    const currentWallet = (0, hooks_1.useCurrentWallet)();
+    return ((0, jsx_runtime_1.jsx)(react_1.ConnectModalHead, { title: currentWallet.option.prettyName, hasBackButton: true, onClose: close, onBack: onBack, closeButtonProps: { onClick: close } }));
 };
 exports.RejectHeader = RejectHeader;
 const RejectContent = () => {
-    const activeWallet = (0, hooks_1.useActiveWallet)();
+    const currentWallet = (0, hooks_1.useCurrentWallet)();
     const walletManager = (0, hooks_1.useWalletManager)();
     const { close } = (0, provider_1.useWalletModal)();
-    return ((0, jsx_runtime_1.jsx)(react_1.ConnectModalStatus, { status: "Rejected", wallet: (0, utils_1.getWalletInfo)(activeWallet), contentHeader: 'Request Rejected', contentDesc: activeWallet.errorMessage || 'Connection permission is denied.', onConnect: () => walletManager.connect(activeWallet.option.name).then(close) }));
+    return ((0, jsx_runtime_1.jsx)(react_1.ConnectModalStatus, { status: "Rejected", wallet: (0, utils_1.getWalletInfo)(currentWallet), contentHeader: "Request Rejected", contentDesc: currentWallet.errorMessage || "Connection permission is denied.", onConnect: () => walletManager.connect(currentWallet.option.name).then(close) }));
 };
 exports.RejectContent = RejectContent;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@interchain-kit/react",
-  "version": "0.0.1-beta.23",
+  "version": "0.0.1-beta.25",
   "author": "cosmology-tech <developers@cosmology.zone>",
   "description": "interchain-kit wallet connector react package",
   "main": "index.js",
@@ -27,12 +27,13 @@
     "build:dev": "npm run clean; tsc --declarationMap; tsc -p tsconfig.esm.json; npm run copy",
     "lint": "eslint . --fix",
     "test": "jest",
-    "test:watch": "jest --watch"
+    "test:watch": "jest --watch",
+    "dev": "tsc -w --preserveWatchOutput -p tsconfig.esm.json"
   },
   "keywords": [],
   "dependencies": {
     "@chain-registry/v2-types": "^0.49.6",
-    "@interchain-kit/core": "0.0.1-beta.23",
+    "@interchain-kit/core": "0.0.1-beta.25",
     "@interchain-ui/react": "1.24.0",
     "@interchainjs/cosmos-types": "0.0.1-beta.9",
     "@interchainjs/injective": "0.0.1-beta.13",
@@ -42,5 +43,5 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
-  "gitHead": "b683ebf8ba399f308a4a46ffe1e8c1a1eebc5947"
+  "gitHead": "c7a2a3412de480cdbd02773d12fed15fe4c281d2"
 }

package/esm/hooks/useActiveWallet.js

@@ -1,13 +0,0 @@
-import { useEffect } from "react";
-import { useWalletManager } from "./useWalletManager";
-import { useWalletModal } from "../modal";
-export const useActiveWallet = () => {
-    const walletManager = useWalletManager();
-    const { open } = useWalletModal();
-    useEffect(() => {
-        if (!walletManager.activeWalletName) {
-            open();
-        }
-    }, [walletManager.activeWalletName]);
-    return walletManager.getActiveWallet();
-};

package/hooks/useActiveWallet.d.ts

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

package/hooks/useActiveWallet.js

@@ -1,17 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useActiveWallet = void 0;
-const react_1 = require("react");
-const useWalletManager_1 = require("./useWalletManager");
-const modal_1 = require("../modal");
-const useActiveWallet = () => {
-    const walletManager = (0, useWalletManager_1.useWalletManager)();
-    const { open } = (0, modal_1.useWalletModal)();
-    (0, react_1.useEffect)(() => {
-        if (!walletManager.activeWalletName) {
-            open();
-        }
-    }, [walletManager.activeWalletName]);
-    return walletManager.getActiveWallet();
-};
-exports.useActiveWallet = useActiveWallet;