### Build and Run Cosmos-Kit Example

Source: https://github.com/hyperweb-io/cosmos-kit/blob/main/README.md

Instructions to build the project and run the example application. Navigate to the example directory and start the development server.

```sh
pnpm run build
cd packages/example
pnpm dev
```

--------------------------------

### Install OKX Wallet Package

Source: https://github.com/hyperweb-io/cosmos-kit/blob/main/docs/integrating-wallets/okx.mdx

Install the `@cosmos-kit/okxwallet` package using yarn.

```bash
yarn add @cosmos-kit/okxwallet
```

--------------------------------

### Install @cosmos-kit/cdcwallet

Source: https://github.com/hyperweb-io/cosmos-kit/blob/main/packages/docs/pages/integrating-wallets/cdc.mdx

Install the `@cosmos-kit/cdcwallet` package to include all Crypto.com wallets in your project.

```bash
yarn add @cosmos-kit/cdcwallet
```

--------------------------------

### Install imToken Package

Source: https://github.com/hyperweb-io/cosmos-kit/blob/main/packages/docs/pages/integrating-wallets/imtoken.mdx

Install the `@cosmos-kit/imtoken` package using yarn.

```bash
yarn add @cosmos-kit/imtoken
```

--------------------------------

### Install Compass Package

Source: https://github.com/hyperweb-io/cosmos-kit/blob/main/docs/integrating-wallets/compass.mdx

Install the `@cosmos-kit/compass` package using yarn.

```bash
yarn add @cosmos-kit/compass
```

--------------------------------

### Install Cosmostation Package

Source: https://github.com/hyperweb-io/cosmos-kit/blob/main/docs/integrating-wallets/cosmostation.mdx

Install the `@cosmos-kit/cosmostation` package using yarn.

```bash
yarn add @cosmos-kit/cosmostation
```

--------------------------------

### Install FoxWallet Package

Source: https://github.com/hyperweb-io/cosmos-kit/blob/main/packages/docs/pages/integrating-wallets/foxwallet.mdx

Install the `@cosmos-kit/foxwallet` package to include all available FoxWallet wallets.

```bash
yarn add @cosmos-kit/foxwallet
```

--------------------------------

### Install cosmos-kit

Source: https://github.com/hyperweb-io/cosmos-kit/blob/main/docs/integrating-wallets/adding-all-wallets.mdx

Install the cosmos-kit package using your preferred package manager.

```sh
# npm
npm i cosmos-kit

# pnpm
pnpm i cosmos-kit

# yarn
yarn add cosmos-kit
```

--------------------------------

### Install Web3Auth Package

Source: https://github.com/hyperweb-io/cosmos-kit/blob/main/docs/integrating-wallets/web3auth.mdx

Install the Web3Auth package for CosmosKit using yarn.

```bash
yarn add @cosmos-kit/web3auth
```

--------------------------------

### Install All CosmosKit Wallets

Source: https://context7.com/hyperweb-io/cosmos-kit/llms.txt

Install all available wallet adapters at once for comprehensive wallet support. This includes the main React package and the chain registry.

```sh
yarn add cosmos-kit chain-registry
```

--------------------------------

### Install Fin Wallet Package

Source: https://github.com/hyperweb-io/cosmos-kit/blob/main/docs/integrating-wallets/fin.mdx

Install the `@cosmos-kit/fin` package to include all available Fin wallets, or `@cosmos-kit/fin-extension` for only the extension wallet.

```bash
yarn add @cosmos-kit/fin
```

--------------------------------

### Install @cosmos-kit/tailwind

Source: https://github.com/hyperweb-io/cosmos-kit/blob/main/packages/docs/pages/integrating-wallets/tailwind.mdx

Install the `@cosmos-kit/tailwind` package to include all available TAILWIND wallets. Use this for a comprehensive integration.

```sh
yarn add @cosmos-kit/tailwind
```

--------------------------------

### Install Frontier Package

Source: https://github.com/hyperweb-io/cosmos-kit/blob/main/docs/integrating-wallets/frontier.mdx

Install the `@cosmos-kit/frontier` package to include all available Frontier wallets.

```bash
yarn add @cosmos-kit/frontier
```

--------------------------------

### Install Oko Wallet Package

Source: https://github.com/hyperweb-io/cosmos-kit/blob/main/docs/integrating-wallets/oko.mdx

Install the Oko wallet package using yarn.

```bash
yarn add @cosmos-kit/oko
```

--------------------------------

### Install @cosmos-kit/trust

Source: https://github.com/hyperweb-io/cosmos-kit/blob/main/docs/integrating-wallets/trust.mdx

Install the Trust Wallet package for CosmosKit using Yarn.

```bash
yarn add @cosmos-kit/trust
```

--------------------------------

### Install Keplr Wallet Package

Source: https://github.com/hyperweb-io/cosmos-kit/blob/main/docs/integrating-wallets/keplr.mdx

Install the `@cosmos-kit/keplr` package using yarn.

```bash
yarn add @cosmos-kit/keplr
```

--------------------------------

### Install Leap Metamask Cosmos Snap Package

Source: https://github.com/hyperweb-io/cosmos-kit/blob/main/docs/integrating-wallets/leap-metamask-comos-snap.mdx

Install the necessary package using yarn.

```bash
yarn add @cosmos-kit/leap-metamask-cosmos-snap
```

--------------------------------

### Install Vectis Package

Source: https://github.com/hyperweb-io/cosmos-kit/blob/main/docs/integrating-wallets/vectis.mdx

Install the `@cosmos-kit/vectis` package to include all available Vectis wallets.

```bash
yarn add @cosmos-kit/vectis
```

--------------------------------

### Clone and Bootstrap Cosmos Kit

Source: https://github.com/hyperweb-io/cosmos-kit/blob/main/README.md

Clone the repository, navigate to the directory, and install dependencies using pnpm.

```sh
# Clone the repo.
git clone https://github.com/hyperweb-io/cosmos-kit
cd cosmos-kit
pnpm install
```

--------------------------------

### Install Exodus Package

Source: https://github.com/hyperweb-io/cosmos-kit/blob/main/docs/integrating-wallets/exodus.mdx

Install the `@cosmos-kit/exodus` package to include Exodus wallets in your application.

```bash
yarn add @cosmos-kit/exodus
```

--------------------------------

### Install Ninji Wallet Package

Source: https://github.com/hyperweb-io/cosmos-kit/blob/main/docs/integrating-wallets/ninji.mdx

Install the `@cosmos-kit/ninji` package using yarn.

```bash
yarn add @cosmos-kit/ninji
```

--------------------------------

### Install Aria Mobile Package

Source: https://github.com/hyperweb-io/cosmos-kit/blob/main/packages/docs/pages/integrating-wallets/aria.mdx

Install the `@cosmos-kit/aria-mobile` package using yarn.

```bash
yarn add @cosmos-kit/aria-mobile
```

--------------------------------

### Install Omni Wallet Package

Source: https://github.com/hyperweb-io/cosmos-kit/blob/main/docs/integrating-wallets/omni.mdx

Install the `@cosmos-kit/omni` package to include all available Omni wallets.

```bash
yarn add @cosmos-kit/omni
```

--------------------------------

### Install Okto Extension Package

Source: https://github.com/hyperweb-io/cosmos-kit/blob/main/packages/docs/pages/integrating-wallets/okto.mdx

Install the Okto wallet package for CosmosKit. This command adds the required dependency to your project.

```bash
yarn add @cosmos-kit/okto
```

--------------------------------

### Install @cosmos-kit/ledger Package

Source: https://github.com/hyperweb-io/cosmos-kit/blob/main/docs/integrating-wallets/ledger.mdx

Install the necessary package for Ledger integration using npm, pnpm, or yarn.

```sh
# npm
npm i @cosmos-kit/ledger

# pnpm
pnpm i @cosmos-kit/ledger

# yarn
yarn add @cosmos-kit/ledger
```

--------------------------------

### Install Bitget Wallet Package

Source: https://github.com/hyperweb-io/cosmos-kit/blob/main/packages/docs/pages/integrating-wallets/bitgetwallet.mdx

Install the `@cosmos-kit/bitgetwallet` package using yarn. This package includes all available Bitget wallets.

```bash
yarn add @cosmos-kit/bitgetwallet
```

--------------------------------

### Install CosmosKit Dependencies

Source: https://github.com/hyperweb-io/cosmos-kit/blob/main/docs/get-started.mdx

Install the necessary CosmosKit packages and chain-registry for your project. `@cosmos-kit/react-lite` can be used instead of `@cosmos-kit/react` if you provide a customized modal.

```sh
yarn add @cosmos-kit/react @cosmos-kit/keplr chain-registry
```

--------------------------------

### Install Station Wallet Package

Source: https://github.com/hyperweb-io/cosmos-kit/blob/main/docs/integrating-wallets/station.mdx

Install the `@cosmos-kit/station` package using yarn. This package includes all available Station wallets.

```bash
yarn add @cosmos-kit/station
```

--------------------------------

### Install Lightweight CosmosKit for Custom UI

Source: https://context7.com/hyperweb-io/cosmos-kit/llms.txt

Install the lightweight version of the React package if you intend to use a custom UI and do not need the default modal. This option still requires a wallet adapter and the chain registry.

```sh
yarn add @cosmos-kit/react-lite @cosmos-kit/keplr chain-registry
```

--------------------------------

### Install Galaxy Station Package

Source: https://github.com/hyperweb-io/cosmos-kit/blob/main/packages/docs/pages/integrating-wallets/galaxy-station.mdx

Install the `@cosmos-kit/galaxy-station` package using yarn. This package includes all available Galaxy Station wallets.

```bash
yarn add @cosmos-kit/galaxy-station
```

--------------------------------

### Install XDEFI Package

Source: https://github.com/hyperweb-io/cosmos-kit/blob/main/docs/integrating-wallets/xdefi.mdx

Install the `@cosmos-kit/xdefi` package to include XDEFI wallets in your application. This package exports all available XDEFI wallets.

```bash
yarn add @cosmos-kit/xdefi
```

--------------------------------

### Install Cosmos Kit React Packages

Source: https://github.com/hyperweb-io/cosmos-kit/blob/main/packages/react-lite/README.md

Install the necessary packages for @cosmos-kit/react, including core functionalities, the React integration, and chain registry utilities.

```sh
pnpm add @cosmos-kit/react @cosmos-kit/core @cosmos-kit/keplr chain-registry
```

--------------------------------

### Install Leap Wallet Package

Source: https://github.com/hyperweb-io/cosmos-kit/blob/main/docs/integrating-wallets/leap.mdx

Install the `@cosmos-kit/leap` package using yarn. This package exports all available Leap wallets for integration.

```bash
yarn add @cosmos-kit/leap
```

--------------------------------

### Install @cosmos-kit/shell

Source: https://github.com/hyperweb-io/cosmos-kit/blob/main/docs/integrating-wallets/shell.mdx

Use this command to add the shell wallet package to your project dependencies.

```bash
yarn add @cosmos-kit/shell
```

--------------------------------

### Basic useIframe Hook Integration

Source: https://github.com/hyperweb-io/cosmos-kit/blob/main/docs/hooks/use-iframe.mdx

This example demonstrates how to use the `useIframe` hook to connect a wallet within an iframe. It shows how to get the `iframeRef` and use it to attach the iframe element. The example also includes basic connect/disconnect functionality using `useChain`.

```jsx
export default function () {
  const { iframeRef } = useIframe();
  const { connect, disconnect, isWalletConnected } = useChain("cosmoshub");

  return (
    <div className="space-y-4">
      <Button onClick={() => (isWalletConnected ? disconnect() : connect())}>
        {isWalletConnected ? "Disconnect" : "Connect"}
      </Button>

      <iframe
        ref={iframeRef}
        style={{
          width: "100%",
          height: "75vh",
          borderRadius: 4,
        }}
        src="https://example-cosmos-kit-dapp.zone"
      ></iframe>
    </div>
  );
}
```

--------------------------------

### Next.js 15 and React 19 Dependencies

Source: https://github.com/hyperweb-io/cosmos-kit/blob/main/packages/react/REACT19_UPGRADE.md

Example dependency configuration for a Next.js application using React 19 and Next.js 15. This setup is compatible with Cosmos Kit.

```json
{
  "dependencies": {
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "next": "15.2.3"
  }
}
```

--------------------------------

### Using useChains to Access Multiple Chain Contexts

Source: https://github.com/hyperweb-io/cosmos-kit/blob/main/docs/hooks/use-chains.mdx

This example demonstrates how to use the `useChains` hook to get contexts for multiple specified chains. It shows how to check if all connected wallets are active, and how to connect or disconnect from the chains. Note that calling `connect()` on a specific chain context connects to all chains provided to `useChains`.

```jsx
export default function () {
  const chains = useChains(['cosmoshub', 'osmosis', 'stargaze', 'juno', 'akash']);
  const connected = Object.values(chains).every(chain => chain.isWalletConnected);
  const { connect, openView } = chains.cosmoshub;
  
  // Notice: calling chains.chainName.connect() will connect to all 5 chains above.

  return <div className="space-y-4">
    <Button onClick={() => connected ? openView() : connect() }>
      { connected ? 'Disconnect' : 'Connect' }
    </Button>
    <table className="table-fixed font-mono">
      <thead>
        <tr>
          <th className="w-80">Code</th>
          <th>Value</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>chains.cosmoshub.address</td>
          <td>{chains.cosmoshub.address}</td>
        </tr>
        <tr>
          <td>chains.osmosis.address</td>
          <td>{chains.osmosis.address}</td>
        </tr>
        <tr>
          <td>chains.stargaze.address</td>
          <td>{chains.stargaze.address}</td>
        </tr>
        <tr>
          <td>chains.juno.address</td>
          <td>{chains.juno.address}</td>
        </tr>
        <tr>
          <td>chains.akash.address</td>
          <td>{chains.akash.address}</td>
        </tr>
      </tbody>
    </table>
  </div>;
}
```

--------------------------------

### Run Development Server

Source: https://github.com/hyperweb-io/cosmos-kit/blob/main/examples/cosmos-kit-nextjs-app-router-example/README.md

Execute this command to start the Next.js development server. Open http://localhost:3000 in your browser to view the application.

```bash
pnpm dev
```

--------------------------------

### Build Cosmos Kit

Source: https://github.com/hyperweb-io/cosmos-kit/blob/main/README.md

Build the project using the pnpm run build command.

```sh
pnpm run build
```

--------------------------------

### Configure and Add Web3Auth Wallets to Provider

Source: https://github.com/hyperweb-io/cosmos-kit/blob/main/docs/integrating-wallets/web3auth.mdx

Set up the Web3Auth wallets, including login methods and client configuration, and add them to your CosmosKit `ChainProvider`. This snippet also demonstrates how to handle signature prompts using a modal.

```javascript
function MyCosmosApp({ Component, pageProps }: AppProps) {
  const [web3AuthPrompt, setWeb3AuthPrompt] = useState({
    signData: SignData
    resolve: (approved: boolean) => void
  } | undefined>();
  const web3AuthWallets = useMemo(
    () =>
      makeWeb3AuthWallets({
        loginMethods: [
          // add whichever login methods you want to support
          {
            provider: "google",
            name: "Google",
            logo: "https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg",
          },
        ],
        // get client ID and network from your web3auth dashboard:
        // https://web3auth.io/docs/dashboard-setup/get-client-id
        client: {
          clientId: "localhostid",
          web3AuthNetwork: "testnet",
        },
        // set state to show data to sign and approve/reject buttons in modal
        promptSign: async (_, signData) =>
          new Promise((resolve) =>
            setWeb3AuthPrompt({
              signData,
              resolve: (approved) => {
                setWeb3AuthPrompt(undefined);
                resolve(approved);
              },
            })
          ),
      }),
    []
  );

  return (
      <ChainProvider
        chains={chains}
        assetLists={assets}
        wallets={[...web3Auth]} // Ensure 'web3Auth' is defined elsewhere and includes web3AuthWallets
        walletConnectOptions={...} // required if `wallets` contains mobile wallets
      >
        <Component {...pageProps} />

        {/* wallet signature prompt */}
        <Modal
          visible={web3AuthPrompt !== undefined}
          onClose={() => web3AuthPrompt?.resolve(false)}
        >
          <DisplayDataToSign
            data={signData}
            approve={() => web3AuthPrompt?.resolve(true)}
            reject={() => web3AuthPrompt?.resolve(false)}
          />
        </Modal>
      </ChainProvider>
  );
}

export default MyCosmosApp;
```

--------------------------------

### Import Default Wallets

Source: https://github.com/hyperweb-io/cosmos-kit/blob/main/docs/provider/chain-provider.mdx

Importing pre-configured wallet instances from various providers like Keplr, Cosmostation, and Leap.

```typescript
import { wallets as keplrWallet } from "@cosmos-kit/keplr";
import { wallets as cosmostationWallets } from "@cosmos-kit/cosmostation";
import { wallets as leapwallets } from "@cosmos-kit/leap";
```

--------------------------------

### Adding All Wallets at Once

Source: https://context7.com/hyperweb-io/cosmos-kit/llms.txt

The `cosmos-kit` meta-package exports all supported wallets with a fluent filtering API. This allows for easy inclusion of all or a curated subset of wallets in your application.

```APIDOC
## Adding All Wallets at Once — `cosmos-kit` bundle

The `cosmos-kit` meta-package exports every supported wallet with a fluent filtering API, making it trivial to include all or a curated subset of wallets.

```tsx
import { wallets } from 'cosmos-kit';
import { chains, assets } from 'chain-registry';
import { ChainProvider } from '@cosmos-kit/react';
import "@interchain-ui/react/styles";

// Wallet subset examples:
// wallets.mobile                                — all mobile wallets
// wallets.extension                             — all extension wallets
// wallets.for('keplr', 'cosmostation')          — both types for those two wallets
// wallets.for('keplr', 'leap').extension        — only extension wallets
// wallets.not('coin98', 'compass')              — everything except Coin98/Compass
// wallets.keplr.mobile                          — KeplrMobileWallet only

function MyApp({ Component, pageProps }) {
  return (
    <ChainProvider
      chains={chains}
      assetLists={assets}
      wallets={wallets.for('keplr', 'leap', 'cosmostation')}
      walletConnectOptions={{
        signClient: { projectId: 'YOUR_PROJECT_ID' },
      }}
    >
      <Component {...pageProps} />
    </ChainProvider>
  );
}
```
```