CosmJS

This guide will walk you through the process of setting up Capsule with Cosmos using the @usecapsule/cosmjs-v0-integration package. We’ll cover the basic setup and provide links to more detailed guides for specific integration scenarios.

​

Installation

First, you’ll need to install the necessary packages:

npm install @usecapsule/cosmjs-v0-integration @cosmjs/stargate

​

Basic Setup with Capsule and CosmJS

Here’s how to set up Capsule with Cosmos using CosmJS:

import { CapsuleProtoSigner } from '@usecapsule/cosmjs-v0-integration';
import { SigningStargateClient } from '@cosmjs/stargate';
import Capsule, { Environment } from '@usecapsule/web-sdk';

// Initialize Capsule
const capsule = new Capsule(Environment.BETA, YOUR_API_KEY, {
  supportedWalletTypes: { COSMOS: true }
});

// 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, prefix);

// Connect to the Cosmos network
const rpcUrl = 'https://rpc.cosmos.network';
const client = await SigningStargateClient.connectWithSigner(rpcUrl, protoSigner);

​

Usage

Once you’ve set up the SigningStargateClient with the Capsule Proto Signer, you can use it to interact with the Cosmos network. Here’s a basic example:

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

// Get the balance
const balance = await client.getAllBalances(address);
console.log('Balance:', balance);

​

Signing Transactions

To sign and send a transaction:

const recipient = 'cosmos1...';
const amount = {
  denom: 'uatom',
  amount: '1000000', // 1 ATOM
};

try {
  const result = await client.sendTokens(address, recipient, [amount], {
    amount: [{ denom: 'uatom', amount: '500' }],
    gas: '200000',
  });
  console.log('Transaction sent:', result.transactionHash);
} catch (error) {
  console.error('Error sending transaction:', error);
}

​

Advanced Integration Options

Capsule offers several ways to integrate with Cosmos, depending on your specific needs:

1. Direct Capsule Integration: For a detailed guide on using Capsule directly with CosmJS, including more advanced features and best practices, see our Direct Capsule Integration Guide.

2. Leap Social Login: If you want to leverage Leap Wallet’s social login features with Capsule, check out our Leap Social Login Integration Guide.

3. Cosmos Kit Integration: For projects using Cosmos Kit, we offer a Capsule connector. Learn how to set it up in our Cosmos Kit Integration Guide.

​

Server-Side Usage

If you need to use Capsule with Cosmos on the server-side, please check our Server-Side Signing Guide for specific instructions.

Remember to always handle errors appropriately and ensure your user is authenticated with Capsule before attempting to use the signer.

For more advanced usage and a complete API reference, please refer to the CosmJS documentation.