From 433e43eabf94310a50403643f39124897761bac7 Mon Sep 17 00:00:00 2001 From: zhizhendev Date: Mon, 10 Mar 2025 10:11:19 +0800 Subject: [PATCH 1/8] readme --- libs/interchainjs/README.md | 78 ++++++++++++++++++++++--------------- 1 file changed, 47 insertions(+), 31 deletions(-) diff --git a/libs/interchainjs/README.md b/libs/interchainjs/README.md index 14457e40..7d95fd19 100644 --- a/libs/interchainjs/README.md +++ b/libs/interchainjs/README.md @@ -14,17 +14,35 @@ A single, universal signing interface for any network. Birthed from the interchain ecosystem for builders. Create adapters for any Web3 network. +## install + +```sh +npm install interchainjs +``` + ## Table of Contents +- [InterchainJS](#interchainjs) +- [Install](#install) +- [Table of Contents](#table-of-contents) - [Introduction](#interchainjs-universal-signing-for-web3) - [Overview](#overview) -- [Tutorials and Docs](#tutorial-for-building-a-custom-signer) +- [Tutorials and Docs](#tutorials--documentation) + + - [RPC Clients](#rpc-clients) + - [Tx Helpers](#tx-helpers) + +- [Amino Helpers](#amino-helpers) - [Auth](#auth) +- [Crypto Helpers](#crypto-helpers) +- [Encoding Helpers](#encoding-helpers) +- [Math Helpers](#math-helpers) +- [Pubkey Helpers](#pubkey-helpers) - [Supported Networks](#supported-networks) - [Cosmos Network](#cosmos-network) - [Injective Network](#injective-network) - [Ethereum Network](#ethereum-network) -- [Interchain JavaScript Stack ⚛️](#interchain-javascript-stack-⚛️) +- [Interchain JavaScript Stack ⚛️](#interchain-javascript-stack-️) - [Credits](#credits) - [Disclaimer](#disclaimer) @@ -86,16 +104,14 @@ graph LR style utils fill:#ccf,stroke:#333,stroke-width:2px ``` - --- - ## Tutorials & Documentation -| Topic | Documentation | -|----------------------------------|--------------| -| **Building a Custom Signer** | [Tutorial](/docs/tutorial.md) | -| **Advanced Documentation** | [View Docs](/docs/) | +| Topic | Documentation | +| ---------------------------- | ----------------------------- | +| **Building a Custom Signer** | [Tutorial](/docs/tutorial.md) | +| **Advanced Documentation** | [View Docs](/docs/) | --- @@ -103,9 +119,9 @@ graph LR The authentication module is universally applied across different networks. -| Package | Description | -|---------|-------------| -| [@interchainjs/auth](/packages/auth/README.md) | Handles authentication across blockchain networks. | +| Package | Description | +| -------------------------------------------------------------------------- | ---------------------------------------------------------------------------- | +| [@interchainjs/auth](/packages/auth/README.md) | Handles authentication across blockchain networks. | | [Advanced Docs: `Auth vs. Wallet vs. Signer`](/docs/auth-wallet-signer.md) | Explanation of the differences between authentication, wallets, and signers. | --- @@ -114,26 +130,26 @@ The authentication module is universally applied across different networks. ### Cosmos Network -| Feature | Package | -|---------|---------| -| **Transactions** | [@interchainjs/cosmos](/networks/cosmos/README.md) | -| **Cosmos Types** | [@interchainjs/cosmos-types](/networks/cosmos-msgs/README.md) | -| **Migration from `@cosmjs`** | [interchainjs](/networks/cosmjs/README.md) | +| Feature | Package | +| ---------------------------- | ------------------------------------------------------------- | +| **Transactions** | [@interchainjs/cosmos](/networks/cosmos/README.md) | +| **Cosmos Types** | [@interchainjs/cosmos-types](/networks/cosmos-msgs/README.md) | +| **Migration from `@cosmjs`** | [interchainjs](/networks/cosmjs/README.md) | --- ### Injective Network -| Feature | Package | -|---------|---------| +| Feature | Package | +| ---------------- | -------------------------------------------------------- | | **Transactions** | [@interchainjs/injective](/networks/injective/README.md) | --- ### Ethereum Network -| Feature | Package | -|---------|---------| +| Feature | Package | +| ---------------- | ------------------------------------------------------ | | **Transactions** | [@interchainjs/ethereum](/networks/ethereum/README.md) | --- @@ -142,17 +158,17 @@ The authentication module is universally applied across different networks. A unified toolkit for building applications and smart contracts in the Interchain ecosystem -| 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)beta, [**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)beta, [**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)beta, [**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. | +| 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)beta, [**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)beta, [**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)beta, [**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 From fde75ac6c39c21825ce5b0a236ec99cafebc9e58 Mon Sep 17 00:00:00 2001 From: Zetazzz Date: Mon, 10 Mar 2025 12:02:00 +0800 Subject: [PATCH 2/8] add docs for interchainjs helpers --- libs/injective-react/README.md | 2 +- libs/injectivejs/README.md | 2 +- libs/interchainjs/README.md | 339 ++++++++++++++++++++++++++++++++- 3 files changed, 336 insertions(+), 7 deletions(-) diff --git a/libs/injective-react/README.md b/libs/injective-react/README.md index bb0b0868..c35e2a97 100644 --- a/libs/injective-react/README.md +++ b/libs/injective-react/README.md @@ -67,7 +67,7 @@ import { createQueryRpc } from "@interchainjs/cosmos/utils"; import { createGetAllBalances } from "injectivejs/cosmos/bank/v1beta1/query.rpc.func"; import { createGetExchangeBalances } from "injectivejs/injective/exchange/v1beta1/query.rpc.func"; -{ getRpcEndpoint } = useChain("osmosis"); +{ getRpcEndpoint } = useChain("injective"); const endpoint = await getRpcEndpoint(); const rpc = createQueryRpc(endpoint); diff --git a/libs/injectivejs/README.md b/libs/injectivejs/README.md index 1038da0b..5bbcba83 100644 --- a/libs/injectivejs/README.md +++ b/libs/injectivejs/README.md @@ -66,7 +66,7 @@ import { createQueryRpc } from "@interchainjs/cosmos/utils"; import { createGetAllBalances } from "injectivejs/cosmos/bank/v1beta1/query.rpc.func"; import { createGetExchangeBalances } from "injectivejs/injective/exchange/v1beta1/query.rpc.func"; -{ getRpcEndpoint } = useChain("osmosis"); +{ getRpcEndpoint } = useChain("injective"); const endpoint = await getRpcEndpoint(); const rpc = createQueryRpc(endpoint); diff --git a/libs/interchainjs/README.md b/libs/interchainjs/README.md index 7d95fd19..1112175d 100644 --- a/libs/interchainjs/README.md +++ b/libs/interchainjs/README.md @@ -30,7 +30,7 @@ npm install interchainjs - [Tutorials and Docs](#tutorials--documentation) - [RPC Clients](#rpc-clients) - - [Tx Helpers](#tx-helpers) + - [Query and Tx Helpers](#query-and-tx-helpers) - [Amino Helpers](#amino-helpers) - [Auth](#auth) @@ -108,10 +108,331 @@ graph LR ## Tutorials & Documentation -| Topic | Documentation | -| ---------------------------- | ----------------------------- | -| **Building a Custom Signer** | [Tutorial](/docs/tutorial.md) | -| **Advanced Documentation** | [View Docs](/docs/) | +| Topic | Documentation | +| ---------------------------- | ----------------------------------------------------------------------------- | +| **Create Interchain App** | [Create Interchain App](https://github.com/hyperweb-io/create-interchain-app) | +| **Building a Custom Signer** | [Building a Custom Signer](/docs/building-a-custom-signer.md) | +| **Advanced Documentation** | [View Docs](/docs/) | + +### RPC Clients + +```js +import { createQueryRpc } from "@interchainjs/cosmos/utils"; +import { createGetAllBalances } from "@interchainjs/cosmos/bank/v1beta1/query.rpc.func"; + +{ getRpcEndpoint } = useChain("cosmoshub"); + +const endpoint = await getRpcEndpoint(); +const rpc = createQueryRpc(endpoint); + +// get the tree shakable helper functions using the rpc client +const getAllBalances = createGetAllBalances(rpc); + +// now you can query the cosmos modules +const balance = await getAllBalances({ + address: "cosmos1addresshere", +}); +``` + +### Query and Tx Helpers + +For tx messages, there're helper functions to sign and broadcast messages: + +For more detailed usage on how to use these functions, please see the starship tests in the [libs/interchainjs repo](https://github.com/hyperweb-io/interchainjs/tree/main/libs/interchainjs/starship/__tests__) + +There're also react and vue hooks for helper functions. Please see [@interchainjs/react](https://github.com/hyperweb-io/interchainjs/tree/main/libs/interchain-react) and [@interchainjs/vue](https://github.com/hyperweb-io/interchainjs/tree/main/libs/interchain-vue) repos for more information. + +```js +import { createSend } from "@interchainjs/cosmos/bank/v1beta1/tx.rpc.func"; +``` + +#### Authz + +```js +// query helpers +import { + createGetGrants, + createGetGranterGrants, + createGetGranteeGrants, +} from "@interchainjs/cosmos/authz/v1beta1/query.rpc.func"; + +// tx helpers +import { + createGrant, + createRevoke, + createExec, +} from "@interchainjs/cosmos/authz/v1beta1/tx.rpc.func"; +``` + +#### Bank + +```js +// query helpers +import { + createGetAllBalances, + createGetDenomMetadata, + createGetSupply, + createGetParams, +} from "@interchainjs/cosmos/bank/v1beta1/query.rpc.func"; + +// tx helpers +import { + createSend, + createMultiSend, +} from "@interchainjs/cosmos/bank/v1beta1/tx.rpc.func"; +``` + +#### Circuit + +```js +// query helpers +import { + createGetAccount, + createGetAccounts, + createGetDisabledList, +} from "@interchainjs/cosmos/circuit/v1/query.rpc.func"; + +// tx helpers +import { + createAuthorizeCircuitBreaker, + createTripCircuitBreaker, + createResetCircuitBreaker, +} from "@interchainjs/cosmos/circuit/v1/tx.rpc.func"; +``` + +#### Consensus + +```js +// query helpers +import { createGetParams } from "@interchainjs/cosmos/consensus/v1/query.rpc.func"; + +// tx helpers +import { createUpdateParams } from "@interchainjs/cosmos/consensus/v1/tx.rpc.func"; +``` + +#### Crisis + +```js +// tx helpers +import { + createVerifyInvariant, + createUpdateParams, +} from "@interchainjs/cosmos/crisis/v1beta1/tx.rpc.func"; +``` + +#### Distribution + +```js +// query helpers +import { + createGetParams, + createGetValidatorDistributionInfo, + createGetValidatorOutstandingRewards, + createGetValidatorCommission, + createGetValidatorSlashes, + createGetDelegationRewards, + createGetDelegationTotalRewards, +} from "@interchainjs/cosmos/distribution/v1beta1/query.rpc.func"; + +// tx helpers +import { + createSetWithdrawAddress, + createWithdrawDelegatorReward, + createWithdrawValidatorCommission, + createFundCommunityPool, + createCommunityPoolSpend, + createUpdateParams, +} from "@interchainjs/cosmos/distribution/v1beta1/tx.rpc.func"; +``` + +#### Evidence + +```js +// query helpers +import { + createGetEvidence, + createGetAllEvidence, +} from "@interchainjs/cosmos/evidence/v1beta1/query.rpc.func"; + +// tx helpers +import { createSubmitEvidence } from "@interchainjs/cosmos/evidence/v1beta1/tx.rpc.func"; +``` + +#### Feegrant + +```js +// query helpers +import { + createGetAllowance, + createGetAllowances, + createGetAllowancesByGranter, +} from "@interchainjs/cosmos/feegrant/v1beta1/query.rpc.func"; + +// tx helpers +import { + createGrantAllowance, + createRevokeAllowance, + createPruneAllowances, +} from "@interchainjs/cosmos/feegrant/v1beta1/tx.rpc.func"; +``` + +#### Gov + +```js +// query helpers +import { + createGetProposal, + createGetProposals, + createGetVote, + createGetVotes, + createGetParams, + createGetDeposit, + createGetDeposits, + createGetTallyResult, +} from "@interchainjs/cosmos/gov/v1beta1/query.rpc.func"; + +// tx helpers +import { + createSubmitProposal, + createDeposit, + createVote, + createVoteWeighted, +} from "@interchainjs/cosmos/gov/v1beta1/tx.rpc.func"; +``` + +#### Group + +```js +// query helpers +import { + createGetGroupInfo, + createGetGroupPolicyInfo, + createGetGroupMembers, + createGetGroupsByAdmin, + createGetGroupPoliciesByGroup, + createGetGroupPoliciesByAdmin, +} from "@interchainjs/cosmos/group/v1/query.rpc.func"; + +// tx helpers +import { + createCreateGroup, + createUpdateGroupMetadata, + createUpdateGroupMembers, + createUpdateGroupAdmin, + createUpdateGroupPolicyMetadata, + createSubmitProposal, + createVote, + createExec, +} from "@interchainjs/cosmos/group/v1/tx.rpc.func"; +``` + +#### Mint + +```js +// query helpers +import { + createGetParams, + createGetInflation, + createGetAnnualProvisions, +} from "@interchainjs/cosmos/mint/v1beta1/query.rpc.func"; + +// tx helpers +import { createUpdateParams } from "@interchainjs/cosmos/mint/v1beta1/tx.rpc.func"; +``` + +#### Nft + +```js +// query helpers +import { + createGetBalance, + createGetOwner, + createGetClass, + createGetClasses, + createGetNFTs, + createGetNFT, +} from "@interchainjs/cosmos/nft/v1/query.rpc.func"; + +// tx helpers +import { createSend } from "@interchainjs/cosmos/nft/v1/tx.rpc.func"; +``` + +#### Staking + +```js +// query helpers +import { + createGetValidators, + createGetValidator, + createGetValidatorDelegations, + createGetValidatorUnbondingDelegations, + createGetDelegation, + createGetUnbondingDelegation, +} from "@interchainjs/cosmos/staking/v1beta1/query.rpc.func"; + +// tx helpers +import { + createCreateValidator, + createEditValidator, + createDelegate, + createUndelegate, + createRedelegate, +} from "@interchainjs/cosmos/staking/v1beta1/tx.rpc.func"; +``` + +#### Vesting + +```js +// tx helpers +import { + createCreateVestingAccount, + createCreatePermanentLockedAccount, + createCreatePeriodicVestingAccount, +} from "@interchainjs/cosmos/vesting/v1beta1/tx.rpc.func"; +``` + +#### CosmWasm + +```js +// query helpers +import { + createGetContractInfo, + createGetContractHistory, + createGetContractsByCode, + createGetAllContractState, + createGetRawContractState, + createGetSmartContractState, + createGetCode, + createGetCodes, +} from "@interchainjs/cosmwasm/wasm/v1/query.rpc.func"; + +// tx helpers +import { + createStoreCode, + createInstantiateContract, + createMigrateContract, + createUpdateAdmin, + createClearAdmin, +} from "@interchainjs/cosmwasm/wasm/v1/tx.rpc.func"; +``` + +#### IBC + +```js +// query helpers +import { + createGetParams, + createGetDenomHash, + createGetEscrowAddress, + createGetTotalEscrowForDenom, +} from "@interchainjs/ibc/applications/transfer/v1/query.rpc.func"; + +// tx helpers +import { + createTransfer, + createUpdateParams, +} from "@interchainjs/ibc/applications/transfer/v1/tx.rpc.func"; +``` --- @@ -179,3 +500,11 @@ A unified toolkit for building applications and smart contracts in the Interchai AS DESCRIBED IN THE LICENSES, THE SOFTWARE IS PROVIDED “AS IS”, AT YOUR OWN RISK, AND WITHOUT WARRANTIES OF ANY KIND. No developer or entity involved in creating this software will be liable for any claims or damages whatsoever associated with your use, inability to use, or your interaction with other users of the code, including any direct, indirect, incidental, special, exemplary, punitive or consequential damages, or loss of profits, cryptocurrencies, tokens, or anything else of value. + +``` + +``` + +``` + +``` From 8a8e5c7b56735a516ba49aef874e4c3624de702b Mon Sep 17 00:00:00 2001 From: Zetazzz Date: Mon, 10 Mar 2025 13:20:35 +0800 Subject: [PATCH 3/8] update interchainjs docs --- libs/interchainjs/README.md | 129 ++++++++++++++++++++++++++++++------ 1 file changed, 108 insertions(+), 21 deletions(-) diff --git a/libs/interchainjs/README.md b/libs/interchainjs/README.md index 1112175d..73734fd4 100644 --- a/libs/interchainjs/README.md +++ b/libs/interchainjs/README.md @@ -108,6 +108,8 @@ graph LR ## Tutorials & Documentation +The following resources provide comprehensive guidance for developers working with InterchainJS. Whether you're setting up a new application, implementing custom signers, or exploring advanced features, these tutorials and documentation will help you leverage the full power of InterchainJS across various blockchain networks. + | Topic | Documentation | | ---------------------------- | ----------------------------------------------------------------------------- | | **Create Interchain App** | [Create Interchain App](https://github.com/hyperweb-io/create-interchain-app) | @@ -116,6 +118,8 @@ graph LR ### RPC Clients +RPC (Remote Procedure Call) clients enable communication between your application and blockchain networks. InterchainJS provides a flexible and type-safe way to create these clients, allowing you to query blockchain data with minimal configuration. The following example demonstrates how to create and use an RPC client to query data from a Cosmos-based blockchain. + ```js import { createQueryRpc } from "@interchainjs/cosmos/utils"; import { createGetAllBalances } from "@interchainjs/cosmos/bank/v1beta1/query.rpc.func"; @@ -136,17 +140,32 @@ const balance = await getAllBalances({ ### Query and Tx Helpers -For tx messages, there're helper functions to sign and broadcast messages: +InterchainJS provides specialized helper functions that simplify the process of querying blockchain data and submitting transactions. These helpers abstract away the complexity of creating, signing, and broadcasting messages, allowing developers to focus on application logic rather than protocol details. -For more detailed usage on how to use these functions, please see the starship tests in the [libs/interchainjs repo](https://github.com/hyperweb-io/interchainjs/tree/main/libs/interchainjs/starship/__tests__) +#### Transaction Helpers -There're also react and vue hooks for helper functions. Please see [@interchainjs/react](https://github.com/hyperweb-io/interchainjs/tree/main/libs/interchain-react) and [@interchainjs/vue](https://github.com/hyperweb-io/interchainjs/tree/main/libs/interchain-vue) repos for more information. +Transaction (Tx) helpers streamline the creation and submission of blockchain transactions: ```js import { createSend } from "@interchainjs/cosmos/bank/v1beta1/tx.rpc.func"; ``` -#### Authz +#### Framework Integration + +InterchainJS seamlessly integrates with popular frontend frameworks: + +- **React Hooks**: Available in the [@interchainjs/react](https://github.com/hyperweb-io/interchainjs/tree/main/libs/interchain-react) package +- **Vue Composables**: Available in the [@interchainjs/vue](https://github.com/hyperweb-io/interchainjs/tree/main/libs/interchain-vue) package + +#### Examples and Documentation + +For detailed usage examples and implementation patterns, refer to the test suite in the [starship/**tests**](https://github.com/hyperweb-io/interchainjs/tree/main/libs/interchainjs/starship/__tests__) directory. + +#### Module-Specific Helpers + +The following sections provide import examples for various Cosmos SDK modules. + +##### Authz ```js // query helpers @@ -164,7 +183,7 @@ import { } from "@interchainjs/cosmos/authz/v1beta1/tx.rpc.func"; ``` -#### Bank +##### Bank ```js // query helpers @@ -182,7 +201,7 @@ import { } from "@interchainjs/cosmos/bank/v1beta1/tx.rpc.func"; ``` -#### Circuit +##### Circuit ```js // query helpers @@ -200,7 +219,7 @@ import { } from "@interchainjs/cosmos/circuit/v1/tx.rpc.func"; ``` -#### Consensus +##### Consensus ```js // query helpers @@ -210,7 +229,7 @@ import { createGetParams } from "@interchainjs/cosmos/consensus/v1/query.rpc.fun import { createUpdateParams } from "@interchainjs/cosmos/consensus/v1/tx.rpc.func"; ``` -#### Crisis +##### Crisis ```js // tx helpers @@ -220,7 +239,7 @@ import { } from "@interchainjs/cosmos/crisis/v1beta1/tx.rpc.func"; ``` -#### Distribution +##### Distribution ```js // query helpers @@ -245,7 +264,7 @@ import { } from "@interchainjs/cosmos/distribution/v1beta1/tx.rpc.func"; ``` -#### Evidence +##### Evidence ```js // query helpers @@ -258,7 +277,7 @@ import { import { createSubmitEvidence } from "@interchainjs/cosmos/evidence/v1beta1/tx.rpc.func"; ``` -#### Feegrant +##### Feegrant ```js // query helpers @@ -276,7 +295,7 @@ import { } from "@interchainjs/cosmos/feegrant/v1beta1/tx.rpc.func"; ``` -#### Gov +##### Gov ```js // query helpers @@ -300,7 +319,7 @@ import { } from "@interchainjs/cosmos/gov/v1beta1/tx.rpc.func"; ``` -#### Group +##### Group ```js // query helpers @@ -326,7 +345,7 @@ import { } from "@interchainjs/cosmos/group/v1/tx.rpc.func"; ``` -#### Mint +##### Mint ```js // query helpers @@ -340,7 +359,7 @@ import { import { createUpdateParams } from "@interchainjs/cosmos/mint/v1beta1/tx.rpc.func"; ``` -#### Nft +##### Nft ```js // query helpers @@ -357,7 +376,7 @@ import { import { createSend } from "@interchainjs/cosmos/nft/v1/tx.rpc.func"; ``` -#### Staking +##### Staking ```js // query helpers @@ -380,7 +399,7 @@ import { } from "@interchainjs/cosmos/staking/v1beta1/tx.rpc.func"; ``` -#### Vesting +##### Vesting ```js // tx helpers @@ -391,7 +410,7 @@ import { } from "@interchainjs/cosmos/vesting/v1beta1/tx.rpc.func"; ``` -#### CosmWasm +##### CosmWasm ```js // query helpers @@ -416,7 +435,7 @@ import { } from "@interchainjs/cosmwasm/wasm/v1/tx.rpc.func"; ``` -#### IBC +##### IBC ```js // query helpers @@ -434,6 +453,74 @@ import { } from "@interchainjs/ibc/applications/transfer/v1/tx.rpc.func"; ``` +## Connecting with Wallets and Signing Messages + +⚡️ For web interfaces, we recommend using [interchain-kit](https://github.com/hyperweb-io/interchain-kit/). Continue below to see how to manually construct signers and clients. + +Here are the docs on [creating signers](https://github.com/hyperweb-io/interchain-kit/blob/main/packages/core/README.md) in interchain-kit that can be used with Keplr and other wallets. + +### Initializing the Signing Client + +Use SigningClient.connectWithSigner to get your `SigningClient`: + +```js +import { SigningClient } from "@interchainjs/cosmos/signing-client"; + +const signingClient = await SigningClient.connectWithSigner( + await getRpcEndpoint(), + new AminoGenericOfflineSigner(aminoOfflineSigner) +); +``` + +### Creating Signers + +To broadcast messages, you can create signers with a variety of options: + +- [interchain-kit](https://github.com/hyperweb-io/interchain-kit/) (recommended) +- [keplr](https://docs.keplr.app/api/cosmjs.html) + +### Broadcasting Messages + +When you have your `signing client`, you can broadcast messages: + +```js +const msg = { + typeUrl: MsgSend.typeUrl, + value: MsgSend.fromPartial({ + amount: [ + { + denom: "uatom", + amount: "1000", + }, + ], + toAddress: address, + fromAddress: address, + }), +}; + +const fee: StdFee = { + amount: [ + { + denom: "uatom", + amount: "1000", + }, + ], + gas: "86364", +}; +const response = await signingClient.signAndBroadcast(address, [msg], fee); +``` + +### All In One Example + +For a comprehensive example of how to use InterchainJS to send messages, please see the example [here](https://github.com/hyperweb-io/create-interchain-app/tree/main/examples/authz). This example demonstrates how to: + +- Initialize the client. +- Create and sign messages. +- Broadcast transactions. +- Handle responses and errors. + +The example provides a complete walkthrough of setting up the client, creating a message for sending txs, and broadcasting the transaction to the chain. + --- ## Auth @@ -493,11 +580,11 @@ A unified toolkit for building applications and smart contracts in the Interchai ## Credits -🛠 Built by Hyperweb (formerly Cosmology) — if you like our tools, please checkout and contribute to [our github ⚛️](https://github.com/hyperweb-io) +🛠 Built by Hyperweb (formerly Cosmology) — if you like our tools, please checkout and contribute to [our github ⚛️](https://github.com/hyperweb-io) ## Disclaimer -AS DESCRIBED IN THE LICENSES, THE SOFTWARE IS PROVIDED “AS IS”, AT YOUR OWN RISK, AND WITHOUT WARRANTIES OF ANY KIND. +AS DESCRIBED IN THE LICENSES, THE SOFTWARE IS PROVIDED "AS IS", AT YOUR OWN RISK, AND WITHOUT WARRANTIES OF ANY KIND. No developer or entity involved in creating this software will be liable for any claims or damages whatsoever associated with your use, inability to use, or your interaction with other users of the code, including any direct, indirect, incidental, special, exemplary, punitive or consequential damages, or loss of profits, cryptocurrencies, tokens, or anything else of value. From 997c75b8de42f1cdc2cf5e897bb2b58d391ea3bf Mon Sep 17 00:00:00 2001 From: Zetazzz Date: Mon, 10 Mar 2025 20:38:30 +0800 Subject: [PATCH 4/8] docs --- libs/interchainjs/README.md | 164 ++++++++++++++++++++++++++++++++++-- 1 file changed, 156 insertions(+), 8 deletions(-) diff --git a/libs/interchainjs/README.md b/libs/interchainjs/README.md index 73734fd4..860a05c1 100644 --- a/libs/interchainjs/README.md +++ b/libs/interchainjs/README.md @@ -138,6 +138,106 @@ const balance = await getAllBalances({ }); ``` +### Tree Shakable Helpers + +InterchainJS provides tree shakable helper functions to optimize your application's bundle size. These helpers follow a factory pattern that allows modern JavaScript bundlers to eliminate unused code through tree shaking. + +#### How Tree Shakable Helpers Work + +Each helper function is individually exported using a `create*` prefix (e.g., `createGetAllBalances`). This pattern enables: + +1. **Bundle Size Optimization**: Only the functions you import and use are included in your final bundle +2. **Lazy Initialization**: Helper functions are only constructed when explicitly called +3. **Customizable Configuration**: Each helper can be configured with specific parameters + +For example, query helpers are functions that return other functions, constructed with specific parameters: + +```js +// Import only what you need +import { createQueryRpc } from "@interchainjs/cosmos/utils"; +import { createGetAllBalances } from "@interchainjs/cosmos/bank/v1beta1/query.rpc.func"; + +// Initialize RPC client +const rpc = createQueryRpc(endpoint); + +// Create the specific helper function you need +const getAllBalances = createGetAllBalances(rpc); + +// Now you can query the blockchain +const balance = await getAllBalances({ + address: "cosmos1addresshere", +}); +``` + +#### Available Helper Types + +InterchainJS provides two main types of tree shakable helpers: + +1. **Query Helpers**: For retrieving data from the blockchain + + ```js + import { createGetValidator } from "@interchainjs/cosmos/staking/v1beta1/query.rpc.func"; + ``` + +2. **Transaction Helpers**: For broadcasting transactions + + ```js + import { createDelegate } from "@interchainjs/cosmos/staking/v1beta1/tx.rpc.func"; + ``` + +#### Example: Combining Query and Transaction Helpers + +Here's how you might use both types together in a staking scenario: + +```js +// Import helpers +import { createQueryRpc } from "@interchainjs/cosmos/utils"; +import { createGetValidator } from "@interchainjs/cosmos/staking/v1beta1/query.rpc.func"; +import { createDelegate } from "@interchainjs/cosmos/staking/v1beta1/tx.rpc.func"; + +// Setup query client +const rpc = createQueryRpc(endpoint); +const getValidator = createGetValidator(rpc); + +// Query validator info +const { validator } = await getValidator({ + validatorAddr: "cosmosvaloper1...", +}); + +// Setup transaction function +const delegate = createDelegate(signingClient); + +// Execute delegation +const result = await delegate( + signerAddress, + { + delegatorAddress: signerAddress, + validatorAddress: validator.operatorAddress, + amount: { denom: "uatom", amount: "1000000" }, + }, + fee, + "Delegation via InterchainJS" +); +``` + +By importing only the specific helpers you need, you ensure that your application bundle remains as small and efficient as possible. + +#### Framework Integration + +These tree shakable helpers can be used with framework-specific implementations: + +- **React**: Available as hooks in `@interchainjs/react` + + ```js + import { useGetAllBalances } from "@interchainjs/react/cosmos/bank/v1beta1/query.rpc.react"; + ``` + +- **Vue**: Available as composables in `@interchainjs/vue` + + ```js + import { useGetAllBalances } from "@interchainjs/vue/cosmos/bank/v1beta1/query.rpc.vue"; + ``` + ### Query and Tx Helpers InterchainJS provides specialized helper functions that simplify the process of querying blockchain data and submitting transactions. These helpers abstract away the complexity of creating, signing, and broadcasting messages, allowing developers to focus on application logic rather than protocol details. @@ -150,13 +250,6 @@ Transaction (Tx) helpers streamline the creation and submission of blockchain tr import { createSend } from "@interchainjs/cosmos/bank/v1beta1/tx.rpc.func"; ``` -#### Framework Integration - -InterchainJS seamlessly integrates with popular frontend frameworks: - -- **React Hooks**: Available in the [@interchainjs/react](https://github.com/hyperweb-io/interchainjs/tree/main/libs/interchain-react) package -- **Vue Composables**: Available in the [@interchainjs/vue](https://github.com/hyperweb-io/interchainjs/tree/main/libs/interchain-vue) package - #### Examples and Documentation For detailed usage examples and implementation patterns, refer to the test suite in the [starship/**tests**](https://github.com/hyperweb-io/interchainjs/tree/main/libs/interchainjs/starship/__tests__) directory. @@ -523,6 +616,14 @@ The example provides a complete walkthrough of setting up the client, creating a --- +## Amino Helpers + +The `@interchainjs/amino` package provides utilities for working with Amino messages and types. It includes functions for encoding and decoding messages, as well as for creating and manipulating Amino types. + +| Package | Description | +| ------------------------------------------------ | --------------------------------- | +| [@interchainjs/amino](/packages/amino/README.md) | Amino message and type utilities. | + ## Auth The authentication module is universally applied across different networks. @@ -532,7 +633,37 @@ The authentication module is universally applied across different networks. | [@interchainjs/auth](/packages/auth/README.md) | Handles authentication across blockchain networks. | | [Advanced Docs: `Auth vs. Wallet vs. Signer`](/docs/auth-wallet-signer.md) | Explanation of the differences between authentication, wallets, and signers. | ---- +## Crypto Helpers + +The `@interchainjs/crypto` package provides utilities for working with cryptographic primitives. It includes functions for encoding and decoding messages, as well as for creating and manipulating Amino types. + +| Package | Description | +| -------------------------------------------------- | ---------------------------------- | +| [@interchainjs/crypto](/packages/crypto/README.md) | Crypto message and type utilities. | + +## Encoding Helpers + +The `@interchainjs/encoding` package provides utilities for working with encoding. It includes functions for encoding and decoding messages, as well as for creating and manipulating encoding types. + +| Package | Description | +| ------------------------------------------------------ | ------------------------------------ | +| [@interchainjs/encoding](/packages/encoding/README.md) | Encoding message and type utilities. | + +## Math Helpers + +The `@interchainjs/math` package provides utilities for working with math. It includes functions for encoding and decoding messages, as well as for creating and manipulating math types. + +| Package | Description | +| ---------------------------------------------- | -------------------------------- | +| [@interchainjs/math](/packages/math/README.md) | Math message and type utilities. | + +## Pubkey Helpers + +The `@interchainjs/pubkey` package provides utilities for working with pubkeys. It includes functions for encoding and decoding messages, as well as for creating and manipulating pubkey types. + +| Package | Description | +| -------------------------------------------------- | ---------------------------------- | +| [@interchainjs/pubkey](/packages/pubkey/README.md) | Pubkey message and type utilities. | ## Supported Networks @@ -562,6 +693,23 @@ The authentication module is universally applied across different networks. --- +## Developing + +When first cloning the repo: + +```shell +yarn +yarn build:dev +``` + +### Codegen + +Contract schemas live in `./contracts`, and protos in `./proto`. Look inside of `scripts/interchainjs.telescope.json` and configure the settings for bundling your SDK and contracts into `interchainjs`: + +```shell +yarn codegen +``` + ## Interchain JavaScript Stack ⚛️ A unified toolkit for building applications and smart contracts in the Interchain ecosystem From 35282d751736d051c7493f91be4678f70fbdd4d8 Mon Sep 17 00:00:00 2001 From: Gefei Hou Date: Fri, 14 Mar 2025 13:47:14 +0800 Subject: [PATCH 5/8] Updated tree shakable hooks related docs --- libs/interchainjs/README.md | 60 ++++++++++++++++++++++++++----------- 1 file changed, 43 insertions(+), 17 deletions(-) diff --git a/libs/interchainjs/README.md b/libs/interchainjs/README.md index 860a05c1..3a151dae 100644 --- a/libs/interchainjs/README.md +++ b/libs/interchainjs/README.md @@ -140,11 +140,14 @@ const balance = await getAllBalances({ ### Tree Shakable Helpers -InterchainJS provides tree shakable helper functions to optimize your application's bundle size. These helpers follow a factory pattern that allows modern JavaScript bundlers to eliminate unused code through tree shaking. +InterchainJS provides tree shakable helper functions to optimize your application's bundle size. These helpers follow a factory pattern that allows modern JavaScript bundlers to eliminate unused code through tree shaking. These hooks improve modularity and optimize performance by allowing you to import only the functionality you need. +Tree shakable tutorial video: https://youtu.be/3dRm9HEklMo #### How Tree Shakable Helpers Work -Each helper function is individually exported using a `create*` prefix (e.g., `createGetAllBalances`). This pattern enables: +Each helper function is individually exported using a `create*` prefix (e.g., `createGetAllBalances`). +Each customized hook is individually exported using a `use*` prefix (e.g., `useGetBalance`) +This pattern enables: 1. **Bundle Size Optimization**: Only the functions you import and use are included in your final bundle 2. **Lazy Initialization**: Helper functions are only constructed when explicitly called @@ -169,20 +172,55 @@ const balance = await getAllBalances({ }); ``` +For example, customized hooks are functions that return the result you want: + +```typescript +// Import only what you need +import { useQueryHooks } from "../hooks/useQueryHooks"; +import { defaultContext } from "@tanstack/react-query"; +import { useGetBalance } from "codegen/cosmos/bank/v1beta1/query.rpc.react"; + +// Initialize RPC endpoint +const { rpcEndpoint } = + useQueryHooks(defaultChainName, { + context: defaultContext, + enabled: !!address, + }); + +//Now you can get balance by tree shakable hooks +const balanceRes = useGetBalance({ + request: { + address: address || '', + denom: 'osmo', + }, + options: { + context: defaultContext, + enabled: !!address && !!rpcEndpoint, + select: ({ balance }) => balance?.amount, + staleTime: 0, + }, + clientResolver: rpcEndpoint, +}) + +const balance = balanceRes?.data +``` + #### Available Helper Types -InterchainJS provides two main types of tree shakable helpers: +InterchainJS provides two main types of tree shakable helpers and customized hooks: -1. **Query Helpers**: For retrieving data from the blockchain +1. **Query Helpers/Customized Hooks**: For retrieving data from the blockchain ```js import { createGetValidator } from "@interchainjs/cosmos/staking/v1beta1/query.rpc.func"; + import { useGetValidators } from "@interchainjs/cosmos/staking/v1beta1/query.rpc.react"; ``` -2. **Transaction Helpers**: For broadcasting transactions +2. **Transaction Helpers/Customized Hooks**: For broadcasting transactions ```js import { createDelegate } from "@interchainjs/cosmos/staking/v1beta1/tx.rpc.func"; + import { useDelegate } from "@interchainjs/cosmos/staking/v1beta1/tx.rpc.react"; ``` #### Example: Combining Query and Transaction Helpers @@ -238,18 +276,6 @@ These tree shakable helpers can be used with framework-specific implementations: import { useGetAllBalances } from "@interchainjs/vue/cosmos/bank/v1beta1/query.rpc.vue"; ``` -### Query and Tx Helpers - -InterchainJS provides specialized helper functions that simplify the process of querying blockchain data and submitting transactions. These helpers abstract away the complexity of creating, signing, and broadcasting messages, allowing developers to focus on application logic rather than protocol details. - -#### Transaction Helpers - -Transaction (Tx) helpers streamline the creation and submission of blockchain transactions: - -```js -import { createSend } from "@interchainjs/cosmos/bank/v1beta1/tx.rpc.func"; -``` - #### Examples and Documentation For detailed usage examples and implementation patterns, refer to the test suite in the [starship/**tests**](https://github.com/hyperweb-io/interchainjs/tree/main/libs/interchainjs/starship/__tests__) directory. From 3f82c303943c907e9cf5a5056228ffac3b51cfd8 Mon Sep 17 00:00:00 2001 From: Gefei Hou Date: Fri, 14 Mar 2025 15:59:21 +0800 Subject: [PATCH 6/8] Updated tree shakable hooks related docs --- libs/interchain-react/README.md | 122 ++++++++++++++++++++++++++++++++ libs/interchain-vue/README.md | 120 +++++++++++++++++++++++++++++++ libs/interchainjs/README.md | 44 ++---------- 3 files changed, 246 insertions(+), 40 deletions(-) diff --git a/libs/interchain-react/README.md b/libs/interchain-react/README.md index 645d7e60..53ffad4e 100644 --- a/libs/interchain-react/README.md +++ b/libs/interchain-react/README.md @@ -14,6 +14,128 @@ React query helper hooks(Tx, Query) generated by Telescope. +### Tree Shakable Helpers + +InterchainJS provides tree shakable helper functions to optimize your application's bundle size. These helpers follow a factory pattern that allows modern JavaScript bundlers to eliminate unused code through tree shaking. These helpers improve modularity and optimize performance by allowing you to import only the functionality you need. +Tree shakable tutorial video: https://youtu.be/3dRm9HEklMo + +#### How Tree Shakable Helpers Work + +Each helper function is individually exported using a `create*` prefix (e.g., `createGetAllBalances`). +Each customized hook is individually exported using a `use*` prefix (e.g., `useGetBalance`) +This pattern enables: + +1. **Bundle Size Optimization**: Only the functions you import and use are included in your final bundle +2. **Lazy Initialization**: Helper functions are only constructed when explicitly called +3. **Customizable Configuration**: Each helper can be configured with specific parameters + +For example, query helpers are functions that return other functions, constructed with specific parameters: + +```js +// Import only what you need +import { createQueryRpc } from "@interchainjs/cosmos/utils"; +import { createGetAllBalances } from "@interchainjs/cosmos/bank/v1beta1/query.rpc.func"; + +// Initialize RPC client +const rpc = createQueryRpc(endpoint); + +// Create the specific helper function you need +const getAllBalances = createGetAllBalances(rpc); + +// Now you can query the blockchain +const balance = await getAllBalances({ + address: "cosmos1addresshere", +}); +``` + +For example, customized hooks are functions that return the result you want: + +```typescript +// Import only what you need +import { defaultContext } from "@tanstack/react-query"; +import { useGetBalance } from "@interchainjs/react/cosmos/bank/v1beta1/query.rpc.react"; + +// Initialize RPC endpoint and address +const { rpcEndpoint } = + useQueryHooks(defaultChainName, { + context: defaultContext, + enabled: !!address, + }); + +//Now you can get balance by tree shakable hooks +const balanceRes = useGetBalance({ + request: { + address: address || '', + denom: 'osmo', + }, + options: { + context: defaultContext, + enabled: !!address && !!rpcEndpoint, + select: ({ balance }) => balance?.amount, + staleTime: 0, + }, + clientResolver: rpcEndpoint, +}) + +const balance = balanceRes?.data +``` + +#### Available Helper Types + +InterchainJS provides two main types of tree shakable helpers and customized hooks: + +1. **Query Helpers/Customized Hooks**: For retrieving data from the blockchain + + ```js + import { createGetValidator } from "@interchainjs/cosmos/staking/v1beta1/query.rpc.func"; + import { useGetValidators } from "@interchainjs/react/cosmos/staking/v1beta1/query.rpc.react"; + ``` + +2. **Transaction Helpers/Customized Hooks**: For broadcasting transactions + + ```js + import { createDelegate } from "@interchainjs/cosmos/staking/v1beta1/tx.rpc.func"; + import { useDelegate } from "@interchainjs/react/cosmos/staking/v1beta1/tx.rpc.react"; + ``` + +#### Example: Combining Query and Transaction Helpers + +Here's how you might use both types together in a staking scenario: + +```js +// Import helpers +import { createQueryRpc } from "@interchainjs/cosmos/utils"; +import { createGetValidator } from "@interchainjs/cosmos/staking/v1beta1/query.rpc.func"; +import { createDelegate } from "@interchainjs/cosmos/staking/v1beta1/tx.rpc.func"; + +// Setup query client +const rpc = createQueryRpc(endpoint); +const getValidator = createGetValidator(rpc); + +// Query validator info +const { validator } = await getValidator({ + validatorAddr: "cosmosvaloper1...", +}); + +// Setup transaction function +const delegate = createDelegate(signingClient); + +// Execute delegation +const result = await delegate( + signerAddress, + { + delegatorAddress: signerAddress, + validatorAddress: validator.operatorAddress, + amount: { denom: "uatom", amount: "1000000" }, + }, + fee, + "Delegation via InterchainJS" +); +``` + +By importing only the specific helpers you need, you ensure that your application bundle remains as small and efficient as possible. + + ## Interchain JavaScript Stack ⚛️ A unified toolkit for building applications and smart contracts in the Interchain ecosystem diff --git a/libs/interchain-vue/README.md b/libs/interchain-vue/README.md index f6fa0743..7b574211 100644 --- a/libs/interchain-vue/README.md +++ b/libs/interchain-vue/README.md @@ -14,6 +14,126 @@ React query helper hooks(Tx, Query) generated by Telescope. +### Tree Shakable Helpers + +InterchainJS provides tree shakable helper functions to optimize your application's bundle size. These helpers follow a factory pattern that allows modern JavaScript bundlers to eliminate unused code through tree shaking. These helpers improve modularity and optimize performance by allowing you to import only the functionality you need. +Tree shakable tutorial video: https://youtu.be/3dRm9HEklMo + +#### How Tree Shakable Helpers Work + +Each helper function is individually exported using a `create*` prefix (e.g., `createGetAllBalances`). +Each customized hook is individually exported using a `use*` prefix (e.g., `useGetBalance`) +This pattern enables: + +1. **Bundle Size Optimization**: Only the functions you import and use are included in your final bundle +2. **Lazy Initialization**: Helper functions are only constructed when explicitly called +3. **Customizable Configuration**: Each helper can be configured with specific parameters + +For example, query helpers are functions that return other functions, constructed with specific parameters: + +```js +// Import only what you need +import { createQueryRpc } from "@interchainjs/cosmos/utils"; +import { createGetAllBalances } from "@interchainjs/cosmos/bank/v1beta1/query.rpc.func"; + +// Initialize RPC client +const rpc = createQueryRpc(endpoint); + +// Create the specific helper function you need +const getAllBalances = createGetAllBalances(rpc); + +// Now you can query the blockchain +const balance = await getAllBalances({ + address: "cosmos1addresshere", +}); +``` + +For example, customized hooks are functions that return the result you want: + +```typescript +// Import only what you need +import { useGetBalance } from '@interchainjs/vue/cosmos/bank/v1beta1/query.rpc.vue'; + +// Initialize RPC endpoint and address, then you can get balance by tree shakable hooks + const request = computed(() => ({ + address: address.value, + denom, + })); + + const { + data: balance, + isSuccess: isBalanceLoaded, + isLoading: isFetchingBalance, + refetch: refetchBalance + } = useGetBalance({ + request, + options: { + enabled: !!address, + select: ({ balance }) => + new BigNumber(balance?.amount ?? 0).multipliedBy( + 10 ** -COIN_DISPLAY_EXPONENT + ), + }, + clientResolver: rpcEndpoint, + }) +``` + +#### Available Helper Types + +InterchainJS provides two main types of tree shakable helpers and customized hooks: + +1. **Query Helpers/Customized Hooks**: For retrieving data from the blockchain + + ```js + import { createGetValidator } from "@interchainjs/cosmos/staking/v1beta1/query.rpc.func"; + import { useGetValidators } from "@interchainjs/vue/cosmos/staking/v1beta1/query.rpc.vue"; + ``` + +2. **Transaction Helpers/Customized Hooks**: For broadcasting transactions + + ```js + import { createDelegate } from "@interchainjs/cosmos/staking/v1beta1/tx.rpc.func"; + import { useDelegate } from "@interchainjs/vue/cosmos/staking/v1beta1/tx.rpc.vue"; + ``` + +#### Example: Combining Query and Transaction Helpers + +Here's how you might use both types together in a staking scenario: + +```js +// Import helpers +import { createQueryRpc } from "@interchainjs/cosmos/utils"; +import { createGetValidator } from "@interchainjs/cosmos/staking/v1beta1/query.rpc.func"; +import { createDelegate } from "@interchainjs/cosmos/staking/v1beta1/tx.rpc.func"; + +// Setup query client +const rpc = createQueryRpc(endpoint); +const getValidator = createGetValidator(rpc); + +// Query validator info +const { validator } = await getValidator({ + validatorAddr: "cosmosvaloper1...", +}); + +// Setup transaction function +const delegate = createDelegate(signingClient); + +// Execute delegation +const result = await delegate( + signerAddress, + { + delegatorAddress: signerAddress, + validatorAddress: validator.operatorAddress, + amount: { denom: "uatom", amount: "1000000" }, + }, + fee, + "Delegation via InterchainJS" +); +``` + +By importing only the specific helpers you need, you ensure that your application bundle remains as small and efficient as possible. + + ## Interchain JavaScript Stack ⚛️ A unified toolkit for building applications and smart contracts in the Interchain ecosystem diff --git a/libs/interchainjs/README.md b/libs/interchainjs/README.md index 3a151dae..6229e567 100644 --- a/libs/interchainjs/README.md +++ b/libs/interchainjs/README.md @@ -140,13 +140,12 @@ const balance = await getAllBalances({ ### Tree Shakable Helpers -InterchainJS provides tree shakable helper functions to optimize your application's bundle size. These helpers follow a factory pattern that allows modern JavaScript bundlers to eliminate unused code through tree shaking. These hooks improve modularity and optimize performance by allowing you to import only the functionality you need. +InterchainJS provides tree shakable helper functions to optimize your application's bundle size. These helpers follow a factory pattern that allows modern JavaScript bundlers to eliminate unused code through tree shaking. These helpers improve modularity and optimize performance by allowing you to import only the functionality you need. Tree shakable tutorial video: https://youtu.be/3dRm9HEklMo #### How Tree Shakable Helpers Work Each helper function is individually exported using a `create*` prefix (e.g., `createGetAllBalances`). -Each customized hook is individually exported using a `use*` prefix (e.g., `useGetBalance`) This pattern enables: 1. **Bundle Size Optimization**: Only the functions you import and use are included in your final bundle @@ -172,55 +171,20 @@ const balance = await getAllBalances({ }); ``` -For example, customized hooks are functions that return the result you want: - -```typescript -// Import only what you need -import { useQueryHooks } from "../hooks/useQueryHooks"; -import { defaultContext } from "@tanstack/react-query"; -import { useGetBalance } from "codegen/cosmos/bank/v1beta1/query.rpc.react"; - -// Initialize RPC endpoint -const { rpcEndpoint } = - useQueryHooks(defaultChainName, { - context: defaultContext, - enabled: !!address, - }); - -//Now you can get balance by tree shakable hooks -const balanceRes = useGetBalance({ - request: { - address: address || '', - denom: 'osmo', - }, - options: { - context: defaultContext, - enabled: !!address && !!rpcEndpoint, - select: ({ balance }) => balance?.amount, - staleTime: 0, - }, - clientResolver: rpcEndpoint, -}) - -const balance = balanceRes?.data -``` - #### Available Helper Types -InterchainJS provides two main types of tree shakable helpers and customized hooks: +InterchainJS provides two main types of tree shakable helpers: -1. **Query Helpers/Customized Hooks**: For retrieving data from the blockchain +1. **Query Helpers**: For retrieving data from the blockchain ```js import { createGetValidator } from "@interchainjs/cosmos/staking/v1beta1/query.rpc.func"; - import { useGetValidators } from "@interchainjs/cosmos/staking/v1beta1/query.rpc.react"; ``` -2. **Transaction Helpers/Customized Hooks**: For broadcasting transactions +2. **Transaction Helpers**: For broadcasting transactions ```js import { createDelegate } from "@interchainjs/cosmos/staking/v1beta1/tx.rpc.func"; - import { useDelegate } from "@interchainjs/cosmos/staking/v1beta1/tx.rpc.react"; ``` #### Example: Combining Query and Transaction Helpers From bf1bd6620fa45d3ed31481e0303b0c9a8dfd3f73 Mon Sep 17 00:00:00 2001 From: Eason Date: Mon, 17 Mar 2025 08:34:23 +1300 Subject: [PATCH 7/8] doc for ethereum --- networks/ethereum/README.md | 29 ++++++++++++++++++++++++++++- 1 file changed, 28 insertions(+), 1 deletion(-) diff --git a/networks/ethereum/README.md b/networks/ethereum/README.md index 7fb37e95..13f0b13e 100644 --- a/networks/ethereum/README.md +++ b/networks/ethereum/README.md @@ -20,9 +20,36 @@ Transaction codec and client to communicate with ethereum blockchain. npm install @interchainjs/ethereum ``` +In the frontend + +``` typescript +import { SignerFromBrowser } from "@interchainjs/ethereum/signers/SignerFromBrowser" +const signer = new SignerFromBrowser(window.ethereum) +const tx = await signer.send({ + to: recipientAddress, + value: BigInt(10**18), +}) +const receipt = await tx.wait() +``` + +Using private key + +``` typescript +import { SignerFromPrivateKey } from "@interchainjs/ethereum/signers/SignerFromPrivateKey" +const signer = new SignerFromPrivateKey(privateKey, RPC_URL) +const { txHash, wait } = await signer.sendEIP1559TransactionAutoGasLimit( + recipientAddress, + amount +) +const receipt = await wait() +``` + + + ## Implementations -- **eip712 signer** from `@interchainjs/ethereum/eip712` +- **SignerFromPrivateKey** from `@interchainjs/ethereum/signers/SignerFromPrivateKey` +- **SignerFromBrowser** from `@interchainjs/ethereum/signers/SignerFromBrowser` ## Interchain JavaScript Stack ⚛️ From bd75f8110af1dad518f476e7fb8e7b1246155b46 Mon Sep 17 00:00:00 2001 From: zhizhendev Date: Mon, 17 Mar 2025 07:46:20 +0800 Subject: [PATCH 8/8] refresh table of contents --- libs/interchainjs/README.md | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/libs/interchainjs/README.md b/libs/interchainjs/README.md index 6229e567..e1c722de 100644 --- a/libs/interchainjs/README.md +++ b/libs/interchainjs/README.md @@ -24,14 +24,17 @@ npm install interchainjs - [InterchainJS](#interchainjs) - [Install](#install) -- [Table of Contents](#table-of-contents) - [Introduction](#interchainjs-universal-signing-for-web3) - [Overview](#overview) -- [Tutorials and Docs](#tutorials--documentation) - +- [Tutorials & Documentation](#tutorials--documentation) - [RPC Clients](#rpc-clients) - - [Query and Tx Helpers](#query-and-tx-helpers) - + - [Tree Shakable Helpers](#tree-shakable-helpers) + - [Module-Specific Helpers](#module-specific-helpers) +- [Connecting with Wallets and Signing Messages](#connecting-with-wallets-and-signing-messages) + - [Initializing the Signing Client](#initializing-the-signing-client) + - [Creating Signers](#creating-signers) + - [Broadcasting Messages](#broadcasting-messages) + - [All In One Example](#all-in-one-example) - [Amino Helpers](#amino-helpers) - [Auth](#auth) - [Crypto Helpers](#crypto-helpers) @@ -42,6 +45,8 @@ npm install interchainjs - [Cosmos Network](#cosmos-network) - [Injective Network](#injective-network) - [Ethereum Network](#ethereum-network) +- [Developing](#developing) + - [Codegen](#codegen) - [Interchain JavaScript Stack ⚛️](#interchain-javascript-stack-️) - [Credits](#credits) - [Disclaimer](#disclaimer)