Integrate CosmosKit and Keplr CosmosKit is a wallet adapter for developers to build apps that quickly and easily interact with Cosmos blockchains and wallets.
Quickstart 🏁 Get started quickly by using create-cosmos-app(opens new window) to help you build high-quality Cosmos apps fast!
Use CosmosKit from Scratch 1️. Install Dependencies
Copy
yarn add @cosmos-kit/react @cosmos-kit/keplr chain-registry
@cosmos-kit/react includes default modal made with @interchain-ui/react. If customized modal is provided, you can use @cosmos-kit/react-lite instead to lighter your app.
There are multiple wallets supported by CosmosKit. Details see Integrating Wallets
2️. Wrap Provider First, add ChainProviderrequired properties .
Example:
Copy
import * as React from 'react';
import { ChainProvider } from '@cosmos-kit/react';
import { chains, assets } from 'chain-registry';
import { wallets } from '@cosmos-kit/keplr';
// Import this in your top-level route/layout
import "@interchain-ui/react/styles";
function CosmosApp() {
return (
<ChainProvider
chains={chains} // supported chains
assetLists={assets} // supported asset lists
wallets={wallets} // supported wallets
walletConnectOptions={...} // required if `wallets` contains mobile wallets
>
<YourWalletRelatedComponents />
</ChainProvider>
);
}
3️. Consume with Hook Take useChain as an example.
Copy
import * as React from 'react';
import { useChain } from "@cosmos-kit/react";
function Component ({ chainName }: { chainName: string }) => {
const chainContext = useChain(chainName);
const {
status,
username,
address,
message,
connect,
disconnect,
openView,
} = chainContext;
}