├── .eslintrc.json ├── next.config.js ├── public ├── favicon.ico ├── DEX-Analytics-Template-SabeloMkhwanzi.jpg ├── DEX-Analytics-Template-SabeloMkhwanzi-dex.jpg ├── DEX-Analytics-Template-SabeloMkhwanzi-about.jpg ├── DEX-Analytics-Template-SabeloMkhwanzi-dash.jpg ├── DEX-Analytics-Template-SabeloMkhwanzi-tokens1.jpg ├── DEX-Analytics-Template-SabeloMkhwanzi-dashboard1.jpg └── vercel.svg ├── pages ├── api │ └── hello.js ├── _app.js ├── _document.js ├── index.js ├── starthome.js ├── homepang.js ├── homequick.js ├── poolpang.js ├── homespirit.js ├── homespooky.js ├── homesushi.js ├── pool.js ├── poolquick.js ├── poolspirit.js ├── poolsushi.js ├── tokenpang.js ├── tokenquick.js ├── tokensushi.js ├── tokenspirit.js ├── tokenspooky.js ├── exchanges.js ├── token.js ├── about.js └── poolspooky.js ├── DexNames └── DexName.json ├── theme.js ├── .gitignore ├── components ├── FooterPage │ └── index.js ├── Exchanges │ └── index.js ├── AboutPage │ └── index.js ├── index.js ├── Homepages │ ├── HomePang │ │ └── index.js │ ├── HomeQuick │ │ └── index.js │ ├── HomeSpirit │ │ └── index.js │ ├── HomeSpooky │ │ └── index.js │ └── HomeSushi │ │ └── index.js ├── Tokens │ ├── TokenPang │ │ └── index.js │ ├── TokenQuick │ │ └── index.js │ ├── TokenSpirit │ │ └── index.js │ ├── TokenSpooky │ │ └── index.js │ └── TokenSushi │ │ └── index.js ├── SideNavbar │ └── index.js ├── Health │ └── index.js ├── Pools │ └── PoolPang │ │ └── index.js └── Table │ └── Tables.js ├── package.json ├── .vscode ├── settings.json └── TokenQuick.js └── README.md /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | reactStrictMode: true, 3 | }; 4 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SabeloMkhwanzi/dex-dashboard-covalent-dapp/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/DEX-Analytics-Template-SabeloMkhwanzi.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SabeloMkhwanzi/dex-dashboard-covalent-dapp/HEAD/public/DEX-Analytics-Template-SabeloMkhwanzi.jpg -------------------------------------------------------------------------------- /public/DEX-Analytics-Template-SabeloMkhwanzi-dex.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SabeloMkhwanzi/dex-dashboard-covalent-dapp/HEAD/public/DEX-Analytics-Template-SabeloMkhwanzi-dex.jpg -------------------------------------------------------------------------------- /public/DEX-Analytics-Template-SabeloMkhwanzi-about.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SabeloMkhwanzi/dex-dashboard-covalent-dapp/HEAD/public/DEX-Analytics-Template-SabeloMkhwanzi-about.jpg -------------------------------------------------------------------------------- /public/DEX-Analytics-Template-SabeloMkhwanzi-dash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SabeloMkhwanzi/dex-dashboard-covalent-dapp/HEAD/public/DEX-Analytics-Template-SabeloMkhwanzi-dash.jpg -------------------------------------------------------------------------------- /public/DEX-Analytics-Template-SabeloMkhwanzi-tokens1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SabeloMkhwanzi/dex-dashboard-covalent-dapp/HEAD/public/DEX-Analytics-Template-SabeloMkhwanzi-tokens1.jpg -------------------------------------------------------------------------------- /public/DEX-Analytics-Template-SabeloMkhwanzi-dashboard1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SabeloMkhwanzi/dex-dashboard-covalent-dapp/HEAD/public/DEX-Analytics-Template-SabeloMkhwanzi-dashboard1.jpg -------------------------------------------------------------------------------- /pages/api/hello.js: -------------------------------------------------------------------------------- 1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction 2 | 3 | export default function handler(req, res) { 4 | res.status(200).json({ name: 'John Doe' }) 5 | } 6 | -------------------------------------------------------------------------------- /DexNames/DexName.json: -------------------------------------------------------------------------------- 1 | 2 | { 3 | "Dexnames":[ 4 | {"chainID": "1", "dexName": "sushiswap"}, 5 | {"chainID": "137", "dexName": "quickswap"}, 6 | {"chainID": "43114", "dexName": "pangolin"}, 7 | {"chainID": "250", "dexName": "spiritswap"}, 8 | {"chainID": "250", "dexName": "spookyswap"} 9 | ] 10 | } -------------------------------------------------------------------------------- /theme.js: -------------------------------------------------------------------------------- 1 | // 1. import `extendTheme` function 2 | import { extendTheme } from "@chakra-ui/react"; 3 | 4 | // 2. Add your color mode config 5 | const config = { 6 | initialColorMode: "dark", // This makes dark mode the default 7 | // useSystemColorMode: true, // Commented out since we want to enforce dark mode, not use system preferences 8 | }; 9 | 10 | // 3. extend the theme 11 | const theme = extendTheme({ config }); 12 | 13 | export default theme; 14 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | 27 | # local env files 28 | .env.local 29 | .env.development.local 30 | .env.test.local 31 | .env.production.local 32 | .env 33 | 34 | # vercel 35 | .vercel 36 | 37 | -------------------------------------------------------------------------------- /pages/_app.js: -------------------------------------------------------------------------------- 1 | import { ChakraProvider } from "@chakra-ui/react"; 2 | import theme from "../theme"; // Import your custom theme 3 | 4 | // import react-query 5 | import { QueryClient, QueryClientProvider } from "react-query"; 6 | 7 | // Create a client for react-query 8 | const queryClient = new QueryClient({ 9 | defaultOptions: { 10 | queries: { 11 | refetchOnWindowFocus: false, 12 | }, 13 | }, 14 | }); 15 | 16 | function MyApp({ Component, pageProps }) { 17 | return ( 18 | 19 | 20 | 21 | 22 | 23 | ); 24 | } 25 | 26 | export default MyApp; 27 | -------------------------------------------------------------------------------- /pages/_document.js: -------------------------------------------------------------------------------- 1 | // pages/_document.js 2 | import { ColorModeScript } from "@chakra-ui/react"; 3 | // eslint-disable-next-line @next/next/no-document-import-in-page 4 | import NextDocument, { Html, Head, Main, NextScript } from "next/document"; 5 | import theme from "../theme"; // Import your theme here 6 | 7 | export default class Document extends NextDocument { 8 | render() { 9 | return ( 10 | 11 | 12 | 13 | {/* This script ensures the initial color mode is applied */} 14 | 15 |
16 | 17 | 18 | 19 | ); 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /pages/index.js: -------------------------------------------------------------------------------- 1 | import Head from "next/head"; 2 | import { Box, Flex } from "@chakra-ui/react"; // Use Flex for layout 3 | import { FooterPage, SideNavbar } from "../components"; 4 | 5 | export default function Home() { 6 | return ( 7 | <> 8 | 9 | DashDEX - DeX Dashboard 10 | 11 | 12 | 13 | {" "} 14 | {/* Flex container */} 15 | 16 | {" "} 17 | {/* Content area */} 18 | 19 | {/* Add other page content here */} 20 | 21 | {/* Footer will be pushed to the bottom */} 22 | 23 | 24 | ); 25 | } 26 | -------------------------------------------------------------------------------- /components/FooterPage/index.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/jsx-no-undef */ 2 | import { 3 | Box, 4 | Center, 5 | Container, 6 | Link, 7 | Text, 8 | useColorModeValue, 9 | } from "@chakra-ui/react"; 10 | 11 | // Footer function with social network link 12 | export default function FooterPage() { 13 | return ( 14 | 18 | 24 | 25 |
26 | 27 | 28 | © {new Date().getFullYear()} Made with ❤ by Sabelo Mkhwanazi 29 | 30 | 31 |
32 | 33 | 34 | 35 | ); 36 | } 37 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "dex-dashorad-covalent-dapp", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "@chakra-ui/react": "^1.6.10", 13 | "@choc-ui/paginator": "^3.2.2", 14 | "@emotion/react": "^11.5.0", 15 | "@emotion/styled": "^11.3.0", 16 | "@material-ui/core": "^4.12.3", 17 | "@material-ui/icons": "^4.11.2", 18 | "@mui/material": "^5.0.6", 19 | "axios": "^1.7.7", 20 | "classnames": "2.3.1", 21 | "date-fns": "^2.25.0", 22 | "framer-motion": "^4.1.17", 23 | "moment": "^2.29.1", 24 | "next": "^14.2.13", 25 | "numbro": "^2.3.6", 26 | "react": "^18.2.0", 27 | "react-dom": "^18.2.0", 28 | "react-icons": "^4.3.1", 29 | "react-moment": "^1.1.1", 30 | "react-query": "^3.39.2", 31 | "react-table": "^7.7.0" 32 | }, 33 | "devDependencies": { 34 | "eslint": "8.15.0", 35 | "eslint-config-next": "12.1.6" 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /public/vercel.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "cSpell.words": [ 3 | "Aboutpage", 4 | "apexcharts", 5 | "APIKEY", 6 | "chakra", 7 | "chartdata", 8 | "chartjs", 9 | "ckey", 10 | "datapoints", 11 | "datetime", 12 | "dexname", 13 | "Dexnames", 14 | "Ecosystempan", 15 | "ecosystempang", 16 | "Ecosystempools", 17 | "Ecosystempoolspang", 18 | "Ecosystempoolsquick", 19 | "Ecosystempoolsspiri", 20 | "Ecosystempoolsspirit", 21 | "Ecosystempoolsspooky", 22 | "ecosystemquick", 23 | "Ecosystemsokensspirit", 24 | "Ecosystemspirit", 25 | "Ecosystemspooky", 26 | "Ecosystemtokenspang", 27 | "Ecosystemtokensquic", 28 | "Ecosystemtokensquick", 29 | "Ecosystemtokensspang", 30 | "Ecosystemtokensspirit", 31 | "Ecosystemtokensspooky", 32 | "Ecosystemtokenssushi", 33 | "fbaf", 34 | "Hackathon", 35 | "homepang", 36 | "homequick", 37 | "homespirit", 38 | "homespooky", 39 | "homesushi", 40 | "liquidityquote", 41 | "millify", 42 | "Neighbours", 43 | "Poolpang", 44 | "Poolquick", 45 | "Poolspirit", 46 | "Poolspooky", 47 | "poolsushi", 48 | "Quickswap", 49 | "reduxjs", 50 | "Siderbar", 51 | "spiritswap", 52 | "Spookyswap", 53 | "starthome", 54 | "Starthome", 55 | "sushiswap", 56 | "Swibc", 57 | "Tokenpang", 58 | "Tokenquick", 59 | "Tokenspirit", 60 | "Tokenspooky", 61 | "tokensushi", 62 | "xaxis", 63 | "yaxis" 64 | ] 65 | } 66 | -------------------------------------------------------------------------------- /components/Exchanges/index.js: -------------------------------------------------------------------------------- 1 | import { Box, Text, SimpleGrid } from "@chakra-ui/react"; 2 | import React from "react"; 3 | 4 | export default function Exchanges() { 5 | return ( 6 |
7 | 8 | 9 | Exchanges 10 | 11 | 12 | OVERVIEW 13 | 14 | 15 | 16 | 30 | 43 | 44 |
45 | ); 46 | } 47 | -------------------------------------------------------------------------------- /components/AboutPage/index.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable jsx-a11y/alt-text */ 2 | import React from "react"; 3 | import { 4 | Box, 5 | Text, 6 | Image, 7 | Link, 8 | HStack, 9 | useColorModeValue, 10 | } from "@chakra-ui/react"; 11 | 12 | export default function AboutPage() { 13 | return ( 14 |
15 | 16 | 22 | About 23 | 24 | 25 | 34 | 35 | DashDEX Dashboard created to help visualize key analytics around 36 | Pools, swaps, liquidity, volumes, Lending, borrowing stats and 37 | Trading pair positions. With the help of Covalent API fetching data 38 | was made simple and possible.{" "} 39 | 40 |
41 | 42 | This project was created during the{" "} 43 | 44 | Hackathon: DeFi & Cross-chain Interoperability Hackathon, 45 | 46 | 47 | 48 | 49 |
powered by the Covalent API. 50 | 51 | 52 | 53 | 58 | 62 | 63 | {" "} 64 |
65 | 66 | Made with ❤ by Sabelo Mkhwanazi{" "} 67 | 68 | 69 | 70 |
71 | ); 72 | } 73 | -------------------------------------------------------------------------------- /components/index.js: -------------------------------------------------------------------------------- 1 | export { default as EcosystemPang } from "./Ecosystem/EcosystemPang"; 2 | export { default as EcosystemQuick } from "./Ecosystem/EcosystemQuick"; 3 | export { default as EcosystemSpirit } from "./Ecosystem/EcosystemSpirit"; 4 | export { default as EcosystemSpooky } from "./Ecosystem/EcosystemSpooky"; 5 | export { default as EcosystemSushi } from "./Ecosystem/EcosystemSushi"; 6 | 7 | export { default as EcosystemPoolPang } from "./Pools/PoolPang/EcosystemPoolPang"; 8 | export { default as EcosystemPoolQuick } from "./Pools/PoolQuick/EcosystemPoolQuick"; 9 | export { default as EcosystemPoolSpirit } from "./Pools/PoolSpirit/EcosystemPoolSpirit"; 10 | export { default as EcosystemPoolSpooky } from "./Pools/PoolSpooky/EcosystemPoolSpooky"; 11 | export { default as EcosystemPoolSushi } from "./Pools/PoolSushi/EcosystemPoolSushi"; 12 | 13 | export { default as EcosystemTokenPang } from "./Tokens/TokenPang/EcosystemTokenPang"; 14 | export { default as EcosystemTokenQuick } from "./Tokens/TokenQuick/EcosystemTokenQuick"; 15 | export { default as EcosystemTokenSpirit } from "./Tokens/TokenSpirit/EcosystemTokenSpirit"; 16 | export { default as EcosystemTokenSpooky } from "./Tokens/TokenSpooky/EcosystemTokenSpooky"; 17 | export { default as EcosystemTokenSushi } from "./Tokens/TokenSushi/EcosystemTokenSushi"; 18 | 19 | export { default as FooterPage } from "./FooterPage"; 20 | export { default as Health } from "./Health"; 21 | 22 | export { default as HomePang } from "./Homepages/HomePang"; 23 | export { default as HomeSpirit } from "./Homepages/HomeSpirit"; 24 | export { default as HomeSpooky } from "./Homepages/HomeSpooky"; 25 | export { default as HomeQuick } from "./Homepages/HomeQuick"; 26 | export { default as HomeSushi } from "./Homepages/HomeSushi"; 27 | 28 | export { default as PoolPang } from "./Pools/PoolPang"; 29 | export { default as PoolSpirit } from "./Pools/PoolSpirit"; 30 | export { default as PoolSpooky } from "./Pools/PoolSpooky"; 31 | export { default as PoolQuick } from "./Pools/PoolQuick"; 32 | export { default as PoolSushi } from "./Pools/PoolSushi"; 33 | 34 | export { default as TokenPang } from "./Tokens/TokenPang"; 35 | export { default as TokenSpirit } from "./Tokens/TokenSpirit"; 36 | export { default as TokenSpooky } from "./Tokens/TokenSpooky"; 37 | export { default as TokenQuick } from "./Tokens/TokenQuick"; 38 | export { default as TokenSushi } from "./Tokens/TokenSushi"; 39 | 40 | export { default as SideNavbar } from "./SideNavbar"; 41 | export { default as AboutPage } from "./AboutPage"; 42 | export { default as Exchanges } from "./Exchanges"; 43 | -------------------------------------------------------------------------------- /pages/starthome.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | // Chakra import 3 | import { 4 | Box, 5 | Text, 6 | Button, 7 | Link, 8 | Avatar, 9 | Select, 10 | Menu, 11 | MenuButton, 12 | MenuList, 13 | MenuItem, 14 | } from "@chakra-ui/react"; 15 | import { EcosystemSushi, Health } from "../components"; 16 | // Components import 17 | 18 | const Echome = () => { 19 | return ( 20 |
21 | 22 | 23 | 31 | Select Dex 32 | 33 | 34 | 35 | 40 | Sushiswap 41 | 42 | 43 | 48 | Quickswap 49 | 50 | 51 | 56 | Pangolin 57 | 58 | 59 | 64 | Spookyswap 65 | 66 | 67 | 72 | Spiritswap 73 | 74 | 75 | 76 | 77 | 78 | DASHBOARD 79 | 80 | 81 | OVERVIEW 82 | 83 | 84 | 85 | 86 |
87 | ); 88 | }; 89 | 90 | export default Echome; 91 | -------------------------------------------------------------------------------- /components/Homepages/HomePang/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | // Chakra import 3 | import { 4 | Box, 5 | Text, 6 | Button, 7 | Menu, 8 | MenuButton, 9 | MenuList, 10 | MenuItem, 11 | Avatar, 12 | Link, 13 | } from "@chakra-ui/react"; 14 | // Components import 15 | import Health from "../../Health"; 16 | import EcosystemPang from "../../Ecosystem/EcosystemPang"; 17 | 18 | export default function HomePang() { 19 | return ( 20 |
21 | 22 | 23 | 31 | Select Dex 32 | 33 | 34 | 35 | 40 | Sushiswap 41 | 42 | 43 | 48 | Quickswap 49 | 50 | 51 | 56 | Pangolin 57 | 58 | 59 | 64 | Spookyswap 65 | 66 | 67 | 72 | Spiritswap 73 | 74 | 75 | 76 | 77 | 78 | DASHBOARD 79 | 80 | 81 | OVERVIEW 82 | 83 | 84 | 85 | 86 |
87 | ); 88 | } 89 | -------------------------------------------------------------------------------- /components/Homepages/HomeQuick/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | // Chakra import 3 | import { 4 | Box, 5 | Text, 6 | Button, 7 | Menu, 8 | MenuButton, 9 | MenuList, 10 | MenuItem, 11 | Avatar, 12 | Link, 13 | } from "@chakra-ui/react"; 14 | // Components import 15 | import Health from "../../Health"; 16 | import EcosystemQuick from "../../Ecosystem/EcosystemQuick"; 17 | 18 | export default function HomeQuick() { 19 | return ( 20 |
21 | 22 | 23 | 31 | Select Dex 32 | 33 | 34 | 35 | 40 | Sushiswap 41 | 42 | 43 | 48 | Qiuckswap 49 | 50 | 51 | 56 | Pangolin 57 | 58 | 59 | 64 | Spookyswap 65 | 66 | 67 | 72 | Spiritswap 73 | 74 | 75 | 76 | 77 | 78 | DASHBOARD 79 | 80 | 81 | OVERVIEW 82 | 83 | 84 | 85 | 86 |
87 | ); 88 | } 89 | -------------------------------------------------------------------------------- /components/Homepages/HomeSpirit/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | // Chakra import 3 | import { 4 | Box, 5 | Text, 6 | Button, 7 | Menu, 8 | MenuButton, 9 | MenuList, 10 | MenuItem, 11 | Avatar, 12 | Link, 13 | } from "@chakra-ui/react"; 14 | // Components import 15 | import Health from "../../Health"; 16 | import EcosystemSpirit from "../../Ecosystem/EcosystemSpirit"; 17 | 18 | export default function HomeSpirit() { 19 | return ( 20 |
21 | 22 | 23 | 31 | Select Dex 32 | 33 | 34 | 35 | 40 | Sushiswap 41 | 42 | 43 | 48 | Quickswap 49 | 50 | 51 | 56 | Pangolin 57 | 58 | 59 | 64 | Spookyswap 65 | 66 | 67 | 72 | Spiritswap 73 | 74 | 75 | 76 | 77 | DASHBOARD 78 | 79 | 80 | OVERVIEW 81 | 82 | 83 | 84 | 85 |
86 | ); 87 | } 88 | -------------------------------------------------------------------------------- /components/Homepages/HomeSpooky/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | // Chakra import 3 | import { 4 | Box, 5 | Text, 6 | Button, 7 | Menu, 8 | MenuButton, 9 | MenuList, 10 | MenuItem, 11 | Avatar, 12 | Link, 13 | } from "@chakra-ui/react"; 14 | // Components import 15 | import Health from "../../Health"; 16 | import EcosystemSpooky from "../../Ecosystem/EcosystemSpooky"; 17 | 18 | export default function HomeSpooky() { 19 | return ( 20 |
21 | 22 | 23 | 31 | Select Dex 32 | 33 | 34 | 35 | 40 | Sushiswap 41 | 42 | 43 | 48 | Quickswap 49 | 50 | 51 | 56 | Pangolin 57 | 58 | 59 | 64 | Spookyswap 65 | 66 | 67 | 72 | Spiritswap 73 | 74 | 75 | 76 | 77 | DASHBOARD 78 | 79 | 80 | OVERVIEW 81 | 82 | 83 | 84 | 85 |
86 | ); 87 | } 88 | -------------------------------------------------------------------------------- /components/Homepages/HomeSushi/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | // Chakra import 3 | import { 4 | Box, 5 | Text, 6 | Button, 7 | Menu, 8 | MenuButton, 9 | MenuList, 10 | MenuItem, 11 | Avatar, 12 | Link, 13 | } from "@chakra-ui/react"; 14 | // Components import 15 | import Health from "../../Health"; 16 | import EcosystemSushi from "../../Ecosystem/EcosystemSushi"; 17 | 18 | export default function HomeSushi() { 19 | return ( 20 |
21 | 22 | 23 | 31 | Select Dex 32 | 33 | 34 | 35 | 40 | Sushiswap 41 | 42 | 43 | 48 | Quickswap 49 | 50 | 51 | 56 | Pangolin 57 | 58 | 59 | 64 | Spookyswap 65 | 66 | 67 | 72 | Spiritswap 73 | 74 | 75 | 76 | 77 | 78 | DASHBOARD 79 | 80 | 81 | OVERVIEW 82 | 83 | 84 | 85 | 86 |
87 | ); 88 | } 89 | -------------------------------------------------------------------------------- /.vscode/TokenQuick.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable react-hooks/rules-of-hooks */ 2 | import React from 'react' 3 | import { 4 | Table, 5 | Thead, 6 | Tbody, 7 | Tfoot, 8 | Tr, 9 | Th, 10 | Td, 11 | TableCaption, 12 | Box, 13 | Text, 14 | useColorModeValue, 15 | Flex, 16 | Wrap, 17 | WrapItem, 18 | Avatar, 19 | HStack, 20 | Image, 21 | Progress, 22 | } from "@chakra-ui/react" 23 | import { 24 | 25 | TableBody, 26 | TableCell, 27 | TableContainer, 28 | TableHead, 29 | TableRow, 30 | Paper, 31 | Grid, 32 | Typography, 33 | TablePagination, 34 | TableFooter 35 | } from '@material-ui/core'; 36 | import { makeStyles } from '@material-ui/core/styles'; 37 | import Pagination from "@choc-ui/paginator" 38 | import millify from "millify"; 39 | 40 | import EcosystemTokens from '../../components/Ecosystem/EcosystemTokens' 41 | 42 | import { useGetTokensQuery } from '/services/tokensCovalentApi' 43 | 44 | const useStyles = makeStyles((theme) => ({ 45 | table: { 46 | minWidth: 750, 47 | }, 48 | tableContainer: { 49 | borderRadius: 15, 50 | margin: '10px 10px', 51 | maxWidth: 1130, 52 | }, 53 | status: { 54 | fontWeight: 'bold', 55 | fontSize: '0.75rem', 56 | borderRadius: 8, 57 | padding: '3px 10px', 58 | display: 'inline-block' 59 | }, 60 | })); 61 | 62 | const Token = () => { 63 | const { data, isFetching } = useGetTokensQuery() 64 | const chainItems = data?.data?.items 65 | console.log(data); 66 | const classes = useStyles(); 67 | const [page, setPage] = React.useState(0); 68 | const [rowsPerPage, setRowsPerPage] = React.useState(5); 69 | 70 | const handleChangePage = (event, newPage) => { 71 | setPage(newPage); 72 | }; 73 | 74 | const handleChangeRowsPerPage = (event) => { 75 | setRowsPerPage(+event.target.value); 76 | setPage(0); 77 | }; 78 | 79 | if (isFetching) return 80 | return ( 81 | <>
82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | {chainItems.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((items) => ( 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | ))} 109 | 110 | 111 | 120 | 121 |
NAMESYMBOLLIQUIDITYVOLUME(24H)PRICESWAP(24H)
{items.contract_name}{items.contract_ticker_symbol}${(items.total_liquidity_quote)}${(items.total_volume_24h_quote)}${(items.quote_rate)}{items.swap_count_24h}
122 | 123 | 124 | 125 | 126 |
127 | 128 | ) 129 | } 130 | 131 | export default Token; 132 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Hackathon: DeFi & Cross-chain Interoperability Hackathon with Covalent Api 2 | ## DEX Analytics Dashboard Template : [This project was the top winner in the dex category!](https://www.covalenthq.com/blog/gitcoin-winners-announcement/) 3 | ### YouTube Interview: [Here](https://www.youtube.com/live/-s83Q2daYFA?si=om4yqQ6Y_xY-HPqV) 4 | 5 | ## New version coming soon!!!🔥 6 | ## Roadmap for the new version 7 | - [ ] Add more DEX protocol 8 | - [ ] Add Project logo 9 | - [ ] Add Dex chart using Covalent Api endpoints 10 | - [ ] Improve UI UX 11 | - [ ] Fully mobile reponsive 12 | - [ ] Adding new dashboard feature 13 | 14 | ### Features 15 | :zap: Fully Responsive\ 16 | :zap: JavaScript\ 17 | :zap: Web application framework - Next JS\ 18 | :zap: Api Fetching Data tool - Redux Toolkit (Change to React-Query)\ 19 | :zap: BackEnd - Covalent Api\ 20 | :zap: UI Design Tool - Chakra UI 21 | :zap: Host\Deployment - Vercel 22 | 23 | 24 | ### Lesson learned on this project 25 | * Deep Understanding working with Covalent Api using different endpoints to fetch data. 26 | * Redux has been marked as a complicated tool but in this project, I have gain alot of skills in using Redux new improved tool setup called REDUX TOOLKIT. 27 | * React-next.js has been my best framework to build React projects in this projects I have gain more skills when it comes page routering. 28 | * Using Chackra Ui to build the cool UI - Coolest React UI framework. 29 | 30 | ### App Section 31 | :arrow_forward: Home Page - Dashboard overview\ 32 | :arrow_forward: Pool - Pools selection with the list of dex\ 33 | :arrow_forward: Token - Tokens selection with the list of dex\ 34 | :arrow_forward: Exchanges - Dashboard overview\ 35 | :arrow_forward: About - About this Project 36 | 37 | 1 Home Page - Dashboard overview\ 38 | ![defi_DexSwap](https://github.com/SabeloMkhwanzi/dex-dashboard-covalent-dapp/blob/main/public/DEX-Analytics-Template-SabeloMkhwanzi-dashboard1.jpg) 39 | 40 | 41 | 2 Pool - Pools selection with the list of dex\ 42 | ![defi_DexSwap](https://github.com/SabeloMkhwanzi/dex-dashboard-covalent-dapp/blob/main/public/DEX-Analytics-Template-SabeloMkhwanzi.jpg) 43 | 44 | 45 | 3 Token - Tokens selection with the list of dex\ 46 | ![defi_DexSwap](https://github.com/SabeloMkhwanzi/dex-dashboard-covalent-dapp/blob/main/public/DEX-Analytics-Template-SabeloMkhwanzi-tokens1.jpg) 47 | 48 | 49 | 4 Exchanges - Dashboard overview\ 50 | ![defi_DexSwap](https://github.com/SabeloMkhwanzi/dex-dashboard-covalent-dapp/blob/main/public/DEX-Analytics-Template-SabeloMkhwanzi-dash.jpg) 51 | 52 | 53 | 5 About - About this Project 54 | ![defi_DexSwap](https://github.com/SabeloMkhwanzi/dex-dashboard-covalent-dapp/blob/main/public/DEX-Analytics-Template-SabeloMkhwanzi-about.jpg) 55 | 56 | [![Netlify Status](https://api.netlify.com/api/v1/badges/8b0c16d5-5d47-4288-bf7b-5a08a29a8ee0/deploy-status)](https://app.netlify.com/sites/dexdashdapp/deploys) 57 | 58 | ### Challenge Description 59 | The Covalent API empowers an army of developers, analysts and 'data nerds' to BUIDL using the richest and most robust data infrastructure for the entire blockchain ecosystem. This challenge is to create a basic open source, multi-chain compatible, DEX Analytics Dashboard Template, powered by the Covalent API. 60 | 61 | #### This template may then be used by any DEX on any (or multiple) Covalent supported blockchains to visualize key analytics around: 62 | 63 | * Pools, swaps, liquidity, volumes 64 | * Lending and borrowing stats 65 | * Trading pair positions, leverage and level of profitability 66 | * Fees 67 | * Yield farmers 68 | 69 | ### Data presented can include both on-chain and off-chain information. 70 | 71 | ### Some resources which may be useful in putting together this template include: 72 | 73 | * https://github.com/pancakeswap/pancake-frontend 74 | * https://www.covalenthq.com/docs/learn/guides/configure/uniswap-clone 75 | * https://github.com/tradingview/ 76 | 77 | ### Some key features may include visualizations to gauge: 78 | 79 | *LP concentration vs decentralization 80 | * DEX sentiment analysis based on tweets and other social media messages 81 | * The overall activity and health metrics of a DEX 82 | 83 | ### Submission Requirements 84 | * Participants from everywhere can participate in this bounty 85 | * You can submit individually, or as a team. Teams should include no more than four people. 86 | * All of your team participants will need to register here 87 | 88 | ### What makes a submission complete? 89 | * A presentation (PDF, Slidedeck etc) describing the project 90 | * Link to a video demo (YouTube only) is advisable, but not strictly required 91 | * Your DEX Analytics Dashboard template must be web hosted and publicly accessible 92 | * Your DEX Analytics Dashboard template code repo must be publicly accessible 93 | * The submission must be released under a GPLv3 compatible license 94 | 95 | ## Installing 96 | 97 | 1. clone the repo with the following git command: 98 | 99 | ```bash 100 | git clone https://github.com/SabeloMkhwanzi/eddalytics 101 | ``` 102 | 103 | 2. open a terminal in the root directory of the project and run: 104 | 105 | ```bash 106 | npm install 107 | ``` 108 | 109 | to install all the package dependencies for the project 110 | 111 | Create a .env.local file in the root folder and populate it with the following variables, Get Api a key from [Covalent](https://www.covalenthq.com/) 112 | 113 | ```bash 114 | NEXT_PUBLIC_COVALENT_APIKEY= 115 | ``` 116 | 117 | 118 | Finally, run the development server: 119 | 120 | ```bash 121 | npm run dev 122 | ``` 123 | 124 | Happy Hacking 😊 125 | 126 | -------------------------------------------------------------------------------- /components/Tokens/TokenPang/index.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable react-hooks/rules-of-hooks */ 2 | import React from "react"; 3 | import { 4 | Table, 5 | Tr, 6 | Th, 7 | Td, 8 | Text, 9 | useColorModeValue, 10 | Progress, 11 | } from "@chakra-ui/react"; 12 | import { 13 | TableBody, 14 | TableContainer, 15 | TableHead, 16 | TableRow, 17 | Paper, 18 | TablePagination, 19 | TableFooter, 20 | } from "@material-ui/core"; 21 | import { makeStyles } from "@material-ui/core/styles"; 22 | 23 | const useStyles = makeStyles((theme) => ({ 24 | table: { 25 | minWidth: 750, 26 | }, 27 | tableContainer: { 28 | borderRadius: 15, 29 | margin: "10px 10px", 30 | maxWidth: 1130, 31 | }, 32 | status: { 33 | fontWeight: "bold", 34 | fontSize: "0.75rem", 35 | borderRadius: 8, 36 | padding: "3px 10px", 37 | display: "center", 38 | }, 39 | })); 40 | 41 | import { useQuery } from "react-query"; 42 | import EcosystemTokenPang from "./EcosystemTokenPang"; 43 | import numbro from "numbro"; 44 | //COVALENT API Key 45 | const APIKey = process.env.NEXT_PUBLIC_COVALENT_APIKEY; 46 | 47 | const chainID = 43114; 48 | const dexName = "pangolin"; 49 | 50 | export default function TokenPang() { 51 | const classes = useStyles(); 52 | const [page, setPage] = React.useState(0); 53 | const [rowsPerPage, setRowsPerPage] = React.useState(10); 54 | 55 | // used React-Query to fetch Covalent API 56 | const { data, error, isFetching } = useQuery(["ecosystem30"], async () => { 57 | const res = await fetch( 58 | `https://api.covalenthq.com/v1/${chainID}/xy=k/${dexName}/tokens/?key=${APIKey}` 59 | ); 60 | return res.json(); 61 | }); 62 | 63 | const chainItems = data?.data?.items; 64 | 65 | //console.log(chainItems); 66 | 67 | if (isFetching) return ; 68 | 69 | if (error) { 70 | return Error: {error.message}; 71 | } 72 | 73 | const handleChangePage = (event, newPage) => { 74 | setPage(newPage); 75 | }; 76 | 77 | const handleChangeRowsPerPage = (event) => { 78 | setRowsPerPage(+event.target.value); 79 | setPage(0); 80 | }; 81 | 82 | return ( 83 | <> 84 | {" "} 85 |
86 | 87 | 88 | 89 | 96 | 97 | 98 | 103 | 108 | 113 | 118 | 123 | 128 | 129 | 130 | 131 | {chainItems 132 | .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) 133 | .map((items) => ( 134 | 135 | 138 | 141 | 148 | 155 | 162 | 165 | 166 | ))} 167 | 168 | 169 | 178 | 179 |
99 | 100 | NAME 101 | 102 | 104 | 105 | SYMBOL 106 | 107 | 109 | 110 | LIQUIDITY 111 | 112 | 114 | 115 | VOLUME(24H) 116 | 117 | 119 | 120 | PRICE 121 | 122 | 124 | 125 | SWAP(24H) 126 | 127 |
136 | {items.contract_name} 137 | 139 | {items.contract_ticker_symbol} 140 | 142 | {numbro(items.total_liquidity_quote).formatCurrency({ 143 | average: true, 144 | mantissa: 2, 145 | optionalMantissa: true, 146 | })} 147 | 149 | {numbro(items.total_volume_24h_quote).formatCurrency({ 150 | average: true, 151 | mantissa: 2, 152 | optionalMantissa: true, 153 | })} 154 | 156 | {numbro(items.quote_rate).formatCurrency({ 157 | average: true, 158 | mantissa: 2, 159 | optionalMantissa: true, 160 | })} 161 | 163 | {items.swap_count_24h} 164 |
180 | 181 |
182 | 183 | ); 184 | } 185 | -------------------------------------------------------------------------------- /components/Tokens/TokenQuick/index.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable react-hooks/rules-of-hooks */ 2 | import React from "react"; 3 | import { 4 | Table, 5 | Tr, 6 | Th, 7 | Td, 8 | Text, 9 | useColorModeValue, 10 | Progress, 11 | } from "@chakra-ui/react"; 12 | import { 13 | TableBody, 14 | TableContainer, 15 | TableHead, 16 | TableRow, 17 | Paper, 18 | TablePagination, 19 | TableFooter, 20 | } from "@material-ui/core"; 21 | import { makeStyles } from "@material-ui/core/styles"; 22 | 23 | const useStyles = makeStyles((theme) => ({ 24 | table: { 25 | minWidth: 750, 26 | }, 27 | tableContainer: { 28 | borderRadius: 15, 29 | margin: "10px 10px", 30 | maxWidth: 1130, 31 | }, 32 | status: { 33 | fontWeight: "bold", 34 | fontSize: "0.75rem", 35 | borderRadius: 8, 36 | padding: "3px 10px", 37 | display: "inline-block", 38 | }, 39 | })); 40 | 41 | import { useQuery } from "react-query"; 42 | import EcosystemTokenQuick from "./EcosystemTokenQuick"; 43 | import numbro from "numbro"; 44 | //COVALENT API Key 45 | const APIKey = process.env.NEXT_PUBLIC_COVALENT_APIKEY; 46 | const chainID = 137; 47 | const dexName = "quickswap"; 48 | 49 | export default function TokenQuick() { 50 | const classes = useStyles(); 51 | const [page, setPage] = React.useState(0); 52 | const [rowsPerPage, setRowsPerPage] = React.useState(10); 53 | 54 | // used React-Query to fetch Covalent API 55 | const { data, error, isFetching } = useQuery(["ecosystem32"], async () => { 56 | const res = await fetch( 57 | `https://api.covalenthq.com/v1/${chainID}/xy=k/${dexName}/tokens/?key=${APIKey}` 58 | ); 59 | return res.json(); 60 | }); 61 | 62 | const chainItems = data?.data?.items; 63 | 64 | //console.log(chainItems); 65 | 66 | if (isFetching) return ; 67 | 68 | if (error) { 69 | return Error: {error.message}; 70 | } 71 | 72 | const handleChangePage = (event, newPage) => { 73 | setPage(newPage); 74 | }; 75 | 76 | const handleChangeRowsPerPage = (event) => { 77 | setRowsPerPage(+event.target.value); 78 | setPage(0); 79 | }; 80 | 81 | return ( 82 | <> 83 | {" "} 84 |
85 | 86 | 87 | 88 | 95 | 96 | 97 | 102 | 107 | 112 | 117 | 122 | 127 | 128 | 129 | 130 | {chainItems 131 | .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) 132 | .map((items) => ( 133 | 134 | 137 | 140 | 147 | 154 | 161 | 164 | 165 | ))} 166 | 167 | 168 | 177 | 178 |
98 | 99 | NAME 100 | 101 | 103 | 104 | SYMBOL 105 | 106 | 108 | 109 | LIQUIDITY 110 | 111 | 113 | 114 | VOLUME(24H) 115 | 116 | 118 | 119 | PRICE 120 | 121 | 123 | 124 | SWAP(24H) 125 | 126 |
135 | {items.contract_name} 136 | 138 | {items.contract_ticker_symbol} 139 | 141 | {numbro(items.total_liquidity_quote).formatCurrency({ 142 | average: true, 143 | mantissa: 2, 144 | optionalMantissa: true, 145 | })} 146 | 148 | {numbro(items.total_volume_24h_quote).formatCurrency({ 149 | average: true, 150 | mantissa: 2, 151 | optionalMantissa: true, 152 | })} 153 | 155 | {numbro(items.quote_rate).formatCurrency({ 156 | average: true, 157 | mantissa: 2, 158 | optionalMantissa: true, 159 | })} 160 | 162 | {items.swap_count_24h} 163 |
179 | 180 |
181 | 182 | ); 183 | } 184 | -------------------------------------------------------------------------------- /components/Tokens/TokenSpirit/index.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable react-hooks/rules-of-hooks */ 2 | import React from "react"; 3 | import { 4 | Table, 5 | Tr, 6 | Th, 7 | Td, 8 | Text, 9 | useColorModeValue, 10 | Progress, 11 | } from "@chakra-ui/react"; 12 | import { 13 | TableBody, 14 | TableContainer, 15 | TableHead, 16 | TableRow, 17 | Paper, 18 | TablePagination, 19 | TableFooter, 20 | } from "@material-ui/core"; 21 | import { makeStyles } from "@material-ui/core/styles"; 22 | 23 | const useStyles = makeStyles((theme) => ({ 24 | table: { 25 | minWidth: 750, 26 | }, 27 | tableContainer: { 28 | borderRadius: 15, 29 | margin: "10px 10px", 30 | maxWidth: 1130, 31 | }, 32 | status: { 33 | fontWeight: "bold", 34 | fontSize: "0.75rem", 35 | borderRadius: 8, 36 | padding: "3px 10px", 37 | display: "inline-block", 38 | }, 39 | })); 40 | 41 | import { useQuery } from "react-query"; 42 | import EcosystemTokenSpirit from "./EcosystemTokenSpirit"; 43 | import numbro from "numbro"; 44 | //COVALENT API Key 45 | const APIKey = process.env.NEXT_PUBLIC_COVALENT_APIKEY; 46 | const chainID = 250; 47 | const dexName = "spiritswap"; 48 | 49 | export default function TokenSpirit() { 50 | const classes = useStyles(); 51 | const [page, setPage] = React.useState(0); 52 | const [rowsPerPage, setRowsPerPage] = React.useState(10); 53 | 54 | // used React-Query to fetch Covalent API 55 | const { data, error, isFetching } = useQuery(["ecosystem33"], async () => { 56 | const res = await fetch( 57 | `https://api.covalenthq.com/v1/${chainID}/xy=k/${dexName}/tokens/?key=${APIKey}` 58 | ); 59 | return res.json(); 60 | }); 61 | 62 | const chainItems = data?.data?.items; 63 | 64 | //console.log(chainItems); 65 | 66 | if (isFetching) return ; 67 | 68 | if (error) { 69 | return Error: {error.message}; 70 | } 71 | 72 | const handleChangePage = (event, newPage) => { 73 | setPage(newPage); 74 | }; 75 | 76 | const handleChangeRowsPerPage = (event) => { 77 | setRowsPerPage(+event.target.value); 78 | setPage(0); 79 | }; 80 | 81 | return ( 82 | <> 83 | {" "} 84 |
85 | 86 | 87 | 94 | 95 | 96 | 101 | 106 | 111 | 116 | 121 | 126 | 127 | 128 | 129 | {chainItems 130 | .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) 131 | .map((items) => ( 132 | 133 | 136 | 139 | 146 | 153 | 160 | 163 | 164 | ))} 165 | 166 | 167 | 176 | 177 |
97 | 98 | NAME 99 | 100 | 102 | 103 | SYMBOL 104 | 105 | 107 | 108 | LIQUIDITY 109 | 110 | 112 | 113 | VOLUME(24H) 114 | 115 | 117 | 118 | PRICE 119 | 120 | 122 | 123 | SWAP(24H) 124 | 125 |
134 | {items.contract_name} 135 | 137 | {items.contract_ticker_symbol} 138 | 140 | {numbro(items.total_liquidity_quote).formatCurrency({ 141 | average: true, 142 | mantissa: 2, 143 | optionalMantissa: true, 144 | })} 145 | 147 | {numbro(items.total_volume_24h_quote).formatCurrency({ 148 | average: true, 149 | mantissa: 2, 150 | optionalMantissa: true, 151 | })} 152 | 154 | {numbro(items.quote_rate).formatCurrency({ 155 | average: true, 156 | mantissa: 2, 157 | optionalMantissa: true, 158 | })} 159 | 161 | {items.swap_count_24h} 162 |
178 | 179 |
180 | 181 | ); 182 | } 183 | -------------------------------------------------------------------------------- /pages/homepang.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/no-children-prop */ 2 | import React from "react"; 3 | import { 4 | Box, 5 | Drawer, 6 | DrawerContent, 7 | DrawerOverlay, 8 | Flex, 9 | Icon, 10 | IconButton, 11 | Input, 12 | InputGroup, 13 | InputLeftElement, 14 | Text, 15 | useColorModeValue, 16 | useDisclosure, 17 | useColorMode, 18 | Link, 19 | } from "@chakra-ui/react"; 20 | import { AiOutlineDashboard } from "react-icons/ai"; 21 | import { BsCurrencyExchange } from "react-icons/bs"; 22 | import { GiToken } from "react-icons/gi"; 23 | import { FcAbout } from "react-icons/fc"; 24 | import { FiMenu, FiSearch } from "react-icons/fi"; 25 | import { MdGeneratingTokens } from "react-icons/md"; 26 | import { FaMoon, FaSun } from "react-icons/fa"; 27 | import { FooterPage, HomePang } from "../components"; 28 | 29 | export default function Swibc() { 30 | const sidebar = useDisclosure(); 31 | const { toggleColorMode: toggleMode } = useColorMode(); 32 | const SwitchIcon = useColorModeValue(FaMoon, FaSun); 33 | const text = useColorModeValue("dark", "light"); 34 | const hoverColor = useColorModeValue("gray.600", "gray.300"); 35 | 36 | const NavItem = (props) => { 37 | const { icon, children, ...rest } = props; 38 | return ( 39 | 55 | {icon && } 56 | {children} 57 | 58 | ); 59 | }; 60 | 61 | const SidebarContent = (props) => ( 62 | 78 | 79 | 85 | DashDeX 86 | 87 | 88 | 96 | 100 | OVERVIEW 101 | 102 | 106 | POOLS 107 | 108 | 112 | TOKENS 113 | 114 | 118 | EXCHANGES 119 | 120 | 124 | ABOUT 125 | 126 | 127 | 128 | ); 129 | 130 | return ( 131 | 132 | {" "} 133 | {/* Updated layout */} 134 | 135 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | {" "} 147 | {/* Content flex grows */} 148 | 160 | } 165 | size="sm" 166 | /> 167 | 168 | } /> 169 | 174 | 175 | 176 | } 186 | /> 187 | 188 | 189 | 190 | 191 | 192 | 193 | {/* Footer at the bottom */} 194 | 195 | ); 196 | } 197 | -------------------------------------------------------------------------------- /components/Tokens/TokenSpooky/index.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable react-hooks/rules-of-hooks */ 2 | import React from "react"; 3 | import { 4 | Table, 5 | Tr, 6 | Th, 7 | Td, 8 | Text, 9 | useColorModeValue, 10 | Progress, 11 | } from "@chakra-ui/react"; 12 | import { 13 | TableBody, 14 | TableContainer, 15 | TableHead, 16 | TableRow, 17 | Paper, 18 | TablePagination, 19 | TableFooter, 20 | } from "@material-ui/core"; 21 | import { makeStyles } from "@material-ui/core/styles"; 22 | 23 | const useStyles = makeStyles((theme) => ({ 24 | table: { 25 | minWidth: 750, 26 | }, 27 | tableContainer: { 28 | borderRadius: 15, 29 | margin: "10px 10px", 30 | maxWidth: 1130, 31 | }, 32 | status: { 33 | fontWeight: "bold", 34 | fontSize: "0.75rem", 35 | borderRadius: 8, 36 | padding: "3px 10px", 37 | display: "inline-block", 38 | }, 39 | })); 40 | 41 | import { useQuery } from "react-query"; 42 | import EcosystemTokenSpooky from "./EcosystemTokenSpooky"; 43 | import numbro from "numbro"; 44 | //COVALENT API Key 45 | const APIKey = process.env.NEXT_PUBLIC_COVALENT_APIKEY; 46 | const chainID = 250; 47 | const dexName = "spookyswap"; 48 | 49 | export default function TokenSpooky() { 50 | const classes = useStyles(); 51 | const [page, setPage] = React.useState(0); 52 | const [rowsPerPage, setRowsPerPage] = React.useState(10); 53 | 54 | // used React-Query to fetch Covalent API 55 | const { data, error, isFetching } = useQuery(["ecosystem34"], async () => { 56 | const res = await fetch( 57 | `https://api.covalenthq.com/v1/${chainID}/xy=k/${dexName}/tokens/?key=${APIKey}` 58 | ); 59 | return res.json(); 60 | }); 61 | 62 | const chainItems = data?.data?.items; 63 | 64 | //console.log(chainItems); 65 | 66 | if (isFetching) return ; 67 | 68 | if (error) { 69 | return Error: {error.message}; 70 | } 71 | 72 | const handleChangePage = (event, newPage) => { 73 | setPage(newPage); 74 | }; 75 | 76 | const handleChangeRowsPerPage = (event) => { 77 | setRowsPerPage(+event.target.value); 78 | setPage(0); 79 | }; 80 | 81 | return ( 82 | <> 83 | {" "} 84 |
85 | 86 | 87 | 88 | 95 | 96 | 97 | 102 | 107 | 112 | 117 | 122 | 127 | 128 | 129 | 130 | {chainItems 131 | .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) 132 | .map((items) => ( 133 | 134 | 137 | 140 | 147 | 154 | 161 | 164 | 165 | ))} 166 | 167 | 168 | 177 | 178 |
98 | 99 | NAME 100 | 101 | 103 | 104 | SYMBOL 105 | 106 | 108 | 109 | LIQUIDITY 110 | 111 | 113 | 114 | VOLUME(24H) 115 | 116 | 118 | 119 | PRICE 120 | 121 | 123 | 124 | SWAP(24H) 125 | 126 |
135 | {items.contract_name} 136 | 138 | {items.contract_ticker_symbol} 139 | 141 | {numbro(items.total_liquidity_quote).formatCurrency({ 142 | average: true, 143 | mantissa: 2, 144 | optionalMantissa: true, 145 | })} 146 | 148 | {numbro(items.total_volume_24h_quote).formatCurrency({ 149 | average: true, 150 | mantissa: 2, 151 | optionalMantissa: true, 152 | })} 153 | 155 | {numbro(items.quote_rate).formatCurrency({ 156 | average: true, 157 | mantissa: 2, 158 | optionalMantissa: true, 159 | })} 160 | 162 | {items.swap_count_24h} 163 |
179 | 180 |
181 | 182 | ); 183 | } 184 | -------------------------------------------------------------------------------- /pages/homequick.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/no-children-prop */ 2 | import React from "react"; 3 | import { 4 | Box, 5 | Drawer, 6 | DrawerContent, 7 | DrawerOverlay, 8 | Flex, 9 | Icon, 10 | IconButton, 11 | Input, 12 | InputGroup, 13 | InputLeftElement, 14 | Text, 15 | useColorModeValue, 16 | useDisclosure, 17 | useColorMode, 18 | Link, 19 | } from "@chakra-ui/react"; 20 | import { AiOutlineDashboard } from "react-icons/ai"; 21 | import { BsCurrencyExchange } from "react-icons/bs"; 22 | import { GiToken } from "react-icons/gi"; 23 | import { FcAbout } from "react-icons/fc"; 24 | import { FiMenu, FiSearch } from "react-icons/fi"; 25 | import { MdGeneratingTokens } from "react-icons/md"; 26 | import { FaMoon, FaSun } from "react-icons/fa"; 27 | import { FooterPage, HomeQuick } from "../components"; 28 | 29 | export default function Swibc() { 30 | const sidebar = useDisclosure(); 31 | const { toggleColorMode: toggleMode } = useColorMode(); 32 | const SwitchIcon = useColorModeValue(FaMoon, FaSun); 33 | const text = useColorModeValue("dark", "light"); 34 | const hoverColor = useColorModeValue("gray.600", "gray.300"); 35 | 36 | const NavItem = (props) => { 37 | const { icon, children, ...rest } = props; 38 | return ( 39 | 55 | {icon && } 56 | {children} 57 | 58 | ); 59 | }; 60 | 61 | const SidebarContent = (props) => ( 62 | 78 | 79 | {/* */} 80 | 86 | DashDeX 87 | 88 | 89 | 97 | 101 | OVERVIEW 102 | 103 | 107 | POOLS 108 | 109 | 113 | TOKENS 114 | 115 | 119 | EXCHANGES 120 | 121 | 125 | ABOUT 126 | 127 | 128 | 129 | ); 130 | return ( 131 | 137 | 138 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 161 | } 166 | size="sm" 167 | /> 168 | 169 | } /> 170 | 175 | 176 | 177 | 178 | } 188 | /> 189 | 190 | 191 | 192 | {/* Content below */} 193 | 194 | 195 | 196 | 197 | 198 | 199 | ); 200 | } 201 | -------------------------------------------------------------------------------- /pages/poolpang.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/no-children-prop */ 2 | import React from "react"; 3 | import { 4 | Box, 5 | DrawerContent, 6 | DrawerOverlay, 7 | Flex, 8 | Icon, 9 | IconButton, 10 | Input, 11 | InputGroup, 12 | InputLeftElement, 13 | Text, 14 | Drawer, 15 | useColorModeValue, 16 | useDisclosure, 17 | useColorMode, 18 | Link, 19 | } from "@chakra-ui/react"; 20 | import { AiOutlineDashboard } from "react-icons/ai"; 21 | import { BsCurrencyExchange } from "react-icons/bs"; 22 | import { GiToken } from "react-icons/gi"; 23 | import { FcAbout } from "react-icons/fc"; 24 | import { FiMenu, FiSearch } from "react-icons/fi"; 25 | import { MdGeneratingTokens } from "react-icons/md"; 26 | import { FaMoon, FaSun } from "react-icons/fa"; 27 | import { FooterPage, PoolPang } from "../components"; 28 | 29 | export default function Swibc() { 30 | const sidebar = useDisclosure(); 31 | const { toggleColorMode: toggleMode } = useColorMode(); 32 | const SwitchIcon = useColorModeValue(FaMoon, FaSun); 33 | const text = useColorModeValue("dark", "light"); 34 | const hoverColor = useColorModeValue("gray.600", "gray.300"); 35 | 36 | const NavItem = (props) => { 37 | const { icon, children, ...rest } = props; 38 | return ( 39 | 55 | {icon && } 56 | {children} 57 | 58 | ); 59 | }; 60 | 61 | const SidebarContent = (props) => ( 62 | 78 | 79 | {/* */} 80 | 86 | DashDeX 87 | 88 | 89 | 97 | 101 | DASHBOARD 102 | 103 | 107 | POOLS 108 | 109 | 113 | TOKENS 114 | 115 | 119 | EXCHANGES 120 | 121 | 125 | ABOUT 126 | 127 | 128 | 129 | ); 130 | return ( 131 | 137 | 138 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 161 | } 166 | size="sm" 167 | /> 168 | 169 | } /> 170 | 175 | 176 | 177 | 178 | } 188 | /> 189 | 190 | 191 | 192 | {/* Content below */} 193 | 194 | 195 | 196 | 197 | 198 | 199 | ); 200 | } 201 | -------------------------------------------------------------------------------- /pages/homespirit.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/no-children-prop */ 2 | import React from "react"; 3 | import { 4 | Box, 5 | Drawer, 6 | DrawerContent, 7 | DrawerOverlay, 8 | Flex, 9 | Icon, 10 | IconButton, 11 | Input, 12 | InputGroup, 13 | InputLeftElement, 14 | Text, 15 | useColorModeValue, 16 | useDisclosure, 17 | useColorMode, 18 | Link, 19 | } from "@chakra-ui/react"; 20 | import { AiOutlineDashboard } from "react-icons/ai"; 21 | import { BsCurrencyExchange } from "react-icons/bs"; 22 | import { GiToken } from "react-icons/gi"; 23 | import { FcAbout } from "react-icons/fc"; 24 | import { FiMenu, FiSearch } from "react-icons/fi"; 25 | import { MdGeneratingTokens } from "react-icons/md"; 26 | import { FaMoon, FaSun } from "react-icons/fa"; 27 | import { FooterPage, HomeSpirit } from "../components"; 28 | 29 | export default function Swibc() { 30 | const sidebar = useDisclosure(); 31 | const { toggleColorMode: toggleMode } = useColorMode(); 32 | const SwitchIcon = useColorModeValue(FaMoon, FaSun); 33 | const text = useColorModeValue("dark", "light"); 34 | const hoverColor = useColorModeValue("gray.600", "gray.300"); 35 | 36 | const NavItem = (props) => { 37 | const { icon, children, ...rest } = props; 38 | return ( 39 | 55 | {icon && } 56 | {children} 57 | 58 | ); 59 | }; 60 | 61 | const SidebarContent = (props) => ( 62 | 78 | 79 | {/* */} 80 | 86 | DashDeX 87 | 88 | 89 | 97 | 101 | OVERVIEW 102 | 103 | 107 | POOLS 108 | 109 | 113 | TOKENS 114 | 115 | 119 | EXCHANGES 120 | 121 | 125 | ABOUT 126 | 127 | 128 | 129 | ); 130 | return ( 131 | 137 | 138 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 161 | } 166 | size="sm" 167 | /> 168 | 169 | } /> 170 | 175 | 176 | 177 | 178 | } 188 | /> 189 | 190 | 191 | 192 | {/* Content below */} 193 | 194 | 195 | 196 | 197 | 198 | 199 | ); 200 | } 201 | -------------------------------------------------------------------------------- /pages/homespooky.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/no-children-prop */ 2 | import React from "react"; 3 | import { 4 | Box, 5 | Drawer, 6 | DrawerContent, 7 | DrawerOverlay, 8 | Flex, 9 | Icon, 10 | IconButton, 11 | Input, 12 | InputGroup, 13 | InputLeftElement, 14 | Text, 15 | useColorModeValue, 16 | useDisclosure, 17 | useColorMode, 18 | Link, 19 | } from "@chakra-ui/react"; 20 | import { AiOutlineDashboard } from "react-icons/ai"; 21 | import { BsCurrencyExchange } from "react-icons/bs"; 22 | import { GiToken } from "react-icons/gi"; 23 | import { FcAbout } from "react-icons/fc"; 24 | import { FiMenu, FiSearch } from "react-icons/fi"; 25 | import { MdGeneratingTokens } from "react-icons/md"; 26 | import { FaMoon, FaSun } from "react-icons/fa"; 27 | import { FooterPage, HomeSpooky } from "../components"; 28 | 29 | export default function Swibc() { 30 | const sidebar = useDisclosure(); 31 | const { toggleColorMode: toggleMode } = useColorMode(); 32 | const SwitchIcon = useColorModeValue(FaMoon, FaSun); 33 | const text = useColorModeValue("dark", "light"); 34 | const hoverColor = useColorModeValue("gray.600", "gray.300"); 35 | 36 | const NavItem = (props) => { 37 | const { icon, children, ...rest } = props; 38 | return ( 39 | 55 | {icon && } 56 | {children} 57 | 58 | ); 59 | }; 60 | 61 | const SidebarContent = (props) => ( 62 | 78 | 79 | {/* */} 80 | 86 | DashDeX 87 | 88 | 89 | 97 | 101 | OVERVIEW 102 | 103 | 107 | POOLS 108 | 109 | 113 | TOKENS 114 | 115 | 119 | EXCHANGES 120 | 121 | 125 | ABOUT 126 | 127 | 128 | 129 | ); 130 | return ( 131 | 137 | 138 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 161 | } 166 | size="sm" 167 | /> 168 | 169 | } /> 170 | 175 | 176 | 177 | 178 | } 188 | /> 189 | 190 | 191 | 192 | {/* Content below */} 193 | 194 | 195 | 196 | 197 | 198 | 199 | ); 200 | } 201 | -------------------------------------------------------------------------------- /components/SideNavbar/index.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/no-children-prop */ 2 | import React from "react"; 3 | import { 4 | Box, 5 | Drawer, 6 | DrawerContent, 7 | DrawerOverlay, 8 | Flex, 9 | Icon, 10 | IconButton, 11 | Input, 12 | InputGroup, 13 | InputLeftElement, 14 | Text, 15 | useColorModeValue, 16 | useDisclosure, 17 | useColorMode, 18 | Link, 19 | } from "@chakra-ui/react"; 20 | import { AiOutlineDashboard } from "react-icons/ai"; 21 | import { BsCurrencyExchange } from "react-icons/bs"; 22 | import { GiToken } from "react-icons/gi"; 23 | import { FcAbout } from "react-icons/fc"; 24 | import { FiMenu, FiSearch } from "react-icons/fi"; 25 | import { MdGeneratingTokens } from "react-icons/md"; 26 | import { FaMoon, FaSun } from "react-icons/fa"; 27 | 28 | import Starthome from "../../pages/starthome"; 29 | 30 | export default function SideNavbar() { 31 | const sidebar = useDisclosure(); 32 | const { toggleColorMode: toggleMode } = useColorMode(); 33 | const SwitchIcon = useColorModeValue(FaMoon, FaSun); 34 | const text = useColorModeValue("dark", "light"); 35 | const hoverColor = useColorModeValue("gray.600", "gray.300"); 36 | 37 | const NavItem = (props) => { 38 | const { icon, children, ...rest } = props; 39 | return ( 40 | 56 | {icon && } 57 | {children} 58 | 59 | ); 60 | }; 61 | 62 | const SidebarContent = (props) => ( 63 | 79 | 80 | {/* */} 81 | 87 | DashDeX 88 | 89 | 90 | 98 | 103 | OVERVIEW 104 | 105 | 109 | POOLS 110 | 111 | 115 | TOKENS 116 | 117 | 121 | EXCHANGES 122 | 123 | 127 | ABOUT 128 | 129 | 130 | 131 | ); 132 | return ( 133 | 139 | 140 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 163 | } 168 | size="sm" 169 | /> 170 | 171 | } /> 172 | 177 | 178 | 179 | 180 | } 190 | /> 191 | 192 | 193 | 194 | {/* Content below */} 195 | 196 | 197 | 198 | 199 | 200 | ); 201 | } 202 | -------------------------------------------------------------------------------- /pages/homesushi.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/no-children-prop */ 2 | import React from "react"; 3 | import { 4 | Avatar, 5 | Box, 6 | Drawer, 7 | DrawerContent, 8 | DrawerOverlay, 9 | Flex, 10 | Icon, 11 | IconButton, 12 | Input, 13 | InputGroup, 14 | InputLeftElement, 15 | Text, 16 | VStack, 17 | AspectRatio, 18 | useColorModeValue, 19 | useDisclosure, 20 | useColorMode, 21 | Link, 22 | } from "@chakra-ui/react"; 23 | import { AiOutlineDashboard } from "react-icons/ai"; 24 | import { BsCurrencyExchange } from "react-icons/bs"; 25 | import { GiToken } from "react-icons/gi"; 26 | import { FcAbout } from "react-icons/fc"; 27 | import { FiMenu, FiSearch } from "react-icons/fi"; 28 | import { MdGeneratingTokens } from "react-icons/md"; 29 | import { FaMoon, FaSun } from "react-icons/fa"; 30 | import { FooterPage, HomeSushi } from "../components"; 31 | 32 | export default function Swibc() { 33 | const sidebar = useDisclosure(); 34 | const integrations = useDisclosure(); 35 | const { toggleColorMode: toggleMode } = useColorMode(); 36 | const SwitchIcon = useColorModeValue(FaMoon, FaSun); 37 | const text = useColorModeValue("dark", "light"); 38 | const hoverColor = useColorModeValue("gray.600", "gray.300"); 39 | 40 | const NavItem = (props) => { 41 | const { icon, children, ...rest } = props; 42 | return ( 43 | 59 | {icon && } 60 | {children} 61 | 62 | ); 63 | }; 64 | 65 | const SidebarContent = (props) => ( 66 | 82 | 83 | {/* */} 84 | 90 | DashDeX 91 | 92 | 93 | 101 | 105 | OVERVIEW 106 | 107 | 111 | POOLS 112 | 113 | 117 | TOKENS 118 | 119 | 123 | EXCHANGES 124 | 125 | 129 | ABOUT 130 | 131 | 132 | 133 | ); 134 | return ( 135 | 141 | 142 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 165 | } 170 | size="sm" 171 | /> 172 | 173 | } /> 174 | 179 | 180 | 181 | 182 | } 192 | /> 193 | 194 | 195 | 196 | {/* Content below */} 197 | 198 | 199 | 200 | 201 | 202 | 203 | ); 204 | } 205 | -------------------------------------------------------------------------------- /components/Health/index.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable react-hooks/rules-of-hooks */ 2 | import React from "react"; 3 | import Moment from "react-moment"; 4 | import { 5 | chakra, 6 | Box, 7 | useColorModeValue, 8 | SimpleGrid, 9 | Text, 10 | Progress, 11 | } from "@chakra-ui/react"; 12 | import { useQuery } from "react-query"; 13 | 14 | // COVALENT API Key 15 | const APIKey = process.env.NEXT_PUBLIC_COVALENT_APIKEY; 16 | 17 | // Define a service using a base URL and expected endpoints 18 | const chainID = 250; 19 | const dexName = "spookyswap"; 20 | 21 | export default function Health() { 22 | // used React-Query to fetch Covalent API 23 | const { data, error, isFetching } = useQuery(["healths"], async () => { 24 | const res = await fetch( 25 | `https://api.covalenthq.com/v1/${chainID}/xy=k/${dexName}/health/?key=${APIKey}` 26 | ); 27 | return res.json(); 28 | }); 29 | 30 | const chainItems = data?.data?.items || []; // Fallback to empty array if undefined 31 | 32 | if (isFetching) return ; 33 | 34 | if (error) { 35 | return Error: {error.message}; 36 | } 37 | 38 | return ( 39 | 40 | 46 | HEALTH 47 | 48 | 49 | {chainItems.length > 0 ? ( 50 | chainItems.map((items) => ( 51 | 52 | {/* Last Block Height : Section */} 53 | 66 | 67 | 73 | Last Block Height 74 | 75 | 82 | {items.latest_block_height} 83 | 84 | 85 | 86 | 87 | {/* Last Block Signed At : Section */} 88 | 101 | 102 | 108 | Last Block Signed 109 | 110 | 116 | 117 | {items.latest_block_signed_at} 118 | 119 | 120 | 121 | 122 | 123 | {/* Synced Block Height : Section */} 124 | 137 | 138 | 144 | Synced Block Height 145 | 146 | 152 | {items.synced_block_height} 153 | 154 | 155 | 156 | 157 | {/* Synced Block Signed At : Section */} 158 | 171 | 172 | 178 | Synced Block Signed 179 | 180 | 186 | 187 | {items.synced_block_signed_at} 188 | 189 | 190 | 191 | 192 | 193 | )) 194 | ) : ( 195 |

No data available

196 | )} 197 | 198 | ); 199 | } 200 | -------------------------------------------------------------------------------- /components/Pools/PoolPang/index.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable react-hooks/rules-of-hooks */ 2 | import React from "react"; 3 | import Moment from "react-moment"; 4 | import { 5 | chakra, 6 | Box, 7 | useColorModeValue, 8 | SimpleGrid, 9 | Text, 10 | Progress, 11 | } from "@chakra-ui/react"; 12 | import { useQuery } from "react-query"; 13 | 14 | // COVALENT API Key 15 | const APIKey = process.env.NEXT_PUBLIC_COVALENT_APIKEY; 16 | 17 | // Define a service using a base URL and expected endpoints 18 | const chainID = 250; 19 | const dexName = "spookyswap"; 20 | 21 | export default function Health() { 22 | // Use React-Query to fetch Covalent API 23 | const { data, error, isFetching } = useQuery(["healths"], async () => { 24 | const res = await fetch( 25 | `https://api.covalenthq.com/v1/${chainID}/xy=k/${dexName}/health/?key=${APIKey}` 26 | ); 27 | return res.json(); 28 | }); 29 | 30 | const chainItems = data?.data?.items || []; // Fallback to an empty array if undefined 31 | 32 | if (isFetching) return ; 33 | 34 | if (error) { 35 | return Error: {error.message}; 36 | } 37 | 38 | return ( 39 | 40 | 46 | HEALTH 47 | 48 | 49 | {chainItems.length > 0 ? ( 50 | chainItems.map((items) => ( 51 | 52 | {/* Last Block Height : Section */} 53 | 66 | 67 | 73 | Last Block Height 74 | 75 | 82 | {items.latest_block_height} 83 | 84 | 85 | 86 | 87 | {/* Last Block Signed At : Section */} 88 | 101 | 102 | 108 | Last Block Signed 109 | 110 | 116 | 117 | {items.latest_block_signed_at} 118 | 119 | 120 | 121 | 122 | 123 | {/* Synced Block Height : Section */} 124 | 137 | 138 | 144 | Synced Block Height 145 | 146 | 152 | {items.synced_block_height} 153 | 154 | 155 | 156 | 157 | {/* Synced Block Signed At : Section */} 158 | 171 | 172 | 178 | Synced Block Signed 179 | 180 | 186 | 187 | {items.synced_block_signed_at} 188 | 189 | 190 | 191 | 192 | 193 | )) 194 | ) : ( 195 |

No data available

196 | )} 197 | 198 | ); 199 | } 200 | -------------------------------------------------------------------------------- /pages/pool.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/no-children-prop */ 2 | import React from "react"; 3 | import { 4 | Box, 5 | Drawer, 6 | DrawerContent, 7 | DrawerOverlay, 8 | Flex, 9 | Icon, 10 | IconButton, 11 | Input, 12 | InputGroup, 13 | InputLeftElement, 14 | Text, 15 | useColorModeValue, 16 | useDisclosure, 17 | useColorMode, 18 | Link, 19 | } from "@chakra-ui/react"; 20 | import { AiOutlineDashboard } from "react-icons/ai"; 21 | import { BsCurrencyExchange } from "react-icons/bs"; 22 | import { GiToken } from "react-icons/gi"; 23 | import { FcAbout } from "react-icons/fc"; 24 | import { FiMenu, FiSearch } from "react-icons/fi"; 25 | import { MdGeneratingTokens } from "react-icons/md"; 26 | import { FaMoon, FaSun } from "react-icons/fa"; 27 | import { FooterPage, PoolSushi } from "../components"; 28 | 29 | export default function Swibc() { 30 | const sidebar = useDisclosure(); 31 | const { toggleColorMode: toggleMode } = useColorMode(); 32 | const SwitchIcon = useColorModeValue(FaMoon, FaSun); 33 | const text = useColorModeValue("dark", "light"); 34 | const hoverColor = useColorModeValue("gray.600", "gray.300"); 35 | 36 | const NavItem = (props) => { 37 | const { icon, children, ...rest } = props; 38 | return ( 39 | 55 | {icon && } 56 | {children} 57 | 58 | ); 59 | }; 60 | 61 | const SidebarContent = (props) => ( 62 | 78 | 79 | {/* */} 80 | 86 | DashDeX 87 | 88 | 89 | 97 | 101 | DASHBOARD 102 | 103 | 107 | POOLS 108 | 109 | 113 | TOKENS 114 | 115 | 119 | EXCHANGES 120 | 121 | 125 | ABOUT 126 | 127 | 128 | 129 | ); 130 | return ( 131 | 137 | 138 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 161 | } 166 | size="sm" 167 | /> 168 | 169 | } /> 170 | 175 | 176 | 177 | 185 | 186 | } 196 | /> 197 | 198 | 199 | 200 | {/* Content below */} 201 | 202 | 203 | 204 | 205 | 206 | 207 | ); 208 | } 209 | -------------------------------------------------------------------------------- /pages/poolquick.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/no-children-prop */ 2 | import React from "react"; 3 | import { 4 | Box, 5 | Drawer, 6 | DrawerContent, 7 | DrawerOverlay, 8 | Flex, 9 | Icon, 10 | IconButton, 11 | Input, 12 | InputGroup, 13 | InputLeftElement, 14 | Text, 15 | useColorModeValue, 16 | useDisclosure, 17 | useColorMode, 18 | Link, 19 | } from "@chakra-ui/react"; 20 | import { AiOutlineDashboard } from "react-icons/ai"; 21 | import { BsCurrencyExchange } from "react-icons/bs"; 22 | import { GiToken } from "react-icons/gi"; 23 | import { FcAbout } from "react-icons/fc"; 24 | import { FiMenu, FiSearch } from "react-icons/fi"; 25 | import { MdGeneratingTokens } from "react-icons/md"; 26 | import { FaMoon, FaSun } from "react-icons/fa"; 27 | import { FooterPage, PoolQuick } from "../components"; 28 | 29 | export default function Swibc() { 30 | const sidebar = useDisclosure(); 31 | const { toggleColorMode: toggleMode } = useColorMode(); 32 | const SwitchIcon = useColorModeValue(FaMoon, FaSun); 33 | const text = useColorModeValue("dark", "light"); 34 | const hoverColor = useColorModeValue("gray.600", "gray.300"); 35 | 36 | const NavItem = (props) => { 37 | const { icon, children, ...rest } = props; 38 | return ( 39 | 55 | {icon && } 56 | {children} 57 | 58 | ); 59 | }; 60 | 61 | const SidebarContent = (props) => ( 62 | 78 | 79 | {/* */} 80 | 86 | DashDeX 87 | 88 | 89 | 97 | 101 | DASHBOARD 102 | 103 | 107 | POOLS 108 | 109 | 113 | TOKENS 114 | 115 | 119 | EXCHANGES 120 | 121 | 125 | ABOUT 126 | 127 | 128 | 129 | ); 130 | return ( 131 | 137 | 138 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 161 | } 166 | size="sm" 167 | /> 168 | 169 | } /> 170 | 175 | 176 | 177 | 185 | 186 | } 196 | /> 197 | 198 | 199 | 200 | {/* Content below */} 201 | 202 | 203 | 204 | 205 | 206 | 207 | ); 208 | } 209 | -------------------------------------------------------------------------------- /pages/poolspirit.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/no-children-prop */ 2 | import React from "react"; 3 | import { 4 | Box, 5 | Drawer, 6 | DrawerContent, 7 | DrawerOverlay, 8 | Flex, 9 | Icon, 10 | IconButton, 11 | Input, 12 | InputGroup, 13 | InputLeftElement, 14 | Text, 15 | useColorModeValue, 16 | useDisclosure, 17 | useColorMode, 18 | Link, 19 | } from "@chakra-ui/react"; 20 | import { AiOutlineDashboard } from "react-icons/ai"; 21 | import { BsCurrencyExchange } from "react-icons/bs"; 22 | import { MdGeneratingTokens } from "react-icons/md"; 23 | import { GiToken } from "react-icons/gi"; 24 | import { FcAbout } from "react-icons/fc"; 25 | import { FiMenu, FiSearch } from "react-icons/fi"; 26 | import { FaMoon, FaSun } from "react-icons/fa"; 27 | import { FooterPage, PoolSpirit } from "../components"; 28 | 29 | export default function Swibc() { 30 | const sidebar = useDisclosure(); 31 | const { toggleColorMode: toggleMode } = useColorMode(); 32 | const SwitchIcon = useColorModeValue(FaMoon, FaSun); 33 | const text = useColorModeValue("dark", "light"); 34 | const hoverColor = useColorModeValue("gray.600", "gray.300"); 35 | 36 | const NavItem = (props) => { 37 | const { icon, children, ...rest } = props; 38 | return ( 39 | 55 | {icon && } 56 | {children} 57 | 58 | ); 59 | }; 60 | 61 | const SidebarContent = (props) => ( 62 | 78 | 79 | {/* */} 80 | 86 | DashDeX 87 | 88 | 89 | 97 | 101 | DASHBOARD 102 | 103 | 107 | POOLS 108 | 109 | 113 | TOKENS 114 | 115 | 119 | EXCHANGES 120 | 121 | 125 | ABOUT 126 | 127 | 128 | 129 | ); 130 | return ( 131 | 137 | 138 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 161 | } 166 | size="sm" 167 | /> 168 | 169 | } /> 170 | 175 | 176 | 177 | 185 | 186 | } 196 | /> 197 | 198 | 199 | 200 | {/* Content below */} 201 | 202 | 203 | 204 | 205 | 206 | 207 | ); 208 | } 209 | -------------------------------------------------------------------------------- /pages/poolsushi.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/no-children-prop */ 2 | import React from "react"; 3 | import { 4 | Box, 5 | Drawer, 6 | DrawerContent, 7 | DrawerOverlay, 8 | Flex, 9 | Icon, 10 | IconButton, 11 | Input, 12 | InputGroup, 13 | InputLeftElement, 14 | Text, 15 | useColorModeValue, 16 | useDisclosure, 17 | useColorMode, 18 | Link, 19 | } from "@chakra-ui/react"; 20 | import { AiOutlineDashboard } from "react-icons/ai"; 21 | import { BsCurrencyExchange } from "react-icons/bs"; 22 | import { GiToken } from "react-icons/gi"; 23 | import { FcAbout } from "react-icons/fc"; 24 | import { FiMenu, FiSearch } from "react-icons/fi"; 25 | import { MdGeneratingTokens } from "react-icons/md"; 26 | import { FaMoon, FaSun } from "react-icons/fa"; 27 | 28 | import { FooterPage, PoolSushi } from "../components"; 29 | 30 | export default function Swibc() { 31 | const sidebar = useDisclosure(); 32 | const { toggleColorMode: toggleMode } = useColorMode(); 33 | const SwitchIcon = useColorModeValue(FaMoon, FaSun); 34 | const text = useColorModeValue("dark", "light"); 35 | const hoverColor = useColorModeValue("gray.600", "gray.300"); 36 | 37 | const NavItem = (props) => { 38 | const { icon, children, ...rest } = props; 39 | return ( 40 | 56 | {icon && } 57 | {children} 58 | 59 | ); 60 | }; 61 | 62 | const SidebarContent = (props) => ( 63 | 79 | 80 | {/* */} 81 | 87 | DashDeX 88 | 89 | 90 | 98 | 102 | DASHBOARD 103 | 104 | 108 | POOLS 109 | 110 | 114 | TOKENS 115 | 116 | 120 | EXCHANGES 121 | 122 | 126 | ABOUT 127 | 128 | 129 | 130 | ); 131 | return ( 132 | 138 | 139 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 162 | } 167 | size="sm" 168 | /> 169 | 170 | } /> 171 | 176 | 177 | 178 | 186 | 187 | } 197 | /> 198 | 199 | 200 | 201 | {/* Content below */} 202 | 203 | 204 | 205 | 206 | 207 | 208 | ); 209 | } 210 | -------------------------------------------------------------------------------- /pages/tokenpang.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/no-children-prop */ 2 | import React from "react"; 3 | import { 4 | Box, 5 | Drawer, 6 | DrawerContent, 7 | DrawerOverlay, 8 | Flex, 9 | Icon, 10 | IconButton, 11 | Input, 12 | InputGroup, 13 | InputLeftElement, 14 | Text, 15 | useColorModeValue, 16 | useDisclosure, 17 | useColorMode, 18 | Link, 19 | } from "@chakra-ui/react"; 20 | import { AiOutlineDashboard } from "react-icons/ai"; 21 | import { BsCurrencyExchange } from "react-icons/bs"; 22 | import { GiToken } from "react-icons/gi"; 23 | import { FcAbout } from "react-icons/fc"; 24 | import { FiMenu, FiSearch } from "react-icons/fi"; 25 | import { MdGeneratingTokens } from "react-icons/md"; 26 | import { FaMoon, FaSun } from "react-icons/fa"; 27 | import { FooterPage, TokenPang } from "../components"; 28 | 29 | export default function Swibc() { 30 | const sidebar = useDisclosure(); 31 | const { toggleColorMode: toggleMode } = useColorMode(); 32 | const SwitchIcon = useColorModeValue(FaMoon, FaSun); 33 | const text = useColorModeValue("dark", "light"); 34 | const hoverColor = useColorModeValue("gray.600", "gray.300"); 35 | 36 | const NavItem = (props) => { 37 | const { icon, children, ...rest } = props; 38 | return ( 39 | 55 | {icon && } 56 | {children} 57 | 58 | ); 59 | }; 60 | 61 | const SidebarContent = (props) => ( 62 | 78 | 79 | {/* */} 80 | 86 | DashDeX 87 | 88 | 89 | 97 | 101 | OVERVIEW 102 | 103 | 107 | POOLS 108 | 109 | 113 | TOKENS 114 | 115 | 119 | EXCHANGES 120 | 121 | 125 | ABOUT 126 | 127 | 128 | 129 | ); 130 | return ( 131 | 137 | 138 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 161 | } 166 | size="sm" 167 | /> 168 | 169 | } /> 170 | 175 | 176 | 177 | 185 | 186 | } 196 | /> 197 | 198 | 199 | 200 | {/* Content below */} 201 | 202 | 203 | 204 | 205 | 206 | 207 | ); 208 | } 209 | -------------------------------------------------------------------------------- /pages/tokenquick.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/no-children-prop */ 2 | import React from "react"; 3 | import { 4 | Box, 5 | Drawer, 6 | DrawerContent, 7 | DrawerOverlay, 8 | Flex, 9 | Icon, 10 | IconButton, 11 | Input, 12 | InputGroup, 13 | InputLeftElement, 14 | Text, 15 | useColorModeValue, 16 | useDisclosure, 17 | useColorMode, 18 | Link, 19 | } from "@chakra-ui/react"; 20 | import { AiOutlineDashboard } from "react-icons/ai"; 21 | import { BsCurrencyExchange } from "react-icons/bs"; 22 | import { GiToken } from "react-icons/gi"; 23 | import { FcAbout } from "react-icons/fc"; 24 | import { FiMenu, FiSearch } from "react-icons/fi"; 25 | import { MdGeneratingTokens } from "react-icons/md"; 26 | import { FaMoon, FaSun } from "react-icons/fa"; 27 | import { FooterPage, TokenQuick } from "../components"; 28 | 29 | export default function Swibc() { 30 | const sidebar = useDisclosure(); 31 | const { toggleColorMode: toggleMode } = useColorMode(); 32 | const SwitchIcon = useColorModeValue(FaMoon, FaSun); 33 | const text = useColorModeValue("dark", "light"); 34 | const hoverColor = useColorModeValue("gray.600", "gray.300"); 35 | 36 | const NavItem = (props) => { 37 | const { icon, children, ...rest } = props; 38 | return ( 39 | 55 | {icon && } 56 | {children} 57 | 58 | ); 59 | }; 60 | 61 | const SidebarContent = (props) => ( 62 | 78 | 79 | {/* */} 80 | 86 | DashDeX 87 | 88 | 89 | 97 | 101 | OVERVIEW 102 | 103 | 107 | POOLS 108 | 109 | 113 | TOKENS 114 | 115 | 119 | EXCHANGES 120 | 121 | 125 | ABOUT 126 | 127 | 128 | 129 | ); 130 | return ( 131 | 137 | 138 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 161 | } 166 | size="sm" 167 | /> 168 | 169 | } /> 170 | 175 | 176 | 177 | 185 | 186 | } 196 | /> 197 | 198 | 199 | 200 | {/* Content below */} 201 | 202 | 203 | 204 | 205 | 206 | 207 | ); 208 | } 209 | -------------------------------------------------------------------------------- /pages/tokensushi.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/no-children-prop */ 2 | import React from "react"; 3 | import { 4 | Box, 5 | Drawer, 6 | DrawerContent, 7 | DrawerOverlay, 8 | Flex, 9 | Icon, 10 | IconButton, 11 | Input, 12 | InputGroup, 13 | InputLeftElement, 14 | Text, 15 | useColorModeValue, 16 | useDisclosure, 17 | useColorMode, 18 | Link, 19 | } from "@chakra-ui/react"; 20 | import { AiOutlineDashboard } from "react-icons/ai"; 21 | import { BsCurrencyExchange } from "react-icons/bs"; 22 | import { GiToken } from "react-icons/gi"; 23 | import { FcAbout } from "react-icons/fc"; 24 | import { FiMenu, FiSearch } from "react-icons/fi"; 25 | import { MdGeneratingTokens } from "react-icons/md"; 26 | import { FaMoon, FaSun } from "react-icons/fa"; 27 | import { FooterPage, TokenSushi } from "../components"; 28 | 29 | export default function Swibc() { 30 | const sidebar = useDisclosure(); 31 | const { toggleColorMode: toggleMode } = useColorMode(); 32 | const SwitchIcon = useColorModeValue(FaMoon, FaSun); 33 | const text = useColorModeValue("dark", "light"); 34 | const hoverColor = useColorModeValue("gray.600", "gray.300"); 35 | 36 | const NavItem = (props) => { 37 | const { icon, children, ...rest } = props; 38 | return ( 39 | 55 | {icon && } 56 | {children} 57 | 58 | ); 59 | }; 60 | 61 | const SidebarContent = (props) => ( 62 | 78 | 79 | {/* */} 80 | 86 | DashDeX 87 | 88 | 89 | 97 | 101 | OVERVIEW 102 | 103 | 107 | POOLS 108 | 109 | 113 | TOKENS 114 | 115 | 119 | EXCHANGES 120 | 121 | 125 | ABOUT 126 | 127 | 128 | 129 | ); 130 | return ( 131 | 137 | 138 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 161 | } 166 | size="sm" 167 | /> 168 | 169 | } /> 170 | 175 | 176 | 177 | 185 | 186 | } 196 | /> 197 | 198 | 199 | 200 | {/* Content below */} 201 | 202 | 203 | 204 | 205 | 206 | 207 | ); 208 | } 209 | -------------------------------------------------------------------------------- /pages/tokenspirit.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/no-children-prop */ 2 | import React from "react"; 3 | import { 4 | Box, 5 | Drawer, 6 | DrawerContent, 7 | DrawerOverlay, 8 | Flex, 9 | Icon, 10 | IconButton, 11 | Input, 12 | InputGroup, 13 | InputLeftElement, 14 | Text, 15 | useColorModeValue, 16 | useDisclosure, 17 | useColorMode, 18 | Link, 19 | } from "@chakra-ui/react"; 20 | import { AiOutlineDashboard } from "react-icons/ai"; 21 | import { BsCurrencyExchange } from "react-icons/bs"; 22 | import { GiToken } from "react-icons/gi"; 23 | import { FcAbout } from "react-icons/fc"; 24 | import { FiSearch, FiMenu } from "react-icons/fi"; 25 | import { MdGeneratingTokens } from "react-icons/md"; 26 | import { FaMoon, FaSun } from "react-icons/fa"; 27 | import { FooterPage, TokenSpirit } from "../components"; 28 | 29 | export default function Swibc() { 30 | const sidebar = useDisclosure(); 31 | const { toggleColorMode: toggleMode } = useColorMode(); 32 | const SwitchIcon = useColorModeValue(FaMoon, FaSun); 33 | const text = useColorModeValue("dark", "light"); 34 | const hoverColor = useColorModeValue("gray.600", "gray.300"); 35 | 36 | const NavItem = (props) => { 37 | const { icon, children, ...rest } = props; 38 | return ( 39 | 55 | {icon && } 56 | {children} 57 | 58 | ); 59 | }; 60 | 61 | const SidebarContent = (props) => ( 62 | 78 | 79 | {/* */} 80 | 86 | DashDeX 87 | 88 | 89 | 97 | 101 | OVERVIEW 102 | 103 | 107 | POOLS 108 | 109 | 113 | TOKENS 114 | 115 | 119 | EXCHANGES 120 | 121 | 125 | ABOUT 126 | 127 | 128 | 129 | ); 130 | return ( 131 | 137 | 138 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 161 | } 166 | size="sm" 167 | /> 168 | 169 | } /> 170 | 175 | 176 | 177 | 185 | 186 | } 196 | /> 197 | 198 | 199 | 200 | {/* Content below */} 201 | 202 | 203 | 204 | 205 | 206 | 207 | ); 208 | } 209 | -------------------------------------------------------------------------------- /pages/tokenspooky.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/no-children-prop */ 2 | import React from "react"; 3 | import { 4 | Box, 5 | Drawer, 6 | DrawerContent, 7 | DrawerOverlay, 8 | Flex, 9 | Icon, 10 | IconButton, 11 | Input, 12 | InputGroup, 13 | InputLeftElement, 14 | Text, 15 | useColorModeValue, 16 | useDisclosure, 17 | useColorMode, 18 | Link, 19 | } from "@chakra-ui/react"; 20 | import { AiOutlineDashboard } from "react-icons/ai"; 21 | import { BsCurrencyExchange } from "react-icons/bs"; 22 | import { GiToken } from "react-icons/gi"; 23 | import { FcAbout } from "react-icons/fc"; 24 | import { FiMenu, FiSearch } from "react-icons/fi"; 25 | import { MdGeneratingTokens } from "react-icons/md"; 26 | import { FaMoon, FaSun } from "react-icons/fa"; 27 | import { FooterPage, TokenSpooky } from "../components"; 28 | 29 | export default function Swibc() { 30 | const sidebar = useDisclosure(); 31 | const { toggleColorMode: toggleMode } = useColorMode(); 32 | const SwitchIcon = useColorModeValue(FaMoon, FaSun); 33 | const text = useColorModeValue("dark", "light"); 34 | const hoverColor = useColorModeValue("gray.600", "gray.300"); 35 | 36 | const NavItem = (props) => { 37 | const { icon, children, ...rest } = props; 38 | return ( 39 | 55 | {icon && } 56 | {children} 57 | 58 | ); 59 | }; 60 | 61 | const SidebarContent = (props) => ( 62 | 78 | 79 | {/* */} 80 | 86 | DashDeX 87 | 88 | 89 | 97 | 101 | OVERVIEW 102 | 103 | 107 | POOLS 108 | 109 | 113 | TOKENS 114 | 115 | 119 | EXCHANGES 120 | 121 | 125 | ABOUT 126 | 127 | 128 | 129 | ); 130 | return ( 131 | 137 | 138 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 161 | } 166 | size="sm" 167 | /> 168 | 169 | } /> 170 | 175 | 176 | 177 | 185 | 186 | } 196 | /> 197 | 198 | 199 | 200 | {/* Content below */} 201 | 202 | 203 | 204 | 205 | 206 | 207 | ); 208 | } 209 | -------------------------------------------------------------------------------- /components/Tokens/TokenSushi/index.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable react-hooks/rules-of-hooks */ 2 | import React from "react"; 3 | import { 4 | Table, 5 | Tr, 6 | Th, 7 | Td, 8 | Text, 9 | useColorModeValue, 10 | Progress, 11 | } from "@chakra-ui/react"; 12 | import { 13 | TableBody, 14 | TableContainer, 15 | TableHead, 16 | TableRow, 17 | Paper, 18 | TablePagination, 19 | TableFooter, 20 | } from "@material-ui/core"; 21 | import { makeStyles } from "@material-ui/core/styles"; 22 | 23 | const useStyles = makeStyles((theme) => ({ 24 | table: { 25 | minWidth: 750, 26 | }, 27 | tableContainer: { 28 | borderRadius: 15, 29 | margin: "10px 10px", 30 | maxWidth: 1130, 31 | }, 32 | status: { 33 | fontWeight: "bold", 34 | fontSize: "0.75rem", 35 | borderRadius: 8, 36 | padding: "3px 10px", 37 | display: "center", 38 | }, 39 | })); 40 | 41 | import { useQuery } from "react-query"; 42 | import EcosystemTokenSushi from "./EcosystemTokenSushi"; 43 | import numbro from "numbro"; 44 | 45 | // COVALENT API Key 46 | const APIKey = process.env.NEXT_PUBLIC_COVALENT_APIKEY; 47 | const chainID = 1; 48 | const dexName = "sushiswap"; 49 | 50 | export default function TokenSushi() { 51 | const classes = useStyles(); 52 | const [page, setPage] = React.useState(0); 53 | const [rowsPerPage, setRowsPerPage] = React.useState(10); 54 | 55 | // used React-Query to fetch Covalent API 56 | const { data, error, isFetching } = useQuery(["ecosystem35"], async () => { 57 | const res = await fetch( 58 | `https://api.covalenthq.com/v1/${chainID}/xy=k/${dexName}/tokens/?key=${APIKey}` 59 | ); 60 | return res.json(); 61 | }); 62 | 63 | const chainItems = data?.data?.items || []; // Fallback to an empty array if undefined 64 | 65 | if (isFetching) return ; 66 | 67 | if (error) { 68 | return Error: {error.message}; 69 | } 70 | 71 | const handleChangePage = (event, newPage) => { 72 | setPage(newPage); 73 | }; 74 | 75 | const handleChangeRowsPerPage = (event) => { 76 | setRowsPerPage(+event.target.value); 77 | setPage(0); 78 | }; 79 | 80 | return ( 81 | <> 82 |
83 | 84 | 85 | 86 | 93 | 94 | 95 | 100 | 105 | 110 | 115 | 120 | 125 | 126 | 127 | 128 | {chainItems.length > 0 ? ( 129 | chainItems 130 | .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) 131 | .map((items) => ( 132 | 133 | 136 | 139 | 146 | 153 | 160 | 163 | 164 | )) 165 | ) : ( 166 | 167 | 170 | 171 | )} 172 | 173 | 174 | 183 | 184 |
96 | 97 | NAME 98 | 99 | 101 | 102 | SYMBOL 103 | 104 | 106 | 107 | LIQUIDITY 108 | 109 | 111 | 112 | VOLUME(24H) 113 | 114 | 116 | 117 | PRICE 118 | 119 | 121 | 122 | SWAP(24H) 123 | 124 |
134 | {items.contract_name} 135 | 137 | {items.contract_ticker_symbol} 138 | 140 | {numbro(items.total_liquidity_quote).formatCurrency({ 141 | average: true, 142 | mantissa: 2, 143 | optionalMantissa: true, 144 | })} 145 | 147 | {numbro(items.total_volume_24h_quote).formatCurrency({ 148 | average: true, 149 | mantissa: 2, 150 | optionalMantissa: true, 151 | })} 152 | 154 | {numbro(items.quote_rate).formatCurrency({ 155 | average: true, 156 | mantissa: 2, 157 | optionalMantissa: true, 158 | })} 159 | 161 | {items.swap_count_24h} 162 |
168 | No data available 169 |
185 | 186 |
187 | 188 | ); 189 | } 190 | -------------------------------------------------------------------------------- /pages/exchanges.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable react-hooks/rules-of-hooks */ 2 | /* eslint-disable react/no-children-prop */ 3 | import React from "react"; 4 | import { 5 | Box, 6 | Drawer, 7 | DrawerContent, 8 | DrawerOverlay, 9 | Flex, 10 | Icon, 11 | IconButton, 12 | Input, 13 | InputGroup, 14 | InputLeftElement, 15 | Text, 16 | useColorModeValue, 17 | useDisclosure, 18 | useColorMode, 19 | Link, 20 | } from "@chakra-ui/react"; 21 | 22 | import { AiOutlineDashboard } from "react-icons/ai"; 23 | import { BsCurrencyExchange } from "react-icons/bs"; 24 | import { GiToken } from "react-icons/gi"; 25 | import { FcAbout } from "react-icons/fc"; 26 | import { FiMenu, FiSearch } from "react-icons/fi"; 27 | 28 | import { MdGeneratingTokens } from "react-icons/md"; 29 | import { FaMoon, FaSun } from "react-icons/fa"; 30 | import { Exchanges, FooterPage } from "../components"; 31 | 32 | export default function Swibc() { 33 | const sidebar = useDisclosure(); 34 | const { toggleColorMode: toggleMode } = useColorMode(); 35 | const SwitchIcon = useColorModeValue(FaMoon, FaSun); 36 | const text = useColorModeValue("dark", "light"); 37 | const hoverColor = useColorModeValue("gray.600", "gray.300"); 38 | 39 | const NavItem = (props) => { 40 | const { icon, children, ...rest } = props; 41 | return ( 42 | 58 | {icon && } 59 | {children} 60 | 61 | ); 62 | }; 63 | 64 | const SidebarContent = (props) => ( 65 | 81 | 82 | {/* */} 83 | 89 | DashDeX 90 | 91 | 92 | 100 | 104 | OVERVIEW 105 | 106 | 110 | POOLS 111 | 112 | 116 | TOKENS 117 | 118 | 122 | EXCHANGES 123 | 124 | 128 | ABOUT 129 | 130 | 131 | 132 | ); 133 | return ( 134 | 140 | 141 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 164 | } 169 | size="sm" 170 | /> 171 | 172 | } /> 173 | 178 | 179 | 180 | 188 | 189 | } 199 | /> 200 | 201 | 202 | 203 | {/* Content below */} 204 | 205 | 206 | 207 | 208 | 209 | 210 | ); 211 | } 212 | -------------------------------------------------------------------------------- /pages/token.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/no-children-prop */ 2 | import React from "react"; 3 | import { 4 | Box, 5 | Drawer, 6 | DrawerContent, 7 | DrawerOverlay, 8 | Flex, 9 | Icon, 10 | IconButton, 11 | Input, 12 | InputGroup, 13 | InputLeftElement, 14 | Text, 15 | useColorModeValue, 16 | useDisclosure, 17 | useColorMode, 18 | Link, 19 | } from "@chakra-ui/react"; 20 | import { AiOutlineDashboard } from "react-icons/ai"; 21 | import { BsCurrencyExchange } from "react-icons/bs"; 22 | import { FcAbout } from "react-icons/fc"; 23 | import { GiToken } from "react-icons/gi"; 24 | import { FiMenu, FiSearch } from "react-icons/fi"; 25 | import { MdGeneratingTokens } from "react-icons/md"; 26 | import { FaMoon, FaSun } from "react-icons/fa"; 27 | import { FooterPage, TokenSushi } from "../components"; 28 | 29 | export default function Swibc() { 30 | const sidebar = useDisclosure(); 31 | const { toggleColorMode: toggleMode } = useColorMode(); 32 | const SwitchIcon = useColorModeValue(FaMoon, FaSun); 33 | const text = useColorModeValue("dark", "light"); 34 | const hoverColor = useColorModeValue("gray.600", "gray.300"); 35 | 36 | const NavItem = (props) => { 37 | const { icon, children, ...rest } = props; 38 | return ( 39 | 55 | {icon && } 56 | {children} 57 | 58 | ); 59 | }; 60 | 61 | const SidebarContent = (props) => ( 62 | 78 | 79 | {/* */} 80 | 86 | DashDeX 87 | 88 | 89 | 97 | 101 | OVERVIEW 102 | 103 | 107 | POOLS 108 | 109 | 113 | TOKENS 114 | 115 | 119 | EXCHANGES 120 | 121 | 125 | ABOUT 126 | 127 | 128 | 129 | ); 130 | return ( 131 | 137 | 138 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 161 | } 166 | size="sm" 167 | /> 168 | 169 | } /> 170 | 175 | 176 | 177 | 185 | 186 | } 196 | /> 197 | 198 | 199 | 200 | {/* Content below */} 201 | 202 | 203 | 204 | 205 | 206 | 207 | ); 208 | } 209 | -------------------------------------------------------------------------------- /pages/about.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/jsx-no-undef */ 2 | /* eslint-disable react-hooks/rules-of-hooks */ 3 | /* eslint-disable react/no-children-prop */ 4 | import React from "react"; 5 | import { 6 | Avatar, 7 | Box, 8 | Collapse, 9 | Drawer, 10 | DrawerContent, 11 | DrawerOverlay, 12 | Flex, 13 | Icon, 14 | IconButton, 15 | Input, 16 | InputGroup, 17 | InputLeftElement, 18 | Text, 19 | VStack, 20 | AspectRatio, 21 | useColorModeValue, 22 | useDisclosure, 23 | useColorMode, 24 | Link, 25 | } from "@chakra-ui/react"; 26 | import { FaBell, FaClipboardCheck, FaRss } from "react-icons/fa"; 27 | import { AiFillGift } from "react-icons/ai"; 28 | import { AiOutlineDashboard } from "react-icons/ai"; 29 | import { BsGearFill, BsCurrencyExchange } from "react-icons/bs"; 30 | import { GiToken } from "react-icons/gi"; 31 | import { FcAbout } from "react-icons/fc"; 32 | import { FiMenu, FiSearch } from "react-icons/fi"; 33 | import { HiCode, HiCollection } from "react-icons/hi"; 34 | import { 35 | MdHome, 36 | MdKeyboardArrowRight, 37 | MdGeneratingTokens, 38 | MdOutlineGames, 39 | } from "react-icons/md"; 40 | import { FaMoon, FaSun } from "react-icons/fa"; 41 | 42 | import { AboutPage, FooterPage } from "../components"; 43 | 44 | export default function Swibc() { 45 | const sidebar = useDisclosure(); 46 | const integrations = useDisclosure(); 47 | const { toggleColorMode: toggleMode } = useColorMode(); 48 | const SwitchIcon = useColorModeValue(FaMoon, FaSun); 49 | const text = useColorModeValue("dark", "light"); 50 | 51 | const NavItem = (props) => { 52 | const { icon, children, ...rest } = props; 53 | return ( 54 | 70 | {icon && ( 71 | 79 | )} 80 | {children} 81 | 82 | ); 83 | }; 84 | 85 | const SidebarContent = (props) => ( 86 | 102 | 103 | {/* */} 104 | 110 | DashDeX 111 | 112 | 113 | 121 | 122 | OVERVIEW 123 | 124 | 125 | POOLS 126 | 127 | 128 | TOKENS 129 | 130 | 131 | EXCHANGES 132 | 133 | 134 | ABOUT 135 | 136 | 137 | 138 | ); 139 | return ( 140 | 146 | 147 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 170 | } 175 | size="sm" 176 | /> 177 | 178 | } /> 179 | 184 | 185 | 186 | 194 | 195 | } 205 | /> 206 | 207 | 208 | 209 | {/* Content below */} 210 | 211 | 212 | 213 | 214 | ); 215 | } 216 | -------------------------------------------------------------------------------- /components/Table/Tables.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/jsx-no-duplicate-props */ 2 | /* eslint-disable react-hooks/rules-of-hooks */ 3 | import React from "react"; 4 | import { 5 | Table, 6 | Thead, 7 | Tbody, 8 | Tfoot, 9 | Tr, 10 | Th, 11 | Td, 12 | TableCaption, 13 | Box, 14 | Text, 15 | useColorModeValue, 16 | Flex, 17 | Wrap, 18 | WrapItem, 19 | Avatar, 20 | HStack, 21 | Image, 22 | Progress, 23 | } from "@chakra-ui/react"; 24 | import { 25 | TableBody, 26 | TableCell, 27 | TableContainer, 28 | TableHead, 29 | TableRow, 30 | Paper, 31 | Grid, 32 | Typography, 33 | TablePagination, 34 | TableFooter, 35 | } from "@material-ui/core"; 36 | import { makeStyles } from "@material-ui/core/styles"; 37 | 38 | import Ecosystempools from "../Ecosystem/ecosystempools"; 39 | 40 | const useStyles = makeStyles((theme) => ({ 41 | table: { 42 | minWidth: 750, 43 | }, 44 | tableContainer: { 45 | borderRadius: 15, 46 | margin: "10px 10px", 47 | maxWidth: 1130, 48 | }, 49 | status: { 50 | fontWeight: "bold", 51 | fontSize: "0.75rem", 52 | borderRadius: 8, 53 | padding: "3px 10px", 54 | display: "inline-block", 55 | }, 56 | })); 57 | 58 | import { useQuery } from "react-query"; 59 | //COVALENT API Key 60 | const APIKey = process.env.NEXT_PUBLIC_COVALENTKEY; 61 | const chainID = 250; 62 | const dexName = "spookyswap"; 63 | 64 | const Token = () => { 65 | const classes = useStyles(); 66 | const [page, setPage] = React.useState(0); 67 | const [rowsPerPage, setRowsPerPage] = React.useState(5); 68 | 69 | // used React-Query to fetch Covalent API 70 | const { data, error, isFetching } = useQuery(["ecosystem23"], async () => { 71 | const res = await fetch( 72 | `https://api.covalenthq.com/v1/${chainID}/xy=k/${dexName}/pools/?key=${APIKey}` 73 | ); 74 | return res.json(); 75 | }); 76 | 77 | const chainItems = data?.data?.items; 78 | 79 | //console.log(chainItems); 80 | 81 | if (isFetching) return ; 82 | 83 | if (error) { 84 | return Error: {error.message}; 85 | } 86 | 87 | const handleChangePage = (event, newPage) => { 88 | setPage(newPage); 89 | }; 90 | 91 | const handleChangeRowsPerPage = (event) => { 92 | setRowsPerPage(+event.target.value); 93 | setPage(0); 94 | }; 95 | 96 | if (isFetching) return ; 97 | return ( 98 | <> 99 | {" "} 100 |
101 | 102 | 103 | 104 | 111 | 112 | 113 | 118 | 123 | 128 | 133 | 138 | 143 | 148 | 149 | 150 | 151 | {chainItems 152 | .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) 153 | .map((items) => ( 154 | 155 | 173 | 176 | 179 | 182 | 185 | 188 | 191 | 192 | ))} 193 | 194 | 195 | 204 | 205 |
114 | 115 | NAME 116 | 117 | 119 | 120 | LIQUIDITY 121 | 122 | 124 | 125 | VOLUME(24H) 126 | 127 | 129 | 130 | VOLUME(7D) 131 | 132 | 134 | 135 | SWAP(24H) 136 | 137 | 139 | 140 | FEES(24H) 141 | 142 | 144 | 145 | %FEES(YEARLY) 146 | 147 |
156 | 157 | 161 | 165 | 166 | {items.token_0.contract_ticker_symbol} – 167 | 168 | 169 | {items.token_1.contract_ticker_symbol} 170 | 171 | 172 | 174 | ${items.total_liquidity_quote} 175 | 177 | ${items.volume_24h_quote} 178 | 180 | ${items.volume_7d_quote} 181 | 183 | {items.swap_count_24h} 184 | 186 | ${items.fee_24h_quote} 187 | 189 | {items.annualized_fee * 100}% 190 |
206 | 207 |
208 | 209 | ); 210 | }; 211 | 212 | export default Token; 213 | -------------------------------------------------------------------------------- /pages/poolspooky.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable react-hooks/rules-of-hooks */ 2 | /* eslint-disable react/no-children-prop */ 3 | import React from "react"; 4 | import { 5 | Avatar, 6 | Box, 7 | Collapse, 8 | Drawer, 9 | DrawerContent, 10 | DrawerOverlay, 11 | Flex, 12 | Icon, 13 | IconButton, 14 | Input, 15 | InputGroup, 16 | InputLeftElement, 17 | Text, 18 | VStack, 19 | AspectRatio, 20 | useColorModeValue, 21 | useDisclosure, 22 | useColorMode, 23 | Link, 24 | } from "@chakra-ui/react"; 25 | import { FaBell, FaClipboardCheck, FaRss } from "react-icons/fa"; 26 | import { AiFillGift } from "react-icons/ai"; 27 | import { AiOutlineDashboard } from "react-icons/ai"; 28 | import { BsGearFill, BsCurrencyExchange } from "react-icons/bs"; 29 | import { GiToken } from "react-icons/gi"; 30 | import { FcAbout } from "react-icons/fc"; 31 | import { FiMenu, FiSearch } from "react-icons/fi"; 32 | import { HiCode, HiCollection } from "react-icons/hi"; 33 | import { Dashboard } from "@material-ui/icons"; 34 | import { 35 | MdHome, 36 | MdKeyboardArrowRight, 37 | MdGeneratingTokens, 38 | MdOutlineGames, 39 | } from "react-icons/md"; 40 | import { FaMoon, FaSun } from "react-icons/fa"; 41 | import { FooterPage, PoolSpooky } from "../components"; 42 | 43 | export default function Swibc() { 44 | const sidebar = useDisclosure(); 45 | const integrations = useDisclosure(); 46 | const { toggleColorMode: toggleMode } = useColorMode(); 47 | const SwitchIcon = useColorModeValue(FaMoon, FaSun); 48 | const text = useColorModeValue("dark", "light"); 49 | const hoverColor = useColorModeValue("gray.600", "gray.300"); 50 | 51 | const NavItem = (props) => { 52 | const { icon, children, ...rest } = props; 53 | return ( 54 | 70 | {icon && } 71 | {children} 72 | 73 | ); 74 | }; 75 | 76 | const SidebarContent = (props) => ( 77 | 93 | 94 | {/* */} 95 | 101 | DashDeX 102 | 103 | 104 | 112 | 116 | DASHBOARD 117 | 118 | 122 | POOLS 123 | 124 | 128 | TOKENS 129 | 130 | 134 | EXCHANGES 135 | 136 | 140 | ABOUT 141 | 142 | 143 | 144 | ); 145 | return ( 146 | 152 | 153 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 176 | } 181 | size="sm" 182 | /> 183 | 184 | } /> 185 | 190 | 191 | 192 | 200 | 201 | } 211 | /> 212 | 213 | 214 | 215 | {/* Content below Spookyswap pool */} 216 | 217 | 218 | 219 | 220 | 221 | 222 | ); 223 | } 224 | --------------------------------------------------------------------------------