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";
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");
const handleConnect = async () => {
try {
await connect();
} catch (error) {
console.error("Connection error:", error);
}
};
console.log("Wallet status:", status);
console.log("Wallet address:", wallet.address);
}
For alternative integration options, check out:
