DeFi Dashboard is a web application built using Next.js that enables users to visualize the trading volumes and other data of PancakeSwap DEX on both the Binance Smart Chain (BSC) and Ethereum (ETH) chains. It utilizes Mantine for UI components, Apollo Client for data fetching, and graphql-codegen to generate hooks for seamless integration with GraphQL APIs.
This project is developed for the BNB chain Zero2Hero Hackathon - NodeReal Challenge, which focuses on using NodeReal standard and enhanced APIs to implement required features.
DeFi Dashboard provides an interactive interface for developers and users to monitor and analyze the trading volumes on PancakeSwap. The application offers the following features:
- Display the data for PancakeSwap on both BSC and ETH chains.
- Display a charts containing trading data for the last 90 days.
- Showcase top tokens and top token pairs based on trading volume.
- Display volumes and data for any token or token pair on PancakeSwap.
To get started with the DeFi Dashboard, follow these steps:
- Node.js v14.x or higher
- Yarn package manager
To configure the GraphQL endpoints for BSC and ETH chains, set the following environment variables in a .env
file at the root of the project:
NEXT_PUBLIC_BSC_GRAPHQL_URL="your-bsc-graphql-url"
NEXT_PUBLIC_ETH_GRAPHQL_URL="your-eth-graphql-url"
These environment variables are used to set the respective GraphQL endpoints in the codegen.yml
file.
Replace your-bsc-graphql-url
and your-eth-graphql-url
with the actual GraphQL API URLs for the BSC and ETH chains, respectively. These URLs can be obtained from the NodeReal platform, which provides access to PancakeSwap data through their GraphQL APIs.
For example, your BSC GraphQL URL might look like this:
https://open-platform.nodereal.io/7e14908068a54145aa61c9e9f0ddb7d8/pancakeswap-free/graphql
To generate TypeScript hooks for the GraphQL queries, update the codegen.yml
file with the GraphQL API URLs set in the environment variables:
overwrite: true
generates:
generated/bsc-query-types.ts:
schema: 'your-bsc-graphql-url' # Update with your BSC GraphQL URL
documents: 'queries/bsc.ts'
plugins:
- 'typescript'
- 'typescript-operations'
- 'typescript-react-apollo'
generated/eth-query-types.ts:
schema: 'your-bsc-graphql-eth'
documents: 'queries/eth.ts'
plugins:
- 'typescript'
- 'typescript-operations'
- 'typescript-react-apollo'
Replace your-bsc-graphql-url
and your-eth-graphql-url
with the actual GraphQL API URLs for the BSC and ETH chains that you have set in the .env
file.
The codegen.yml
file is used by the graphql-codegen
tool to generate TypeScript types and hooks for your GraphQL queries.
In order to generate hooks for a query, that query needs to be specified either in queries/eth.ts
or queries/bsc.ts
. Once you have added the queries, you can generate the hooks by running:
yarn generate-graphql-types
- Clone the repository:
git clone https://github.com/777Rob/defi-dashboard.git
- Change the working directory:
cd defi-dashboard
- Install dependencies:
yarn install
- Run the development server:
yarn dev
Open http://localhost:3000 in your browser to see the DeFi Dashboard in action.
dev
– start dev serverbuild
– bundle application for productionexport
– exports static website toout
folderanalyze
– analyzes application bundle with @next/bundle-analyzer
typecheck
– checks TypeScript typeslint
– runs ESLintprettier:check
– checks files with Prettierjest
– runs jest testsjest:watch
– starts jest watchtest
– runsjest
,prettier:check
,lint
andtypecheck
scripts
storybook
– starts storybook dev serverstorybook:build
– build production storybook bundle tostorybook-static
prettier:write
– formats all files with Prettiergenerate-graphql-types
- fetches and generates GraphQL types
We welcome contributions to the DeFi Dashboard. If you would like to contribute, please fork the repository, make your changes, and submit a pull request.
README Mantine Next Template
Get started with Mantine + Next with just a few button clicks.
Click Use this template
button at the header of repository or follow this link and
create new repository with @mantine
packages. Note that you have to be logged in to GitHub to generate template.
This template comes with several essential features:
- Server side rendering setup for Mantine
- Color scheme is stored in cookie to avoid color scheme mismatch after hydration
- Storybook with color scheme toggle
- Jest with react testing library
- ESLint setup with eslint-config-mantine