/Klaytn-dashboard

A user friendly defi Dex dashboard that displays Klaytn blockchain Assests and ClaimSwap a Dex built on Klaytn mainnet.

Primary LanguageJavaScript

Klaytn-Covalent Unified Hackathon Bounty 2: DeFi Track

Challenge Description

This track is for developers who are interested in building DeFi-related use cases on Klaytn ecosystem. Examples of possible use cases could be

  • DeFi dashboards
  • Wallets,
  • DeFi aggregators,
  • P2P lending & borrowing platforms,
  • yield-farming tools,
  • DeFi derivatives trading, etc.

Klaytn- DEFI Dashboard

  • Decentralization is one of the key aspects of blockchain technology and the entire crypto realm. As such, decentralized finance (DeFi) has been one of the most popular use cases of this disruptive technology.
  • However, it is important to create platforms with user-friendly dashboards that will attract the masses to this peer-to-peer approach to decentralization finance.
  • In this hackathon I have used Covalent API to Build a user friendly defi dex dashboard that displays Klaytn blockchain Assest and claimswap a Dex built on Klaytn mainnet. This was a fun project for me because I got to learn more about covalen & Klaytn during this Hackathon, and well as gain more skills

Tools

  • Building Framework: Next.js Documentation - learn about Next.js features and API.
  • Frontend: Chakra-ui - Create accessible React apps with speed
  • Backend: Covalent Api - Covalent provides a unified API bringing visibility to billions of blockchain data points.
  • Hosting platform: Vercel Platform from the creators of Next.js.

Project Feature

  • Dashboard
  • Claimswap Analytics
  • Pools
  • Tokens
  • Klaytn Market
1. Home Page

HomePage

Running the app

Getting Started

First, clone the repo with the following git command:

git clone https://github.com/SabeloMkhwanzi/Klaytn-dashboard

Second, open a terminal in the root directory of the project and run:

npm install

to install all the package dependencies for the project

Create a .env file in the root folder and populate it with the following variables:


REACT_APP_COVELANT_API=

Finally, run the development server:

npm run dev
# or
yarn dev

Happy Hacking!😊

Klaytn-dashboard