Cosmos Wallets

Recommended: JavaScript SDK with React Hooks

For new React apps, we recommend the JavaScript SDK with React Hooks (@dynamic-labs-sdk/react-hooks) instead of the legacy React SDK documented here. The JS SDK comes with many benefits such as a much smaller bundle size and other optimizations. Use the React quickstart (JavaScript SDK) to get started.

Dynamic offers full Cosmos support including Sei, Cosmos Hub, Axelar, Osmosis, Noble and more out of the box. You can also enable any custom Cosmos networks by following this guide.

Once your networks are anbled, and you’ve setup login via Cosmos, you’ll want to run operations using that wallet. This section will cover how to do that.

First we’ll type guard to check if the wallet is a Cosmos wallet, then we’ll create a Signing StargateClient, and finally we’ll use that to send a transaction.

Check if a wallet is a Cosmos wallet

This is a React-only guide. The isCosmosWallet helper is a TypeScript utility for web.

React

import { useDynamicContext } from '@dynamic-labs/sdk-react-core';
import { isCosmosWallet } from '@dynamic-labs/cosmos';

const { wallet } = useDynamicContext();

if (!isCosmosWallet(wallet)) {
  throw new Error('This wallet is not a Cosmos wallet');
}

Fetch the wallet address

Normally you’d get the address using the wallet.address property. However, bear in mind that this will only return the main Cosmos address, not the network addresses i.e. Noble, Axelar, etc.

To get the current Cosmos network address, use wallet.connector.getAddress() which will return the address for the current network.

You can get the Cosmos wallet address using the wallet.address property and the network address using wallet.connector.getAddress().

React

const { primaryWallet } = useDynamicContext();

const cosmosAddress = primaryWallet.address;

const networkAddress = primaryWallet.connector.getAddress();

Create a Signing StargateClient

Now we’ll create a SigningStargateClient from cosmjs. This will allow us to do read and write operations on the chain.

You can create a SigningStargateClient from cosmjs to perform read and write operations on the chain.

React

import { SigningStargateClient } from '@cosmjs/stargate';

// Add whatever RPC endpoint you prefer here
const rpcEndpoint = "https://cosmos-rpc.publicnode.com:443";
const client = await SigningStargateClient.connectWithSigner(rpcEndpoint, wallet);

Send a transaction

Now we’ll send a transaction using the client.

You can send a transaction using the client.

React

const sendTransaction = async (senderAddress, recipientAddress, amount) => {
  try {
    const tx = await client.sendTokens(senderAddress, recipientAddress, amount);
    await tx.send();
  } catch (error) {
    console.error(error);
  }
};

await sendTransaction(primaryWallet.address, 'cosmos1...', 1000000);