Frontend development
When doing frontend development on Cosmos, you need to handle two things:
- Handle the connections to different wallet providers (like Keplr, Leap, etc.). This is used to propose transactions for the user to sign.
- Communication with the blockchain, either for queries or for broadcasting transactions.
In many of our projects, we handle most of (2) by writing a backend service that provides a REST API instead of the frontend directly communicating with the chain. This allows for caching, auto-failover to other nodes, batching requests, and more. But for purposes of this document, we'll ignore that approach.
Which set of libraries you use for the above depends on which chain you're working with.
Most Cosmos chains
Most chains in the Cosmos ecosystem use a similar set of settings for wallets and signing, as well as the blockchain API. For those chains, the de facto standard libraries are:
- cosmjs is the core library for communicating with Cosmos chains over RPC. Note that it uses RPC, not gRPC, so it's compatible with browser limitations.
- Cosmos Kit provides an intermediate API between the various Cosmos-compatible wallets and your application. In theory, by using Cosmos Kit, your application can trivially support every Cosmos wallet out there.
The reality about both of these libraries, and Cosmos Kit in particular, is that they are poorly documented, difficult to work with, and sometimes straight up buggy. We still use them because it's the best bad choice we have. For backend code, we prefer using cosmos-rs, though that isn't an option in the browser.
Over time, we should flesh out this page with more tips and tricks for frontend dev with these two libraries. For now, the best recommendation is to ask someone on the team for codebases to look at that demonstrate how to use these libraries.
Injective
Injective is a Cosmos chain that works pretty differently from others. It uses Ethereum's key/wallet management and signing systems to remain compatible with that ecosystem, but it is therefore incompatible with most other Cosmos chains. Additionally, some of the APIs used are different, such as providing an Ethereum address from the account information query, which creates complications in our code base sometimes.
It's not that vital to understand all the low-level differences. The high level point is that, when working with Injective, you'll want to use libraries that are geared towards supporting this. You can check out Injective's TypeScript docs, which point to the following replacement libraries:
@injectivelabs/sdk-ts@injectivelabs/wallet-ts