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.
