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 and sign a fake transaction with 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 the 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 />
