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

package/esm/hooks/useAccount.js

@@ -6,8 +6,15 @@ export const useAccount = (chainName, walletName) => {
     const [account, setAccount] = useState(null);
     const chain = walletManager.chains.find(c => c.chainName === chainName);
     const getAccount = async () => {
-        const account = await wallet.getAccount(chain.chainId);
-        setAccount(account);
+        if (wallet && chain) {
+            if (wallet.walletState === "Connected" /* WalletState.Connected */) {
+                const account = await wallet.getAccount(chain.chainId);
+                setAccount(account);
+            }
+            if (wallet.walletState === "Disconnected" /* WalletState.Disconnected */) {
+                setAccount(null);
+            }
+        }
     };
     useEffect(() => {
         if (wallet) {
@@ -15,10 +22,6 @@ export const useAccount = (chainName, walletName) => {
         }
     }, [wallet]);
     useEffect(() => {
-        if (!wallet) {
-            setAccount(null);
-            return;
-        }
         getAccount();
     }, [wallet, chainName, wallet?.walletState]);
     return account;

package/esm/hooks/useActiveWallet.js

@@ -1,5 +1,13 @@
+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/esm/hooks/useChain.js

@@ -3,15 +3,18 @@ import { useAccount } from "./useAccount";
 import { useActiveWallet } from './useActiveWallet';
 import { useInterchainClient } from './useInterchainClient';
 import { useWalletModal } from "../modal";
+import { ChainNameNotExist } from "@interChain-kit/core";
 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 account = useAccount(chainName, activeWallet?.option?.name);
+    const interchainClient = useInterchainClient(chainName, activeWallet?.option?.name);
+    if (!chainToShow) {
+        throw new ChainNameNotExist(chainName);
+    }
     const { open, close } = useWalletModal();
-    const clientFactory = walletManager.createClientFactory(activeWallet, chainName);
     const cosmosKitUserChainReturnType = {
         connect: () => {
             if (activeWallet) {
@@ -22,11 +25,11 @@ export const useChain = (chainName) => {
         openView: open,
         closeView: close,
         getRpcEndpoint: () => walletManager.getRpcEndpoint(activeWallet, chainName),
-        status: activeWallet.walletState,
+        status: activeWallet?.walletState,
         username: account?.username,
-        message: activeWallet.errorMessage,
-        getSigningCosmWasmClient: () => clientFactory.then((c) => c.getSigningCosmwasmClient()),
-        getSigningStargateClient: () => clientFactory.then((c) => c.getSigningStargateClient())
+        message: activeWallet?.errorMessage,
+        getSigningCosmWasmClient: () => walletManager.createClientFactory(activeWallet, chainName).then((c) => c.getSigningCosmwasmClient()),
+        getSigningStargateClient: () => walletManager.createClientFactory(activeWallet, chainName).then((c) => c.getSigningStargateClient())
     };
     return {
         chain: chainToShow,

package/esm/hooks/useInterchainClient.js

@@ -11,39 +11,35 @@ export const useInterchainClient = (chainName, walletName) => {
     const [isLoading, setIsLoading] = useState(false);
     const walletManager = useWalletManager();
     const account = useAccount(chainName, walletName);
+    const wallet = walletManager.wallets.find((w) => w.option.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 queryClient = await clientFactory.getClient();
-            setQueryClient(queryClient);
-            const signingClient = await clientFactory.getSigningClient();
-            setSigningClient(signingClient);
-            const signingStargateClient = await clientFactory.getSigningStargateClient(chainToShow.bech32Prefix);
-            setSigningStargateClient(signingStargateClient);
-            const signingCosmwasmClient = await clientFactory.getSigningCosmwasmClient();
-            setSigningCosmWasmClient(signingCosmwasmClient);
-        }
-        catch (error) {
-            setError(error);
-        }
-        finally {
-            setIsLoading(false);
+        if (wallet && chainToShow && wallet?.walletState === "Connected" /* WalletState.Connected */) {
+            try {
+                setIsLoading(true);
+                const rpcEndpoint = await walletManager.getRpcEndpoint(wallet, chainName);
+                setRpcEndpoint(rpcEndpoint);
+                const clientFactory = await walletManager.createClientFactory(wallet, chainName);
+                const queryClient = await clientFactory.getClient();
+                setQueryClient(queryClient);
+                const signingClient = await clientFactory.getSigningClient();
+                setSigningClient(signingClient);
+                const signingStargateClient = await clientFactory.getSigningStargateClient(chainToShow.bech32Prefix);
+                setSigningStargateClient(signingStargateClient);
+                const signingCosmwasmClient = await clientFactory.getSigningCosmwasmClient();
+                setSigningCosmWasmClient(signingCosmwasmClient);
+            }
+            catch (error) {
+                setError(error);
+            }
+            finally {
+                setIsLoading(false);
+            }
         }
     };
     useEffect(() => {
         initialize();
-    }, [chainName, walletName, account]);
+    }, [chainName, walletName, account, wallet?.walletState]);
     return {
         rpcEndpoint,
         signingClient,

package/esm/hooks/useOfflineSigner.js

@@ -1,8 +1,15 @@
+import { useEffect, useState } from "react";
 import { useWalletManager } from "./useWalletManager";
 export const useOfflineSigner = (chainName, walletName) => {
     const walletManager = useWalletManager();
     const wallet = walletManager.wallets.find((w) => w.option.name === walletName);
+    const [offlineSigner, setOfflineSigner] = useState(null);
+    useEffect(() => {
+        if (wallet && chainName) {
+            setOfflineSigner(walletManager.getOfflineSigner(wallet, chainName));
+        }
+    }, [wallet, chainName]);
     return {
-        offlineSigner: walletManager.getOfflineSigner(wallet, chainName),
+        offlineSigner
     };
 };

package/esm/modal/modal.js

@@ -1,16 +1,31 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useWalletManager } from "../hooks";
-const style = {
-    position: 'absolute',
-    top: '50%',
-    left: '50%',
-    transform: 'translate(-50%,-50%)',
-    width: '500px',
-    backgroundColor: 'white',
+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 { useWalletModal } from "./provider";
+import { useActiveWallet } from "../hooks";
+import { useEffect, useState } from "react";
+const defaultModalView = {
+    header: _jsx(WalletListHeader, {}), content: _jsx(WalletListContent, {})
 };
 export const WalletModal = () => {
-    const walletManager = useWalletManager();
-    return (_jsx("ul", { style: style, children: walletManager.wallets.map(wallet => {
-            return (_jsxs("li", { children: [_jsx("span", { children: wallet.option.prettyName }), _jsx("button", { onClick: () => walletManager.connect(wallet.option.name), children: "connect" })] }));
-        }) }));
+    const { modalIsOpen, open, close } = useWalletModal();
+    const activeWallet = useActiveWallet();
+    const [modalView, setModalView] = useState(defaultModalView);
+    const gotoWalletList = () => setModalView(defaultModalView);
+    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);
+        }
+    }, [activeWallet, activeWallet?.walletState]);
+    return (_jsx(ConnectModal, { isOpen: modalIsOpen, header: modalView.header, onOpen: open, onClose: close, children: modalView.content }));
 };

package/esm/modal/provider.js

@@ -1,13 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, useContext, useState } from "react";
-import { createPortal } from "react-dom";
 import { WalletModal } from "./modal";
 const WalletModalContext = createContext(null);
 export const WalletModalProvider = ({ children }) => {
     const [modalIsOpen, setModalIsOpen] = useState(false);
     const open = () => setModalIsOpen(true);
     const close = () => setModalIsOpen(false);
-    return (_jsxs(WalletModalContext.Provider, { value: { modalIsOpen, open, close }, children: [children, modalIsOpen && createPortal(_jsx(WalletModal, {}), document.body)] }));
+    return (_jsxs(WalletModalContext.Provider, { value: { modalIsOpen, open, close }, children: [children, _jsx(WalletModal, {})] }));
 };
 export const useWalletModal = () => {
     const context = useContext(WalletModalContext);

package/esm/modal/views/Astronaut.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function AstronautSvg(props) {
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", className: "chakra-icon css-1plqj06", viewBox: "0 0 278 255", ...props, children: [_jsx("path", { fill: "#030609", d: "M136.844 254.8c70.527 0 127.7-57.039 127.7-127.4S207.371 0 136.844 0 9.144 57.039 9.144 127.4s57.173 127.4 127.7 127.4Z" }), _jsx("path", { fill: "#F6F5F3", d: "M85.444 22.2a2.9 2.9 0 1 0 0-5.8 2.9 2.9 0 0 0 0 5.8Zm122.7 19.9a2.9 2.9 0 1 0 0-5.801 2.9 2.9 0 0 0 0 5.8Zm18.5 68.5a2.9 2.9 0 1 0-.002-5.802 2.9 2.9 0 0 0 .002 5.802Zm-15.6 71.5a2.9 2.9 0 1 0-.002-5.802 2.9 2.9 0 0 0 .002 5.802Zm-8.8 36a2.9 2.9 0 1 0-.002-5.802 2.9 2.9 0 0 0 .002 5.802Zm-57.5 12.2a2.9 2.9 0 1 0-.002-5.802 2.9 2.9 0 0 0 .002 5.802Zm-32.9-24.2a2.9 2.9 0 1 0-.002-5.802 2.9 2.9 0 0 0 .002 5.802Zm-97.7-94a2.9 2.9 0 1 0-.001-5.8 2.9 2.9 0 0 0 0 5.8Zm34-62.1a2.9 2.9 0 1 0 0-5.8 2.9 2.9 0 0 0 0 5.8Z" }), _jsx("path", { fill: "#BA536A", d: "M235.944 47.1c9.6 11.7 17 25.1 22 39.7-4.5 4.5-10.7 7.4-17.6 7.4-13.4 0-24.2-10.7-24.2-23.8 0-11.6 8.5-21.3 19.8-23.3Z" }), _jsx("path", { fill: "#FF6B84", d: "M242.544 92.9c-13 0-23.6-10.6-23.6-23.7 0-10.6 7-19.6 16.7-22.6 9.7 11.9 17.4 25.6 22.4 40.5-4.2 3.6-9.6 5.8-15.5 5.8Z" }), _jsx("path", { fill: "#124899", d: "M144.744 246.7c0 2.8-.6 5.4-1.5 7.9-2.067.133-4.2.2-6.4.2-14.2 0-28-2.4-40.8-6.7 0-.5-.1-1-.1-1.4 0-13.1 10.9-23.8 24.4-23.8 13.5 0 24.4 10.7 24.4 23.8Z" }), _jsx("path", { fill: "#4CBAB6", d: "M145.644 249.2c0 1.8-.2 3.567-.6 5.3-2.667.2-5.4.3-8.2.3-13.5 0-26.5-2.1-38.7-6 .2-13.4 10.8-24.3 23.7-24.3 13.1 0 23.8 11.1 23.8 24.7Z" }), _jsx("path", { fill: "#D8DEDC", d: "M205.144 117.7c5.9 6.3 17.1 16.7 27.6 23.5 21.8 13.9 20.8 11.7 26.1 14l-8.8 27.9c-13.334-9.733-24.167-17.033-32.5-21.9-10.2-6.067-21.8-12.033-34.8-17.9l22.4-25.6Z" }), _jsx("path", { fill: "#839091", d: "M207.344 119.9c.4.467 2.066 2.1 5 4.9-2.667 5.933-5.067 10.333-7.2 13.2-5 6.8-5.3 6.5-10 11.2l-7.9-3.8 20.1-25.5Z" }), _jsx("path", { fill: "#9CA9A8", d: "M242.844 196.2c-6.934 1.333-10.367.2-10.3-3.4 0-8.4 5.1-7.8 18.6-10.2l-8.3 13.6Z" }), _jsx("path", { fill: "#DAE0DF", d: "M234.844 190.9c-.267-1.6.466-3.067 2.2-4.4 1.666-1.267 4.933-1.933 9.8-2-4.534 1.4-7.334 2.533-8.4 3.4-1 .867-2.2 1.867-3.6 3Z" }), _jsx("path", { fill: "#030609", d: "M251.844 156.9c-4.134-6.6-4.734-10.433-1.8-11.5 4.5-1.6 11.2-1 16.1 1 6.2 2.5 11.7 6.9 11.7 10.5 0 3.133-2.6 5.233-7.8 6.3 3.866 4.6 4.866 7.933 3 10-1.8 2.067-5.267 2.8-10.4 2.2 5 5.133 6.333 8.767 4 10.9-2.6 2.3-12.1 1.6-18.1-.9-5.2-2.1-14.2-12.6-11.5-15.8 1.733-2.133 5.5-3.2 11.3-3.2-5.334-3.067-7-5.567-5-7.5 2-1.867 4.833-2.533 8.5-2Z" }), _jsx("path", { fill: "#9CA9A8", d: "M252.344 148.9c2.9-1.1 8.3.5 12.3 1.8 3.9 1.2 10.5 5.7 9 8-1 1.6-3.267 2.567-6.8 2.9 4.133 5.933 4.966 9.267 2.5 10-3.7 1-11.8.8-11.3 1.3s11.1 10.2 6.5 12.5c-4.5 2.3-10.9.8-15.7-1.8-5.7-3-10.4-10-8.5-12 .733-.8 4.466-1.7 11.2-2.7-5.334-4-7.8-6.533-7.4-7.6.7-1.7 3-2.6 6.4-2.6h6.5c-5.934-5.533-7.5-8.8-4.7-9.8Z" }), _jsx("path", { fill: "#DAE0DF", d: "M256.544 155.2c-3.134-2.733-4.134-4.333-3-4.8 1.066-.4 2.9-.3 5.5.3-1.6 0-2.6.3-3 .9-.4.6-.234 1.8.5 3.6Zm-7.7 6.2c-.534 1.2-.3 2.367.7 3.5-3.2-1.4-4.434-2.666-3.7-3.8.733-1.133 3.4-1.533 8-1.2-2.8-.2-4.467.3-5 1.5Zm-4.3 12.4c-.467 1.067-.167 2.867.9 5.4-3.334-2.933-4.367-5.133-3.1-6.6 1.266-1.533 3.433-2.133 6.5-1.8-2.467.867-3.9 1.867-4.3 3Z" }), _jsx("path", { fill: "#D8DEDC", d: "M180.844 148.9c1.933 5.933 3.933 13.767 6 23.5 3.7 17.5 2.9 36.9-4.1 39.9-2.8 1.2-5.4 3.6-16.1 0-7.2-2.4-22.134-12.133-44.8-29.2l59-34.2Z" }), _jsx("path", { fill: "#687476", d: "M182.744 155.2c-3.2 10.933-12.3 19.7-27.3 26.3-7.334 3.267-16.334 5.4-27 6.4l-10.2-7.5 46.5-25.2h18Z" }), _jsx("path", { fill: "#D8DEDC", d: "M74.044 99.2c-7.467.867-13.3 1.533-17.5 2-1.934.2-4.767 1.167-8.5 2.9-3.2-4.333-5.434-8.533-6.7-12.6-1.5-4.6-3-15.4.2-21.7 2.2-4.2 14.366-9.067 36.5-14.6l-4 44Z" }), _jsx("path", { fill: "#839091", d: "m82.544 53.7-3.5 43.9-23.9 3.9c-1-4.333-1.434-7.933-1.3-10.8.8-14.133 2.466-24.1 5-29.9l23.7-7.1Z" }), _jsx("path", { fill: "#030609", d: "m189.144 137.5-6.4 17.7c-12.4 14.067-26.967 23.533-43.7 28.4-16.8 4.867-34.934 5.467-54.4 1.8l-68.8-32.5c.733-5.933 2.766-11.667 6.1-17.2 5-8.3 15.9-29.3 28.5-33 8.4-2.533 17.6-3.7 27.6-3.5l111.1 38.3Z" }), _jsx("path", { fill: "#D8DEDC", d: "M174.844 148.9c-15.334 26-42.1 37.233-80.3 33.7-16.6-1.6-41.934-12.333-76-32.2 3.666-4.733 5.833-8.467 6.5-11.2 1.1-4 2.4-7.2 6.5-9.5 4.1-2.4 9-6.9 11.7-8.8 4.8-3.5 4.6-9.7 7.2-10.4 4.266-1 12.3-1.933 24.1-2.8l100.3 41.2Z" }), _jsx("path", { fill: "#687476", d: "M113.844 150.7h63.5c-4.334 6.133-11.3 12.2-20.9 18.2-9.6 6-16.4 9-20.4 9-3.334 0-8.6-2.067-15.8-6.2-9.6-5.533-15.734-10.467-18.4-14.8l12-6.2Z" }), _jsx("path", { fill: "#839091", d: "m79.844 106.3 14.8 30.1-20.1 6.9c-5.8-7.667-9.534-12.967-11.2-15.9-1.667-2.933-4.267-8.867-7.8-17.8l24.3-3.3Z" }), _jsx("path", { fill: "#030609", d: "M142.144 166.5c40.869 0 74-33.937 74-75.8s-33.131-75.8-74-75.8-74 33.937-74 75.8 33.131 75.8 74 75.8Z" }), _jsx("path", { fill: "#D8DEDC", d: "M143.444 158.8c37.334 0 67.6-31.027 67.6-69.3 0-38.273-30.266-69.3-67.6-69.3-37.335 0-67.6 31.027-67.6 69.3 0 38.273 30.265 69.3 67.6 69.3Z" }), _jsx("path", { fill: "#fff", d: "M172.344 29.4c9.066 4.133 15.9 10.033 20.5 17.7-.534 1.933-7.367 4.033-20.5 6.3-4.667.8-8.934 1.4-12.8 1.8.066-5.467-.5-10.667-1.7-15.6-1.867-7.467-3.867-12.034-6-13.7 6.6-.867 13.433.3 20.5 3.5Z" }), _jsx("path", { fill: "#030609", d: "M85.444 50c23.133 6.6 44.366 9.566 63.7 8.9 19.333-.667 37.033-3.634 53.1-8.9 6.533 14.4 10.433 25.266 11.7 32.6 1.266 7.333.3 16.633-2.9 27.9-16.334 16.666-38.9 24.3-67.7 22.9-35.8-1.734-58.633-11.267-68.5-28.6-2.6-15.467-2.7-27.134-.3-35 2.4-7.934 6.033-14.534 10.9-19.8Z" }), _jsx("path", { fill: "#173D3E", d: "M96.744 75.6c5.7 1.4 15.8-.4 20.1 1.3 4.2 1.8 11.7 12.8 16.3 14.4 4.6 1.5 11.7-5.4 14-5 2.3.3 1.9 4.4 4.9 6.6 1.2.9 3.2 1.9 7.3 3 3.066.866 6.233 1.866 9.5 3-20.334 11.666-40.3 15.533-59.9 11.6-19.6-3.867-30.067-8.267-31.4-13.2-.467-4.667-.3-10.367.5-17.1.666-5.134 1.7-9.567 3.1-13.3 6.666 4.866 11.866 7.766 15.6 8.7Z" }), _jsx("path", { fill: "#276A69", d: "M77.344 91.7c2.733-.6 5.166-.2 7.3 1.2 3.1 2.1 14.7 9.3 18.7 10.8s24.9-.2 26.8-1.5c1.2-.934 3.1-1.7 5.7-2.3 3.333 2.733 5.933 4 7.8 3.8 2.7-.4 6 1.2 9.9-1.3 4-2.5 6-5.6 8.8-5.6 2.7 0 5.9 1.8 8 2.1 6.5 1.1 8.2-1.5 11-.5 2.8 1 4.2 1.5 8.8 1.3 3.066-.2 9.033-.834 17.9-1.9 1.6 4.466-3.534 11.333-15.4 20.6-6.3 4.9-19.3 12-55 12-5.8 0-27.9-1.1-46-14.5-11.4-8.334-16.167-16.4-14.3-24.2Z" }), _jsx("path", { fill: "#388688", d: "M122.844 103.5c4.466-.467 8.566-2.434 12.3-5.9l1.7 2.7c.133 2.266-.767 4.266-2.7 6-2.9 2.6-7.3 4.6-12.3 4.2-3.267-.2-7.934-2.334-14-6.4 5.4.133 10.4-.067 15-.6Zm27.8-.9c3.6-.6 6.7-2.7 9.2-5 1.666-1.534 3.9-1.534 6.7 0-1 .733-2 1.433-3 2.1-1.4 1-2.6 1.1-5.2 2.2s-6.6 4.4-13.8 4.4c-3 0-5.134-1.6-6.4-4.8 4.266 1.466 8.4 1.833 12.4 1.1h.1Z" }), _jsx("path", { fill: "#fff", d: "m159.344 60.9 20-2.5c4.2 14.266 4.833 36.333 1.9 66.2-4.067 1.266-7.634 2.3-10.7 3.1-4.6 1.2-8.934 1.866-13 2 2.533-7.667 3.633-19.5 3.3-35.5-.2-11.867-.7-22.967-1.5-33.3Zm40-6c2.4 2.7 7.5 10.9 8.8 20 1.9 14.4 1.3 21.5-.6 27.8-2.134 4-4.634 7.1-7.5 9.3-2.867 2.266-5.434 4.466-7.7 6.6 3.2-5.067 4.466-14.734 3.8-29-.667-15.134-2.534-26.134-5.6-33l8.8-1.7Z", opacity: 0.4 }), _jsx("path", { fill: "#030609", d: "M74.544 142.9c15.733-15.333 28.166-21.9 37.3-19.7 15.3 3.6 14.9 13.9 11.4 24.4-2.334 6.933-15.2 12.7-38.6 17.3l-10.1-22Z" }), _jsx("path", { fill: "#9CA9A8", d: "M78.144 146.2c4-4.667 11.233-8.5 21.7-11.5 15.8-4.5 18.3 4.3 18.4 7.2.2 3-1.4 7.2-6.4 8.8-3.334 1.067-11.567 3.8-24.7 8.2l-9-12.7Z" }), _jsx("path", { fill: "#515C5C", d: "m78.144 144.9 4.2-2.3c3.933 4.6 6.6 6.867 8 6.8 4.2-.1 9.3.4 9.5-.5.2-.6.866-2.7 2-6.3-.134 2.8-.134 4.5 0 5.1.2.9 9.1-.2 11.3-1.3 2-1 3.7-2.5 5.1-4.5.2 3.2-.534 5.367-2.2 6.5-3.6 2.6-13.234 6.1-28.9 10.5l-9-14Z" }), _jsx("path", { fill: "#DAE0DF", d: "M105.144 136.1c1-.3 6.2-.7 7.7 0 1 .467 1.633 1.5 1.9 3.1-.8-.733-1.767-1.433-2.9-2.1-.934-.533-3.167-.867-6.7-1Zm-4.5 7.8-1.5 4.2c-.267.867-2.367 1.067-6.3.6 2.466-.2 4.233-.8 5.3-1.8 1.133-.933 1.966-1.933 2.5-3Z" }), _jsx("path", { fill: "#030609", d: "M57.844 227.4c-.1 2.8 0 7.5-3.3 9.3-3.2 1.7-31 3.2-36.5-2.8-5.4-6-15.4-25.5-17.2-36.5-1.2-7.3-2-20.5 4-22.2 4-1.2 8.066-.833 12.2 1.1-3.934-5.933-5.9-11.4-5.9-16.4 0-3.6 1.3-9.5 5.9-10.5 3.066-.667 9.333-.167 18.8 1.5-2-7.2-2-12.2 0-15 6-8.5 22.5-7.2 27-6 4.5 1.3 39.8 37 42 46.4 1.4 5.7-2.3 21.4-6.7 24-1.867 1.133-6.1 2.1-12.7 2.9 4.2 8 4.2 13.4 0 16.2-4.267 2.867-13.467 2.867-27.6 0v8Z" }), _jsx("path", { fill: "#9CA9A8", d: "M38.844 152.9c-1.2-6.867-.7-11.034 1.5-12.5 3.2-2.3 12-2.7 16.5-2.2s5.1 8 11.5 12.2c11 7.3 24 25.3 25.5 28.8s.3 6 0 8.5-12.5 6.6-16 3.7c-1.4-1.1-7.2-8.4-12-12.2-4.667-3.8-9.1-6.567-13.3-8.3 7 7.8 10.933 12.566 11.8 14.3 1.3 2.6 4.1 10.2 7 12.2 2.9 2 10.1 7.8 11.2 8.6 1.1.9 1.6 8.9 1.1 10.4-1.8 2-15.3-4.6-17.3-5-2-.3-7.2-1.2-11.7-2.5-3.067-.8-10.5-7.8-22.3-21 2.733 8.866 5.333 14.9 7.8 18.1 3.6 4.8 6 12 9.2 12 4.5 0 3.8 9.2 1.7 10.9-2.2 1.8-18.3 1.4-24.7-1.5-4.7-2.1-24.5-46.5-19-48.2 7-2.3 11.8-1 14.2 1.3 1.533 1.533 3.133 3.1 4.8 4.7-6.867-19.067-8.367-28.834-4.5-29.3 4.466-.534 9.4-.934 14.8-1.2l1.5 4.7.5-4.2 3.2 1-3-3.3Z" }), _jsx("path", { fill: "#515C5C", d: "M12.244 178.1c-2 2.533-2.367 5.566-1.1 9.1 2 5.2 5.4 15 7.7 18.8 2.3 3.9 9.2 16.4 10.8 18.5 1 1.466 2.4 3.066 4.2 4.8-2.867-.267-5.367-.9-7.5-1.9-4.1-1.8-16.2-25.1-19-38.5-1.3-6.3-1.5-8.9 0-9.7 2.533-1.334 4.166-1.7 4.9-1.1Zm21.6 51.2c4.666-3 7.6-5.134 8.8-6.4a99.173 99.173 0 0 1 5.2-5.4c2.666.266 4.333.9 5 1.9 1 1.5-.4 8.9-1.8 9.5-2.4 1.1-5.1 1.3-6.9 1.4-3.867.133-7.3-.2-10.3-1Zm1.4-33c.9 3 3.7 7.6 6.1 11.6 2.533 4.266 4.233 7.033 5.1 8.3-8.2-7-12.9-12.667-14.1-17-1.2-4.334-1.2-8.1 0-11.3.533.533 1.5 3.333 2.9 8.4Zm47.3 9.7c1.6 2.9 2.3 7.7 1 10.4-.8 1.866-6.534.2-17.2-5 1.6-1.334 3-3.134 4.2-5.4 3.2-5.7 3.2-5.7 3.5-6.6 4.533 2.533 7.366 4.733 8.5 6.6Zm-20-23.4c2.533 3.533 5.033 8.066 7.5 13.6-6.334-4-11-8.534-14-13.6-2.334-4.067-4-8.634-5-13.7 5.733 6.466 9.566 11.033 11.5 13.7Zm12 5.3c3.2-.734 6.433-2.034 9.7-3.9 4.266-2.4 7.266-4.4 9-6 1.8 2.666 2 5.9.6 9.7-1.4 3.5-11.3 7.2-16 3.7-2-1.467-3.1-2.634-3.3-3.5Z" }), _jsx("path", { fill: "#DAE0DF", d: "M43.344 150.7c-.867-6.6.733-10.367 4.8-11.3 4-.867 8.133.566 12.4 4.3-4.534-1.2-7.9-1.634-10.1-1.3-2.134.333-4.5 3.1-7.1 8.3Zm-17.5 11c-.667 2-.334 7.833 1 17.5-5.2-12.4-6.467-19.4-3.8-21 3.2-1.934 6.8-1.934 10.8 0-4.667.333-7.334 1.5-8 3.5Zm-10.2 20.3c-1.134.533-2 2.5-2.6 5.9-1.667-5.8-1.334-8.7 1-8.7 3.666-.067 6.3 1.533 7.9 4.8-2.134-2.334-4.267-3-6.4-2h.1Z" })] }));
+}

package/esm/modal/views/Connected.js

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

package/esm/modal/views/Connecting.js

@@ -0,0 +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';
+export const ConnectingHeader = ({ onBack }) => {
+    const wallet = useActiveWallet();
+    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();
+            }
+        } }));
+};
+export const ConnectingContent = () => {
+    const activeWallet = useActiveWallet();
+    const { option: { prettyName, mode } } = activeWallet;
+    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)
+        return null;
+    return (_jsx(ConnectModalStatus, { wallet: {
+            name: activeWallet.option.name,
+            prettyName: activeWallet.option.prettyName,
+            logo: activeWallet.option.logo,
+            mobileDisabled: true,
+        }, status: 'Connecting', contentHeader: title, contentDesc: desc }));
+};

package/esm/modal/views/Reject.js

@@ -0,0 +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 { 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 } }));
+};
+export const RejectContent = () => {
+    const activeWallet = useActiveWallet();
+    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) }));
+};

package/esm/modal/views/WalletList.js

@@ -0,0 +1,32 @@
+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 = () => {
+    const walletManager = useWalletManager();
+    const { close } = useWalletModal();
+    const wallets = walletManager.wallets.map((w) => {
+        return ({
+            name: w.option.name,
+            prettyName: w.option.prettyName,
+            logo: w.option.logo,
+            mobileDisabled: true,
+            shape: 'list',
+            originalWallet: w
+        });
+    });
+    const onWalletClick = async (wallet) => {
+        try {
+            await walletManager.connect(wallet.option.name);
+            close();
+        }
+        catch (error) {
+            console.log(error);
+        }
+    };
+    return _jsx(ConnectModalWalletList, { wallets: wallets, onWalletItemClick: onWalletClick });
+};

package/esm/modal/views/index.js

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

package/esm/utils/index.js

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

package/esm/utils/wallet.js

@@ -0,0 +1 @@
+export * from './wallet';

package/hooks/useAccount.js

@@ -9,8 +9,15 @@ const useAccount = (chainName, walletName) => {
     const [account, setAccount] = (0, react_1.useState)(null);
     const chain = walletManager.chains.find(c => c.chainName === chainName);
     const getAccount = async () => {
-        const account = await wallet.getAccount(chain.chainId);
-        setAccount(account);
+        if (wallet && chain) {
+            if (wallet.walletState === "Connected" /* WalletState.Connected */) {
+                const account = await wallet.getAccount(chain.chainId);
+                setAccount(account);
+            }
+            if (wallet.walletState === "Disconnected" /* WalletState.Disconnected */) {
+                setAccount(null);
+            }
+        }
     };
     (0, react_1.useEffect)(() => {
         if (wallet) {
@@ -18,10 +25,6 @@ const useAccount = (chainName, walletName) => {
         }
     }, [wallet]);
     (0, react_1.useEffect)(() => {
-        if (!wallet) {
-            setAccount(null);
-            return;
-        }
         getAccount();
     }, [wallet, chainName, wallet?.walletState]);
     return account;

package/hooks/useActiveWallet.js

@@ -1,9 +1,17 @@
 "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;

package/hooks/useChain.js

@@ -6,15 +6,18 @@ const useAccount_1 = require("./useAccount");
 const useActiveWallet_1 = require("./useActiveWallet");
 const useInterchainClient_1 = require("./useInterchainClient");
 const modal_1 = require("../modal");
+const core_1 = require("@interChain-kit/core");
 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 account = (0, useAccount_1.useAccount)(chainName, activeWallet?.option?.name);
+    const interchainClient = (0, useInterchainClient_1.useInterchainClient)(chainName, activeWallet?.option?.name);
+    if (!chainToShow) {
+        throw new core_1.ChainNameNotExist(chainName);
+    }
     const { open, close } = (0, modal_1.useWalletModal)();
-    const clientFactory = walletManager.createClientFactory(activeWallet, chainName);
     const cosmosKitUserChainReturnType = {
         connect: () => {
             if (activeWallet) {
@@ -25,11 +28,11 @@ const useChain = (chainName) => {
         openView: open,
         closeView: close,
         getRpcEndpoint: () => walletManager.getRpcEndpoint(activeWallet, chainName),
-        status: activeWallet.walletState,
+        status: activeWallet?.walletState,
         username: account?.username,
-        message: activeWallet.errorMessage,
-        getSigningCosmWasmClient: () => clientFactory.then((c) => c.getSigningCosmwasmClient()),
-        getSigningStargateClient: () => clientFactory.then((c) => c.getSigningStargateClient())
+        message: activeWallet?.errorMessage,
+        getSigningCosmWasmClient: () => walletManager.createClientFactory(activeWallet, chainName).then((c) => c.getSigningCosmwasmClient()),
+        getSigningStargateClient: () => walletManager.createClientFactory(activeWallet, chainName).then((c) => c.getSigningStargateClient())
     };
     return {
         chain: chainToShow,

package/hooks/useInterchainClient.js

@@ -14,39 +14,35 @@ const useInterchainClient = (chainName, walletName) => {
     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.option.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 queryClient = await clientFactory.getClient();
-            setQueryClient(queryClient);
-            const signingClient = await clientFactory.getSigningClient();
-            setSigningClient(signingClient);
-            const signingStargateClient = await clientFactory.getSigningStargateClient(chainToShow.bech32Prefix);
-            setSigningStargateClient(signingStargateClient);
-            const signingCosmwasmClient = await clientFactory.getSigningCosmwasmClient();
-            setSigningCosmWasmClient(signingCosmwasmClient);
-        }
-        catch (error) {
-            setError(error);
-        }
-        finally {
-            setIsLoading(false);
+        if (wallet && chainToShow && wallet?.walletState === "Connected" /* WalletState.Connected */) {
+            try {
+                setIsLoading(true);
+                const rpcEndpoint = await walletManager.getRpcEndpoint(wallet, chainName);
+                setRpcEndpoint(rpcEndpoint);
+                const clientFactory = await walletManager.createClientFactory(wallet, chainName);
+                const queryClient = await clientFactory.getClient();
+                setQueryClient(queryClient);
+                const signingClient = await clientFactory.getSigningClient();
+                setSigningClient(signingClient);
+                const signingStargateClient = await clientFactory.getSigningStargateClient(chainToShow.bech32Prefix);
+                setSigningStargateClient(signingStargateClient);
+                const signingCosmwasmClient = await clientFactory.getSigningCosmwasmClient();
+                setSigningCosmWasmClient(signingCosmwasmClient);
+            }
+            catch (error) {
+                setError(error);
+            }
+            finally {
+                setIsLoading(false);
+            }
         }
     };
     (0, react_1.useEffect)(() => {
         initialize();
-    }, [chainName, walletName, account]);
+    }, [chainName, walletName, account, wallet?.walletState]);
     return {
         rpcEndpoint,
         signingClient,

package/hooks/useOfflineSigner.d.ts

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

package/hooks/useOfflineSigner.js

@@ -1,12 +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.option.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: walletManager.getOfflineSigner(wallet, chainName),
+        offlineSigner
     };
 };
 exports.useOfflineSigner = useOfflineSigner;

package/modal/modal.js

@@ -2,19 +2,34 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.WalletModal = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@interchain-ui/react");
+const views_1 = require("./views");
+const provider_1 = require("./provider");
 const hooks_1 = require("../hooks");
-const style = {
-    position: 'absolute',
-    top: '50%',
-    left: '50%',
-    transform: 'translate(-50%,-50%)',
-    width: '500px',
-    backgroundColor: 'white',
+const react_2 = require("react");
+const defaultModalView = {
+    header: (0, jsx_runtime_1.jsx)(views_1.WalletListHeader, {}), content: (0, jsx_runtime_1.jsx)(views_1.WalletListContent, {})
 };
 const WalletModal = () => {
-    const walletManager = (0, hooks_1.useWalletManager)();
-    return ((0, jsx_runtime_1.jsx)("ul", { style: style, children: walletManager.wallets.map(wallet => {
-            return ((0, jsx_runtime_1.jsxs)("li", { children: [(0, jsx_runtime_1.jsx)("span", { children: wallet.option.prettyName }), (0, jsx_runtime_1.jsx)("button", { onClick: () => walletManager.connect(wallet.option.name), children: "connect" })] }));
-        }) }));
+    const { modalIsOpen, open, close } = (0, provider_1.useWalletModal)();
+    const activeWallet = (0, hooks_1.useActiveWallet)();
+    const [modalView, setModalView] = (0, react_2.useState)(defaultModalView);
+    const gotoWalletList = () => setModalView(defaultModalView);
+    (0, react_2.useEffect)(() => {
+        switch (true) {
+            case activeWallet?.walletState === "Connecting" /* 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 === "Connected" /* 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 === "Reject" /* WalletState.Reject */:
+                setModalView({ header: (0, jsx_runtime_1.jsx)(views_1.RejectHeader, { onBack: gotoWalletList }), content: (0, jsx_runtime_1.jsx)(views_1.RejectContent, {}) });
+                break;
+            default:
+                setModalView(defaultModalView);
+        }
+    }, [activeWallet, activeWallet?.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/provider.js

@@ -3,14 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useWalletModal = exports.WalletModalProvider = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const react_dom_1 = require("react-dom");
 const modal_1 = require("./modal");
 const WalletModalContext = (0, react_1.createContext)(null);
 const WalletModalProvider = ({ children }) => {
     const [modalIsOpen, setModalIsOpen] = (0, react_1.useState)(false);
     const open = () => setModalIsOpen(true);
     const close = () => setModalIsOpen(false);
-    return ((0, jsx_runtime_1.jsxs)(WalletModalContext.Provider, { value: { modalIsOpen, open, close }, children: [children, modalIsOpen && (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(modal_1.WalletModal, {}), document.body)] }));
+    return ((0, jsx_runtime_1.jsxs)(WalletModalContext.Provider, { value: { modalIsOpen, open, close }, children: [children, (0, jsx_runtime_1.jsx)(modal_1.WalletModal, {})] }));
 };
 exports.WalletModalProvider = WalletModalProvider;
 const useWalletModal = () => {

package/modal/views/Astronaut.d.ts

@@ -0,0 +1,2 @@
+import { SVGProps } from 'react';
+export declare function AstronautSvg(props: SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/modal/views/Astronaut.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AstronautSvg = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+function AstronautSvg(props) {
+    return ((0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", className: "chakra-icon css-1plqj06", viewBox: "0 0 278 255", ...props, children: [(0, jsx_runtime_1.jsx)("path", { fill: "#030609", d: "M136.844 254.8c70.527 0 127.7-57.039 127.7-127.4S207.371 0 136.844 0 9.144 57.039 9.144 127.4s57.173 127.4 127.7 127.4Z" }), (0, jsx_runtime_1.jsx)("path", { fill: "#F6F5F3", d: "M85.444 22.2a2.9 2.9 0 1 0 0-5.8 2.9 2.9 0 0 0 0 5.8Zm122.7 19.9a2.9 2.9 0 1 0 0-5.801 2.9 2.9 0 0 0 0 5.8Zm18.5 68.5a2.9 2.9 0 1 0-.002-5.802 2.9 2.9 0 0 0 .002 5.802Zm-15.6 71.5a2.9 2.9 0 1 0-.002-5.802 2.9 2.9 0 0 0 .002 5.802Zm-8.8 36a2.9 2.9 0 1 0-.002-5.802 2.9 2.9 0 0 0 .002 5.802Zm-57.5 12.2a2.9 2.9 0 1 0-.002-5.802 2.9 2.9 0 0 0 .002 5.802Zm-32.9-24.2a2.9 2.9 0 1 0-.002-5.802 2.9 2.9 0 0 0 .002 5.802Zm-97.7-94a2.9 2.9 0 1 0-.001-5.8 2.9 2.9 0 0 0 0 5.8Zm34-62.1a2.9 2.9 0 1 0 0-5.8 2.9 2.9 0 0 0 0 5.8Z" }), (0, jsx_runtime_1.jsx)("path", { fill: "#BA536A", d: "M235.944 47.1c9.6 11.7 17 25.1 22 39.7-4.5 4.5-10.7 7.4-17.6 7.4-13.4 0-24.2-10.7-24.2-23.8 0-11.6 8.5-21.3 19.8-23.3Z" }), (0, jsx_runtime_1.jsx)("path", { fill: "#FF6B84", d: "M242.544 92.9c-13 0-23.6-10.6-23.6-23.7 0-10.6 7-19.6 16.7-22.6 9.7 11.9 17.4 25.6 22.4 40.5-4.2 3.6-9.6 5.8-15.5 5.8Z" }), (0, jsx_runtime_1.jsx)("path", { fill: "#124899", d: "M144.744 246.7c0 2.8-.6 5.4-1.5 7.9-2.067.133-4.2.2-6.4.2-14.2 0-28-2.4-40.8-6.7 0-.5-.1-1-.1-1.4 0-13.1 10.9-23.8 24.4-23.8 13.5 0 24.4 10.7 24.4 23.8Z" }), (0, jsx_runtime_1.jsx)("path", { fill: "#4CBAB6", d: "M145.644 249.2c0 1.8-.2 3.567-.6 5.3-2.667.2-5.4.3-8.2.3-13.5 0-26.5-2.1-38.7-6 .2-13.4 10.8-24.3 23.7-24.3 13.1 0 23.8 11.1 23.8 24.7Z" }), (0, jsx_runtime_1.jsx)("path", { fill: "#D8DEDC", d: "M205.144 117.7c5.9 6.3 17.1 16.7 27.6 23.5 21.8 13.9 20.8 11.7 26.1 14l-8.8 27.9c-13.334-9.733-24.167-17.033-32.5-21.9-10.2-6.067-21.8-12.033-34.8-17.9l22.4-25.6Z" }), (0, jsx_runtime_1.jsx)("path", { fill: "#839091", d: "M207.344 119.9c.4.467 2.066 2.1 5 4.9-2.667 5.933-5.067 10.333-7.2 13.2-5 6.8-5.3 6.5-10 11.2l-7.9-3.8 20.1-25.5Z" }), (0, jsx_runtime_1.jsx)("path", { fill: "#9CA9A8", d: "M242.844 196.2c-6.934 1.333-10.367.2-10.3-3.4 0-8.4 5.1-7.8 18.6-10.2l-8.3 13.6Z" }), (0, jsx_runtime_1.jsx)("path", { fill: "#DAE0DF", d: "M234.844 190.9c-.267-1.6.466-3.067 2.2-4.4 1.666-1.267 4.933-1.933 9.8-2-4.534 1.4-7.334 2.533-8.4 3.4-1 .867-2.2 1.867-3.6 3Z" }), (0, jsx_runtime_1.jsx)("path", { fill: "#030609", d: "M251.844 156.9c-4.134-6.6-4.734-10.433-1.8-11.5 4.5-1.6 11.2-1 16.1 1 6.2 2.5 11.7 6.9 11.7 10.5 0 3.133-2.6 5.233-7.8 6.3 3.866 4.6 4.866 7.933 3 10-1.8 2.067-5.267 2.8-10.4 2.2 5 5.133 6.333 8.767 4 10.9-2.6 2.3-12.1 1.6-18.1-.9-5.2-2.1-14.2-12.6-11.5-15.8 1.733-2.133 5.5-3.2 11.3-3.2-5.334-3.067-7-5.567-5-7.5 2-1.867 4.833-2.533 8.5-2Z" }), (0, jsx_runtime_1.jsx)("path", { fill: "#9CA9A8", d: "M252.344 148.9c2.9-1.1 8.3.5 12.3 1.8 3.9 1.2 10.5 5.7 9 8-1 1.6-3.267 2.567-6.8 2.9 4.133 5.933 4.966 9.267 2.5 10-3.7 1-11.8.8-11.3 1.3s11.1 10.2 6.5 12.5c-4.5 2.3-10.9.8-15.7-1.8-5.7-3-10.4-10-8.5-12 .733-.8 4.466-1.7 11.2-2.7-5.334-4-7.8-6.533-7.4-7.6.7-1.7 3-2.6 6.4-2.6h6.5c-5.934-5.533-7.5-8.8-4.7-9.8Z" }), (0, jsx_runtime_1.jsx)("path", { fill: "#DAE0DF", d: "M256.544 155.2c-3.134-2.733-4.134-4.333-3-4.8 1.066-.4 2.9-.3 5.5.3-1.6 0-2.6.3-3 .9-.4.6-.234 1.8.5 3.6Zm-7.7 6.2c-.534 1.2-.3 2.367.7 3.5-3.2-1.4-4.434-2.666-3.7-3.8.733-1.133 3.4-1.533 8-1.2-2.8-.2-4.467.3-5 1.5Zm-4.3 12.4c-.467 1.067-.167 2.867.9 5.4-3.334-2.933-4.367-5.133-3.1-6.6 1.266-1.533 3.433-2.133 6.5-1.8-2.467.867-3.9 1.867-4.3 3Z" }), (0, jsx_runtime_1.jsx)("path", { fill: "#D8DEDC", d: "M180.844 148.9c1.933 5.933 3.933 13.767 6 23.5 3.7 17.5 2.9 36.9-4.1 39.9-2.8 1.2-5.4 3.6-16.1 0-7.2-2.4-22.134-12.133-44.8-29.2l59-34.2Z" }), (0, jsx_runtime_1.jsx)("path", { fill: "#687476", d: "M182.744 155.2c-3.2 10.933-12.3 19.7-27.3 26.3-7.334 3.267-16.334 5.4-27 6.4l-10.2-7.5 46.5-25.2h18Z" }), (0, jsx_runtime_1.jsx)("path", { fill: "#D8DEDC", d: "M74.044 99.2c-7.467.867-13.3 1.533-17.5 2-1.934.2-4.767 1.167-8.5 2.9-3.2-4.333-5.434-8.533-6.7-12.6-1.5-4.6-3-15.4.2-21.7 2.2-4.2 14.366-9.067 36.5-14.6l-4 44Z" }), (0, jsx_runtime_1.jsx)("path", { fill: "#839091", d: "m82.544 53.7-3.5 43.9-23.9 3.9c-1-4.333-1.434-7.933-1.3-10.8.8-14.133 2.466-24.1 5-29.9l23.7-7.1Z" }), (0, jsx_runtime_1.jsx)("path", { fill: "#030609", d: "m189.144 137.5-6.4 17.7c-12.4 14.067-26.967 23.533-43.7 28.4-16.8 4.867-34.934 5.467-54.4 1.8l-68.8-32.5c.733-5.933 2.766-11.667 6.1-17.2 5-8.3 15.9-29.3 28.5-33 8.4-2.533 17.6-3.7 27.6-3.5l111.1 38.3Z" }), (0, jsx_runtime_1.jsx)("path", { fill: "#D8DEDC", d: "M174.844 148.9c-15.334 26-42.1 37.233-80.3 33.7-16.6-1.6-41.934-12.333-76-32.2 3.666-4.733 5.833-8.467 6.5-11.2 1.1-4 2.4-7.2 6.5-9.5 4.1-2.4 9-6.9 11.7-8.8 4.8-3.5 4.6-9.7 7.2-10.4 4.266-1 12.3-1.933 24.1-2.8l100.3 41.2Z" }), (0, jsx_runtime_1.jsx)("path", { fill: "#687476", d: "M113.844 150.7h63.5c-4.334 6.133-11.3 12.2-20.9 18.2-9.6 6-16.4 9-20.4 9-3.334 0-8.6-2.067-15.8-6.2-9.6-5.533-15.734-10.467-18.4-14.8l12-6.2Z" }), (0, jsx_runtime_1.jsx)("path", { fill: "#839091", d: "m79.844 106.3 14.8 30.1-20.1 6.9c-5.8-7.667-9.534-12.967-11.2-15.9-1.667-2.933-4.267-8.867-7.8-17.8l24.3-3.3Z" }), (0, jsx_runtime_1.jsx)("path", { fill: "#030609", d: "M142.144 166.5c40.869 0 74-33.937 74-75.8s-33.131-75.8-74-75.8-74 33.937-74 75.8 33.131 75.8 74 75.8Z" }), (0, jsx_runtime_1.jsx)("path", { fill: "#D8DEDC", d: "M143.444 158.8c37.334 0 67.6-31.027 67.6-69.3 0-38.273-30.266-69.3-67.6-69.3-37.335 0-67.6 31.027-67.6 69.3 0 38.273 30.265 69.3 67.6 69.3Z" }), (0, jsx_runtime_1.jsx)("path", { fill: "#fff", d: "M172.344 29.4c9.066 4.133 15.9 10.033 20.5 17.7-.534 1.933-7.367 4.033-20.5 6.3-4.667.8-8.934 1.4-12.8 1.8.066-5.467-.5-10.667-1.7-15.6-1.867-7.467-3.867-12.034-6-13.7 6.6-.867 13.433.3 20.5 3.5Z" }), (0, jsx_runtime_1.jsx)("path", { fill: "#030609", d: "M85.444 50c23.133 6.6 44.366 9.566 63.7 8.9 19.333-.667 37.033-3.634 53.1-8.9 6.533 14.4 10.433 25.266 11.7 32.6 1.266 7.333.3 16.633-2.9 27.9-16.334 16.666-38.9 24.3-67.7 22.9-35.8-1.734-58.633-11.267-68.5-28.6-2.6-15.467-2.7-27.134-.3-35 2.4-7.934 6.033-14.534 10.9-19.8Z" }), (0, jsx_runtime_1.jsx)("path", { fill: "#173D3E", d: "M96.744 75.6c5.7 1.4 15.8-.4 20.1 1.3 4.2 1.8 11.7 12.8 16.3 14.4 4.6 1.5 11.7-5.4 14-5 2.3.3 1.9 4.4 4.9 6.6 1.2.9 3.2 1.9 7.3 3 3.066.866 6.233 1.866 9.5 3-20.334 11.666-40.3 15.533-59.9 11.6-19.6-3.867-30.067-8.267-31.4-13.2-.467-4.667-.3-10.367.5-17.1.666-5.134 1.7-9.567 3.1-13.3 6.666 4.866 11.866 7.766 15.6 8.7Z" }), (0, jsx_runtime_1.jsx)("path", { fill: "#276A69", d: "M77.344 91.7c2.733-.6 5.166-.2 7.3 1.2 3.1 2.1 14.7 9.3 18.7 10.8s24.9-.2 26.8-1.5c1.2-.934 3.1-1.7 5.7-2.3 3.333 2.733 5.933 4 7.8 3.8 2.7-.4 6 1.2 9.9-1.3 4-2.5 6-5.6 8.8-5.6 2.7 0 5.9 1.8 8 2.1 6.5 1.1 8.2-1.5 11-.5 2.8 1 4.2 1.5 8.8 1.3 3.066-.2 9.033-.834 17.9-1.9 1.6 4.466-3.534 11.333-15.4 20.6-6.3 4.9-19.3 12-55 12-5.8 0-27.9-1.1-46-14.5-11.4-8.334-16.167-16.4-14.3-24.2Z" }), (0, jsx_runtime_1.jsx)("path", { fill: "#388688", d: "M122.844 103.5c4.466-.467 8.566-2.434 12.3-5.9l1.7 2.7c.133 2.266-.767 4.266-2.7 6-2.9 2.6-7.3 4.6-12.3 4.2-3.267-.2-7.934-2.334-14-6.4 5.4.133 10.4-.067 15-.6Zm27.8-.9c3.6-.6 6.7-2.7 9.2-5 1.666-1.534 3.9-1.534 6.7 0-1 .733-2 1.433-3 2.1-1.4 1-2.6 1.1-5.2 2.2s-6.6 4.4-13.8 4.4c-3 0-5.134-1.6-6.4-4.8 4.266 1.466 8.4 1.833 12.4 1.1h.1Z" }), (0, jsx_runtime_1.jsx)("path", { fill: "#fff", d: "m159.344 60.9 20-2.5c4.2 14.266 4.833 36.333 1.9 66.2-4.067 1.266-7.634 2.3-10.7 3.1-4.6 1.2-8.934 1.866-13 2 2.533-7.667 3.633-19.5 3.3-35.5-.2-11.867-.7-22.967-1.5-33.3Zm40-6c2.4 2.7 7.5 10.9 8.8 20 1.9 14.4 1.3 21.5-.6 27.8-2.134 4-4.634 7.1-7.5 9.3-2.867 2.266-5.434 4.466-7.7 6.6 3.2-5.067 4.466-14.734 3.8-29-.667-15.134-2.534-26.134-5.6-33l8.8-1.7Z", opacity: 0.4 }), (0, jsx_runtime_1.jsx)("path", { fill: "#030609", d: "M74.544 142.9c15.733-15.333 28.166-21.9 37.3-19.7 15.3 3.6 14.9 13.9 11.4 24.4-2.334 6.933-15.2 12.7-38.6 17.3l-10.1-22Z" }), (0, jsx_runtime_1.jsx)("path", { fill: "#9CA9A8", d: "M78.144 146.2c4-4.667 11.233-8.5 21.7-11.5 15.8-4.5 18.3 4.3 18.4 7.2.2 3-1.4 7.2-6.4 8.8-3.334 1.067-11.567 3.8-24.7 8.2l-9-12.7Z" }), (0, jsx_runtime_1.jsx)("path", { fill: "#515C5C", d: "m78.144 144.9 4.2-2.3c3.933 4.6 6.6 6.867 8 6.8 4.2-.1 9.3.4 9.5-.5.2-.6.866-2.7 2-6.3-.134 2.8-.134 4.5 0 5.1.2.9 9.1-.2 11.3-1.3 2-1 3.7-2.5 5.1-4.5.2 3.2-.534 5.367-2.2 6.5-3.6 2.6-13.234 6.1-28.9 10.5l-9-14Z" }), (0, jsx_runtime_1.jsx)("path", { fill: "#DAE0DF", d: "M105.144 136.1c1-.3 6.2-.7 7.7 0 1 .467 1.633 1.5 1.9 3.1-.8-.733-1.767-1.433-2.9-2.1-.934-.533-3.167-.867-6.7-1Zm-4.5 7.8-1.5 4.2c-.267.867-2.367 1.067-6.3.6 2.466-.2 4.233-.8 5.3-1.8 1.133-.933 1.966-1.933 2.5-3Z" }), (0, jsx_runtime_1.jsx)("path", { fill: "#030609", d: "M57.844 227.4c-.1 2.8 0 7.5-3.3 9.3-3.2 1.7-31 3.2-36.5-2.8-5.4-6-15.4-25.5-17.2-36.5-1.2-7.3-2-20.5 4-22.2 4-1.2 8.066-.833 12.2 1.1-3.934-5.933-5.9-11.4-5.9-16.4 0-3.6 1.3-9.5 5.9-10.5 3.066-.667 9.333-.167 18.8 1.5-2-7.2-2-12.2 0-15 6-8.5 22.5-7.2 27-6 4.5 1.3 39.8 37 42 46.4 1.4 5.7-2.3 21.4-6.7 24-1.867 1.133-6.1 2.1-12.7 2.9 4.2 8 4.2 13.4 0 16.2-4.267 2.867-13.467 2.867-27.6 0v8Z" }), (0, jsx_runtime_1.jsx)("path", { fill: "#9CA9A8", d: "M38.844 152.9c-1.2-6.867-.7-11.034 1.5-12.5 3.2-2.3 12-2.7 16.5-2.2s5.1 8 11.5 12.2c11 7.3 24 25.3 25.5 28.8s.3 6 0 8.5-12.5 6.6-16 3.7c-1.4-1.1-7.2-8.4-12-12.2-4.667-3.8-9.1-6.567-13.3-8.3 7 7.8 10.933 12.566 11.8 14.3 1.3 2.6 4.1 10.2 7 12.2 2.9 2 10.1 7.8 11.2 8.6 1.1.9 1.6 8.9 1.1 10.4-1.8 2-15.3-4.6-17.3-5-2-.3-7.2-1.2-11.7-2.5-3.067-.8-10.5-7.8-22.3-21 2.733 8.866 5.333 14.9 7.8 18.1 3.6 4.8 6 12 9.2 12 4.5 0 3.8 9.2 1.7 10.9-2.2 1.8-18.3 1.4-24.7-1.5-4.7-2.1-24.5-46.5-19-48.2 7-2.3 11.8-1 14.2 1.3 1.533 1.533 3.133 3.1 4.8 4.7-6.867-19.067-8.367-28.834-4.5-29.3 4.466-.534 9.4-.934 14.8-1.2l1.5 4.7.5-4.2 3.2 1-3-3.3Z" }), (0, jsx_runtime_1.jsx)("path", { fill: "#515C5C", d: "M12.244 178.1c-2 2.533-2.367 5.566-1.1 9.1 2 5.2 5.4 15 7.7 18.8 2.3 3.9 9.2 16.4 10.8 18.5 1 1.466 2.4 3.066 4.2 4.8-2.867-.267-5.367-.9-7.5-1.9-4.1-1.8-16.2-25.1-19-38.5-1.3-6.3-1.5-8.9 0-9.7 2.533-1.334 4.166-1.7 4.9-1.1Zm21.6 51.2c4.666-3 7.6-5.134 8.8-6.4a99.173 99.173 0 0 1 5.2-5.4c2.666.266 4.333.9 5 1.9 1 1.5-.4 8.9-1.8 9.5-2.4 1.1-5.1 1.3-6.9 1.4-3.867.133-7.3-.2-10.3-1Zm1.4-33c.9 3 3.7 7.6 6.1 11.6 2.533 4.266 4.233 7.033 5.1 8.3-8.2-7-12.9-12.667-14.1-17-1.2-4.334-1.2-8.1 0-11.3.533.533 1.5 3.333 2.9 8.4Zm47.3 9.7c1.6 2.9 2.3 7.7 1 10.4-.8 1.866-6.534.2-17.2-5 1.6-1.334 3-3.134 4.2-5.4 3.2-5.7 3.2-5.7 3.5-6.6 4.533 2.533 7.366 4.733 8.5 6.6Zm-20-23.4c2.533 3.533 5.033 8.066 7.5 13.6-6.334-4-11-8.534-14-13.6-2.334-4.067-4-8.634-5-13.7 5.733 6.466 9.566 11.033 11.5 13.7Zm12 5.3c3.2-.734 6.433-2.034 9.7-3.9 4.266-2.4 7.266-4.4 9-6 1.8 2.666 2 5.9.6 9.7-1.4 3.5-11.3 7.2-16 3.7-2-1.467-3.1-2.634-3.3-3.5Z" }), (0, jsx_runtime_1.jsx)("path", { fill: "#DAE0DF", d: "M43.344 150.7c-.867-6.6.733-10.367 4.8-11.3 4-.867 8.133.566 12.4 4.3-4.534-1.2-7.9-1.634-10.1-1.3-2.134.333-4.5 3.1-7.1 8.3Zm-17.5 11c-.667 2-.334 7.833 1 17.5-5.2-12.4-6.467-19.4-3.8-21 3.2-1.934 6.8-1.934 10.8 0-4.667.333-7.334 1.5-8 3.5Zm-10.2 20.3c-1.134.533-2 2.5-2.6 5.9-1.667-5.8-1.334-8.7 1-8.7 3.666-.067 6.3 1.533 7.9 4.8-2.134-2.334-4.267-3-6.4-2h.1Z" })] }));
+}
+exports.AstronautSvg = AstronautSvg;

package/modal/views/Connected.d.ts

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

package/modal/views/Connected.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConnectedContent = exports.ConnectedHeader = void 0;
+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 utils_1 = require("../../utils");
+const Astronaut_1 = require("./Astronaut");
+const ConnectedHeader = ({ onBack }) => {
+    const activeWallet = (0, hooks_1.useActiveWallet)();
+    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 } }));
+};
+exports.ConnectedHeader = ConnectedHeader;
+const ConnectedContent = () => {
+    const activeWallet = (0, hooks_1.useActiveWallet)();
+    const walletManager = (0, hooks_1.useWalletManager)();
+    const account = (0, hooks_1.useAccount)(walletManager.chains[0].chainName, activeWallet?.option?.name);
+    const { close } = (0, provider_1.useWalletModal)();
+    if (!activeWallet) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(react_1.ConnectModalStatus, { wallet: (0, utils_1.getWalletInfo)(activeWallet), status: 'Connected', connectedInfo: {
+            name: account?.username || 'Wallet',
+            avatar: ((0, jsx_runtime_1.jsx)(Astronaut_1.AstronautSvg, { style: {
+                    fontSize: 'inherit',
+                    width: '100%',
+                    height: '100%',
+                } })),
+            address: account?.address,
+        }, onDisconnect: async () => {
+            await walletManager.disconnect(activeWallet?.option?.name);
+            close();
+        } }));
+};
+exports.ConnectedContent = ConnectedContent;

package/modal/views/Connecting.d.ts

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

package/modal/views/Connecting.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConnectingContent = exports.ConnectingHeader = void 0;
+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 ConnectingHeader = ({ onBack }) => {
+    const wallet = (0, hooks_1.useActiveWallet)();
+    const { close } = (0, provider_1.useWalletModal)();
+    const walletManager = (0, hooks_1.useWalletManager)();
+    if (!wallet)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(react_1.ConnectModalHead, { title: wallet.option.prettyName, hasBackButton: true, onClose: close, onBack: onBack, closeButtonProps: {
+            onClick: async () => {
+                await walletManager.disconnect(wallet.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'
+        ? `Approve ${prettyName} connection request on your mobile.`
+        : `Open the ${prettyName} browser extension to connect your wallet.`;
+    if (!activeWallet)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(react_1.ConnectModalStatus, { wallet: {
+            name: activeWallet.option.name,
+            prettyName: activeWallet.option.prettyName,
+            logo: activeWallet.option.logo,
+            mobileDisabled: true,
+        }, status: 'Connecting', contentHeader: title, contentDesc: desc }));
+};
+exports.ConnectingContent = ConnectingContent;

package/modal/views/Reject.d.ts

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

package/modal/views/Reject.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RejectContent = exports.RejectHeader = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@interchain-ui/react");
+const provider_1 = require("../provider");
+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 } }));
+};
+exports.RejectHeader = RejectHeader;
+const RejectContent = () => {
+    const activeWallet = (0, hooks_1.useActiveWallet)();
+    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) }));
+};
+exports.RejectContent = RejectContent;

package/modal/views/WalletList.d.ts

@@ -0,0 +1,2 @@
+export declare const WalletListHeader: () => import("react/jsx-runtime").JSX.Element;
+export declare const WalletListContent: () => import("react/jsx-runtime").JSX.Element;

package/modal/views/WalletList.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WalletListContent = exports.WalletListHeader = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@interchain-ui/react");
+const provider_1 = require("../provider");
+const hooks_1 = require("../../hooks");
+const WalletListHeader = () => {
+    const { close } = (0, provider_1.useWalletModal)();
+    return ((0, jsx_runtime_1.jsx)(react_1.ConnectModalHead, { title: "Select your wallet", hasBackButton: false, onClose: close, closeButtonProps: { onClick: close } }));
+};
+exports.WalletListHeader = WalletListHeader;
+const WalletListContent = () => {
+    const walletManager = (0, hooks_1.useWalletManager)();
+    const { close } = (0, provider_1.useWalletModal)();
+    const wallets = walletManager.wallets.map((w) => {
+        return ({
+            name: w.option.name,
+            prettyName: w.option.prettyName,
+            logo: w.option.logo,
+            mobileDisabled: true,
+            shape: 'list',
+            originalWallet: w
+        });
+    });
+    const onWalletClick = async (wallet) => {
+        try {
+            await walletManager.connect(wallet.option.name);
+            close();
+        }
+        catch (error) {
+            console.log(error);
+        }
+    };
+    return (0, jsx_runtime_1.jsx)(react_1.ConnectModalWalletList, { wallets: wallets, onWalletItemClick: onWalletClick });
+};
+exports.WalletListContent = WalletListContent;

package/modal/views/index.d.ts

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

package/modal/views/index.js

@@ -0,0 +1,20 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Connecting"), exports);
+__exportStar(require("./WalletList"), exports);
+__exportStar(require("./Connected"), exports);
+__exportStar(require("./Reject"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@interchain-kit/react",
-  "version": "0.0.1-beta.5",
+  "version": "0.0.1-beta.8",
   "author": "cosmology-tech <developers@cosmology.zone>",
   "description": "interchain-kit wallet connector react package",
   "main": "index.js",
@@ -32,11 +32,12 @@
   "keywords": [],
   "dependencies": {
     "@chain-registry/v2-types": "^0.49.6",
-    "@interchain-kit/core": "0.0.1-beta.5",
+    "@interchain-kit/core": "0.0.1-beta.8",
+    "@interchain-ui/react": "^1.23.31",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
-  "gitHead": "84a7448891bef2688645da8009605786267de720"
+  "gitHead": "398fe33fe2dd8eb23293a126cdbe5ee98f09dc67"
 }

package/utils/index.d.ts

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

package/utils/index.js

@@ -1 +1,12 @@
 "use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getWalletInfo = void 0;
+const getWalletInfo = (wallet) => {
+    return {
+        name: wallet.option.name,
+        prettyName: wallet.option.prettyName,
+        logo: wallet.option.logo,
+        mobileDisabled: true,
+    };
+};
+exports.getWalletInfo = getWalletInfo;

package/utils/wallet.d.ts

@@ -0,0 +1 @@
+export * from './wallet';

package/utils/wallet.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./wallet"), exports);