@interchain-kit/react 0.0.1-beta.36 → 0.0.1-beta.37

package/esm/modal/modal.js

@@ -1,48 +1,67 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { ConnectModal } from "@interchain-ui/react";
-import { ConnectedContent, ConnectedHeader, ConnectingContent, ConnectingHeader, QRCodeContent, QRCodeHeader, RejectContent, RejectHeader, WalletListContent, WalletListHeader, } from "./views";
+import { ConnectedContent, ConnectedHeader, ConnectingContent, ConnectingHeader, NotExistContent, NotExistHeader, QRCodeContent, QRCodeHeader, RejectContent, RejectHeader, WalletListContent, WalletListHeader, } from "./views";
 import { useWalletModal } from "./provider";
-import { useCurrentWallet } from "../hooks";
-import { useEffect, useState } from "react";
+import { useCurrentWallet, useWalletManager } from "../hooks";
+import { useEffect, useMemo, useState } from "react";
 import { WalletState } from "@interchain-kit/core";
-const defaultModalView = {
-    header: _jsx(WalletListHeader, {}),
-    content: _jsx(WalletListContent, {}),
-};
+import { ConnectModal } from "@interchain-ui/react";
 export const WalletModal = () => {
     const { modalIsOpen, open, close } = useWalletModal();
     const currentWallet = useCurrentWallet();
+    const walletManager = useWalletManager();
+    const handleSelectWallet = async (wallet) => {
+        setModalView({
+            header: _jsx(ConnectingHeader, { wallet: wallet, onBack: gotoWalletList }),
+            content: _jsx(ConnectingContent, { wallet: wallet }),
+        });
+        if (wallet.info.mode === "extension" &&
+            !wallet.isExtensionInstalled) {
+            setModalView({
+                header: _jsx(NotExistHeader, { wallet: wallet, onBack: gotoWalletList }),
+                content: _jsx(NotExistContent, { wallet: wallet }),
+            });
+            return;
+        }
+        try {
+            if (wallet.info.mode === "wallet-connect") {
+                wallet.events.on("walletConnectQRCode", (uri) => {
+                    setModalView({
+                        header: _jsx(QRCodeHeader, { onBack: gotoWalletList }),
+                        content: _jsx(QRCodeContent, {}),
+                    });
+                });
+            }
+            await walletManager.connect(wallet?.info?.name);
+            setModalView({
+                header: _jsx(ConnectedHeader, { wallet: wallet, onBack: gotoWalletList }),
+                content: _jsx(ConnectedContent, { wallet: wallet }),
+            });
+        }
+        catch (error) {
+            setModalView({
+                header: _jsx(RejectHeader, { wallet: wallet, onBack: gotoWalletList }),
+                content: _jsx(RejectContent, { wallet: wallet }),
+            });
+        }
+    };
+    const defaultModalView = useMemo(() => {
+        return {
+            header: _jsx(WalletListHeader, {}),
+            content: _jsx(WalletListContent, { onSelectWallet: handleSelectWallet }),
+        };
+    }, []);
     const [modalView, setModalView] = useState(defaultModalView);
     const gotoWalletList = () => setModalView(defaultModalView);
     useEffect(() => {
-        switch (true) {
-            case currentWallet?.info?.mode === "wallet-connect":
-                setModalView({
-                    header: _jsx(QRCodeHeader, { onBack: gotoWalletList }),
-                    content: _jsx(QRCodeContent, {}),
-                });
-                break;
-            case currentWallet?.walletState === WalletState.Connecting:
-                setModalView({
-                    header: _jsx(ConnectingHeader, { onBack: gotoWalletList }),
-                    content: _jsx(ConnectingContent, {}),
-                });
-                break;
-            case currentWallet?.walletState === WalletState.Connected:
-                setModalView({
-                    header: _jsx(ConnectedHeader, { onBack: gotoWalletList }),
-                    content: _jsx(ConnectedContent, {}),
-                });
-                break;
-            case currentWallet?.walletState === WalletState.Rejected:
-                setModalView({
-                    header: _jsx(RejectHeader, { onBack: gotoWalletList }),
-                    content: _jsx(RejectContent, {}),
-                });
-                break;
-            default:
-                setModalView(defaultModalView);
+        if (modalIsOpen && currentWallet?.walletState === WalletState.Connected) {
+            setModalView({
+                header: _jsx(ConnectedHeader, { onBack: gotoWalletList }),
+                content: _jsx(ConnectedContent, {}),
+            });
+        }
+        else {
+            setModalView(defaultModalView);
         }
-    }, [currentWallet, currentWallet?.walletState]);
+    }, [modalIsOpen]);
     return (_jsx(ConnectModal, { isOpen: modalIsOpen, header: modalView.header, onOpen: open, onClose: close, children: modalView.content }));
 };

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 { useCurrentWallet, useWalletManager } from "../../hooks";
 import { useWalletModal } from "../provider";
-export const ConnectingHeader = ({ onBack }) => {
-    const currentWallet = useCurrentWallet();
+export const ConnectingHeader = ({ wallet, onBack, }) => {
     const { close } = useWalletModal();
-    const walletManager = useWalletManager();
-    if (!currentWallet)
-        return null;
-    return (_jsx(ConnectModalHead, { title: currentWallet.info.prettyName, hasBackButton: true, onClose: close, onBack: onBack, closeButtonProps: {
-            onClick: async () => {
-                await walletManager.disconnect(currentWallet.info.name);
-                close();
-            },
+    return (_jsx(ConnectModalHead, { title: wallet.info.prettyName, hasBackButton: true, onClose: close, onBack: onBack, closeButtonProps: {
+            onClick: close,
         } }));
 };
-export const ConnectingContent = () => {
-    const currentWallet = useCurrentWallet();
-    const { info: { prettyName, mode }, } = currentWallet;
+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 (!currentWallet)
+    if (!wallet)
         return null;
     return (_jsx(ConnectModalStatus, { wallet: {
-            name: currentWallet.info.name,
-            prettyName: currentWallet.info.prettyName,
-            logo: currentWallet.info.logo,
+            name: wallet.info.name,
+            prettyName: wallet.info.prettyName,
+            logo: wallet.info.logo,
             mobileDisabled: true,
         }, status: "Connecting", contentHeader: title, contentDesc: desc }));
 };

package/esm/modal/views/NotExist.js

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

package/esm/modal/views/Reject.js

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

package/esm/modal/views/WalletList.js

@@ -6,9 +6,8 @@ export const WalletListHeader = () => {
     const { close } = useWalletModal();
     return (_jsx(ConnectModalHead, { title: "Select your wallet", hasBackButton: false, onClose: close, closeButtonProps: { onClick: close } }));
 };
-export const WalletListContent = () => {
+export const WalletListContent = ({ onSelectWallet, }) => {
     const walletManager = useWalletManager();
-    const { close } = useWalletModal();
     const wallets = walletManager.wallets.map((w) => {
         return {
             name: w.info.name,
@@ -19,14 +18,5 @@ export const WalletListContent = () => {
             originalWallet: w,
         };
     });
-    const onWalletClick = async (wallet) => {
-        try {
-            await walletManager.connect(wallet.info.name);
-            close();
-        }
-        catch (error) {
-            console.log(error);
-        }
-    };
-    return (_jsx(ConnectModalWalletList, { wallets: wallets, onWalletItemClick: onWalletClick }));
+    return (_jsx(ConnectModalWalletList, { wallets: wallets, onWalletItemClick: onSelectWallet }));
 };

package/esm/modal/views/index.js

@@ -3,3 +3,4 @@ export * from './WalletList';
 export * from './Connected';
 export * from './Reject';
 export * from './QRCode';
+export * from './NotExist';

package/modal/modal.js

@@ -2,51 +2,70 @@
 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 react_2 = require("react");
+const react_1 = require("react");
 const core_1 = require("@interchain-kit/core");
-const defaultModalView = {
-    header: (0, jsx_runtime_1.jsx)(views_1.WalletListHeader, {}),
-    content: (0, jsx_runtime_1.jsx)(views_1.WalletListContent, {}),
-};
+const react_2 = require("@interchain-ui/react");
 const WalletModal = () => {
     const { modalIsOpen, open, close } = (0, provider_1.useWalletModal)();
     const currentWallet = (0, hooks_1.useCurrentWallet)();
-    const [modalView, setModalView] = (0, react_2.useState)(defaultModalView);
-    const gotoWalletList = () => setModalView(defaultModalView);
-    (0, react_2.useEffect)(() => {
-        switch (true) {
-            case currentWallet?.info?.mode === "wallet-connect":
-                setModalView({
-                    header: (0, jsx_runtime_1.jsx)(views_1.QRCodeHeader, { onBack: gotoWalletList }),
-                    content: (0, jsx_runtime_1.jsx)(views_1.QRCodeContent, {}),
-                });
-                break;
-            case currentWallet?.walletState === core_1.WalletState.Connecting:
-                setModalView({
-                    header: (0, jsx_runtime_1.jsx)(views_1.ConnectingHeader, { onBack: gotoWalletList }),
-                    content: (0, jsx_runtime_1.jsx)(views_1.ConnectingContent, {}),
-                });
-                break;
-            case currentWallet?.walletState === core_1.WalletState.Connected:
-                setModalView({
-                    header: (0, jsx_runtime_1.jsx)(views_1.ConnectedHeader, { onBack: gotoWalletList }),
-                    content: (0, jsx_runtime_1.jsx)(views_1.ConnectedContent, {}),
-                });
-                break;
-            case currentWallet?.walletState === core_1.WalletState.Rejected:
-                setModalView({
-                    header: (0, jsx_runtime_1.jsx)(views_1.RejectHeader, { onBack: gotoWalletList }),
-                    content: (0, jsx_runtime_1.jsx)(views_1.RejectContent, {}),
+    const walletManager = (0, hooks_1.useWalletManager)();
+    const handleSelectWallet = async (wallet) => {
+        setModalView({
+            header: (0, jsx_runtime_1.jsx)(views_1.ConnectingHeader, { wallet: wallet, onBack: gotoWalletList }),
+            content: (0, jsx_runtime_1.jsx)(views_1.ConnectingContent, { wallet: wallet }),
+        });
+        if (wallet.info.mode === "extension" &&
+            !wallet.isExtensionInstalled) {
+            setModalView({
+                header: (0, jsx_runtime_1.jsx)(views_1.NotExistHeader, { wallet: wallet, onBack: gotoWalletList }),
+                content: (0, jsx_runtime_1.jsx)(views_1.NotExistContent, { wallet: wallet }),
+            });
+            return;
+        }
+        try {
+            if (wallet.info.mode === "wallet-connect") {
+                wallet.events.on("walletConnectQRCode", (uri) => {
+                    setModalView({
+                        header: (0, jsx_runtime_1.jsx)(views_1.QRCodeHeader, { onBack: gotoWalletList }),
+                        content: (0, jsx_runtime_1.jsx)(views_1.QRCodeContent, {}),
+                    });
                 });
-                break;
-            default:
-                setModalView(defaultModalView);
+            }
+            await walletManager.connect(wallet?.info?.name);
+            setModalView({
+                header: (0, jsx_runtime_1.jsx)(views_1.ConnectedHeader, { wallet: wallet, onBack: gotoWalletList }),
+                content: (0, jsx_runtime_1.jsx)(views_1.ConnectedContent, { wallet: wallet }),
+            });
+        }
+        catch (error) {
+            setModalView({
+                header: (0, jsx_runtime_1.jsx)(views_1.RejectHeader, { wallet: wallet, onBack: gotoWalletList }),
+                content: (0, jsx_runtime_1.jsx)(views_1.RejectContent, { wallet: wallet }),
+            });
+        }
+    };
+    const defaultModalView = (0, react_1.useMemo)(() => {
+        return {
+            header: (0, jsx_runtime_1.jsx)(views_1.WalletListHeader, {}),
+            content: (0, jsx_runtime_1.jsx)(views_1.WalletListContent, { onSelectWallet: handleSelectWallet }),
+        };
+    }, []);
+    const [modalView, setModalView] = (0, react_1.useState)(defaultModalView);
+    const gotoWalletList = () => setModalView(defaultModalView);
+    (0, react_1.useEffect)(() => {
+        if (modalIsOpen && currentWallet?.walletState === core_1.WalletState.Connected) {
+            setModalView({
+                header: (0, jsx_runtime_1.jsx)(views_1.ConnectedHeader, { onBack: gotoWalletList }),
+                content: (0, jsx_runtime_1.jsx)(views_1.ConnectedContent, {}),
+            });
+        }
+        else {
+            setModalView(defaultModalView);
         }
-    }, [currentWallet, currentWallet?.walletState]);
-    return ((0, jsx_runtime_1.jsx)(react_1.ConnectModal, { isOpen: modalIsOpen, header: modalView.header, onOpen: open, onClose: close, children: modalView.content }));
+    }, [modalIsOpen]);
+    return ((0, jsx_runtime_1.jsx)(react_2.ConnectModal, { isOpen: modalIsOpen, header: modalView.header, onOpen: open, onClose: close, children: modalView.content }));
 };
 exports.WalletModal = WalletModal;

package/modal/views/Connecting.d.ts

@@ -1,4 +1,8 @@
-export declare const ConnectingHeader: ({ onBack }: {
+import { BaseWallet } from "@interchain-kit/core";
+export declare const ConnectingHeader: ({ wallet, onBack, }: {
+    wallet: BaseWallet;
     onBack: () => void;
 }) => import("react/jsx-runtime").JSX.Element;
-export declare const ConnectingContent: () => import("react/jsx-runtime").JSX.Element;
+export declare const ConnectingContent: ({ wallet }: {
+    wallet: BaseWallet;
+}) => import("react/jsx-runtime").JSX.Element;

package/modal/views/Connecting.js

@@ -3,35 +3,26 @@ 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 currentWallet = (0, hooks_1.useCurrentWallet)();
+const ConnectingHeader = ({ wallet, onBack, }) => {
     const { close } = (0, provider_1.useWalletModal)();
-    const walletManager = (0, hooks_1.useWalletManager)();
-    if (!currentWallet)
-        return null;
-    return ((0, jsx_runtime_1.jsx)(react_1.ConnectModalHead, { title: currentWallet.info.prettyName, hasBackButton: true, onClose: close, onBack: onBack, closeButtonProps: {
-            onClick: async () => {
-                await walletManager.disconnect(currentWallet.info.name);
-                close();
-            },
+    return ((0, jsx_runtime_1.jsx)(react_1.ConnectModalHead, { title: wallet.info.prettyName, hasBackButton: true, onClose: close, onBack: onBack, closeButtonProps: {
+            onClick: close,
         } }));
 };
 exports.ConnectingHeader = ConnectingHeader;
-const ConnectingContent = () => {
-    const currentWallet = (0, hooks_1.useCurrentWallet)();
-    const { info: { prettyName, mode }, } = currentWallet;
+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 (!currentWallet)
+    if (!wallet)
         return null;
     return ((0, jsx_runtime_1.jsx)(react_1.ConnectModalStatus, { wallet: {
-            name: currentWallet.info.name,
-            prettyName: currentWallet.info.prettyName,
-            logo: currentWallet.info.logo,
+            name: wallet.info.name,
+            prettyName: wallet.info.prettyName,
+            logo: wallet.info.logo,
             mobileDisabled: true,
         }, status: "Connecting", contentHeader: title, contentDesc: desc }));
 };

package/modal/views/NotExist.d.ts

@@ -0,0 +1,8 @@
+import { BaseWallet } from "@interchain-kit/core";
+export declare const NotExistHeader: ({ wallet, onBack, }: {
+    wallet: BaseWallet;
+    onBack: () => void;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const NotExistContent: ({ wallet }: {
+    wallet: BaseWallet;
+}) => import("react/jsx-runtime").JSX.Element;

package/modal/views/NotExist.js

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

package/modal/views/Reject.d.ts

@@ -1,4 +1,8 @@
-export declare const RejectHeader: ({ onBack }: {
+import { BaseWallet } from "@interchain-kit/core";
+export declare const RejectHeader: ({ wallet, onBack, }: {
+    wallet: BaseWallet;
     onBack: () => void;
 }) => import("react/jsx-runtime").JSX.Element;
-export declare const RejectContent: () => import("react/jsx-runtime").JSX.Element;
+export declare const RejectContent: ({ wallet }: {
+    wallet: BaseWallet;
+}) => import("react/jsx-runtime").JSX.Element;

package/modal/views/Reject.js

@@ -6,16 +6,14 @@ 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 RejectHeader = ({ wallet, onBack, }) => {
     const { close } = (0, provider_1.useWalletModal)();
-    const currentWallet = (0, hooks_1.useCurrentWallet)();
-    return ((0, jsx_runtime_1.jsx)(react_1.ConnectModalHead, { title: currentWallet.info.prettyName, hasBackButton: true, onClose: close, onBack: onBack, closeButtonProps: { onClick: close } }));
+    return ((0, jsx_runtime_1.jsx)(react_1.ConnectModalHead, { title: wallet.info.prettyName, hasBackButton: true, onClose: close, onBack: onBack, closeButtonProps: { onClick: close } }));
 };
 exports.RejectHeader = RejectHeader;
-const RejectContent = () => {
-    const currentWallet = (0, hooks_1.useCurrentWallet)();
+const RejectContent = ({ wallet }) => {
     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)(currentWallet), contentHeader: "Request Rejected", contentDesc: currentWallet.errorMessage || "Connection permission is denied.", onConnect: () => walletManager.connect(currentWallet.info.name).then(close) }));
+    return ((0, jsx_runtime_1.jsx)(react_1.ConnectModalStatus, { status: "Rejected", wallet: (0, utils_1.getWalletInfo)(wallet), contentHeader: "Request Rejected", contentDesc: wallet.errorMessage || "Connection permission is denied.", onConnect: () => walletManager.connect(wallet.info.name).then(close) }));
 };
 exports.RejectContent = RejectContent;

package/modal/views/WalletList.d.ts

@@ -1,2 +1,5 @@
+import { BaseWallet } from "@interchain-kit/core";
 export declare const WalletListHeader: () => import("react/jsx-runtime").JSX.Element;
-export declare const WalletListContent: () => import("react/jsx-runtime").JSX.Element;
+export declare const WalletListContent: ({ onSelectWallet, }: {
+    onSelectWallet: (wallet: BaseWallet) => void;
+}) => import("react/jsx-runtime").JSX.Element;

package/modal/views/WalletList.js

@@ -10,9 +10,8 @@ const WalletListHeader = () => {
     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 WalletListContent = ({ onSelectWallet, }) => {
     const walletManager = (0, hooks_1.useWalletManager)();
-    const { close } = (0, provider_1.useWalletModal)();
     const wallets = walletManager.wallets.map((w) => {
         return {
             name: w.info.name,
@@ -23,15 +22,6 @@ const WalletListContent = () => {
             originalWallet: w,
         };
     });
-    const onWalletClick = async (wallet) => {
-        try {
-            await walletManager.connect(wallet.info.name);
-            close();
-        }
-        catch (error) {
-            console.log(error);
-        }
-    };
-    return ((0, jsx_runtime_1.jsx)(react_1.ConnectModalWalletList, { wallets: wallets, onWalletItemClick: onWalletClick }));
+    return ((0, jsx_runtime_1.jsx)(react_1.ConnectModalWalletList, { wallets: wallets, onWalletItemClick: onSelectWallet }));
 };
 exports.WalletListContent = WalletListContent;

package/modal/views/index.d.ts

@@ -3,3 +3,4 @@ export * from './WalletList';
 export * from './Connected';
 export * from './Reject';
 export * from './QRCode';
+export * from './NotExist';

package/modal/views/index.js

@@ -19,3 +19,4 @@ __exportStar(require("./WalletList"), exports);
 __exportStar(require("./Connected"), exports);
 __exportStar(require("./Reject"), exports);
 __exportStar(require("./QRCode"), exports);
+__exportStar(require("./NotExist"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@interchain-kit/react",
-  "version": "0.0.1-beta.36",
+  "version": "0.0.1-beta.37",
   "author": "cosmology-tech <developers@cosmology.zone>",
   "description": "interchain-kit wallet connector react package",
   "main": "index.js",
@@ -33,15 +33,16 @@
   "keywords": [],
   "dependencies": {
     "@chain-registry/v2-types": "^0.53.0",
-    "@interchain-kit/core": "0.0.1-beta.36",
+    "@interchain-kit/core": "0.0.1-beta.37",
     "@interchain-ui/react": "1.24.0",
     "@interchainjs/cosmos": "^0.0.1-beta.34",
     "@interchainjs/cosmos-types": "0.0.1-beta.17",
+    "@react-icons/all-files": "^4.1.0",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "interchainjs": "0.0.1-beta.27",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
-  "gitHead": "a9cc01ebfe784e8ce6166bf7053e0206e0ab6eb6"
+  "gitHead": "e37d5d9a81691eaf7296d7813e291008274ea12c"
 }