Warning: The Leap Social Login SDKs provided by the Leap Team are no longer in active development. We recommend using the ParaModal with Cosmos External Wallets for a more seamless experience. You can find more details in the ParaModal with Cosmos External Wallets guide for more information.

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:

npm install @cosmos-kit/leap-para-social-login @leapwallet/cosmos-social-login-para-provider @leapwallet/cosmos-social-login-para-provider-ui @cosmos-kit/react

​
Setup

​
1. Import Required Dependencies

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

​
2. Initialize Para Client

Use your existing Para client from the Getting Started guide:

import { para } from "./para";

​
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-para-social-login";
import { CustomParaModalView } from "@leapwallet/cosmos-social-login-para-provider-ui";
import "@leapwallet/cosmos-social-login-para-provider-ui/styles.css";
import { OAuthMethod } from "@getpara/web-sdk";
import { para } from "./para";

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

  const handleLoginSuccess = async () => {
    try {
      const account = await para.getAccount({ network: "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>

        <CustomParaModalView
          para={para}
          showParaModal={showModal}
          setShowParaModal={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: