@interchain-kit/react 0.0.1-beta.8 → 0.1.0

package/LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2024 Cosmology Developers <developers@cosmology.zone>
+Copyright (c) 2024 Cosmology Developers <developers@hyperweb.io>
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,22 +1,168 @@
-# react
+# @interchain-kit/react
 
-<p align="center">
-  <img src="https://user-images.githubusercontent.com/545047/188804067-28e67e5e-0214-4449-ab04-2e0c564a6885.svg" width="80"><br />
-    interchain-kit wallet connector react package
+<p align="center" width="100%">
+    <img height="90" src="https://user-images.githubusercontent.com/545047/190171432-5526db8f-9952-45ce-a745-bea4302f912b.svg" />
 </p>
 
-## install
+<p align="center" width="100%">
+  <a href="https://github.com/hyperweb-io/cosmos-kit/actions/workflows/run-tests.yml">
+    <img height="20" src="https://github.com/hyperweb-io/cosmos-kit/actions/workflows/run-tests.yml/badge.svg" />
+  </a>
+  <a href="https://github.com/hyperweb-io/lib-count">
+    <img height="20" src="https://img.shields.io/endpoint?url=https%3A%2F%2Fraw.githubusercontent.com%2Fhyperweb-io%2Flib-count%2Fmain%2Foutput%2Fbadges%2Fproducts%2Fcosmos-kit%2Ftotal.json"/>  
+  </a>
+  <a href="https://github.com/hyperweb-io/lib-count">
+    <img height="20" src="https://img.shields.io/endpoint?url=https%3A%2F%2Fraw.githubusercontent.com%2Fhyperweb-io%2Flib-count%2Fmain%2Foutput%2Fbadges%2Fproducts%2Fcosmos-kit%2Fmonthly.json"/>  
+  </a>
+  <br />
+   <a href="https://github.com/hyperweb-io/cosmos-kit/blob/main/LICENSE"><img height="20" src="https://img.shields.io/badge/license-BSD%203--Clause%20Clear-blue.svg"></a>
+   <a href="https://www.npmjs.com/package/cosmos-kit"><img height="20" src="https://img.shields.io/github/package-json/v/hyperweb-io/cosmos-kit?filename=packages%2Fcosmos-kit%2Fpackage.json"></a>
+</p>
 
+## Install
+Using npm:
+```sh
+npm install @interchain-kit/react
+```
+Using yarn:
 ```sh
-npm install react
+yarn add @interchain-kit/react
+```
+
+## Usage
+### Setup
+#### import chain registry info that you need
+```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 { 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('osmosis');
+  // will show cosmoshub address from what you selected wallet in modal
+  return <div>{address}</div>;
+};
+
+function App() {
+  return (
+    <ThemeProvider>
+      <ChainProvider
+        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={{}}
+      >
+        <Show />
+      </ChainProvider>
+    </ThemeProvider>
+  );
+}
+
+export default App;
+```
+
+### useChain
+```js
+
+const chainName = 'cosmoshub'
+const { chain, assetList, address, wallet } = useChain(chainName)
+
+console.log(wallet) //keprl extension wallet info
+console.log(chain) // chain info for cosmoshub
+console.log(assetList) // assets info for cosmoshub
+console.log(address) // address for cosmoshub in keplr-extension wallet
+
+```
+
+### useChainWallet
+```js
+import { chain as junoChain, assetList as junoAssetList } from "@chain-registry/v2/mainnet/juno";
+import { chain as stargazeChain,assetList as stargazeAssetList } from "@chain-registry/v2/mainnet/stargaze";
+import { keplrWallet } from "@interchain-kit/keplr-extension";
+import { leapWallet } from "@interchain-kit/leap-extension";
+
+const Show = () => {
+  const juno = useChainWallet('juno', 'keplr-extension')
+  const stargaze = useChainWallet('stargaze', 'leap-extension')
+  console.log(juno.address) // juno1xxxxxxx in keplr extension wallet
+  console.log(stargaze.addresss) // stargaze1xxxxxx in leap extension wallet
+};
+
+const chainNames 
+
+function App() {
+  return (
+    <ThemeProvider>
+      <ChainProvider
+        chains={[junoChain, stargazeChain]}
+        assetLists={[junoAssetList, stargazeAssetList]}
+        wallets={[keplrWallet, leapWallet]}
+        signerOptions={{}}
+        endpointOptions={{}}
+      >
+        <Show />
+      </ChainProvider>
+    </ThemeProvider>
+  );
+}
+
+export default App;
+```
+
+### useChains
+
+```js
+WIP
 ```
-## Table of contents
+### use wallet methods
+```js
+const { wallet } = useChain('osmosis')
 
-- [react](#react)
-  - [Install](#install)
-  - [Table of contents](#table-of-contents)
-- [Developing](#developing)
-- [Credits](#credits)
+//use method from wallet that you select
+await wallet.signAmino(chainId, signAddress, stdDoc)
+await wallet.verifyArbitrary(chainId, signAddress, stdDoc)
+
+```
 
 ## Developing
 
@@ -33,25 +179,28 @@ Or if you want to make your dev process smoother, you can run:
 ```sh
 yarn
 # build the dev packages with .map files, this enables navigation from references to their source code between packages.
-yarn build:dev
+yarn watch:dev
 ```
 
-## Related
+## Interchain JavaScript Stack 
 
-Checkout these related projects:
+A unified toolkit for building applications and smart contracts in the Interchain ecosystem ⚛️
 
-* [@cosmology/telescope](https://github.com/cosmology-tech/telescope) Your Frontend Companion for Building with TypeScript with Cosmos SDK Modules.
-* [@cosmwasm/ts-codegen](https://github.com/CosmWasm/ts-codegen) Convert your CosmWasm smart contracts into dev-friendly TypeScript classes.
-* [chain-registry](https://github.com/cosmology-tech/chain-registry) Everything from token symbols, logos, and IBC denominations for all assets you want to support in your application.
-* [cosmos-kit](https://github.com/cosmology-tech/cosmos-kit) Experience the convenience of connecting with a variety of web3 wallets through a single, streamlined interface.
-* [create-cosmos-app](https://github.com/cosmology-tech/create-cosmos-app) Set up a modern Cosmos app by running one command.
-* [interchain-ui](https://github.com/cosmology-tech/interchain-ui) The Interchain Design System, empowering developers with a flexible, easy-to-use UI kit.
-* [starship](https://github.com/cosmology-tech/starship) Unified Testing and Development for the Interchain.
+| Category              | Tools                                                                                                                  | Description                                                                                           |
+|----------------------|------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------|
+| **Chain Information**   | [**Chain Registry**](https://github.com/hyperweb-io/chain-registry), [**Utils**](https://www.npmjs.com/package/@chain-registry/utils), [**Client**](https://www.npmjs.com/package/@chain-registry/client) | Everything from token symbols, logos, and IBC denominations for all assets you want to support in your application. |
+| **Wallet Connectors**| [**Interchain Kit**](https://github.com/hyperweb-io/interchain-kit)<sup>beta</sup>, [**Cosmos Kit**](https://github.com/hyperweb-io/cosmos-kit) | Experience the convenience of connecting with a variety of web3 wallets through a single, streamlined interface. |
+| **Signing Clients**          | [**InterchainJS**](https://github.com/hyperweb-io/interchainjs)<sup>beta</sup>, [**CosmJS**](https://github.com/cosmos/cosmjs) | A single, universal signing interface for any network |
+| **SDK Clients**              | [**Telescope**](https://github.com/hyperweb-io/telescope)                                                          | Your Frontend Companion for Building with TypeScript with Cosmos SDK Modules. |
+| **Starter Kits**     | [**Create Interchain App**](https://github.com/hyperweb-io/create-interchain-app)<sup>beta</sup>, [**Create Cosmos App**](https://github.com/hyperweb-io/create-cosmos-app) | Set up a modern Interchain app by running one command. |
+| **UI Kits**          | [**Interchain UI**](https://github.com/hyperweb-io/interchain-ui)                                                   | The Interchain Design System, empowering developers with a flexible, easy-to-use UI kit. |
+| **Testing Frameworks**          | [**Starship**](https://github.com/hyperweb-io/starship)                                                             | Unified Testing and Development for the Interchain. |
+| **TypeScript Smart Contracts** | [**Create Hyperweb App**](https://github.com/hyperweb-io/create-hyperweb-app)                              | Build and deploy full-stack blockchain applications with TypeScript |
+| **CosmWasm Contracts** | [**CosmWasm TS Codegen**](https://github.com/CosmWasm/ts-codegen)                                                   | Convert your CosmWasm smart contracts into dev-friendly TypeScript classes. |
 
 ## Credits
 
-🛠 Built by Cosmology — if you like our tools, please consider delegating to [our validator ⚛️](https://cosmology.zone/validator)
-
+🛠 Built by Hyperweb (formerly Cosmology) — if you like our tools, please checkout and contribute to [our github ⚛️](https://github.com/hyperweb-io)
 
 ## Disclaimer
 

package/esm/hooks/index.js

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

package/esm/hooks/useChain.js

@@ -1,42 +1,40 @@
-import { useWalletManager } from "./useWalletManager";
-import { useAccount } from "./useAccount";
-import { useActiveWallet } from './useActiveWallet';
-import { useInterchainClient } from './useInterchainClient';
 import { useWalletModal } from "../modal";
-import { ChainNameNotExist } from "@interChain-kit/core";
+import { useWalletManager } from './useWalletManager';
+import { ChainNameNotExist } from '@interchain-kit/core';
+import { ChainWallet } from '../store/chain-wallet';
 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);
-    if (!chainToShow) {
+    const { assetLists, currentWalletName, disconnect, setCurrentChainName, getChainByName, getWalletByName, getChainWalletState, getChainLogoUrl, connect, getSigningClient, getRpcEndpoint, getAccount } = useWalletManager();
+    const chain = getChainByName(chainName);
+    if (!chain) {
         throw new ChainNameNotExist(chainName);
     }
+    const assetList = assetLists.find(a => a.chainName === chainName);
+    const wallet = getWalletByName(currentWalletName);
+    const chainWalletStateToShow = getChainWalletState(currentWalletName, chainName);
     const { open, close } = useWalletModal();
-    const cosmosKitUserChainReturnType = {
+    return {
+        //for migration cosmos kit
         connect: () => {
-            if (activeWallet) {
-                return;
-            }
+            setCurrentChainName(chainName);
+            open();
+        },
+        disconnect: async () => disconnect(currentWalletName, chainName),
+        openView: () => {
+            setCurrentChainName(chainName);
             open();
         },
-        openView: open,
         closeView: close,
-        getRpcEndpoint: () => walletManager.getRpcEndpoint(activeWallet, chainName),
-        status: activeWallet?.walletState,
-        username: account?.username,
-        message: activeWallet?.errorMessage,
-        getSigningCosmWasmClient: () => walletManager.createClientFactory(activeWallet, chainName).then((c) => c.getSigningCosmwasmClient()),
-        getSigningStargateClient: () => walletManager.createClientFactory(activeWallet, chainName).then((c) => c.getSigningStargateClient())
-    };
-    return {
-        chain: chainToShow,
+        getRpcEndpoint: () => getRpcEndpoint(currentWalletName, chainName),
+        status: chainWalletStateToShow?.walletState,
+        username: chainWalletStateToShow?.account?.username,
+        message: chainWalletStateToShow?.errorMessage,
+        // new api
+        logoUrl: getChainLogoUrl(chainName),
+        chain,
         assetList,
-        address: account?.address,
-        wallet: activeWallet,
-        ...cosmosKitUserChainReturnType, //for migration cosmos kit
-        ...interchainClient
+        address: chainWalletStateToShow?.account?.address,
+        wallet: new ChainWallet(wallet, () => connect(currentWalletName, chainName), () => disconnect(currentWalletName, chainName), () => getAccount(currentWalletName, chainName)),
+        rpcEndpoint: chainWalletStateToShow?.rpcEndpoint,
+        getSigningClient: () => getSigningClient(currentWalletName, chainName),
     };
 };

package/esm/hooks/useChainWallet.js

@@ -1,18 +1,31 @@
 import { useWalletManager } from "./useWalletManager";
-import { useAccount } from "./useAccount";
-import { useInterchainClient } from "./useInterchainClient";
+import { ChainWallet } from "../store/chain-wallet";
 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.option.name === walletName);
-    const account = useAccount(chainName, walletName);
-    const interchainClient = useInterchainClient(chainName, walletName);
+    const { assetLists, disconnect, setCurrentChainName, setCurrentWalletName, getChainByName, getWalletByName, getChainWalletState, getChainLogoUrl, connect, getSigningClient, getRpcEndpoint, getAccount } = useWalletManager();
+    const chain = getChainByName(chainName);
+    const wallet = getWalletByName(walletName);
+    const assetList = assetLists.find(a => a.chainName === chainName);
+    const chainWalletStateToShow = getChainWalletState(walletName, chainName);
     return {
-        chain: chainToShow,
+        //for migration cosmos kit
+        connect: async () => {
+            await connect(walletName, chainName);
+            setCurrentWalletName(walletName);
+            setCurrentChainName(chainName);
+            await getAccount(walletName, chainName);
+        },
+        disconnect: () => disconnect(walletName, chainName),
+        getRpcEndpoint: () => getRpcEndpoint(walletName, chainName),
+        status: chainWalletStateToShow?.walletState,
+        username: chainWalletStateToShow?.account?.username,
+        message: chainWalletStateToShow?.errorMessage,
+        // new api
+        logoUrl: getChainLogoUrl(chainName),
+        chain,
         assetList,
-        address: account?.address,
-        wallet,
-        ...interchainClient
+        address: chainWalletStateToShow?.account?.address,
+        wallet: new ChainWallet(wallet, () => connect(walletName, chainName), () => disconnect(walletName, chainName), () => getAccount(walletName, chainName)),
+        rpcEndpoint: chainWalletStateToShow?.rpcEndpoint,
+        getSigningClient: () => getSigningClient(walletName, chainName),
     };
 };

package/esm/hooks/useWalletManager.js

@@ -1,5 +1,6 @@
-import { useInterChainWalletContext } from "../provider";
+import { useInterchainWalletContext } from "../provider";
+import { useStore } from 'zustand';
 export const useWalletManager = () => {
-    const { walletManager } = useInterChainWalletContext();
-    return walletManager;
+    const store = useInterchainWalletContext();
+    return useStore(store);
 };

package/esm/index.js

@@ -3,3 +3,4 @@ export * from './hooks';
 export * from './types';
 export * from './enum';
 export * from './modal';
+export * from './store';

package/esm/modal/modal.js

@@ -1,31 +1,103 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { ConnectModal } from "@interchain-ui/react";
-import { ConnectedContent, ConnectedHeader, ConnectingContent, ConnectingHeader, RejectContent, RejectHeader, WalletListContent, WalletListHeader } from "./views";
+import { ConnectedContent, ConnectedHeader, ConnectingContent, ConnectingHeader, NotExistContent, NotExistHeader, QRCodeContent, QRCodeHeader, RejectContent, RejectHeader, WalletListContent, WalletListHeader, } from "./views";
 import { useWalletModal } from "./provider";
-import { useActiveWallet } from "../hooks";
-import { useEffect, useState } from "react";
-const defaultModalView = {
-    header: _jsx(WalletListHeader, {}), content: _jsx(WalletListContent, {})
-};
+import { useChainWallet, useWalletManager } from "../hooks";
+import { useEffect, useMemo, useState } from "react";
+import { WalletState, WCWallet } from "@interchain-kit/core";
+import { ConnectModal } from "@interchain-ui/react";
 export const WalletModal = () => {
+    const [qrCode, setQRCode] = useState(null);
+    const { currentWalletName, currentChainName, wallets, connect, getAccount, setCurrentWalletName, } = useWalletManager();
     const { modalIsOpen, open, close } = useWalletModal();
-    const activeWallet = useActiveWallet();
-    const [modalView, setModalView] = useState(defaultModalView);
-    const gotoWalletList = () => setModalView(defaultModalView);
+    const [modalType, setModalType] = useState("wallet-list");
+    const [selectedWallet, setSelectedWallet] = useState(null);
+    const { chain, status, wallet } = useChainWallet(currentChainName, currentWalletName);
+    const handleConnect = async () => {
+        if (wallet.originalWallet instanceof WCWallet) {
+            wallet.originalWallet.setOnPairingUriCreatedCallback((uri) => {
+                setQRCode(uri);
+            });
+        }
+        await connect(selectedWallet?.info?.name, chain.chainName);
+        await getAccount(selectedWallet?.info?.name, chain.chainName);
+        setSelectedWallet(null);
+    };
     useEffect(() => {
-        switch (true) {
-            case activeWallet?.walletState === "Connecting" /* WalletState.Connecting */:
-                setModalView({ header: _jsx(ConnectingHeader, { onBack: gotoWalletList }), content: _jsx(ConnectingContent, {}) });
-                break;
-            case activeWallet?.walletState === "Connected" /* WalletState.Connected */:
-                setModalView({ header: _jsx(ConnectedHeader, { onBack: gotoWalletList }), content: _jsx(ConnectedContent, {}) });
-                break;
-            case activeWallet?.walletState === "Reject" /* WalletState.Reject */:
-                setModalView({ header: _jsx(RejectHeader, { onBack: gotoWalletList }), content: _jsx(RejectContent, {}) });
-                break;
-            default:
-                setModalView(defaultModalView);
+        if (selectedWallet && currentWalletName && currentChainName) {
+            handleConnect();
+        }
+    }, [selectedWallet]);
+    const handleSelectWallet = async (selectedWallet) => {
+        setSelectedWallet(selectedWallet);
+        setCurrentWalletName(selectedWallet?.info?.name);
+    };
+    useEffect(() => {
+        if (!selectedWallet) {
+            setModalType("wallet-list");
+        }
+        if (currentWalletName && currentChainName) {
+            if (status === WalletState.Connecting) {
+                setModalType("connecting");
+            }
+            if (status === WalletState.Connected) {
+                setModalType("connected");
+            }
+            if (status === WalletState.Rejected) {
+                setModalType("reject");
+            }
+            if (status === WalletState.Disconnected) {
+                setModalType("wallet-list");
+            }
+            if (qrCode) {
+                setModalType("qr-code");
+            }
+        }
+    }, [
+        currentWalletName,
+        currentChainName,
+        status,
+        modalIsOpen,
+        selectedWallet,
+        qrCode
+    ]);
+    const goBackList = () => setModalType("wallet-list");
+    const { header, content } = useMemo(() => {
+        switch (modalType) {
+            case "wallet-list":
+                return {
+                    header: _jsx(WalletListHeader, {}),
+                    content: _jsx(WalletListContent, { onSelectWallet: handleSelectWallet }),
+                };
+            case "connecting":
+                return {
+                    header: _jsx(ConnectingHeader, { wallet: wallet, onBack: goBackList }),
+                    content: _jsx(ConnectingContent, { wallet: wallet }),
+                };
+            case "connected":
+                return {
+                    header: _jsx(ConnectedHeader, { wallet: wallet, onBack: goBackList }),
+                    content: _jsx(ConnectedContent, { afterDisconnect: goBackList }),
+                };
+            case "reject":
+                return {
+                    header: _jsx(RejectHeader, { wallet: wallet, onBack: goBackList }),
+                    content: (_jsx(RejectContent, { wallet: wallet, onReconnect: () => {
+                            setModalType("connecting");
+                            wallet.connect(chain.chainId);
+                            wallet.getAccount(chain.chainId);
+                        } })),
+                };
+            case "not-exist":
+                return {
+                    header: _jsx(NotExistHeader, { wallet: wallet, onBack: goBackList }),
+                    content: _jsx(NotExistContent, { wallet: wallet }),
+                };
+            case "qr-code":
+                return {
+                    header: _jsx(QRCodeHeader, { onBack: goBackList }),
+                    content: _jsx(QRCodeContent, {}),
+                };
         }
-    }, [activeWallet, activeWallet?.walletState]);
-    return (_jsx(ConnectModal, { isOpen: modalIsOpen, header: modalView.header, onOpen: open, onClose: close, children: modalView.content }));
+    }, [modalType]);
+    return (_jsx(ConnectModal, { isOpen: modalIsOpen, header: header, onOpen: open, onClose: close, children: content }));
 };

package/esm/modal/provider.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, useContext, useState } from "react";
 import { WalletModal } from "./modal";
 const WalletModalContext = createContext(null);
-export const WalletModalProvider = ({ children }) => {
+export const WalletModalProvider = ({ children, }) => {
     const [modalIsOpen, setModalIsOpen] = useState(false);
     const open = () => setModalIsOpen(true);
     const close = () => setModalIsOpen(false);
@@ -11,7 +11,7 @@ export const WalletModalProvider = ({ children }) => {
 export const useWalletModal = () => {
     const context = useContext(WalletModalContext);
     if (!context) {
-        throw new Error('useWalletModal must be used within a WalletModalProvider');
+        throw new Error("useWalletModal must be used within a WalletModalProvider");
     }
     return context;
 };

package/esm/modal/views/Connected.js

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

package/esm/modal/views/Connecting.js

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