Skip to main content

Integrate Embedded Wallets with the Cosmos Blockchain

While using the Embedded Wallets Web SDK (formerly Web3Auth) for a non-EVM chain like Cosmos, you can get the user's private key from the provider. Using this private key, you can use the corresponding libraries of the blockchain to make blockchain calls like getting the user's account, chain ID, fetching balance, send transaction, etc. We have highlighted a few methods here to get you started quickly.

note

The SDKs are now branded as MetaMask Embedded Wallet SDKs (formerly Web3Auth Plug and Play SDKs). Package names and APIs remain Web3Auth (for example, Web3Auth React SDK), and code snippets may reference web3auth identifiers.

Installation​

npm install --save @web3auth/no-modal @web3auth/auth-adapter @web3auth/base @cosmjs/stargate @cosmjs/proto-signing

Initializing Provider​

Getting the chainConfig​

Get ChainID​

Once a user logs in, the Embedded Wallets SDK returns a provider. Since there isn't a native provider for Cosmos, we directly use the private key to make RPC calls.

CosmJS Libraries​

@cosmjs/stargate A client library for the Cosmos SDK 0.40+. Provides a high-level client for querying, signing and broadcasting. This is an npm library that provides a JavaScript/TypeScript interface to interact with the Cosmos SDK blockchain via the Tendermint RPC interface.

@cosmjs/proto-signing It is an npm library for signing messages using protobuf serialization, which is commonly used in Cosmos SDK-based blockchains. It provides a simple API for generating and verifying signatures using different algorithms and key types.

In order to get the ChainId, we connect to the RPC using StargateClient and make a call using the Cosmos RPC client to get the chainId. You can get the private key using this.provider.request({method: "private_key",}).

import type { IProvider } from '@web3auth/base'
import { SigningStargateClient, StargateClient } from '@cosmjs/stargate'
import { DirectSecp256k1Wallet, OfflineDirectSigner } from '@cosmjs/proto-signing'

const rpc = 'https://rpc.sentry-02.theta-testnet.polypore.xyz'
export default class CosmosRPC {
  private provider: IProvider

  constructor(provider: IProvider) {
    this.provider = provider
  }

  async getPrivateKey(): Promise<any> {
    try {
      return await this.provider.request({
        method: 'private_key',
      })
    } catch (error) {
      return error as string
    }
  }

  async getChainId(): Promise<string> {
    try {
      const client = await StargateClient.connect(rpc)

      // Get the connected Chain's ID
      const chainId = await client.getChainId()

      return chainId.toString()
    } catch (error) {
      return error as string
    }
  }
}

Get Account​

Using DirectSecp256k1Wallet.fromKey() we can get the accounts via the private key we get through the provider.

import type { IProvider } from '@web3auth/base'
import { SigningStargateClient, StargateClient } from '@cosmjs/stargate'
import { DirectSecp256k1Wallet, OfflineDirectSigner } from '@cosmjs/proto-signing'

const rpc = 'https://rpc.sentry-02.theta-testnet.polypore.xyz'
export default class CosmosRPC {
  private provider: IProvider

  constructor(provider: IProvider) {
    this.provider = provider
  }

  async getAccounts(): Promise<any> {
    try {
      const privateKey = Buffer.from(await this.getPrivateKey(), 'hex')
      const walletPromise = await DirectSecp256k1Wallet.fromKey(privateKey, 'cosmos')
      return (await walletPromise.getAccounts())[0].address
    } catch (error) {
      return error
    }
  }
}

Get Balance​

Using the account address we received in the previous step, we can fetch the balance using an RPC call to client.getAllBalances(address).

import type { IProvider } from '@web3auth/base'
import { SigningStargateClient, StargateClient } from '@cosmjs/stargate'
import { DirectSecp256k1Wallet, OfflineDirectSigner } from '@cosmjs/proto-signing'

const rpc = 'https://rpc.sentry-02.theta-testnet.polypore.xyz'
export default class CosmosRPC {
  private provider: IProvider

  constructor(provider: IProvider) {
    this.provider = provider
  }

  async getBalance(): Promise<any> {
    try {
      const client = await StargateClient.connect(rpc)

      const privateKey = Buffer.from(await this.getPrivateKey(), 'hex')
      const walletPromise = await DirectSecp256k1Wallet.fromKey(privateKey, 'cosmos')
      const address = (await walletPromise.getAccounts())[0].address
      // Get user's balance in uAtom
      return await client.getAllBalances(address)
    } catch (error) {
      return error as string
    }
  }
}

Send transaction​

import type { IProvider } from '@web3auth/base'
import { SigningStargateClient, StargateClient } from '@cosmjs/stargate'
import { DirectSecp256k1Wallet, OfflineDirectSigner } from '@cosmjs/proto-signing'

const rpc = 'https://rpc.sentry-02.theta-testnet.polypore.xyz'
export default class CosmosRPC {
  private provider: IProvider

  constructor(provider: IProvider) {
    this.provider = provider
  }

  async sendTransaction(): Promise<any> {
    try {
      await StargateClient.connect(rpc)
      const privateKey = Buffer.from(await this.getPrivateKey(), 'hex')
      const walletPromise = await DirectSecp256k1Wallet.fromKey(privateKey, 'cosmos')
      const fromAddress = (await walletPromise.getAccounts())[0].address

      const destination = 'cosmos15aptdqmm7ddgtcrjvc5hs988rlrkze40l4q0he'

      const getSignerFromKey = async (): Promise<OfflineDirectSigner> => {
        return DirectSecp256k1Wallet.fromKey(privateKey, 'cosmos')
      }
      const signer: OfflineDirectSigner = await getSignerFromKey()

      const signingClient = await SigningStargateClient.connectWithSigner(rpc, signer)

      const result = await signingClient.sendTokens(
        fromAddress,
        destination,
        [{ denom: 'uatom', amount: '250' }],
        {
          amount: [{ denom: 'uatom', amount: '250' }],
          gas: '100000',
        }
      )
      const transactionHash = result.transactionHash
      const height = result.height
      return { transactionHash, height }
    } catch (error) {
      return error as string
    }
  }
}
On this page