Typescript

This section explains how to interact with the Cosmostation Extension using the TypeScript SDK published on npm.

Unlike the Vanilla approach (direct window.cosmostation access), the TypeScript SDK provides:

typed provider interfaces

chain-scoped provider instances

cleaner async flows with better DX

Internally, the SDK still communicates with the browser extension via the same request layer.

Installation

The Cosmostation wallet package lives in npm. To install the latest stable version, run the following command:

npm install @cosmostation/extension

Or if you're using yarn:

yarn add @cosmostation/extension

After installation, you can import:

cosmos → to create a chain-specific provider
cosmosFunctions → for chain-agnostic utility functions

Account

Request account

Get account information for a specific Cosmos chain.

This call:

creates a provider scoped to the given chainId
prompts the user to connect (if not already connected)
returns address / public key information

example

import { cosmos } from '@cosmostation/extension';
 
<button
  onClick={async () => {
    try {
      const provider = await cosmos('cosmoshub-4');
      const account = await provider.requestAccount();
    } catch (e) {
      console.log(e.message);
    }
  }}
>
  Request Account
</button>;

Disconnect

Disconnect the currently connected account from the extension.

Use this when:

implementing a manual “disconnect wallet” action
resetting application state
switching between accounts or chains

example

import { cosmos } from '@cosmostation/extension';
 
<button
  onClick={async () => {
    try {
      const provider = await cosmos('cosmoshub-4');
      await provider.disconnect();
    } catch (e) {
      console.log(e.message);
    }
  }}
>
  Disconnect
</button>;

Sign

This section covers the different signing methods available through the TypeScript provider.

Each method corresponds to a specific Cosmos SDK signing flow.

SignAmino

Signing with Amino JSON, the legacy signing format.

example

import { cosmos } from '@cosmostation/extension';
 
<button
  onClick={async () => {
    try {
      const provider = await cosmos('cosmoshub-4');
 
      const doc = {
        //  ...
      };
 
      const response = await provider.signAmino(doc);
 
      console.log(response.signatures);
    } catch (e) {
      console.log(e.message);
    }
  }}
>
  Sign Amino
</button>;

SignDirect

Signing using protobuf-based SignDoc (SIGN_MODE_DIRECT).

Use this when:

constructing transactions via protobuf
using Stargate / direct signing flows

example

import { cosmos } from '@cosmostation/extension';
 
<button
  onClick={async () => {
    try {
      const provider = await cosmos('cosmoshub-4');
 
      const doc = {
        //  ...
      };
 
      const response = await provider.signDirect(doc);
 
      console.log(response.signatures);
    } catch (e) {
      console.log(e.message);
    }
  }}
>
  Sign Direct
</button>;

SignMessage

Sign arbitrary bytes (off-chain message signing).

Typical use cases:

authentication / login challenges
wallet ownership verification
signing non-transaction data

example

import { cosmos } from '@cosmostation/extension';
 
<button
  onClick={async () => {
    try {
      const provider = await cosmos('cosmoshub-4');
 
      const response = await provider.signMessage('Test (Sign Message)');
 
      console.log(response.signature);
    } catch (e) {
      console.log(e.message);
    }
  }}
>
  Sign Message
</button>;

verifyMessage

Verify a previously signed message.

This allows your application to:

validate the signer’s address
confirm message integrity
complete authentication flows

example

import { cosmos } from '@cosmostation/extension';
 
<button
  onClick={async () => {
    try {
      const provider = await cosmos('cosmoshub-4');
 
      const text = 'Test (Sign Message)';
 
      const signResponse = await provider.signMessage(text);
 
      const verifyResponse = await provider.verifyMessage(text, signResponse.signature);
 
      console.log(verifyResponse ? 'verified' : 'not verified');
    } catch (e) {
      console.log(e.message);
    }
  }}
>
  Sign & Verify Message
</button>;

Supported Chains

Query the list of Cosmos chain IDs supported by the extension.

This is useful for:

feature gating by chain
validating user-selected networks
guiding users to add unsupported chains

example

import { cosmosFunctions } from '@cosmostation/extension';
 
<button
  onClick={async () => {
    try {
      const response = cosmosFunctions.getSupportedChainIds();
 
      console.log(response);
    } catch (e) {
      console.log(e.message);
    }
  }}
>
  Request Supported Chain Ids
</button>;

AddCustomChain

Add a custom or testnet Cosmos chain that is not bundled with the extension by default.

Use this when:

supporting private networks
integrating early-stage testnets
onboarding new Cosmos SDK chains

example

import { cosmosFunctions } from '@cosmostation/extension';
 
<button
  onClick={async () => {
    try {
      const response = cosmosFunctions.addCosmosChain({
        chainId: 'custom-chain-1',
        chainName: 'custom-chain',
        addressPrefix: 'custom',
        baseDenom: 'ucustom',
        displayDenom: 'CUSTOM',
        restURL: 'https://rpc.custom-chain.com',
        decimals: 6, // optional
        coinType: "118'", // optional
      });
      console.log(response.tx_response.txhash);
    } catch (e) {
      console.log(e.message);
    }
  }}
>
  Add a custom chain
</button>;

Event

The Cosmostation Extension emits browser events when wallet state changes occur.

addEventListener

Listen for keystore changes such as:

account switch

example

window.addEventListener('cosmostation_keystorechange', () => {
  console.log('Key store in Cosmostation is changed. You may need to refetch the account info.');
});

removeEventListener

Always clean up event listeners when they are no longer needed to avoid memory leaks or duplicate handlers.

example

window.removeEventListener('cosmostation_keystorechange', handler);

Vanilla React Hook