This guide demonstrates how to use Capsule with CosmJS for Cosmos blockchain integration. You’ll learn how to set up the integration, perform basic operations, and handle transactions using the @usecapsule/cosmjs-v0-integration package.

​
Prerequisites

Before you begin, ensure you have:

If you haven’t set up Capsule authentication yet, complete one of our authentication tutorials first and return to this guide when you’re ready to implement CosmJS integration.

​
Installation

Install the required packages using your preferred package manager:

​
Setup

For basic setup pass your Capsule instance and the address prefix to the CapsuleProtoSigner. Once created pass the signer to the SigningStargateClient.

import { CapsuleProtoSigner } from "@usecapsule/cosmjs-v0-integration";
import { SigningStargateClient } from "@cosmjs/stargate";

// Create the Capsule Proto Signer
// 'prefix' is optional and used for non-cosmos addresses (e.g., 'celestia' for celestia1... addresses)
const protoSigner = new CapsuleProtoSigner(capsule, "cosmos");

// Connect to the Cosmos network
const rpcUrl = "https://rpc.cosmos.network"; // Replace with your preferred RPC endpoint
const client = await SigningStargateClient.connectWithSigner(rpcUrl, protoSigner);

Once setup you can using the SigningStargateClient as you would normally with CosmJS. You can reference the

CosmJS Github

for more details.

​
Basic Usage

​
Get Address and Balance

// Get the signer's address
const address = protoSigner.address;
console.log("Signer address:", address);

// Query account balances
const balance = await client.getAllBalances(address);
console.log("Balance:", balance);

​
Send Tokens

For sending a transaction you can construct a transaction object and call the sendTokens method:

const recipient = "cosmos1..."; // Replace with actual recipient address
const amount = {
  denom: "uatom",
  amount: "1000000", // 1 ATOM
};

const fee = {
  amount: [{ denom: "uatom", amount: "500" }],
  gas: "200000",
};

try {
  const result = await client.sendTokens(protoSigner.address, recipient, [amount], fee);
  console.log("Transaction hash:", result.transactionHash);
} catch (error) {
  console.error("Error sending transaction:", error);
}

​
Advanced Transaction Signing

Sometimes you want more control over the transaction and not send the transaction directly. You can construct any valid message and sign it manually before broadcasting:

import { StdFee, Coin, MsgSendEncodeObject } from "@cosmjs/stargate";
import { MsgSend } from "cosmjs-types/cosmos/bank/v1beta1/tx";

// Prepare transaction details
const amount: Coin = {
  denom: "uatom",
  amount: "1000000",
};

const fee: StdFee = {
  amount: [{ denom: "uatom", amount: "500" }],
  gas: "200000",
};

// Create the message
const message: MsgSend = {
  fromAddress: protoSigner.address,
  toAddress: "cosmos1...", // recipient address
  amount: [amount],
};

const sendMessage: MsgSendEncodeObject = {
  typeUrl: "/cosmos.bank.v1beta1.MsgSend",
  value: message,
};

// Sign the transaction
const memo = "Signed with Capsule";
const signedTx = await client.sign(protoSigner.address, [sendMessage], fee, memo);

// Broadcast the transaction
const result = await client.broadcastTx(signedTx);
console.log("Transaction result:", result);

​
Multi-Chain Support

To use Capsule with different Cosmos-based chains, specify the appropriate address prefix:

// For Celestia
const celestiaSigner = new CapsuleProtoSigner(capsule, "celestia");

// For Osmosis
const osmosisSigner = new CapsuleProtoSigner(capsule, "osmo");

​
Best Practices

  1. Error Handling: Always implement robust error handling for network and signing operations
  2. Gas Estimation: Use client.simulate() when possible to estimate gas costs
  3. Security: Never expose API keys in client-side code
  4. Testing: Test thoroughly on testnets before mainnet deployment

For alternative integration options, check out:

​
Server-Side Usage

For server-side implementations, refer to our server-side guide:

For complete API reference on CosmJS, visit the official documentation:

Was this page helpful?

OverviewLeap Social Login