Building a Cosmos App Frontend with create-cosmos-app and Keplr Wallet Integration
Published: 2024-01-08 19:08:59

In this tutorial, we’ll walk through the process of creating a frontend for decentralized apps (dapps) that connect to the Keplr Wallet. We’ll achieve this using the create-cosmos-app tool, which brings together CosmosKit, Nextjs, Telescope, and Chakra UI, providing an easy way to start building dapps with all the necessary dependencies bundled up for you.

### What you will get from this Article
1. How to install Node.js
2. How to install the Keplr Wallet extension
3. How to install Yarn globally using npm
4. How to use the `create-cosmos-app` tool to create a frontend that can connect to multiple chains
5. Links to valuable resources related to `create-cosmos-app`


### Prerequisites
Before we get started, ensure you have Node.js installed, because we will use Node package manager(npm) to run our commands. You can download it from https://nodejs.org/en and follow the installation instructions. After installation, you can verify it by running the command `node -v` in your command prompt (cmd): 

![NodeJs Version in terminal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sgfzcvr1srddcl112m34.png)
Congratulations you have successfully installed node!

## Creating a Cosmos App with create-cosmos-app
What is create-cosmos-app (CCA)
CCA is a tooling used to create frontend Decentralize apps (dapps) that connect to Keplr wallet and can also be used to interact with smart contracts.

First, we need to install create-cosmos-app globally by running the following command in your terminal:
`npm install -g create-cosmos-app`

Next, create your dapp by executing the create-cosmos-app command and providing a name for your app:
`create-cosmos-app`

Choose the `connect-multi-chain` option to enable connection to multiple chains. Wait for the installation of all dependencies to complete.

> `connect-chain` builds the dapp that defaults to one chain.
> `connect-multi-chain` builds the dapp with miltiple chain.

Before running any Yarn commands, you need to install Yarn globally using npm:
`npm install --global yarn`

You can check if Yarn installed successfully by running `yarn -v` in your terminal:

![Yarn Version in Terminal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ttrqontc14s2px9o40wv.png)

Start the server for your project with the following commands:
`cd ./<the name of your app> && yarn dev`
For example, if your app is named “my-app,” the command would be:
`cd my-app && yarn dev`

Your project will now be running at http://localhost:3000/.

![Dapp running on localhost:3000](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5rxmpr6qr9ho40q3i2en.png)

You have successfully started your Project!

## Installing Keplr Wallet
To interact with your dapp, you’ll need the Keplr Wallet extension. If you’re using Chrome or Microsoft Edge, you can download it from the Chrome Web Store: https://chrome.google.com/webstore/detail/keplr/dmkamcknogkgcdfhhbddcghachkejeap.

Alternatively, visit the official Keplr website for downloads compatible with other browsers: https://www.keplr.app/download.

After installing the Keplr Wallet extension, click on the puzzle icon at the top right of your Chrome browser and pin Keplr Wallet for easy access.

![Keplr Extension showing on chrome](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0tdqbn7m0r5jf9fyzx62.png)

## Creating and Securing Your Keplr Wallet
Open a new tab and click on the pinned Keplr Wallet. Choose the option to “Create a new wallet.” 

![keplr Create account page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fj8xvlawb3jthu67wm9o.png)

After clicking “Create a new Wallet” we’ll have a screen like this:

![Keplr welcome page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9nc6sqtfl040342grte9.png)

Choose the option to “Create new recovery phrase”

> _**Remember to carefully read and understand the warning messages. It is crucial to keep your recovery phrase safe and not share it with anyone, as it grants full control over your assets.**_:

![Keplr Warning page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gi6si8p04d5qmrl1salp.png)

After clicking “I understand show my phrase,” you’ll be given the option to choose between a 12-word and 24-word recovery phrase. Select 24 words for enhanced security.

![Copy recovery phrase](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wyz53kqtrslbf5qqewjx.png)

Copy and save your recovery phrase in a secure location. You will not be able to restore your account without it. Fill out the required inputs correctly, including two words from your recovery phrase, wallet name, and a strong password.

then click “Next”: 

![Verify Phrase](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ff76mhbyrw2w7dfx28ld.png)

Select as many chains as you want, scroll down to see more chains, and also search for chains.

then click “save”:

![Select chains](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wqys46za32ejcft4zx48.png)

you will be directed to this section once you have successfully created your account:

![Account successfully created](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5oa30rh34nyef4b9nxhx.png)

You have successfully Installed Keplr Wallet


## Integrating Keplr and Your Dapp
Now, return to your dapp running at http://localhost:3000/ and click the “Connect Wallet” button.

> _By default, the Cosmos App is connected to the Cosmos Hub chain. You can select any other chain you want and click “Connect Wallet.”_

![Prompt to connect keplr wallet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yyql84i189qerfo6b6rm.png)

Click on Keplr and then “Approve” to establish the connection.

If everything goes well, you’ll see your Cosmos App connected to Keplr Wallet.

![Keplr wallet connected to dapp successfully](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7frbypkz7o16u7vqzzsk.png)

### Useful Resources
Here are some valuable resources to learn more about `create-cosmos-app` and related libraries:

[CosmosKit](https://github.com/cosmology-tech/cosmos-kit): For wallet Connections
[Telescope](https://github.com/cosmology-tech/telescope): For working with Software development kit (SDK) messages
[Ts Codegen](https://github.com/CosmWasm/ts-codegen): For converting your smart contracts into Typescript
[Cosmwasm Academy](https://academy.cosmwasm.com/): To learn about Cosmwasm smart contracts
[Chain Registry](https://github.com/cosmology-tech/chain-registry): Involves all Chains connect to Cosmos App
[Cosmology Tech Website](https://cosmology.tech/learn): Links to the Official Cosmology website
[Chakra Ui](https://chakra-ui.com/): This has a lot of prebuilt components
[NextJs](https://nextjs.org/): For static and server-side rendering
[Create-cosmos-app GitHub repo](https://github.com/cosmology-tech/create-cosmos-app/) 

### Conclusion
Congratulations! You have successfully built a Cosmos App frontend using the `create-cosmos-app` tool and integrated it with the Keplr Wallet to connect to various chains in the Cosmos ecosystem. Keep exploring and building within the Cosmos ecosystem!

You can find me on the [Cudos Discord](https://discord.com/invite/cudos) community for any clarifications and support if you have any questions or encounter any issues during the process. Additionally, you can reach out to me on [Twitter](https://twitter.com/zizicrypt). 

**Happy coding!**