Modifying the create-cosmos-app Frontend dApp to send $Cudos token to Yourself.
Tags: cudos, cosmos, createcosmosapp, frontend
Published: 2024-01-09 20:20:47

In this tutorial, we will be creating a Send Token dApp using the `create-cosmos-app` Send Token example, will modify the dApp to enable the sending of $cudos tokens to yourself, and we'll also learn how to verify the success of the transaction on Cudos Explorer. and also add Cudos mainnet and testnet Chain to Keplr.

### What you will get from this Article
1. How to use the `create-cosmos-app` send-token template
2. How to add Cudos chain and testnet to Keplr
3. How to modify the dApp to send $cudos tokens to yourself

### Prerequisites
1. You should have `create-cosmos-app` installed globally
2. Keplr wallet installed
3. Node.js and Yarn installed
4. Vscode installed, If you don't download it from [here](https://code.visualstudio.com/)

You can find how to install all of these in my previous article on [Building a Cosmos App Frontend with create-cosmos-app and Keplr Wallet Integration](https://medium.com/@cryptogrowthmarketer/building-a-cosmos-app-frontend-with-create-cosmos-app-and-keplr-wallet-integration-66c3503a0035)

## Creating the send token Frontend
When using the `create-cosmos-app` tooling we have several options to scaffold a dApp using a template example.
Some examples include:
1. Send tokens example: Creates a frontend that allows you to send tokens.
2. Stake Tokens: Creates a frontend that enables you to Stake tokens
3. CosmWasm: Creates a frontend that interacts with the Cosmwasm module e.t.c

But in this tutorial, we are going to use the Send tokens example

Let's head over to the create-cosmos-app GitHub repo: https://github.com/cosmology-tech/create-cosmos-app/

Scroll down to the “Examples” section and locate the “Send Tokens” example, Copy the command below the “Send Token” text and paste it into your terminal., or you can copy it below:
`cca --name send-example --example --template send-tokens`

You can also customize the name of your dApp by changing `send-example` in the command to your desired name.

> _Paste the command where you want to create your dApp_

After the project is created, navigate to the project directory in the terminal: `cd ./<the name of your project>`
Run `yarn && yarn dev` to start the server.

If everything went fine, you should see this Interface running on http://localhost:3000/:

![Running Dapp frontend](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r1j2i8ms3qb7cfeu7y1x.png)

Before you click connect wallet, remember the dApp is connected to the Cosmos Hub chain by default and we can only perform transactions on Cosmos Hub unless we switch chains, and we need to connect to Cudos Chain if we want to send $cudos tokens.

But in this tutorial, we will be using Cudos testnet because we want to perform transactions on the testnet, and it’s also a good place to practice and test out building your dApps first

## Adding Cudos Testnet to Keplr
We have to sign a transaction through the Cudos [Testnet Dashboard](https://dashboard.testnet.cudos.org/) before we can add it to Keplr. Click on “connect keplr wallet” enter your password and click “Approve”

![Cudos Dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wliux2ufucj0vvrqycme.png)

We have successfully signed a transaction on Cudos testnet.
You can also follow the same process when you want to add Cudos Chain to Keplr but go to [Cudos Dashboard](https://dashboard.cudos.org/) instead of the Testnet Dashboard.

After adding Cudos Mainnet along with the Testnet successfully we can now open Keplr and click on the menu Icon by the top left and click “Manage chain visibility”

Scroll down or search for CudosNetwork and CudosTestnet select them and click “save”: 

![Select Cudos Network](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/23b4i475qglne1f7wmcu.png)

Open Keplr and scroll down we can see both Cudos Mainnet and testnet 

![See both network on Keplr](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6452rvf5rftqyfq47w6d.png)

Congratulations you have successfully added Cudos to keplr

## Modifying dApp to send $cudos token to yourself
Let's open our project in Vscode!

Let's connect to Cudos testnet
Navigate to _./config/default.ts_ and change the value of chainName from _cosmoshub _to _cudostestnet_, and the asset.base from _uatom_(the smaller version of $atom) to _acudos_ (the smaller version of $cudos)

Go back to your browser hoping you are still running your project in the terminal and reload, now our project has connected to Cudos Testnet.
Click “Connect wallet” select Keplr and click “Approve”

If you have this interface below, then you are good to go:

![Iterface after connecting to Cudos chain](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x4w3qjyikwk8v12owes2.png)

If we Click on “Send Tokens” we get an error because we don’t have any $cudos token or testnet token

> testnet tokens hold no real-world value and cannot be transferred to the mainnet. They are solely used for development and testing purposes.

Let’s head back to Cudos [Tesnet Dashboard](https://dashboard.testnet.cudos.org/) to get some testnet tokens, and connect keplr wallet again, on the bottom left click on the faucet icon, paste in your Cudos testnet address(You can copy from keplr) and the number of $cudos you want, and click “Receive tokens”

You can check keplr to see your balance or go back to your dApp running on localhost:3000 and click “Fetch balance”

Before you click “Send Tokens” if you want to change the amount of $cudos you send to yourself you can navigate to _./pages/index.tsx_ Scroll down to where you have the variable of **msg** that is calling the send function inside the sendTokens arrow function and change the **amount** from 1000 to what you want.

Back to our dApp, click on “Send Token” and write a memo(what the transaction is for) you can also lower your gas fee by clicking on “transaction” and changing it from Average to Low, then click “Approve”

>_The higher the gas fee the faster the transaction_

After waiting for a few seconds you will get the Result:

![After fetching balance](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9fdc2ry3c2erq1puhilj.png)

This shows you have successfully sent for instance 100 $cudos testnet tokens to yourself. you can read through the result to see the transaction Hash, the recipient, the sender, the amount e.t.c

Alternatively, We can also check the transaction history on [Cudos Testnet Explorer](https://explorer.testnet.cudos.org/), and search for your address or transaction hash(You can find it in the result displayed on your dApp)

**Congratulations you have learned how to send $cudos token to yourself!**

Before we go, let's change the Create Cosmos App heading text in our dApp to something relatable to the scope of our project, don’t you think?

Let's navigate to _./pages/index.tsx_ Scroll down, and change the title text inside of the Head tag inside of the return keyword to “Send Token dApp” first

Then scroll down to where the Heading tag is and also change its text to “Send Token dApp” You can now go back to your browser, and reload to see changes.

Let's also change the welcome Text to something better like: “This dApps enables you to send token to yourself”, let's also reduce the font size, copy and paste this into the Text tag `_fontSize={{ md:'2xl' }}_`, we can now see the changes made to our dApp.

### Useful Resources
[Cudos Discord](https://discord.gg/cudos): Get Cudos-related help here on their official discord.
[Cudos Testnet Dashboard](https://dashboard.testnet.cudos.org/): Helps you manage Cudos on the testnet and get some testnet tokens
[Cudos Mainnet Dashboard](https://dashboard.cudos.org/dashboard): Helps you manage Cudos on the mainnet.
[Create-cosmos-app GitHub repo](https://github.com/cosmology-tech/create-cosmos-app/): More info about `create-cosmos-app`
[Cosmology Tech](https://cosmology.tech/learn): Video tutorials on `create-cosmos-app`

### Conclusion
Congratulations! You have successfully built a send token dApp using the create-cosmos-app Send Tokens example, added Cudos mainnet and testnet to keplr, modify the dApp to send $cudos instead of $atom, and checked the transaction on Cudos Explorer. Keep exploring and building within the Cosmos ecosystem!

You can find me on the [Cudos Discord](https://discord.gg/cudos) community @zizicrypt 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!**