Modifying the create-cosmos-app Frontend dApp to send $Cudos token to Yourself.

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

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

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/:

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 before we can add it to Keplr. Click on “connect keplr wallet” enter your password and click “Approve”

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 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”:

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

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:

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 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:

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, 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: Get Cudos-related help here on their official discord.
Cudos Testnet Dashboard: Helps you manage Cudos on the testnet and get some testnet tokens
Cudos Mainnet Dashboard: Helps you manage Cudos on the mainnet.
Create-cosmos-app GitHub repo: More info about create-cosmos-app
Cosmology Tech: 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 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.

Happy coding!