Cosmos Kit
Learn how to integrate Cosmos Kit with Leap Social Login SDK
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:
- An API key from Capsule. You can request one here.
- 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 keyNEXT_PUBLIC_CAPSULE_ENV
: Set toBETA
for development and testing, orPROD
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
andfailureFromCapsuleModal
) 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?