injective-react

injective-react

install

npm install injective-react

Table of contents

• injective-react
  • install
  • Table of contents
  • Usage
    • RPC Clients
    • Tx Hooks
    • Tx Helpers
      • Auction
      • Exchange
      • Insurance
      • OCR
      • Oracle
      • Peggy
      • CosmWasm
      • IBC
      • Cosmos
    • Composing Messages
      • Auction Messages
      • Exchange Messages
      • Insurance Messages
      • OCR Messages
      • Oracle Messages
      • Peggy Messages
      • CosmWasm Messages
      • IBC Messages
      • Cosmos Messages
  • Connecting with Wallets and Signing Messages
    • Initializing the Signing Client
    • Creating Signers
    • Broadcasting Messages
    • All In One Example
  • Advanced Usage
  • Developing
    • Codegen
    • Publishing
  • Credits
  • License

Usage

RPC Clients

import { getAllBalances } from "injectivejs/cosmos/bank/v1beta1/query.rpc.func";
import { getExchangeBalances } from "injectivejs/injective/exchange/v1beta1/query.rpc.func";

{ getRpcEndpoint } = useChain("injective");

const endpoint = await getRpcEndpoint();

// now you can query the cosmos modules
const balance = await getAllBalances(endpoint, {
  address: "inj1addresshere",
});

// you can also query the injective modules
const exchangeBalance = await getExchangeBalances(endpoint, {});

Tx Hooks

injective-react provides hooks for sending transactions. These hooks are built on top of the useQuery hook and the useMutation hook from react-query. The hooks are designed to be used with the useDelegate and useGetValidators functions from injectivejs.

There's also an all in one example of how to use these hooks in the all in one example section.

import { useDelegate } from "injective-react/cosmos/staking/v1beta1/tx.rpc.react";
import { useGetValidators } from "injective-react/cosmos/staking/v1beta1/query.rpc.react";

const {
  data,
  isSuccess: isGetValidatorsDone,
  isLoading: isGetValidatorsLoading,
} = useGetValidators({
  request: {
    status: "BOND_STATUS_BONDED",
  },
  options: {
    context: defaultContext,
    enabled: !validatorAddress,
  },
  rpcClient,
});

const { mutate: delegate, isSuccess: isDelegateSuccess } = useDelegate({
  clientResolver: signingClient,
  options: {
    context: defaultContext,
    onSuccess: (data: any) => {
      console.log("onSuccess", data);
    },
    onError: (error) => {
      console.log("onError", error);
    },
  },
});

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 networks/injective repo

There're also react hooks for helper functions. Please see the Tx Hooks section.

import {
  deposit,
  liquidatePosition,
  activateStakeGrant,
} from "injectivejs/injective/exchange/v1beta1/tx.rpc.func";

Auction

import { bid } from "injectivejs/injective/auction/v1beta1/tx.rpc.func";

Exchange

import {
  activateStakeGrant,
  adminUpdateBinaryOptionsMarket,
  authorizeStakeGrants,
  batchCancelBinaryOptionsOrders,
  batchCancelDerivativeOrders,
  batchCancelSpotOrders,
  batchCreateDerivativeLimitOrders,
  batchCreateSpotLimitOrders,
  batchUpdateOrders,
  cancelBinaryOptionsOrder,
  cancelDerivativeOrder,
  cancelSpotOrder,
  createBinaryOptionsLimitOrder,
  createBinaryOptionsMarketOrder,
  createDerivativeLimitOrder,
  createDerivativeMarketOrder,
  createSpotLimitOrder,
  createSpotMarketOrder,
  decreasePositionMargin,
  deposit,
  emergencySettleMarket,
  externalTransfer,
  increasePositionMargin,
  instantBinaryOptionsMarketLaunch,
  instantExpiryFuturesMarketLaunch,
  instantPerpetualMarketLaunch,
  instantSpotMarketLaunch,
  liquidatePosition,
  privilegedExecuteContract,
  rewardsOptOut,
  subaccountTransfer,
  updateDerivativeMarket,
  updateParams,
  updateSpotMarket,
  withdraw,
} from "injectivejs/injective/exchange/v1beta1/tx.rpc.func";

Insurance

import {
  createInsuranceFund,
  requestRedemption,
  underwrite,
} from "injectivejs/injective/insurance/v1beta1/tx.rpc.func";

OCR

import {
  acceptPayeeship,
  createFeed,
  fundFeedRewardPool,
  setPayees,
  transferPayeeship,
  transmit,
  updateFeed,
  withdrawFeedRewardPool,
} from "injectivejs/injective/ocr/v1beta1/tx.rpc.func";

Oracle

import {
  relayBandRates,
  relayCoinbaseMessages,
  relayPriceFeedPrice,
  relayProviderPrices,
  relayPythPrices,
  relayStorkMessage,
  requestBandIBCRates,
} from "injectivejs/injective/oracle/v1beta1/tx.rpc.func";

Peggy

import {
  blacklistEthereumAddresses,
  cancelSendToEth,
  confirmBatch,
  depositClaim,
  eRC20DeployedClaim,
  requestBatch,
  revokeEthereumBlacklist,
  sendToEth,
  setOrchestratorAddresses,
  submitBadSignatureEvidence,
  valsetConfirm,
  valsetUpdateClaim,
  withdrawClaim,
} from "injectivejs/injective/peggy/v1/msgs.rpc.func";

CosmWasm

import {
  executeContract,
  clearAdmin,
  instantiateContract,
  instantiateContract2,
  migrateContract,
  pinCodes,
  removeCodeUploadParamsAddresses,
  storeAndInstantiateContract,
  storeCode,
  sudoContract,
  unpinCodes,
  updateAdmin,
  updateContractLabel,
  updateInstantiateConfig,
  addCodeUploadParamsAddresses,
  storeAndMigrateContract,
} from "injectivejs/cosmwasm/wasm/v1/tx.rpc.func";

IBC

import { transfer } from "injectivejs/ibc/applications/transfer/v1/tx.rpc.func";

Cosmos

import {
  fundCommunityPool,
  communityPoolSpend,
  depositValidatorRewardsPool,
} from "injectivejs/cosmos/distribution/v1beta1/tx.rpc.func";

import { send, multiSend } from "injectivejs/cosmos/bank/v1beta1/tx.rpc.func";

import {
  delegate,
  undelegate,
  cancelUnbondingDelegation,
  createValidator,
} from "injectivejs/cosmos/staking/v1beta1/tx.rpc.func";

import {
  deposit,
  submitProposal,
  vote,
  voteWeighted,
} from "injectivejs/cosmos/gov/v1beta1/tx.rpc.func";

Composing Messages

Import the injective object from injectivejs.

import { MessageComposer } from "injectivejs/injective/exchange/v1beta1/tx.registry";

const { createSpotLimitOrder, createSpotMarketOrder, deposit } =
  MessageComposer.withTypeUrl;

Auction Messages

import { MessageComposer } from "injectivejs/injective/auction/v1beta1/tx.registry";

const { bid } = MessageComposer.withTypeUrl;

Exchange Messages

import { MessageComposer } from "injectivejs/injective/exchange/v1beta1/tx.registry";

const {
  adminUpdateBinaryOptionsMarket,
  batchCancelBinaryOptionsOrders,
  batchCancelDerivativeOrders,
  batchCancelSpotOrders,
  batchCreateDerivativeLimitOrders,
  batchCreateSpotLimitOrders,
  batchUpdateOrders,
  cancelBinaryOptionsOrder,
  cancelDerivativeOrder,
  cancelSpotOrder,
  createBinaryOptionsLimitOrder,
  createBinaryOptionsMarketOrder,
  createDerivativeLimitOrder,
  createDerivativeMarketOrder,
  createSpotLimitOrder,
  createSpotMarketOrder,
  deposit,
  exec,
  externalTransfer,
  increasePositionMargin,
  instantBinaryOptionsMarketLaunch,
  instantExpiryFuturesMarketLaunch,
  instantPerpetualMarketLaunch,
  instantSpotMarketLaunch,
  liquidatePosition,
  rewardsOptOut,
  subaccountTransfer,
  withdraw,
} = MessageComposer.withTypeUrl;

Insurance Messages

import { MessageComposer } from "injectivejs/injective/insurance/v1beta1/tx.registry";

const { createInsuranceFund, requestRedemption, underwrite } =
  MessageComposer.withTypeUrl;

OCR Messages

import { MessageComposer } from "injectivejs/injective/ocr/v1beta1/tx.registry";

const {
  acceptPayeeship,
  createFeed,
  fundFeedRewardPool,
  setPayees,
  transferPayeeship,
  transmit,
  updateFeed,
  withdrawFeedRewardPool,
} = MessageComposer.withTypeUrl;

Oracle Messages

import { MessageComposer } from "injectivejs/injective/oracle/v1beta1/tx.registry";

const {
  relayBandRates,
  relayCoinbaseMessages,
  relayPriceFeedPrice,
  relayProviderPrices,
  requestBandIBCRates,
} = MessageComposer.withTypeUrl;

Peggy Messages

import { MessageComposer } from "injectivejs/injective/peggy/v1/tx.registry";

const {
  cancelSendToEth,
  confirmBatch,
  depositClaim,
  eRC20DeployedClaim,
  requestBatch,
  sendToEth,
  setOrchestratorAddresses,
  submitBadSignatureEvidence,
  valsetConfirm,
  valsetUpdateClaim,
  withdrawClaim,
} = MessageComposer.withTypeUrl;

CosmWasm Messages

import { MessageComposer } from "injectivejs/cosmwasm/wasm/v1/tx.registry";

const {
  clearAdmin,
  executeContract,
  instantiateContract,
  migrateContract,
  storeCode,
  updateAdmin,
} = MessageComposer.withTypeUrl;

IBC Messages

import { MessageComposer } from "injectivejs/ibc/applications/transfer/v1/tx.registry";

const { transfer } = MessageComposer.withTypeUrl;

Cosmos Messages

import { MessageComposer } from "injectivejs/cosmos/distribution/v1beta1/tx.registry";

const {
  fundCommunityPool,
  setWithdrawAddress,
  withdrawDelegatorReward,
  withdrawValidatorCommission,
} = MessageComposer.fromPartial;

import { MessageComposer } from "injectivejs/cosmos/bank/v1beta1/tx.registry";

const { multiSend, send } = MessageComposer.fromPartial;

import { MessageComposer } from "injectivejs/cosmos/staking/v1beta1/tx.registry";

const {
  beginRedelegate,
  createValidator,
  delegate,
  editValidator,
  undelegate,
} = MessageComposer.fromPartial;

import { MessageComposer } from "injectivejs/cosmos/gov/v1beta1/tx.registry";

const { deposit, submitProposal, vote, voteWeighted } =
  cosmos.gov.v1beta1.MessageComposer.fromPartial;

Connecting with Wallets and Signing Messages

⚡️ For web interfaces, we recommend using interchain-kit. Continue below to see how to manually construct signers and clients.

Here are the docs on creating signers in interchain-kit that can be used with Keplr and other wallets.

Initializing the Signing Client

Use SigningClient.connectWithSigner and pass in the signer options for injective to get your SigningClient:

import { SigningClient } from "@interchainjs/cosmos/signing-client";
import { defaultSignerOptions } from "@interchainjs/injective/defaults";

const signingClient = await SigningClient.connectWithSigner(
  await getRpcEndpoint(),
  new AminoGenericOfflineSigner(aminoOfflineSigner),
  {
    signerOptions: defaultSignerOptions.Cosmos,
  }
);

Creating Signers

To broadcast messages, you can create signers with a variety of options:

• interchain-kit (recommended)
• keplr
• cosmjs

Broadcasting Messages

When you have your signing client, you can broadcast messages:

const msg = {
  typeUrl: MsgSend.typeUrl,
  value: MsgSend.fromPartial({
    amount: [
      {
        denom: "inj",
        amount: "1000",
      },
    ],
    toAddress: address,
    fromAddress: address,
  }),
};

const fee: StdFee = {
  amount: [
    {
      denom: "inj",
      amount: "864",
    },
  ],
  gas: "86364",
};
const response = await signingClient.signAndBroadcast(address, [msg], fee);

All In One Example

For a comprehensive example of how to use InjectiveJS to send messages, please see the example here. 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 tokens, and broadcasting the transaction to the Injective blockchain.

Follow the instructions in the example to set up your InjectiveJS client and start sending messages to the Injective blockchain.

Advanced Usage

If you want to manually construct a signing client, you can do so by following the example below:

import {
    cosmosAminoConverters,
    cosmosProtoRegistry,
    cosmwasmAminoConverters,
    cosmwasmProtoRegistry,
    ibcProtoRegistry,
    ibcAminoConverters,
    injectiveAminoConverters,
    injectiveProtoRegistry
} from 'injectivejs';

const signer: OfflineSigner = /* create your signer (see above)  */
const rpcEndpoint = 'https://rpc.cosmos.directory/injective'; // or another URL

const protoRegistry: ReadonlyArray<[string, GeneratedType]> = [
    ...cosmosProtoRegistry,
    ...cosmwasmProtoRegistry,
    ...ibcProtoRegistry,
    ...injectiveProtoRegistry
];

const aminoConverters = {
    ...cosmosAminoConverters,
    ...cosmwasmAminoConverters,
    ...ibcAminoConverters,
    ...injectiveAminoConverters
};

const registry = new Registry(protoRegistry);
const aminoTypes = new AminoTypes(aminoConverters);

const signingClient = await SigningClient.connectWithSigner(rpcEndpoint, signer);

signingClient.addEncoders(registry);
signingClient.addConverters(aminoTypes);

Developing

When first cloning the repo:

pnpm install
pnpm run build:dev

Codegen

Contract schemas live in ./contracts, and protos in ./proto. Look inside of scripts/inj.telescope.json and configure the settings for bundling your SDK and contracts into injectivejs:

pnpm run codegen

Publishing

Build the types and then publish:

pnpm run build
pnpm run publish

Interchain JavaScript Stack ⚛️

A unified toolkit for building applications and smart contracts in the Interchain ecosystem

Category	Tools	Description
Chain Information	Chain Registry, Utils, Client	Everything from token symbols, logos, and IBC denominations for all assets you want to support in your application.
Wallet Connectors	Interchain Kit, Cosmos Kit	Experience the convenience of connecting with a variety of web3 wallets through a single, streamlined interface.
Signing Clients	InterchainJS, CosmJS	A single, universal signing interface for any network
SDK Clients	Telescope	Your Frontend Companion for Building with TypeScript with Cosmos SDK Modules.
Starter Kits	Create Interchain App, Create Cosmos App	Set up a modern Interchain app by running one command.
UI Kits	Interchain UI	The Interchain Design System, empowering developers with a flexible, easy-to-use UI kit.
Testing Frameworks	Starship	Unified Testing and Development for the Interchain.
TypeScript Smart Contracts	Create Hyperweb App	Build and deploy full-stack blockchain applications with TypeScript
CosmWasm Contracts	CosmWasm TS Codegen	Convert your CosmWasm smart contracts into dev-friendly TypeScript classes.

Credits

🛠 Built by the Constructive team — makers of Hyperweb

Disclaimer

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.