Extension Wallet
Integration
Cosmos Chains
Vanilla

Vanilla

This code can be used without any installation.

Supported Chains

example
<button
  onClick={async () => {
    try {
      if (!window.cosmostation) {
        throw new Error('Cosmostation extension not installed');
      }
 
      const account = await window.cosmostation.cosmos.request({
        method: 'cos_supportedChainIds',
      });
    } catch (e) {
      console.log(e.message);
    }
  }}
>
  Request Supported Chains
</button>

Request Account

Get account information

example
<button
  onClick={async () => {
    try {
      if (!window.cosmostation) {
        throw new Error('Cosmostation extension not installed');
      }
 
      const account = await window.cosmostation.cosmos.request({
        method: 'cos_requestAccount',
        params: { chainName: 'cosmoshub-4' },
      });
    } catch (e) {
      console.log(e.message);
    }
  }}
>
  Request Account
</button>

Sign

SignAmino

Signing with amino in the legacy way.

example
<button
  onClick={async () => {
    try {
      if (!window.cosmostation) {
        throw new Error('Cosmostation extension not installed');
      }
 
      const doc = {
        //...
      };
 
      const response = await window.cosmostation.cosmos.request({
        method: 'cos_signAmino',
        params: { chainName: 'cosmoshub-4', doc },
      });
 
      console.log(response.signature);
    } catch (e) {
      console.log(e.message);
    }
  }}
>
  Sign Amino
</button>

SignDirect

Signing based on protobuf

example
<button
  onClick={async () => {
    try {
      if (!window.cosmostation) {
        throw new Error('Cosmostation extension not installed');
      }
 
      const doc = {
        //  ...
      };
 
      const response = await window.cosmostation.cosmos.request({
        method: 'cos_signDirect',
        params: {
          chainName: 'cosmoshub-4',
          doc,
        },
      });
 
      console.log(response.signatures);
    } catch (e) {
      console.log(e.message);
    }
  }}
>
  Sign Direct
</button>

SignMessage

sign arbitrary bytes

example
<button
  onClick={async () => {
    try {
      if (!window.cosmostation) {
        throw new Error('Cosmostation extension not installed');
      }
 
      const account = await window.cosmostation.cosmos.request({
        method: 'cos_requestAccount',
        params: { chainName: 'cosmoshub-4' },
      });
 
      const response = await window.cosmostation.cosmos.request({
        method: 'cos_signMessage',
        params: {
          chainName: 'cosmoshub-4',
          message: 'Test (Sign Message)',
          signer: account.address,
        },
      });
 
      console.log(response.signature);
    } catch (e) {
      console.log(e.message);
    }
  }}
>
  Sign Message
</button>

VerifyMessage

verify arbitrary bytes

example
<button
  onClick={async () => {
    try {
      if (!window.cosmostation) {
        throw new Error('Cosmostation extension not installed');
      }
 
      const message = 'Test (Sign Message)';
 
      const account = await window.cosmostation.cosmos.request({
        method: 'cos_requestAccount',
        params: { chainName: 'cosmoshub-4' },
      });
 
      const signResponse = await window.cosmostation.cosmos.request({
        method: 'cos_signMessage',
        params: {
          chainName: 'cosmoshub-4',
          message,
          signer: account.address,
        },
      });
 
      const verifyResponse = await window.cosmostation.cosmos.request({
        method: 'cos_verifyMessage',
        params: {
          chainName: 'cosmoshub-4',
          message,
          signer: account.address,
          publicKey: signResponse.pub_key.value,
          signature: signResponse.signature,
        },
      });
 
      console.log(verifyResponse ? 'verified' : 'not verified');
    } catch (e) {
      console.log(e.message);
    }
  }}
>
  Sign & Verify Message
</button>

AddCW20Token

example
<button
  onClick={async () => {
    try {
      if (!window.cosmostation) {
        throw new Error('Cosmostation extension not installed');
      }
 
      await window.cosmostation.cosmos.request({
        method: 'cos_addTokensCW20',
        params: {
          chainName: 'juno-1',
          tokens: [
            {
              contractAddress: 'juno1r4pzw8f9z0sypct5l9j906d47z998ulwvhvqe5xdwgy8wf84583sxwh0pa',
            },
          ],
        },
      });
 
      console.log('added');
    } catch (e) {
      console.log(e.message);
    }
  }}
>
  Add CW20 Tokens
</button>

AddCustomChain

Add a chain or testnet chain that is not officially provided by the extension.

example
<button
  onClick={async () => {
    try {
      if (!window.cosmostation) {
        throw new Error('Cosmostation extension not installed');
      }
 
      const response = await window.cosmostation.cosmos.request({
        method: 'cos_addChain',
        params: {
          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);