✨ Get Access Github

Cosmos Quickstart

Introduction

Capsule for Cosmos offers a comprehensive solution for integrating Cosmos blockchain functionality into your application. With Capsule, you can:

  • Simplify User Onboarding: Enable users to join your application effortlessly using email, phone number, or social login.

  • Unify Accounts Across Ecosystems: Provide a seamless experience with unified accounts that work across both EVM and Cosmos ecosystems.

  • Enable In-App Transaction Signing: Empower users to sign Cosmos transactions directly within your application, enhancing user experience and security.

  • Leverage Cosmos-Specific Features: Access tailored interfaces for gas management and other Cosmos-specific functionalities.

Capsule can be integrated either directly or through our partnership with Leap Wallet.

Note: To use Capsule, you will need a CAPSULE_API_KEY and CAPSULE_ENV. You can request these from here.

Direct Capsule Integration

Installation

To integrate Capsule directly into your project, install the necessary packages:

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

Configuration and Usage

Follow these steps to set up and use the Capsule Proto Signer for Cosmos:

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

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

// Connect to the Cosmos network using the Capsule Proto Signer
const client = await SigningStargateClient.connectWithSigner(COSMOS_TESTNET_RPC, protoSigner);

// Now you can use 'client' to interact with the Cosmos network

Note: You need to instantiate a Capsule client instance before using the Proto Signer. Refer to the Web Modal & SDK Setup documentation for details on creating a Capsule client.

For comprehensive examples of signing transactions, please consult our signing transactions documentation.

Integration via Leap Wallet Partnership

We've collaborated with Leap Wallet to provide enhanced functionality:

  • Cosmos Kit Capsule connector

  • Cosmos-specific in-wallet UI for balance viewing, transaction history, token transfers, swapping, and bridging within your application

Using Leap's Embedded Solution

Installation

To use Capsule via Leap's Cosmos Kit wallet adapter, install these packages:

npm install @leapwallet/cosmos-social-login-provider-ui @leapwallet/cosmos-social-login-capsule-provider

Configuration and Usage

Set up and use the Leap Cosmos Kit wallet adapter as follows:

leap-integration.js
import CustomCapsuleModalView from "@leapwallet/cosmos-social-login-provider-ui";
import { CapsuleProvider } from "@leapwallet/cosmos-social-login-capsule-provider";

// Configure options for the Capsule Provider
const options = {
  env: Environment.PRODUCTION,
  apiKey: "your-api-key-here",
  opts: {
    emailPrimaryColor: "#ff5733",
    homepageUrl: "https://customurl.com",
    portalTheme: {
      backgroundColor: "#ffffff",
      foregroundColor: "#ff5733",
      borderRadius: "lg",
    },
  },
};

// Create a new CapsuleProvider instance with the options
const capsuleProvider = new CapsuleProvider(options);

// Use the CapsuleProvider in your React component
const YourComponent = () => {
  const [showModal, setShowModal] = useState(false);

  const handleAfterLogin = () => {
    // Handle successful login
  };

  const handleLoginFailure = (error) => {
    // Handle login failure
  };

  return (
    <CustomCapsuleModalView
      capsule={capsuleProvider.getClient()}
      showCapsuleModal={showModal}
      setShowCapsuleModal={setShowModal}
      onAfterLoginSuccessful={handleAfterLogin}
      onLoginFailure={handleLoginFailure}
      theme="light" // Optional: Specify 'light' or 'dark' theme
    />
  );
};

Note: While optional, we highly recommend passing the opts values in the options object. These settings allow for customization of the Capsule Portal, ensuring it's fully branded to match your application. The emailPrimaryColor, homepageUrl, and portalTheme properties enable you to tailor the look and feel of the Capsule experience to seamlessly integrate with your app's design.

With this configuration, you're ready to use Leap's custom Capsule integration. For more details, visit:

Real-world Examples

Here are some live examples of the Leap's Capsule provider in action:

Troubleshooting and Support

If you encounter any issues or have questions, please refer to our extensive documentation or reach out to our dedicated support team for assistance.

PreviousWagmi, Viem, and Ethers QuickstartNextSolana Quickstart

Last updated