Creating Dashboard

Technical assignment (TA) for creating a Dashboard for HYPE

1. Main goal

Create a Dashboard for monitoring the activity of a specific wallet on the Hyperliquid network. The dashboard should:

    •    Display transaction data in real-time (every hour).

    •    Collect data starting from 00:00 hours each day.

    •    Record and visualize metrics in the form of graphs and tables.

2. Functionality

    1.    Data collection

    •    Integration with the HypurrScan API 

    •    Automatic data updates every 60 minutes.

    2.    Displayed data

    •    Transaction table:

    •    Number of tokens redeemed per day.

    •    Amount of dollars spent per day.

    •    Total number of tokens in the wallet (cumulative total).

    •    Graphs:

    •    Daily graph: token redemption ($HYPE) and amounts spent (USDC).

    •    Final graph: change in total token balance in the HOLDINGS section.

    3.    Functions

    •    Start counting: data collection from 00:00 of the current day.

    •    Adding new data to accumulated values for visualizing growth (cumulative total).

    •    Manual data refresh (button “Refresh”).

    •    Saving data in the database (e.g., SQLite or MongoDB).

3. Input data

    •    Wallet URL: https://hypurrscan.io/address/0xfefefefefefefefefefefefefefefefefefefefe.

    •    API or page parsing to obtain:

    •    Transaction data (amount, number of tokens, time).

    •    Total token balance.

4. Technology stack

    •    Backend: Python (FastAPI or Flask).

    •    Modules: requests, pandas, sqlite3/sqlalchemy.

    •    Frontend: JavaScript (React + TailwindCSS).

    •    Graphs: Chart.js or ApexCharts library.

    •    Database: SQLite or MongoDB.

    •    Hosting: Vercel for frontend, AWS/Heroku for backend.

5. Development stages

    1.    Data collection

    •    Connecting to the HypurrScan API https://api.hypurrscan.io/ui/

    •    Creating a script to obtain transactions, current token balance, and other data.

    2.    Data processing

    •    Aggregating data by days.

    •    Calculating cumulative totals of tokens and expenses.

    3.    Frontend

    •    Creating an interface to display data in tables and graphs.

    •    Implementing graph updates every 60 minutes.

    4.    Visualization

    •    Setting up bar charts to display token redemption and expenses.

    •    Line chart for visualizing total token balance.

    5.    Testing

    •    Checking data accuracy.

    •    Performance optimization.

6. Example data structure

    •    Table transactions:

id | date       | time   | tokens_bought | usd_spent | total_tokens

---------------------------------------------------------------

1  | 2025-01-31 | 00:15  | 500.45        | 14,000    | 500.45

2  | 2025-01-31 | 01:15  | 300.33        | 8,000     | 800.78

    •    Table holdings:

id | date       | total_tokens | total_usd_spent

------------------------------------------------

1  | 2025-01-31 | 13,978,156.65 | 389,662,038.85

Implementation of data visualization

    1.    Library used:

    •    For building graphs: Chart.js (if using React/JavaScript) or Matplotlib/Plotly (if Python).

    •    Stacked Bar Chart or a similar type of chart.