Docs for interchainjs

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);

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);

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

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