dApp Development Workshop

Bootstrap WebApp Development on Coreum | Developer Workshop Recap

What You Will Learn

• Setting up a full-stack web development environment tailored for Coreum.
• Effective interaction and signing of Coreum custom messages using web-based wallets.
• Step-by-step guidance on creating a decentralised application from scratch.
• Hands-on experience with Smart Tokens in the browser, including creating NFT collections, minting NFTs, and sending NFTs.

Live workshop hosted by Coreum’s Developer Relations Advocate — Helwan Mandé

Workshop Video

Welcome to the Coreum WebApp Workshop!

In this hands-on workshop, you’ll dive into the world of decentralised app (DApp) development using the Coreum App Boilerplate. This tutorial is designed to equip you with the knowledge and tools necessary to deploy a Coreum DApp, integrating key technologies and best practices.

🚀 Overview

This tutorial workshop will require the following dependencies to get started.

• TypeScript: Enhances JavaScript with static type checking, improving code quality and maintainability.
• Next.js: Facilitates dynamic user interface creation with a component-based architecture.
• Tailwind CSS: A utility-first CSS framework for quick and efficient UI development.
• Styled-Components: Allows for dynamic themes and styles in React components.
• Coreum SDK: Provides seamless interaction with the Coreum blockchain.

🛠 Getting Started

Let’s set up your development environment and get a copy of the Coreum App Boilerplate running on your local machine.

Prerequisites

Before we begin, ensure you have the following installed:

- Node.js (>= 12.0.0)

- npm (>= 6.0.0)

Check by typing into your console node version

Installation

Your server will be running at `localhost:3000`.

You should now be able to see a screen that looks like this

🏦 Connecting Your Keplr Wallet to Coreum

To interact with the Coreum blockchain, connecting your Keplr wallet is essential. Here’s a step-by-step guide:

Install Keplr Wallet here Download Keplr Wallet | Official Website

1. Open Keplr Wallet: Launch your Keplr wallet extension in your browser.

2. Manage Chain Visibility: Click on the burger menu and select “Manage Chain Visibility”.

3. Add Coreum Network: Search for “Coreum” and enable it in the network list.

4. Save Your Selection: After selecting “Coreum”, click the “Save” button.

You should now see Coreum in your Keplr wallet’s list of chains, ready to interact with the Coreum blockchain.

🔗 Connecting To Wallet

Finally, connect your Keplr wallet to the DApp:

1. A sign-in prompt will appear — enter your password to sign in.

2. Approve your address. It will then be displayed on the front end, signifying a successful connection.

🎉 Congratulations!

You’ve successfully set up the Coreum App Boilerplate and connected your Keplr wallet. You’re now ready to start developing and testing your own DApps on the Coreum blockchain. Happy coding!

Now Let’s Dive Into The Code:

Lets first look at our src folder and find CoreumSigner.ts and CoreumSignerProvider.ts

The provider is a wrapper around Coreum Custom Kit that enables you to interact with Coreum Custom Modules, such as smart tokens. This is how your wallet interacts with the blockchain.

Now let’s go to our pages folder and look at the index.tsx file. This file contains the main body of our dapp. When you go to localhost:3000 what you see is the index.tsx file. Inside the index.tsx file we have our components like <Header />. The script for which can be found where you would expect it to be in the components folder.

Now let’s create a new folder for NFTs in our components section. Here we will store all the NFT related scripts. Create the following files.

Now lets create a Util folder to hold our Nav bar

Now let’s code our Nav Bar, visit headless.ui to implement our no code solution

Copy this tab component and paste it into your bar script. Then go into your index.tsx file and than import in the <Bar /> component.

Now in your index.tsx file create the components for your <Bar />. First, create a tabs array and then create a use state variable. Like this example below.

Now you should have a new tabs bar on your front page. We can also delete Burn NFT from our array to make some room. Now let’s add some styling to our bar. Let’s make a div and enclose our bar inside and add some styling classes.

Lets go to a styling website called Hypercolor.dev Gradients for Tailwind CSS | Hypercolor to alter our background find a background colour and paste it into our styling div.

Now you should have something that looks like what we have above. But we still have to add our content. Let’s start by jumping into our CreateCollection script. The first thing we will do is set up all of our state variables to tell our contract how to create our collection. You should have something like below.

Now let’s add our CreateCollection component to our indeed.tsx file like we did with our <Bar />.

Now lets get started with putting in the logic for our code. View this repo workshops/Boostrap_WebApp_Development/src/components/NFT/CreateCollection.tsx at main · CoreumFoundation/workshops · GitHub and go to the CreateCollection Component and copy and paste the code into our own CreateCollection component script. You can see we have a group inputs, everytime the value is updated which we get using OnChange, we save the variables which we input in the field

Ok so lets add our state variables which we will input to create our NFT Collection.

Finally lets add a function to aggregate our classes

Now you may have some errors which you can correct by watching the live demo at https://www.youtube.com/watch?v=RZTKTeaiz_c&t=954s at timestamp 33:14. When you are finished your end product should look like this.

Because smart tokens are native to Coreum blockchain we need to import token functions from the Coreum Provider that we set up earlier. So let’s create our first message and call it newNftCollection and let’s also import the NFT module from Coreum.js.

Ok now let’s import chainName from our useChain class so we can get the address of our signer and let’s also complete the function that allows us to pull messages from our native smart tokens on Coreum.

Also remember to create a variable for the walletAddress

We need to also create a state array function with all the native Coreum messages

For each message we set up some conditional logic where we push the outcome to the state array. At this point Your code should look like this

Remember also to implement the Coreum messages with our state array into our newNFTCollection NFT.Issue Class. Again we are importing this NFT.Issue class from Coreum because smart token logic is natively embedded on the blockchain level.

Now let’s implement the Coreum signer so we can officially sign messages when we call this function. Let’s put the signer right below our newNFTCollection variable.

Lets also now implement our new logic into the CreateCollection function

Lets also implement a function for Coreums deterministic Fee function. Gas fees for Coreums smart tokens are programmatically determined on Coreum. Here we can implement the deterministic gas function

Finally lets create a button at the bottom of our script so we can call the CreateCollection function

Now lets review the code for this script, you can find the full code here workshops/Boostrap_WebApp_Development/src/components/NFT/CreateCollection.tsx at main · CoreumFoundation/workshops · GitHub

Lastly, double check to make sure all your imports are correct

If we return to our main page and view the app we can now begin to input parameters and test our created NFT collection functionality. You Should have a screen that looks like this.

Once the transaction goes through you should now see a wallet transaction which you hover over to get more details.

If you made it this far congratulations you have just successfully created an NFT collection with a dapp that you built on Coreum! 🎉 🎉 🎉 🎉

Error Handling

You may have gotten this error while deploying let’s dig in and de bug

This is a gas estimation error to solve this issue we can put in a higher gas value in our CreateCollection script in the gas.

Here is the full repository to the workshop if you need any additional reference:

workshops/Boostrap_WebApp_Development at main · CoreumFoundation/workshops · GitHub

🤝 Contributing

We welcome contributions! Feel free to submit PRs for improvements to the boilerplate.

📜 License

This project is open-source and available under a standard license. Feel free to use and modify it as needed.

🙏 Acknowledgments

A big thank you to everyone involved in making this tutorial possible. Your efforts are greatly appreciated by the developer community.

Happy DApp Building!🚀