Cosmos Kit integration enables you to use Leap Social Login within the broader Cosmos Kit wallet infrastructure. This approach combines the power of social authentication with Cosmos Kit’s standardized wallet interface and chain management capabilities.

​
Prerequisites

Before you begin, ensure you have:

​
Installation

Install the required packages using your preferred package manager:

​
Setup

​
1. Import Required Dependencies

import { ChainProvider } from "@cosmos-kit/react";
import { assets, chains } from "chain-registry";
import { wallets } from "@cosmos-kit/leap-capsule-social-login";
import { CustomCapsuleModalView } from "@leapwallet/cosmos-social-login-capsule-provider-ui";
// Required import for Leap Social Login UI styles
import "@leapwallet/cosmos-social-login-capsule-provider-ui/styles.css";
import { OAuthMethod } from "@usecapsule/web-sdk";

​
2. Initialize Capsule Client

Use your existing Capsule client from the Getting Started guide:

import { capsuleClient } from "./capsuleClient";

​
Implementation

Here’s how to implement Cosmos Kit with Leap Social Login:

import React, { useState } from "react";
import { ChainProvider } from "@cosmos-kit/react";
import { assets, chains } from "chain-registry";
import { wallets } from "@cosmos-kit/leap-capsule-social-login";
import { CustomCapsuleModalView } from "@leapwallet/cosmos-social-login-capsule-provider-ui";
import "@leapwallet/cosmos-social-login-capsule-provider-ui/styles.css";
import { OAuthMethod } from "@usecapsule/web-sdk";
import { capsuleClient } from "./capsuleClient";

const CosmosKitLogin: React.FC = () => {
  const [showModal, setShowModal] = useState(false);

  const handleLoginSuccess = async () => {
    try {
      const account = await capsuleClient.getAccount("cosmos");
      console.log("Login successful:", account);
      setShowModal(false);
    } catch (error) {
      console.error("Error getting account:", error);
    }
  };

  const handleLoginFailure = (error: Error) => {
    console.error("Login failed:", error);
    setShowModal(false);
  };

  return (
    <ChainProvider
      chains={chains}
      assetLists={assets}
      wallets={wallets}>
      <div className="leap-ui">
        <button onClick={() => setShowModal(true)}>Login with Cosmos Kit</button>

        <CustomCapsuleModalView
          capsule={capsuleClient}
          showCapsuleModal={showModal}
          setShowCapsuleModal={setShowModal}
          theme="light"
          onAfterLoginSuccessful={handleLoginSuccess}
          onLoginFailure={handleLoginFailure}
          oAuthMethods={Object.values(OAuthMethod)}
        />
      </div>
    </ChainProvider>
  );
};

export default CosmosKitLogin;

​
Important Implementation Notes

​
Working with Cosmos Kit

Once authenticated, you can use Cosmos Kit’s hooks to interact with the wallet:

import { useChain } from "@cosmos-kit/react";

function MyComponent() {
  const { connect, disconnect, wallet, status } = useChain("cosmoshub");

  // Connect wallet
  const handleConnect = async () => {
    try {
      await connect();
    } catch (error) {
      console.error("Connection error:", error);
    }
  };

  // Get wallet status
  console.log("Wallet status:", status);

  // Access wallet address
  console.log("Wallet address:", wallet.address);
}

For alternative integration options, check out:

Was this page helpful?

Leap Social LoginGraz