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

# Cosmos Kit

import { Callout } from 'nextra/components'

Sign a transaction using [CosmosKit](https://cosmoskit.com/) wallet adapters. This demo connects a [Keplr](https://www.keplr.app/) browser wallet or [Ledger](https://www.ledger.com/) hardware wallet and signs a test message; no transaction is broadcast.

**Try it:** Click Connect to link your wallet, then click Sign to sign a test message. The resulting signature hash is displayed.

<CosmosKit />

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

## Ledger setup

If you are using a Ledger hardware wallet:

- Install the `cosmoshub` app on the Ledger
- Connect it to your computer and unlock it
- Open the Cosmos Hub app
- Grant browser permissions when prompted (try another browser if no prompt appears)

## How this works

The component uses CosmosKit to manage wallet connections across different wallet providers (Keplr, Ledger). When you click Sign, it constructs a message, requests your wallet to sign it, and displays the signature hash. This demonstrates how to integrate Cosmos-compatible wallets into a web application that interacts with the Nyx blockchain.

<FormattedCosmoskitExampleCode />
