This guide will walk you through the process of integrating Cosmos Kit with the Leap Social Login SDK, which uses Capsule for MPC-based key management. This integration allows you to add social login capabilities to your Cosmos-based application.

​
Prerequisites

Before you begin, make sure you have:

  1. An API key from Capsule. You can request one here.
  2. Familiarity with Cosmos Kit and Next.js.

​
Installation

First, install the necessary packages:

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

​
Configuration

​
Next.js Configuration

Add the following to your next.config.js file:

module.exports = {
  // ... other configurations
  transpilePackages: [
    "@cosmos-kit/leap-social-login",
    "@leapwallet/capsule-web-sdk-lite",
    "@leapwallet/cosmos-social-login-capsule-provider",
  ],
};

​
Environment Variables

Set up the following environment variables:

  • NEXT_PUBLIC_CAPSULE_API_KEY: Your Capsule API key
  • NEXT_PUBLIC_CAPSULE_ENV: Set to BETA for development and testing, or PROD for production

​
Integration

​
Dynamic Import of Social Login Wallet

In your main app file (e.g., pages/_app.tsx), dynamically import the Leap Capsule Social Login wallet:

import { useState, useEffect } from "react";
import { AppProps } from "next/app";
import { ChainProvider } from "@cosmos-kit/react";
import { chains, assets } from "chain-registry";
import { MainWalletBase } from "@cosmos-kit/core";

function MyApp({ Component, pageProps }: AppProps) {
  const defaultWallets: MainWalletBase[] = [...keplrWallets, ...leapWallets];
  const [wallets, setWallets] = useState<MainWalletBase[]>(defaultWallets);
  const [loadingWallets, setLoadingWallet] = useState<boolean>(true);

  useEffect(() => {
    import("@cosmos-kit/leap-capsule-social-login")
      .then((CapsuleModule) => CapsuleModule.wallets)
      .then((leapSocialLogin) => {
        setWallets([...defaultWallets, ...leapSocialLogin]);
        setLoadingWallet(false);
      });
  }, []);

  if (loadingWallets) {
    return <>Loading...</>;
  }

  return (
    <ChainProvider
      chains={chains}
      assetLists={assets}
      wallets={wallets}
      // ... other ChainProvider props
    >
      <Component {...pageProps} />
      <CustomCapsuleModalView />
    </ChainProvider>
  );
}

export default MyApp;

​
Implementing the Custom Capsule Modal

Create a custom component for the Capsule Modal:

import { useState, useEffect } from "react";
import dynamic from "next/dynamic";

const LeapSocialLogin = dynamic(
  () => import("@leapwallet/cosmos-social-login-capsule-provider-ui").then((m) => m.CustomCapsuleModalView),
  { ssr: false }
);

export function CustomCapsuleModalView() {
  const [showCapsuleModal, setShowCapsuleModal] = useState(false);

  useEffect(() => {
    window.openCapsuleModal = () => setShowCapsuleModal(true);
  }, []);

  return (
    <LeapSocialLogin
      showCapsuleModal={showCapsuleModal}
      setShowCapsuleModal={setShowCapsuleModal}
      theme="dark"
      onAfterLoginSuccessful={() => {
        window.successFromCapsuleModal();
      }}
      onLoginFailure={() => {
        window.failureFromCapsuleModal();
      }}
    />
  );
}

​
Usage

With this setup, you can now use the Leap Social Login in your Cosmos Kit-enabled application. The social login option will appear alongside other wallet options when connecting.

To programmatically open the Capsule Modal:

window.openCapsuleModal();

​
Customization

You can customize the appearance and behavior of the Capsule Modal by adjusting the props passed to LeapSocialLogin. Refer to the @leapwallet/cosmos-social-login-capsule-provider-ui documentation for more customization options.

​
Notes

  • This integration uses Capsule for MPC-based key management. Ensure you have the necessary permissions and have reviewed Capsule’s terms of service.
  • The social login functionality is loaded dynamically to support SSR in Next.js applications.
  • Make sure to handle the success and failure callbacks (successFromCapsuleModal and failureFromCapsuleModal) according to your application’s needs.

By following this guide, you can successfully integrate Cosmos Kit with Leap Social Login, providing your users with a seamless social authentication experience in your Cosmos-based application.

Was this page helpful?

Leap Social LoginMigration Guide