CosmJS (opens new window) is a library created to talk to the Cosmos SDK. It is a powerful tool (opens new window), which can be used to create wallets, explorers, IBC relayers, and other decentralized applications (dApps). It is written in TypeScript and can therefore be client or server side.
# Your chain
In the checkers blockchain exercise you created a chain using Starport. Starport generated several components including a UI. Under the hood, this UI uses Vue.js and CosmJS to interact with the services exposed by the chain.
You used Starport to create the definitions for
MsgCreatePost by running the command:
# Your module in the UI
Starport also created UI-side elements to facilitate integration, for example:
In this file your module's client-side services are defined.
What does that code do?
- It starts by importing
@cosmjs/stargate, which is the client library for Cosmos SDK 0.40, and the following versions named Stargate.
- Then it imports
@cosmjs/proto-signingwhich encapsulates knowledge on how to sign
Msgobjects created with Protobuf. Lower down, it adds your
MsgCreatePosttype to the registry in this case.
- Mirroring your Go code, your message type
MsgCreatePostis defined in
http://localhost:26657is the default Tendermint RPC node endpoint used to send transactions. And is indeed passed here only as a default value if it is missing.
http://localhost:1317is the default high-level blockchain API endpoint. In the above code it is used for queries.
- The created elements
queryClientare returned to be used in
./vue/src/store/generated/alice/checkers/alice.checkers.checkers/index.jsas you can see in the previous Starport section.
# Details on the client
In the nested function above you can see that
@cosmjs/stargate is used for signing and broadcasting:
The following is taking place:
SigningStargateClient.connectWithSigneris a way to connect with a wallet and obtain a signing client. The
addris passed so that it can be used as part of the information prompted to the user when confirming if an external wallet is used.
- An object with two functions is returned:
signAndBroadcastis called when the UI finishes creating the message and is about to sign and broadcast the message. If using an external wallet, the wallet prompts the user to confirm the signing.
DirectSecp256k1HdWallet as a wallet. You cannot see it in the code above because it is wrapped through Starport and Vue (opens new window).
If you want to use a specific mnemonic, for instance on a server, instead of importing an external wallet via the UI, you can do so with:
There are many other useful methods like
assertIsBroadcastTxSuccess that verifies whether the transaction was successful or not, as used in this sample snippet (opens new window).
# Next up
Ready for the final section of this course? Discover CosmWasm and multi-chain smart contracting.