Extension Wallet
Integration
Cosmos Chains
Typescript

Typescript

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

Account

Request account

Get account 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 from the extension

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);
    }
  }}
>
  Disconnect
</button>;

Sign

SignAmino

Signing with amino in the legacy way.

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 based on protobuf

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

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 arbitrary bytes

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

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 chain or testnet chain that is not officially provided by the extension.

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

addEventListener

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

removeEventListener

example
window.removeEventListener('cosmostation_keystorechange', handler);
VanillaReact Hook