@interchain-kit/react 0.0.1-beta.26 → 0.0.1-beta.28

package/README.md

@@ -106,7 +106,7 @@ console.log(balance)
 
 ```
 
-## useChainWallet
+### useChainWallet
 ```js
 import { keplrWallet } from "@interchain-kit/keplr-extension";
 import { leapWallet } from "@interchain-kit/leap-extension";

package/esm/hooks/useAccount.js

@@ -1,11 +1,15 @@
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { WalletState } from "@interchain-kit/core";
 import { useWalletManager } from './useWalletManager';
 export const useAccount = (chainName, walletName) => {
     const walletManager = useWalletManager();
-    const wallet = walletManager.wallets.find(w => w.option.name === walletName);
+    const wallet = useMemo(() => {
+        return walletManager.wallets.find(w => w.option.name === walletName);
+    }, [walletManager, walletName]);
     const [account, setAccount] = useState(null);
-    const chain = walletManager.chains.find(c => c.chainName === chainName);
+    const chain = useMemo(() => {
+        return walletManager.chains.find(c => c.chainName === chainName);
+    }, [walletManager, chainName]);
     const getAccount = async () => {
         if (wallet && chain) {
             if (wallet.walletState === WalletState.Connected) {
@@ -16,6 +20,9 @@ export const useAccount = (chainName, walletName) => {
                 setAccount(null);
             }
         }
+        if (!wallet) {
+            setAccount(null);
+        }
     };
     useEffect(() => {
         if (wallet) {

package/esm/hooks/useChain.js

@@ -4,7 +4,7 @@ import { useCurrentWallet } from './useCurrentWallet';
 import { useInterchainClient } from './useInterchainClient';
 import { useWalletModal } from "../modal";
 import { ChainNameNotExist } from "@interchain-kit/core";
-import { getChainLogoUrl } from "../utils";
+import { useCallback } from "react";
 export const useChain = (chainName) => {
     const walletManager = useWalletManager();
     const chainToShow = walletManager.chains.find((c) => c.chainName === chainName);
@@ -16,6 +16,12 @@ export const useChain = (chainName) => {
         throw new ChainNameNotExist(chainName);
     }
     const { open, close } = useWalletModal();
+    const getRpcEndpoint = useCallback(async () => {
+        return await walletManager.getRpcEndpoint(currentWallet, chainName);
+    }, [walletManager, currentWallet, chainName]);
+    const disconnect = useCallback(() => {
+        walletManager.disconnect(currentWallet?.option?.name);
+    }, [walletManager, currentWallet]);
     const cosmosKitUserChainReturnType = {
         connect: () => {
             if (currentWallet) {
@@ -23,9 +29,10 @@ export const useChain = (chainName) => {
             }
             open();
         },
+        disconnect,
         openView: open,
         closeView: close,
-        getRpcEndpoint: () => walletManager.getRpcEndpoint(currentWallet, chainName),
+        getRpcEndpoint,
         status: currentWallet?.walletState,
         username: account?.username,
         message: currentWallet?.errorMessage,
@@ -33,7 +40,7 @@ export const useChain = (chainName) => {
         getSigningCosmosClient: () => walletManager.getSigningCosmosClient(currentWallet.option.name, chainName),
     };
     return {
-        logoUrl: getChainLogoUrl(assetList),
+        logoUrl: walletManager.getChainLogoUrl(chainName),
         chain: chainToShow,
         assetList,
         address: account?.address,

package/esm/hooks/useChainWallet.js

@@ -1,7 +1,6 @@
 import { useWalletManager } from "./useWalletManager";
 import { useAccount } from "./useAccount";
 import { useInterchainClient } from "./useInterchainClient";
-import { getChainLogoUrl } from "../utils";
 export const useChainWallet = (chainName, walletName) => {
     const walletManager = useWalletManager();
     const chainToShow = walletManager.chains.find((c) => c.chainName === chainName);
@@ -10,7 +9,7 @@ export const useChainWallet = (chainName, walletName) => {
     const account = useAccount(chainName, walletName);
     const interchainClient = useInterchainClient(chainName, walletName);
     return {
-        logoUrl: getChainLogoUrl(assetList),
+        logoUrl: walletManager.getChainLogoUrl(chainName),
         chain: chainToShow,
         assetList,
         address: account?.address,

package/esm/provider.js

@@ -3,7 +3,6 @@ import { useEffect, useMemo, useState } from "react";
 import { createContext, useContext } from "react";
 import { WalletManager, } from "@interchain-kit/core";
 import { WalletModalProvider } from "./modal";
-import "@interchain-ui/react/styles";
 const InterchainWalletContext = createContext(null);
 export const ChainProvider = ({ chains, assetLists, wallets, signerOptions, endpointOptions, children, }) => {
     const [_, forceRender] = useState({});

package/esm/utils/index.js

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

package/hooks/useAccount.js

@@ -6,9 +6,13 @@ const core_1 = require("@interchain-kit/core");
 const useWalletManager_1 = require("./useWalletManager");
 const useAccount = (chainName, walletName) => {
     const walletManager = (0, useWalletManager_1.useWalletManager)();
-    const wallet = walletManager.wallets.find(w => w.option.name === walletName);
+    const wallet = (0, react_1.useMemo)(() => {
+        return walletManager.wallets.find(w => w.option.name === walletName);
+    }, [walletManager, walletName]);
     const [account, setAccount] = (0, react_1.useState)(null);
-    const chain = walletManager.chains.find(c => c.chainName === chainName);
+    const chain = (0, react_1.useMemo)(() => {
+        return walletManager.chains.find(c => c.chainName === chainName);
+    }, [walletManager, chainName]);
     const getAccount = async () => {
         if (wallet && chain) {
             if (wallet.walletState === core_1.WalletState.Connected) {
@@ -19,6 +23,9 @@ const useAccount = (chainName, walletName) => {
                 setAccount(null);
             }
         }
+        if (!wallet) {
+            setAccount(null);
+        }
     };
     (0, react_1.useEffect)(() => {
         if (wallet) {

package/hooks/useChain.js

@@ -7,7 +7,7 @@ const useCurrentWallet_1 = require("./useCurrentWallet");
 const useInterchainClient_1 = require("./useInterchainClient");
 const modal_1 = require("../modal");
 const core_1 = require("@interchain-kit/core");
-const utils_1 = require("../utils");
+const react_1 = require("react");
 const useChain = (chainName) => {
     const walletManager = (0, useWalletManager_1.useWalletManager)();
     const chainToShow = walletManager.chains.find((c) => c.chainName === chainName);
@@ -19,6 +19,12 @@ const useChain = (chainName) => {
         throw new core_1.ChainNameNotExist(chainName);
     }
     const { open, close } = (0, modal_1.useWalletModal)();
+    const getRpcEndpoint = (0, react_1.useCallback)(async () => {
+        return await walletManager.getRpcEndpoint(currentWallet, chainName);
+    }, [walletManager, currentWallet, chainName]);
+    const disconnect = (0, react_1.useCallback)(() => {
+        walletManager.disconnect(currentWallet?.option?.name);
+    }, [walletManager, currentWallet]);
     const cosmosKitUserChainReturnType = {
         connect: () => {
             if (currentWallet) {
@@ -26,9 +32,10 @@ const useChain = (chainName) => {
             }
             open();
         },
+        disconnect,
         openView: open,
         closeView: close,
-        getRpcEndpoint: () => walletManager.getRpcEndpoint(currentWallet, chainName),
+        getRpcEndpoint,
         status: currentWallet?.walletState,
         username: account?.username,
         message: currentWallet?.errorMessage,
@@ -36,7 +43,7 @@ const useChain = (chainName) => {
         getSigningCosmosClient: () => walletManager.getSigningCosmosClient(currentWallet.option.name, chainName),
     };
     return {
-        logoUrl: (0, utils_1.getChainLogoUrl)(assetList),
+        logoUrl: walletManager.getChainLogoUrl(chainName),
         chain: chainToShow,
         assetList,
         address: account?.address,

package/hooks/useChainWallet.js

@@ -4,7 +4,6 @@ exports.useChainWallet = void 0;
 const useWalletManager_1 = require("./useWalletManager");
 const useAccount_1 = require("./useAccount");
 const useInterchainClient_1 = require("./useInterchainClient");
-const utils_1 = require("../utils");
 const useChainWallet = (chainName, walletName) => {
     const walletManager = (0, useWalletManager_1.useWalletManager)();
     const chainToShow = walletManager.chains.find((c) => c.chainName === chainName);
@@ -13,7 +12,7 @@ const useChainWallet = (chainName, walletName) => {
     const account = (0, useAccount_1.useAccount)(chainName, walletName);
     const interchainClient = (0, useInterchainClient_1.useInterchainClient)(chainName, walletName);
     return {
-        logoUrl: (0, utils_1.getChainLogoUrl)(assetList),
+        logoUrl: walletManager.getChainLogoUrl(chainName),
         chain: chainToShow,
         assetList,
         address: account?.address,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@interchain-kit/react",
-  "version": "0.0.1-beta.26",
+  "version": "0.0.1-beta.28",
   "author": "cosmology-tech <developers@cosmology.zone>",
   "description": "interchain-kit wallet connector react package",
   "main": "index.js",
@@ -32,8 +32,8 @@
   },
   "keywords": [],
   "dependencies": {
-    "@chain-registry/v2-types": "^0.49.6",
-    "@interchain-kit/core": "0.0.1-beta.26",
+    "@chain-registry/v2-types": "^0.53.0",
+    "@interchain-kit/core": "0.0.1-beta.28",
     "@interchain-ui/react": "1.24.0",
     "@interchainjs/cosmos-types": "0.0.1-beta.9",
     "@interchainjs/injective": "0.0.1-beta.13",
@@ -43,5 +43,5 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
-  "gitHead": "3f531ca46617882f4c3c8f0ea431155223236570"
+  "gitHead": "f360ae081a1155e7457a951ae10a598d38e3e383"
 }

package/provider.d.ts

@@ -1,7 +1,6 @@
 import React from "react";
 import { BaseWallet, SignerOptions, WalletManager, EndpointOptions } from "@interchain-kit/core";
 import { AssetList, Chain } from "@chain-registry/v2-types";
-import "@interchain-ui/react/styles";
 type InterchainWalletContextType = {
     walletManager: WalletManager;
 };

package/provider.js

@@ -6,7 +6,6 @@ const react_1 = require("react");
 const react_2 = require("react");
 const core_1 = require("@interchain-kit/core");
 const modal_1 = require("./modal");
-require("@interchain-ui/react/styles");
 const InterchainWalletContext = (0, react_2.createContext)(null);
 const ChainProvider = ({ chains, assetLists, wallets, signerOptions, endpointOptions, children, }) => {
     const [_, forceRender] = (0, react_1.useState)({});

package/types/chain.d.ts

@@ -7,6 +7,7 @@ import { Chain, AssetList } from '@chain-registry/v2-types';
 import { BaseWallet, WalletState } from '@interchain-kit/core';
 export type CosmosKitUseChainReturnType = {
     connect: () => void;
+    disconnect: () => void;
     openView: () => void;
     closeView: () => void;
     getRpcEndpoint: () => Promise<string | HttpEndpoint>;

package/utils/index.d.ts

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

package/utils/index.js

@@ -15,4 +15,3 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./wallet"), exports);
-__exportStar(require("./chain"), exports);

package/esm/utils/chain.js

@@ -1,3 +0,0 @@
-export const getChainLogoUrl = (assetList) => {
-    return assetList.assets?.[0].logoURIs.png || assetList.assets?.[0].logoURIs.svg || undefined;
-};

package/utils/chain.d.ts

@@ -1,2 +0,0 @@
-import { AssetList } from "@chain-registry/v2-types";
-export declare const getChainLogoUrl: (assetList: AssetList) => string | undefined;

package/utils/chain.js

@@ -1,7 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getChainLogoUrl = void 0;
-const getChainLogoUrl = (assetList) => {
-    return assetList.assets?.[0].logoURIs.png || assetList.assets?.[0].logoURIs.svg || undefined;
-};
-exports.getChainLogoUrl = getChainLogoUrl;