@interchain-kit/react 0.0.1-beta.62 → 0.0.1-beta.64

package/LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2024 Cosmology Developers <developers@cosmology.zone>
+Copyright (c) 2024 Cosmology Developers <developers@hyperweb.io>
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,6 +1,22 @@
-<p align="center">
-  <img src="https://user-images.githubusercontent.com/545047/188804067-28e67e5e-0214-4449-ab04-2e0c564a6885.svg" width="80"><br />
-    @interchain-kit/react
+# @interchain-kit/react
+
+<p align="center" width="100%">
+    <img height="90" src="https://user-images.githubusercontent.com/545047/190171432-5526db8f-9952-45ce-a745-bea4302f912b.svg" />
+</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>
+  <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"/>  
+  </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%2Fmonthly.json"/>  
+  </a>
+  <br />
+   <a href="https://github.com/hyperweb-io/cosmos-kit/blob/main/LICENSE"><img height="20" src="https://img.shields.io/badge/license-BSD%203--Clause%20Clear-blue.svg"></a>
+   <a href="https://www.npmjs.com/package/cosmos-kit"><img height="20" src="https://img.shields.io/github/package-json/v/hyperweb-io/cosmos-kit?filename=packages%2Fcosmos-kit%2Fpackage.json"></a>
 </p>
 
 ## Install
@@ -89,21 +105,13 @@ export default App;
 ```js
 
 const chainName = 'cosmoshub'
-const { chain, assetList, address, wallet, queryClient, signingClient } = useChain(chainName)
+const { chain, assetList, address, wallet } = useChain(chainName)
 
 console.log(wallet) //keprl extension wallet info
 console.log(chain) // chain info for cosmoshub
 console.log(assetList) // assets info for cosmoshub
 console.log(address) // address for cosmoshub in keplr-extension wallet
 
-//query
-const { balance } = await queryClient.balance({
-  address,
-  denom: 'uosmo'
-})
-console.log(balance)
-// { amount: 23423, denom: 'uosmos' }
-
 ```
 
 ### useChainWallet
@@ -141,36 +149,21 @@ function App() {
 export default App;
 ```
 
-### useCurrentWallet
-```js
-const wallet = useCurrentWallet()
-
-console.log(wallet) // current connected wallet
-
-```
+### useChains
 
-### useAccount
 ```js
-const account = useAccount('cosmoshub', 'keplr-extension')
-
-console.log(account.address) // cosmoshub address in keplr-extension wallet
-
+WIP
 ```
-
-### useOfflineSigner
+### use wallet methods
 ```js
-const offlineSigner = useOfflineSigner('cosmoshub', 'keplr-extension')
-
-console.log(offlineSigner) // cosmoshub offlineSigner in keplr-extension wallet 
-```
+const { wallet } = useChain('osmosis')
 
-### useChains
+//use method from wallet that you select
+await wallet.signAmino(chainId, signAddress, stdDoc)
+await wallet.verifyArbitrary(chainId, signAddress, stdDoc)
 
-```js
-WIP
 ```
 
-
 ## Developing
 
 When first cloning the repo:
@@ -186,25 +179,28 @@ Or if you want to make your dev process smoother, you can run:
 ```sh
 yarn
 # build the dev packages with .map files, this enables navigation from references to their source code between packages.
-yarn build:dev
+yarn watch:dev
 ```
 
-## Related
+## Interchain JavaScript Stack 
 
-Checkout these related projects:
+A unified toolkit for building applications and smart contracts in the Interchain ecosystem ⚛️
 
-* [@cosmology/telescope](https://github.com/cosmology-tech/telescope) Your Frontend Companion for Building with TypeScript with Cosmos SDK Modules.
-* [@cosmwasm/ts-codegen](https://github.com/CosmWasm/ts-codegen) Convert your CosmWasm smart contracts into dev-friendly TypeScript classes.
-* [chain-registry](https://github.com/cosmology-tech/chain-registry) Everything from token symbols, logos, and IBC denominations for all assets you want to support in your application.
-* [cosmos-kit](https://github.com/cosmology-tech/cosmos-kit) Experience the convenience of connecting with a variety of web3 wallets through a single, streamlined interface.
-* [create-cosmos-app](https://github.com/cosmology-tech/create-cosmos-app) Set up a modern Cosmos app by running one command.
-* [interchain-ui](https://github.com/cosmology-tech/interchain-ui) The Interchain Design System, empowering developers with a flexible, easy-to-use UI kit.
-* [starship](https://github.com/cosmology-tech/starship) Unified Testing and Development for the Interchain.
+| Category              | Tools                                                                                                                  | Description                                                                                           |
+|----------------------|------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------|
+| **Chain Information**   | [**Chain Registry**](https://github.com/hyperweb-io/chain-registry), [**Utils**](https://www.npmjs.com/package/@chain-registry/utils), [**Client**](https://www.npmjs.com/package/@chain-registry/client) | Everything from token symbols, logos, and IBC denominations for all assets you want to support in your application. |
+| **Wallet Connectors**| [**Interchain Kit**](https://github.com/hyperweb-io/interchain-kit)<sup>beta</sup>, [**Cosmos Kit**](https://github.com/hyperweb-io/cosmos-kit) | Experience the convenience of connecting with a variety of web3 wallets through a single, streamlined interface. |
+| **Signing Clients**          | [**InterchainJS**](https://github.com/hyperweb-io/interchainjs)<sup>beta</sup>, [**CosmJS**](https://github.com/cosmos/cosmjs) | A single, universal signing interface for any network |
+| **SDK Clients**              | [**Telescope**](https://github.com/hyperweb-io/telescope)                                                          | Your Frontend Companion for Building with TypeScript with Cosmos SDK Modules. |
+| **Starter Kits**     | [**Create Interchain App**](https://github.com/hyperweb-io/create-interchain-app)<sup>beta</sup>, [**Create Cosmos App**](https://github.com/hyperweb-io/create-cosmos-app) | Set up a modern Interchain app by running one command. |
+| **UI Kits**          | [**Interchain UI**](https://github.com/hyperweb-io/interchain-ui)                                                   | The Interchain Design System, empowering developers with a flexible, easy-to-use UI kit. |
+| **Testing Frameworks**          | [**Starship**](https://github.com/hyperweb-io/starship)                                                             | Unified Testing and Development for the Interchain. |
+| **TypeScript Smart Contracts** | [**Create Hyperweb App**](https://github.com/hyperweb-io/create-hyperweb-app)                              | Build and deploy full-stack blockchain applications with TypeScript |
+| **CosmWasm Contracts** | [**CosmWasm TS Codegen**](https://github.com/CosmWasm/ts-codegen)                                                   | Convert your CosmWasm smart contracts into dev-friendly TypeScript classes. |
 
 ## Credits
 
-🛠 Built by Cosmology — if you like our tools, please consider delegating to [our validator ⚛️](https://cosmology.zone/validator)
-
+🛠 Built by Hyperweb (formerly Cosmology) — if you like our tools, please checkout and contribute to [our github ⚛️](https://github.com/hyperweb-io)
 
 ## Disclaimer
 

package/esm/hooks/useChain.js

@@ -12,7 +12,6 @@ export const useChain = (chainName) => {
     const wallet = getWalletByName(currentWalletName);
     const chainWalletStateToShow = getChainWalletState(currentWalletName, chainName);
     const { open, close } = useWalletModal();
-    console.log({ chainName, chain });
     return {
         //for migration cosmos kit
         connect: () => {

package/esm/modal/modal.js

@@ -3,15 +3,21 @@ import { ConnectedContent, ConnectedHeader, ConnectingContent, ConnectingHeader,
 import { useWalletModal } from "./provider";
 import { useChainWallet, useWalletManager } from "../hooks";
 import { useEffect, useMemo, useState } from "react";
-import { WalletState } from "@interchain-kit/core";
+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 () => {
+        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);
@@ -42,6 +48,9 @@ export const WalletModal = () => {
             if (status === WalletState.Disconnected) {
                 setModalType("wallet-list");
             }
+            if (qrCode) {
+                setModalType("qr-code");
+            }
         }
     }, [
         currentWalletName,
@@ -49,6 +58,7 @@ export const WalletModal = () => {
         status,
         modalIsOpen,
         selectedWallet,
+        qrCode
     ]);
     const goBackList = () => setModalType("wallet-list");
     const { header, content } = useMemo(() => {

package/hooks/useChain.js

@@ -15,7 +15,6 @@ const useChain = (chainName) => {
     const wallet = getWalletByName(currentWalletName);
     const chainWalletStateToShow = getChainWalletState(currentWalletName, chainName);
     const { open, close } = (0, modal_1.useWalletModal)();
-    console.log({ chainName, chain });
     return {
         //for migration cosmos kit
         connect: () => {

package/modal/modal.js

@@ -9,12 +9,18 @@ const react_1 = require("react");
 const core_1 = require("@interchain-kit/core");
 const react_2 = require("@interchain-ui/react");
 const WalletModal = () => {
+    const [qrCode, setQRCode] = (0, react_1.useState)(null);
     const { currentWalletName, currentChainName, wallets, connect, getAccount, setCurrentWalletName, } = (0, hooks_1.useWalletManager)();
     const { modalIsOpen, open, close } = (0, provider_1.useWalletModal)();
     const [modalType, setModalType] = (0, react_1.useState)("wallet-list");
     const [selectedWallet, setSelectedWallet] = (0, react_1.useState)(null);
     const { chain, status, wallet } = (0, hooks_1.useChainWallet)(currentChainName, currentWalletName);
     const handleConnect = async () => {
+        if (wallet.originalWallet instanceof core_1.WCWallet) {
+            wallet.originalWallet.setOnPairingUriCreatedCallback((uri) => {
+                setQRCode(uri);
+            });
+        }
         await connect(selectedWallet?.info?.name, chain.chainName);
         await getAccount(selectedWallet?.info?.name, chain.chainName);
         setSelectedWallet(null);
@@ -45,6 +51,9 @@ const WalletModal = () => {
             if (status === core_1.WalletState.Disconnected) {
                 setModalType("wallet-list");
             }
+            if (qrCode) {
+                setModalType("qr-code");
+            }
         }
     }, [
         currentWalletName,
@@ -52,6 +61,7 @@ const WalletModal = () => {
         status,
         modalIsOpen,
         selectedWallet,
+        qrCode
     ]);
     const goBackList = () => setModalType("wallet-list");
     const { header, content } = (0, react_1.useMemo)(() => {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@interchain-kit/react",
-  "version": "0.0.1-beta.62",
-  "author": "cosmology-tech <developers@cosmology.zone>",
+  "version": "0.0.1-beta.64",
+  "author": "Hyperweb <developers@hyperweb.io>",
   "description": "interchain-kit wallet connector react package",
   "main": "index.js",
   "module": "esm/index.js",
@@ -33,7 +33,7 @@
   "keywords": [],
   "dependencies": {
     "@chain-registry/v2-types": "^0.53.40",
-    "@interchain-kit/core": "0.0.1-beta.62",
+    "@interchain-kit/core": "^0.0.1-beta.64",
     "@interchain-ui/react": "1.26.1",
     "@interchainjs/cosmos": "1.6.3",
     "@interchainjs/cosmos-types": "1.6.3",
@@ -46,5 +46,5 @@
     "react-dom": "^18.3.1",
     "zustand": "^5.0.3"
   },
-  "gitHead": "b63ee16e1bbb876bfa9d683e32eb687b0bf10838"
+  "gitHead": "5d5934c835bbe83fc3cfd2aa9bb6cfa617722019"
 }

package/types/chain.d.ts

@@ -1,7 +1,8 @@
 import { HttpEndpoint } from '@interchainjs/types';
 import { Chain, AssetList } from '@chain-registry/v2-types';
-import { BaseWallet, WalletState } from '@interchain-kit/core';
+import { WalletState } from '@interchain-kit/core';
 import { SigningClient } from './sign-client';
+import { ChainWallet } from '../store/chain-wallet';
 export type CosmosKitUseChainReturnType = {
     connect: () => void;
     disconnect: () => void;
@@ -17,7 +18,7 @@ export type UseChainReturnType = {
     chain: Chain;
     assetList: AssetList;
     address: string;
-    wallet: BaseWallet;
+    wallet: ChainWallet;
     rpcEndpoint: string | HttpEndpoint;
     getSigningClient: () => Promise<SigningClient>;
 } & CosmosKitUseChainReturnType;