@interchain-kit/react 0.0.1-beta.3 → 0.0.1-beta.30

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 currentWallet = (0, hooks_1.useCurrentWallet)();
+    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.option.prettyName, hasBackButton: true, onClose: close, onBack: onBack, closeButtonProps: {
+            onClick: async () => {
+                await walletManager.disconnect(currentWallet.option.name);
+                close();
+            },
+        } }));
+};
+exports.ConnectingHeader = ConnectingHeader;
+const ConnectingContent = () => {
+    const currentWallet = (0, hooks_1.useCurrentWallet)();
+    const { option: { prettyName, mode }, } = currentWallet;
+    let title = "Requesting Connection";
+    let desc = mode === "wallet-connect"
+        ? `Approve ${prettyName} connection request on your mobile.`
+        : `Open the ${prettyName} browser extension to connect your wallet.`;
+    if (!currentWallet)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(react_1.ConnectModalStatus, { wallet: {
+            name: currentWallet.option.name,
+            prettyName: currentWallet.option.prettyName,
+            logo: currentWallet.option.logo,
+            mobileDisabled: true,
+        }, status: "Connecting", contentHeader: title, contentDesc: desc }));
+};
+exports.ConnectingContent = ConnectingContent;

package/modal/views/QRCode.d.ts

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

package/modal/views/QRCode.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QRCodeContent = exports.QRCodeHeader = 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 QRCodeHeader = ({ onBack }) => {
+    const currentWallet = (0, hooks_1.useCurrentWallet)();
+    const walletManager = (0, hooks_1.useWalletManager)();
+    const { close } = (0, provider_1.useWalletModal)();
+    return ((0, jsx_runtime_1.jsx)(react_1.ConnectModalHead, { title: currentWallet?.option?.prettyName || "", hasBackButton: true, onClose: () => void 0, onBack: async () => {
+            await walletManager.disconnect(currentWallet?.option?.name || "");
+            onBack();
+        }, closeButtonProps: { onClick: close } }));
+};
+exports.QRCodeHeader = QRCodeHeader;
+const QRCodeContent = () => {
+    const currentWallet = (0, hooks_1.useCurrentWallet)();
+    const walletManager = (0, hooks_1.useWalletManager)();
+    const data = currentWallet.pairingUri;
+    return ((0, jsx_runtime_1.jsx)(react_1.ConnectModalQRCode, { status: data ? "Done" : "Pending", link: data, description: "Open App to connect", errorTitle: "errorTitle", errorDesc: currentWallet.errorMessage || "", onRefresh: () => walletManager.connect(currentWallet?.option?.name || "") }));
+};
+exports.QRCodeContent = QRCodeContent;

package/modal/views/Reject.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 currentWallet = (0, hooks_1.useCurrentWallet)();
+    return ((0, jsx_runtime_1.jsx)(react_1.ConnectModalHead, { title: currentWallet.option.prettyName, hasBackButton: true, onClose: close, onBack: onBack, closeButtonProps: { onClick: close } }));
+};
+exports.RejectHeader = RejectHeader;
+const RejectContent = () => {
+    const currentWallet = (0, hooks_1.useCurrentWallet)();
+    const walletManager = (0, hooks_1.useWalletManager)();
+    const { close } = (0, provider_1.useWalletModal)();
+    return ((0, jsx_runtime_1.jsx)(react_1.ConnectModalStatus, { status: "Rejected", wallet: (0, utils_1.getWalletInfo)(currentWallet), contentHeader: "Request Rejected", contentDesc: currentWallet.errorMessage || "Connection permission is denied.", onConnect: () => walletManager.connect(currentWallet.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,5 @@
+export * from './Connecting';
+export * from './WalletList';
+export * from './Connected';
+export * from './Reject';
+export * from './QRCode';

package/modal/views/index.js

@@ -0,0 +1,21 @@
+"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);
+__exportStar(require("./QRCode"), exports);

package/package.json

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

package/provider.d.ts

@@ -1,10 +1,10 @@
-import React from 'react';
-import { BaseWallet, SignerOptions, WalletManager, EndpointOptions } from '@interChain-kit/core';
-import { AssetList, Chain } from '@chain-registry/v2-types';
+import React from "react";
+import { BaseWallet, SignerOptions, WalletManager, EndpointOptions } from "@interchain-kit/core";
+import { AssetList, Chain } from "@chain-registry/v2-types";
 type InterchainWalletContextType = {
     walletManager: WalletManager;
 };
-type InterchianWalletProviderProps = {
+type InterchainWalletProviderProps = {
     chains: Chain[];
     assetLists: AssetList[];
     wallets: BaseWallet[];
@@ -12,6 +12,6 @@ type InterchianWalletProviderProps = {
     endpointOptions: EndpointOptions;
     children: React.ReactNode;
 };
-export declare const ChainProvider: ({ chains, assetLists, wallets, signerOptions, endpointOptions, children }: InterchianWalletProviderProps) => import("react/jsx-runtime").JSX.Element;
-export declare const useInterChainWalletContext: () => InterchainWalletContextType;
+export declare const ChainProvider: ({ chains, assetLists, wallets, signerOptions, endpointOptions, children, }: InterchainWalletProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const useInterchainWalletContext: () => InterchainWalletContextType;
 export {};

package/provider.js

@@ -1,13 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useInterChainWalletContext = exports.ChainProvider = void 0;
+exports.useInterchainWalletContext = exports.ChainProvider = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("react");
-const core_1 = require("@interChain-kit/core");
+const core_1 = require("@interchain-kit/core");
 const modal_1 = require("./modal");
-const InterChainWalletContext = (0, react_2.createContext)(null);
-const ChainProvider = ({ chains, assetLists, wallets, signerOptions, endpointOptions, children }) => {
+const InterchainWalletContext = (0, react_2.createContext)(null);
+const ChainProvider = ({ chains, assetLists, wallets, signerOptions, endpointOptions, children, }) => {
     const [_, forceRender] = (0, react_1.useState)({});
     const walletManager = (0, react_1.useMemo)(() => {
         return new core_1.WalletManager(chains, assetLists, wallets, signerOptions, endpointOptions, () => forceRender({}));
@@ -15,14 +15,14 @@ const ChainProvider = ({ chains, assetLists, wallets, signerOptions, endpointOpt
     (0, react_1.useEffect)(() => {
         walletManager.init();
     }, []);
-    return ((0, jsx_runtime_1.jsx)(InterChainWalletContext.Provider, { value: { walletManager }, children: (0, jsx_runtime_1.jsx)(modal_1.WalletModalProvider, { children: children }) }));
+    return ((0, jsx_runtime_1.jsx)(InterchainWalletContext.Provider, { value: { walletManager }, children: (0, jsx_runtime_1.jsx)(modal_1.WalletModalProvider, { children: children }) }));
 };
 exports.ChainProvider = ChainProvider;
-const useInterChainWalletContext = () => {
-    const context = (0, react_2.useContext)(InterChainWalletContext);
+const useInterchainWalletContext = () => {
+    const context = (0, react_2.useContext)(InterchainWalletContext);
     if (!context) {
-        throw new Error('useInterChainWalletContext must be used within a InterChainProvider');
+        throw new Error("useInterChainWalletContext must be used within a InterChainProvider");
     }
     return context;
 };
-exports.useInterChainWalletContext = useInterChainWalletContext;
+exports.useInterchainWalletContext = useInterchainWalletContext;

package/types/chain.d.ts

@@ -1,22 +1,33 @@
-import { CosmWasmSigningClient } from 'interchainjs/cosmwasm-stargate';
-import { StargateClient } from '@cosmjs/stargate';
+import { HttpEndpoint } from '@interchainjs/types';
+import { CosmWasmSigningClient } from 'interchainjs/cosmwasm';
 import { SigningClient } from 'interchainjs/signing-client';
 import { RpcQuery } from 'interchainjs/query/rpc';
-import { StargateSigningClient } from 'interchainjs/stargate';
-import { HttpEndpoint } from '@cosmjs/stargate';
+import { CosmosSigningClient } from 'interchainjs/cosmos';
 import { Chain, AssetList } from '@chain-registry/v2-types';
-import { BaseWallet } from '@interChain-kit/core';
+import { BaseWallet, WalletState } from '@interchain-kit/core';
+export type CosmosKitUseChainReturnType = {
+    connect: () => void;
+    disconnect: () => void;
+    openView: () => void;
+    closeView: () => void;
+    getRpcEndpoint: () => Promise<string | HttpEndpoint>;
+    status: WalletState;
+    username: string;
+    message: string;
+    getSigningCosmWasmClient: () => Promise<CosmWasmSigningClient>;
+    getSigningCosmosClient: () => Promise<CosmosSigningClient>;
+};
 export type UseChainReturnType = {
+    logoUrl: string | undefined;
     chain: Chain;
     assetList: AssetList;
     address: string;
     wallet: BaseWallet;
     rpcEndpoint: string | HttpEndpoint;
-    client: RpcQuery;
+    queryClient: RpcQuery;
     signingClient: SigningClient;
-    stargateClient: StargateClient;
-    stargateSigningClient: StargateSigningClient;
-    cosmWasmSigningClient: CosmWasmSigningClient;
+    signingCosmosClient: CosmosSigningClient;
+    signingCosmWasmClient: CosmWasmSigningClient;
     isLoading: boolean;
     error: unknown;
 };

package/types/wallet.d.ts

@@ -1,4 +1,4 @@
-import { BaseWallet } from "@interChain-kit/core";
+import { BaseWallet } from "@interchain-kit/core";
 import { ConnectState } from "../enum";
 export type UseWalletReturnType = {
     wallet: BaseWallet;

package/utils/index.d.ts

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

package/utils/index.js

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

package/utils/wallet.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/wallet.js

@@ -0,0 +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/esm/hooks/useActiveWallet.js

@@ -1,5 +0,0 @@
-import { useWalletManager } from "./useWalletManager";
-export const useActiveWallet = () => {
-    const walletManager = useWalletManager();
-    return walletManager.getActiveWallet();
-};

package/hooks/useActiveWallet.d.ts

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

package/hooks/useActiveWallet.js

@@ -1,9 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useActiveWallet = void 0;
-const useWalletManager_1 = require("./useWalletManager");
-const useActiveWallet = () => {
-    const walletManager = (0, useWalletManager_1.useWalletManager)();
-    return walletManager.getActiveWallet();
-};
-exports.useActiveWallet = useActiveWallet;