/lispro

Primary LanguageTypeScript

Hackathon: Gitcoin Grants Round 13 Hackathon

The Challenge Description: Build A Multi-Chain Web3 Projects using Covalent API's

Multify Analytics DashDeX

Project Description

  • Multify is a multi-chain analytics dashboard, a tool for Investors, Cryptocurrence holders to visualize, analyse data on various blockchains and decentralization exchanges on one platform.

Project Concept

  • Building a platform that helps users to remain on one platform that providers all the tools needed by Investors, Cryptocurrency holders, traders etc.
  • This project provided a simple way to track, analyse and visualize all data assets.
  • With the usage of COVALENT API we are able to bringing visibility to billions of blockchain data points on this Dashboard- Covalent API Reference

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.
  • Dex Interface: Uniswap Labs Widgets - Getting Started with the Swap Uniswap Widget.
  • HTTPS and WebSocket Provider: Infura - guide on how to use the most versatile blockchain developer platform.
  • Wallet connection: Wagmi - is a React Hooks library for Ethereum, built on ethers.js.
  • Hosting platform: Vercel Platform from the creators of Next.js.

Project Feature

  • Overview Dashboard
  • Pools
  • Tokens
  • Wallet
  • DEX Swap

Project Preview - I used the xy=k which is a generalized Uniswap-like endpoints for exchanges on various chains

1. Home Page DarkMode

HomePage

2. Home Page LightMode

HomePage

3. Pools

Pools

4. Wallet

Wallet

4. Dex

Dex

1. Ticker Component: supported DEXes

https://api.covalenthq.com/v1/xy=k/supported_dexes/?quote-currency=USD&format=JSON&key=${API_KEY}

2. Summary overview: Ecosystem chart data

ecosystem chart data https://api.covalenthq.com/v1/${chainId}/xy=k/${dexName}/ecosystem/?&key=${API_KEY} health data https://api.covalenthq.com/v1/1/xy=k/uniswap_v2/health/

3. Pools Component: Pools endpoint xy=k

//https://api.covalenthq.com/v1/${chainId}/xy=k/${dexName}/pools/?&key=${apikey}

4. Token Component: Tokens endpoint xy=k

https://api.covalenthq.com/v1/${chainId}/xy=k/${dexName}/tokens/?quote-currency=USD&format=JSON&key=${apikey}

5. Get Balance, Transactions: Usage Endpoint

https: //api.covalenthq.com/v1/chainId/address/address/balances_v2/ https://api.covalenthq.com/v1/chainId/address/address/transactions_v2/

Live website: Multify Analytics DashDex

GitHub Repository: github.com/SabeloMkhwanazi

Demo video: video

Project Start - Finish Date: 11 - 29 March, 2022

Wallet Address : 0xc7031F0779F16685055Bc6104894698877Eb3327

Running the app

Getting Started

First, clone the repo with the following git command:

git clone https://github.com/SabeloMkhwanzi/Multify-Analytics-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:


INFURA_ID=
REACT_APP_RPC_ENDPOINT=
API_KEY=

Finally, run the development server:

npm run dev
# or
yarn dev

Happy Hacking!😊