@interchain-kit/react 0.2.207 → 0.2.211

package/README.md

@@ -5,8 +5,8 @@
 </p>
 
 <p align="center" width="100%">
-  <a href="https://github.com/hyperweb-io/cosmos-kit/actions/workflows/run-tests.yml">
-    <img height="20" src="https://github.com/hyperweb-io/cosmos-kit/actions/workflows/run-tests.yml/badge.svg" />
+  <a href="https://github.com/hyperweb-io/interchain-kit/actions/workflows/unit-test.yaml">
+    <img height="20" src="https://github.com/hyperweb-io/interchain-kit/actions/workflows/unit-test.yaml/badge.svg" />
   </a>
   <a href="https://github.com/hyperweb-io/lib-count">
     <img height="20" src="https://img.shields.io/endpoint?url=https%3A%2F%2Fraw.githubusercontent.com%2Fhyperweb-io%2Flib-count%2Fmain%2Foutput%2Fbadges%2Fproducts%2Fcosmos-kit%2Ftotal.json"/>  

package/esm/hooks/useChainWallet.js

@@ -9,9 +9,9 @@ export const useChainWallet = (chainName, walletName) => {
     return {
         //for migration cosmos kit
         connect: async () => {
-            await connect(walletName, chainName);
             setCurrentWalletName(walletName);
             setCurrentChainName(chainName);
+            await connect(walletName, chainName);
             await getAccount(walletName, chainName);
         },
         disconnect: () => disconnect(walletName, chainName),
@@ -24,7 +24,7 @@ export const useChainWallet = (chainName, walletName) => {
         chain,
         assetList,
         address: chainWalletStateToShow?.account?.address,
-        wallet: new ChainWallet(wallet, () => connect(walletName, chainName), () => disconnect(walletName, chainName), () => getAccount(walletName, chainName)),
+        wallet: wallet ? new ChainWallet(wallet, () => connect(walletName, chainName), () => disconnect(walletName, chainName), () => getAccount(walletName, chainName)) : null,
         rpcEndpoint: chainWalletStateToShow?.rpcEndpoint,
         getSigningClient: () => getSigningClient(walletName, chainName),
     };

package/esm/modal/modal.js

@@ -1,108 +1,54 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ConnectedContent, ConnectedHeader, ConnectingContent, ConnectingHeader, NotExistContent, NotExistHeader, QRCodeContent, QRCodeHeader, RejectContent, RejectHeader, WalletListContent, WalletListHeader, } from "./views";
-import { useWalletModal } from "./provider";
-import { useChainWallet, useWalletManager } from "../hooks";
-import { useEffect, useMemo, useState } from "react";
-import { WalletState, WCWallet } from "@interchain-kit/core";
-import { ConnectModal } from "@interchain-ui/react";
-export const WalletModal = () => {
-    const [qrCode, setQRCode] = useState(null);
-    const { currentWalletName, currentChainName, wallets, connect, getAccount, setCurrentWalletName, } = useWalletManager();
-    const { modalIsOpen, open, close } = useWalletModal();
-    const [modalType, setModalType] = useState("wallet-list");
-    const [selectedWallet, setSelectedWallet] = useState(null);
-    const { chain, status, wallet } = useChainWallet(currentChainName, currentWalletName);
-    const handleConnect = async () => {
-        try {
-            if (wallet.originalWallet instanceof WCWallet) {
-                wallet.originalWallet.setOnPairingUriCreatedCallback((uri) => {
-                    setQRCode(uri);
-                });
-            }
-            await connect(selectedWallet?.info?.name, chain.chainName);
-            await getAccount(selectedWallet?.info?.name, chain.chainName);
-            setSelectedWallet(null);
+import { useMemo } from "react";
+import { ConnectModal, } from "@interchain-ui/react";
+export const WalletModal = ({ shouldShowList, isOpen, walletConnectQRCodeUri, wallets, username, address, currentWallet, isConnecting, isConnected, isRejected, isDisconnected, isNotExist, errorMessage, open, close, disconnect, onSelectWallet, onBack, onReconnect, getDownloadLink, getEnv, }) => {
+    const { header, content } = useMemo(() => {
+        if (shouldShowList || isDisconnected) {
+            return {
+                header: _jsx(WalletListHeader, { close: close }),
+                content: (_jsx(WalletListContent, { onSelectWallet: onSelectWallet, wallets: wallets })),
+            };
+        }
+        if (currentWallet &&
+            walletConnectQRCodeUri &&
+            currentWallet.info.name === "WalletConnect") {
+            return {
+                header: (_jsx(QRCodeHeader, { wallet: currentWallet, close: close, onBack: onBack })),
+                content: (_jsx(QRCodeContent, { walletConnectQRCodeUri: walletConnectQRCodeUri, errorMessage: errorMessage, onReconnect: onReconnect })),
+            };
         }
-        catch (error) {
-            console.error("Failed to connect wallet:", error);
+        if (currentWallet && isNotExist) {
+            return {
+                header: (_jsx(NotExistHeader, { wallet: currentWallet, close: close, onBack: onBack })),
+                content: (_jsx(NotExistContent, { wallet: currentWallet, getDownloadLink: getDownloadLink, getEnv: getEnv })),
+            };
         }
-    };
-    useEffect(() => {
-        if (selectedWallet && currentWalletName && currentChainName) {
-            handleConnect();
+        if (currentWallet && isRejected) {
+            return {
+                header: (_jsx(RejectHeader, { wallet: currentWallet, close: close, onBack: onBack })),
+                content: (_jsx(RejectContent, { wallet: currentWallet, onReconnect: onReconnect })),
+            };
         }
-    }, [selectedWallet]);
-    const handleSelectWallet = async (selectedWallet) => {
-        setSelectedWallet(selectedWallet);
-        setCurrentWalletName(selectedWallet?.info?.name);
-    };
-    useEffect(() => {
-        if (!selectedWallet) {
-            setModalType("wallet-list");
+        if (currentWallet && isConnected) {
+            return {
+                header: (_jsx(ConnectedHeader, { wallet: currentWallet, onBack: onBack, close: close })),
+                content: (_jsx(ConnectedContent, { wallet: currentWallet, username: username, address: address, disconnect: disconnect })),
+            };
         }
-        if (currentWalletName && currentChainName) {
-            if (status === WalletState.Connecting) {
-                setModalType("connecting");
-            }
-            if (status === WalletState.Connected) {
-                setModalType("connected");
-            }
-            if (status === WalletState.Rejected) {
-                setModalType("reject");
-            }
-            if (status === WalletState.Disconnected) {
-                setModalType("wallet-list");
-            }
-            if (qrCode) {
-                setModalType("qr-code");
-            }
+        if (currentWallet && isConnecting) {
+            return {
+                header: (_jsx(ConnectingHeader, { wallet: currentWallet, close: close, onBack: onBack })),
+                content: _jsx(ConnectingContent, { wallet: currentWallet }),
+            };
         }
     }, [
-        currentWalletName,
-        currentChainName,
-        status,
-        modalIsOpen,
-        selectedWallet,
-        qrCode,
+        currentWallet,
+        isConnected,
+        isConnecting,
+        address,
+        shouldShowList,
+        walletConnectQRCodeUri,
     ]);
-    const goBackList = () => setModalType("wallet-list");
-    const { header, content } = useMemo(() => {
-        switch (modalType) {
-            case "wallet-list":
-                return {
-                    header: _jsx(WalletListHeader, {}),
-                    content: _jsx(WalletListContent, { onSelectWallet: handleSelectWallet }),
-                };
-            case "connecting":
-                return {
-                    header: _jsx(ConnectingHeader, { wallet: wallet, onBack: goBackList }),
-                    content: _jsx(ConnectingContent, { wallet: wallet }),
-                };
-            case "connected":
-                return {
-                    header: _jsx(ConnectedHeader, { wallet: wallet, onBack: goBackList }),
-                    content: _jsx(ConnectedContent, { afterDisconnect: goBackList }),
-                };
-            case "reject":
-                return {
-                    header: _jsx(RejectHeader, { wallet: wallet, onBack: goBackList }),
-                    content: (_jsx(RejectContent, { wallet: wallet, onReconnect: () => {
-                            setModalType("connecting");
-                            wallet.connect(chain.chainId);
-                            wallet.getAccount(chain.chainId);
-                        } })),
-                };
-            case "not-exist":
-                return {
-                    header: _jsx(NotExistHeader, { wallet: wallet, onBack: goBackList }),
-                    content: _jsx(NotExistContent, { wallet: wallet }),
-                };
-            case "qr-code":
-                return {
-                    header: _jsx(QRCodeHeader, { onBack: goBackList }),
-                    content: _jsx(QRCodeContent, {}),
-                };
-        }
-    }, [modalType]);
-    return (_jsx(ConnectModal, { isOpen: modalIsOpen, header: header, onOpen: open, onClose: close, children: content }));
+    return (_jsx(ConnectModal, { isOpen: isOpen, header: header, onOpen: open, onClose: close, children: content }));
 };

package/esm/modal/provider.js

@@ -1,12 +1,40 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createContext, useContext, useState } from "react";
+import { createContext, useContext, useEffect, useState } from "react";
 import { WalletModal } from "./modal";
+import { WalletState } from "@interchain-kit/core";
+import { useChainWallet, useWalletManager } from "../hooks";
+import { transferToWalletUISchema } from "../utils";
 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, _jsx(WalletModal, {})] }));
+    const [walletNameToConnect, setWalletNameToConnect] = useState(null);
+    const { chains, wallets, setCurrentWalletName, currentChainName, currentWalletName, walletConnectQRCodeUri, getDownloadLink, getEnv, } = useWalletManager();
+    const { wallet, status, connect, disconnect, username, address, message } = useChainWallet(currentChainName || chains[0].chainName, currentWalletName);
+    const [shouldShowList, setShouldShowList] = useState(!(currentChainName && currentWalletName));
+    const walletsForUI = wallets.map(transferToWalletUISchema);
+    useEffect(() => {
+        if (walletNameToConnect) {
+            try {
+                connect();
+                setWalletNameToConnect(null);
+                setShouldShowList(false);
+            }
+            catch (error) {
+                console.error("Error connecting to wallet:", error);
+                throw error;
+            }
+        }
+    }, [walletNameToConnect]);
+    const handleCloseModal = () => {
+        close();
+        setShouldShowList(false);
+    };
+    return (_jsxs(WalletModalContext.Provider, { value: { modalIsOpen, open, close }, children: [children, _jsx(WalletModal, { shouldShowList: shouldShowList, username: username, address: address, disconnect: disconnect, isOpen: modalIsOpen, open: open, close: handleCloseModal, wallets: walletsForUI, walletConnectQRCodeUri: walletConnectQRCodeUri, currentWallet: wallet?.originalWallet, isConnecting: status === WalletState.Connecting, isConnected: status === WalletState.Connected, isRejected: status === WalletState.Rejected, isDisconnected: status === WalletState.Disconnected, isNotExist: status === WalletState.NotExist, errorMessage: message, onSelectWallet: (w) => {
+                    setWalletNameToConnect(w.info.name);
+                    setCurrentWalletName(w.info.name);
+                }, onBack: () => setShouldShowList(true), onReconnect: connect, getDownloadLink: () => getDownloadLink(wallet?.info.name), getEnv: getEnv })] }));
 };
 export const useWalletModal = () => {
     const context = useContext(WalletModalContext);

package/esm/modal/views/Connected.js

@@ -1,20 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ConnectModalHead, ConnectModalStatus } from "@interchain-ui/react";
-import { useChainWallet, useWalletManager } from "../../hooks";
-import { useWalletModal } from "../provider";
 import { getWalletInfo } from "../../utils";
 import { AstronautSvg } from "./Astronaut";
-export const ConnectedHeader = ({ wallet, onBack, }) => {
-    const { close } = useWalletModal();
+export const ConnectedHeader = ({ wallet, close, onBack, }) => {
     return (_jsx(ConnectModalHead, { title: wallet?.info?.prettyName || "", hasBackButton: true, onClose: close, onBack: onBack, closeButtonProps: { onClick: close } }));
 };
-export const ConnectedContent = ({ afterDisconnect, }) => {
-    const { currentChainName, currentWalletName } = useWalletManager();
-    const { address, username, wallet } = useChainWallet(currentChainName, currentWalletName);
-    const { close } = useWalletModal();
-    if (!wallet) {
-        return null;
-    }
+export const ConnectedContent = ({ address, username, wallet, disconnect, }) => {
     return (_jsx(ConnectModalStatus, { wallet: getWalletInfo(wallet), status: "Connected", connectedInfo: {
             name: username || "Wallet",
             avatar: (_jsx(AstronautSvg, { style: {
@@ -23,8 +14,5 @@ export const ConnectedContent = ({ afterDisconnect, }) => {
                     height: "100%",
                 } })),
             address: address,
-        }, onDisconnect: async () => {
-            await wallet.disconnect(currentChainName);
-            afterDisconnect();
-        } }));
+        }, onDisconnect: disconnect }));
 };

package/esm/modal/views/Connecting.js

@@ -1,8 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ConnectModalHead, ConnectModalStatus } from "@interchain-ui/react";
-import { useWalletModal } from "../provider";
-export const ConnectingHeader = ({ wallet, onBack, }) => {
-    const { close } = useWalletModal();
+export const ConnectingHeader = ({ wallet, close, onBack, }) => {
     return (_jsx(ConnectModalHead, { title: wallet.info.prettyName, hasBackButton: true, onClose: close, onBack: onBack, closeButtonProps: {
             onClick: close,
         } }));

package/esm/modal/views/NotExist.js

@@ -1,28 +1,24 @@
 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();
+export const NotExistHeader = ({ wallet, close, onBack, }) => {
     return (_jsx(ConnectModalHead, { title: wallet?.info?.prettyName || "", hasBackButton: true, onClose: close, onBack: onBack, closeButtonProps: { onClick: close } }));
 };
-export const NotExistContent = ({ wallet }) => {
-    const walletManager = useWalletManager();
+export const NotExistContent = ({ wallet, getDownloadLink, getEnv, }) => {
     const downloadLink = useMemo(() => {
-        return walletManager.getDownloadLink(wallet.info.name);
+        return getDownloadLink(wallet.info.name);
     }, [wallet?.info?.name]);
     const onInstall = () => {
         if (downloadLink) {
             window.open(downloadLink.link, "_blank");
         }
     };
-    const IconComp = getIcon(walletManager.getEnv());
+    const IconComp = getIcon(getEnv());
     return (_jsx(ConnectModalStatus, { status: "NotExist", wallet: {
             name: wallet?.info?.prettyName,
             logo: typeof wallet?.info?.logo === "string" ? wallet?.info?.logo : "",

package/esm/modal/views/QRCode.js

@@ -1,19 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ConnectModalHead, ConnectModalQRCode } from "@interchain-ui/react";
-import { useWalletManager } from "../../hooks";
-import { useWalletModal } from "../provider";
-export const QRCodeHeader = ({ onBack }) => {
-    const { currentChainName, currentWalletName, getWalletByName, disconnect } = useWalletManager();
-    const { close } = useWalletModal();
-    const currentWallet = getWalletByName(currentWalletName);
-    return (_jsx(ConnectModalHead, { title: currentWallet?.info?.prettyName || "", hasBackButton: true, onClose: () => void 0, onBack: async () => {
-            await disconnect(currentWallet?.info?.name || "", currentChainName);
-            onBack();
-        }, closeButtonProps: { onClick: close } }));
+export const QRCodeHeader = ({ wallet, close, onBack, }) => {
+    return (_jsx(ConnectModalHead, { title: wallet?.info?.prettyName || "", hasBackButton: true, onClose: () => void 0, onBack: onBack, closeButtonProps: { onClick: close } }));
 };
-export const QRCodeContent = () => {
-    const { currentChainName, currentWalletName, getWalletByName, connect } = useWalletManager();
-    const currentWallet = getWalletByName(currentWalletName);
-    const data = currentWallet.pairingUri;
-    return (_jsx(ConnectModalQRCode, { status: data ? "Done" : "Pending", link: data, description: "Open App to connect", errorTitle: "errorTitle", errorDesc: currentWallet.errorMessage || "", onRefresh: () => connect(currentWallet?.info?.name || "", currentChainName) }));
+export const QRCodeContent = ({ errorMessage, walletConnectQRCodeUri, onReconnect, }) => {
+    return (_jsx(ConnectModalQRCode, { status: walletConnectQRCodeUri ? "Done" : "Pending", link: walletConnectQRCodeUri, description: "Open App to connect", errorTitle: "errorTitle", errorDesc: errorMessage || "", onRefresh: onReconnect }));
 };

package/esm/modal/views/Reject.js

@@ -1,9 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ConnectModalHead, ConnectModalStatus } from "@interchain-ui/react";
-import { useWalletModal } from "../provider";
 import { getWalletInfo } from "../../utils";
-export const RejectHeader = ({ wallet, onBack, }) => {
-    const { close } = useWalletModal();
+export const RejectHeader = ({ wallet, close, onBack, }) => {
     return (_jsx(ConnectModalHead, { title: wallet?.info?.prettyName, hasBackButton: true, onClose: close, onBack: onBack, closeButtonProps: { onClick: close } }));
 };
 export const RejectContent = ({ wallet, onReconnect, }) => {

package/esm/modal/views/WalletList.js

@@ -1,40 +1,8 @@
 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();
+export const WalletListHeader = ({ close }) => {
     return (_jsx(ConnectModalHead, { title: "Select your wallet", hasBackButton: false, onClose: close, closeButtonProps: { onClick: close } }));
 };
-export const WalletListContent = ({ onSelectWallet, }) => {
-    const walletManager = useWalletManager();
-    const wallets = walletManager.wallets.map((w) => {
-        return {
-            name: w.info.name,
-            prettyName: w.info.prettyName,
-            logo: w.info.logo,
-            mobileDisabled: true,
-            shape: "list",
-            originalWallet: {
-                ...w,
-                pairing: null,
-            },
-        };
-    });
-    const wcWallet = walletManager.wallets.find((w) => w.info.mode === "wallet-connect");
-    if (wcWallet) {
-        const activePairings = wcWallet.getActivePairing();
-        activePairings.forEach((pairing) => {
-            wallets.push({
-                name: pairing?.peerMetadata?.name,
-                prettyName: pairing?.peerMetadata?.name,
-                logo: pairing?.peerMetadata?.icons?.[0],
-                mobileDisabled: true,
-                shape: "list",
-                originalWallet: { ...wcWallet, pairing },
-                subLogo: wcWallet.info.logo,
-            });
-        });
-    }
+export const WalletListContent = ({ wallets, onSelectWallet, }) => {
     return (_jsx(ConnectModalWalletList, { wallets: wallets, onWalletItemClick: onSelectWallet }));
 };

package/esm/store/chain-wallet.js

@@ -1,5 +1,8 @@
 import { BaseWallet } from "@interchain-kit/core";
 export class ChainWallet extends BaseWallet {
+    getProvider(chainId) {
+        return this.originalWallet.getProvider(chainId);
+    }
     originalWallet;
     connectWithState;
     disconnectWithState;
@@ -12,7 +15,7 @@ export class ChainWallet extends BaseWallet {
         this.getAccountWithState = getAccountWithState;
     }
     async init(meta) {
-        return this.originalWallet.init(meta);
+        return this.originalWallet.init();
     }
     async connect(chainId) {
         return this.connectWithState(chainId);
@@ -23,37 +26,10 @@ export class ChainWallet extends BaseWallet {
     async getAccount(chainId) {
         return this.getAccountWithState(chainId);
     }
-    async getAccounts(chainIds) {
-        return this.originalWallet.getAccounts(chainIds);
-    }
-    async getSimpleAccount(chainId) {
-        return this.originalWallet.getSimpleAccount(chainId);
-    }
-    getOfflineSigner(chainId) {
+    async getOfflineSigner(chainId) {
         return this.originalWallet.getOfflineSigner(chainId);
     }
-    getOfflineSignerAmino(chainId) {
-        return this.originalWallet.getOfflineSignerAmino(chainId);
-    }
-    getOfflineSignerDirect(chainId) {
-        return this.originalWallet.getOfflineSignerDirect(chainId);
-    }
-    async signAmino(chainId, signer, signDoc, signOptions) {
-        return this.originalWallet.signAmino(chainId, signer, signDoc, signOptions);
-    }
-    async signArbitrary(chainId, signer, data) {
-        return this.originalWallet.signArbitrary(chainId, signer, data);
-    }
-    async verifyArbitrary(chainId, signer, data) {
-        return this.originalWallet.verifyArbitrary(chainId, signer, data);
-    }
-    async signDirect(chainId, signer, signDoc, signOptions) {
-        return this.originalWallet.signDirect(chainId, signer, signDoc, signOptions);
-    }
-    async sendTx(chainId, tx, mode) {
-        return this.originalWallet.sendTx(chainId, tx, mode);
-    }
-    async addSuggestChain(chain, assetLists) {
-        return this.originalWallet.addSuggestChain(chain, assetLists);
+    async addSuggestChain(chainId) {
+        return this.originalWallet.addSuggestChain(chainId);
     }
 }