import "@interchain-ui/react/styles"
import { CosmosKit } from "../../components/cosmos-kit";
import { Callout } from 'nextra/components'
import FormattedCosmoskitExampleCode from '../../code-examples/cosmoskit-example-code.mdx';

# Cosmos Kit

Below is an example that uses [CosmosKit](https://cosmoskit.com/) to connect your [Keplr wallet](https://www.keplr.app/) or
[Ledger hardware wallet](https://www.ledger.com/) to this page:

<CosmosKit />

Once you connect either Keplr or your hardware Ledger, you can request a fake transaction to be signed. The hash
of the message will be displayed.

<Callout type="info" emoji="ℹ️">
  No transactions will be broadcast. You will only be signing a transaction.
</Callout>

If you are using the Ledger hardware wallet, please make sure:

- you have the `cosmoshub` app installed on the Ledger
- it is connected to your computer
- it is unlocked
- the Cosmos Hub app is open
- grant permissions to your browser when you click the button above to connect to the Ledger (if you do not see a prompt, try another browser)

<FormattedCosmoskitExampleCode />
