मुख्य सामग्री पर जाएं
Back to Sample Apps

Hyperliquid Portfolio Tracker

Build a real-time portfolio tracker that monitors Hyperliquid perpetual positions, PnL, margin utilization, and vault holdings using Quicknode's Hyperliquid info endpoint.

Deploy Icon
Deploy App
Github Icon
View Repo
Frontend Framework/Library:
React
Language:
टाइपप्रति
Build Tool/Development Server:
Vite
Sample app preview

Introduction

As a perpetual trader on Hyperliquid, having a comprehensive portfolio tracker is essential for monitoring your positions, PnL, and margin utilization in real-time. This guide shows you how to build a powerful portfolio tracker that monitors any Hyperliquid wallet using Quicknode's Hyperliquid info endpoint.

This example app is provided for educational and demonstration purposes only.


अतिरिक्त संसाधन

For an in-depth guide on implementing this portfolio tracker from scratch, check out our comprehensive guide on Quicknode

विशेषताएँ


  • Live Position Tracking: Real-time updates on perpetual positions with PnL
  • Portfolio Analytics: Account value, margin usage, and risk metrics
  • Vault Management: Track vault value and lock-up schedules
  • Spot Holdings: Monitor token balances and USD values
  • Search For Any Wallet: Switch between different trading accounts

Tech Stack

Frontend​


  • React + TypeScript + Tailwind CSS + shadcn/ui & Radix UI
  • यह ट्रेडिंग डेटा को एक रिस्पॉन्सिव इंटरफेस में प्रदर्शित करता है।
  • यह डेटाबेस को हर 1000 मिलीसेकंड में अपडेट करने के लिए पोल करता है।
  • डेटाबेस अनुरोधों के माध्यम से वॉलेट स्विचिंग को संभालता है

Backend​


  • Node.js indexer with 500ms polling interval
  • यह 5 अलग-अलग हाइपरलिक्विड एंडपॉइंट्स से डेटा प्राप्त करता है।
  • डेटा को उचित परिशुद्धता प्रबंधन के साथ PostgreSQL में संग्रहीत करता है
  • फ्रंटएंड से वॉलेट स्विचिंग अनुरोधों का प्रबंधन करता है

मतदान संबंधी विचार

यह गाइड रीयल-टाइम अपडेट दिखाने के लिए आक्रामक पोलिंग अंतराल (इंडेक्सर के लिए 500ms, फ्रंटएंड के लिए 1000ms) का उपयोग करती है। आप आवश्यकतानुसार इन अंतरालों को समायोजित कर सकते हैं:

  • फ़्रंट एंड: src/Dashboard.tsx पंक्तियाँ 260-264 - बदलें 1000 मान इसमें: 
    const interval = setInterval(async () => {
      await fetchData(currentWallet);
    }, 1000);
  • इंडेक्सर: src/indexer/indexer.ts पंक्तियाँ 623-630 - बदलें 500 मान इसमें: 
    setInterval(async () => {
      await indexer.checkForWalletSwitch();
      await indexer.indexData();
    }, 500);

लागत को अनुकूलित करने के लिए अपने Quicknode और Supabase के उपयोग की निगरानी करें।

Database​


  • Supabase PostgreSQL
  • ट्रेडिंग डेटा को वित्तीय सटीकता के साथ 6 तालिकाओं में संग्रहीत करता है (दशमलव प्रकार)
  • फ्रंटएंड और इंडेक्सर के बीच संचार को संभालता है वॉलेट_स्विच_अनुरोध मेज़
  • डुप्लिकेट प्रविष्टियों को रोकने के लिए अद्वितीय बाधाओं का उपयोग करता है

डेटा स्रोत​


  • हाइपरलिक्विड जानकारी क्विकनोड के माध्यम से एंडपॉइंट
  • यह खाता डेटा, पोजीशन, वॉल्ट होल्डिंग्स, स्पॉट बैलेंस और डेलीगेशन प्रदान करता है।
  • यह डेटा को JSON प्रारूप में लौटाता है, जिसमें सटीकता के लिए स्ट्रिंग संख्याएँ शामिल होती हैं।
  • वॉलेट पते पैरामीटर के साथ HTTP POST अनुरोधों के माध्यम से एक्सेस किया जाता है।

Architecture


┌──────────────────┐
 │ पर्प ट्रेडर │
 └─────────┬───────┘
 │ 1. वॉलेट का पता दर्ज करें
 ▼
 ┌──────────────────┐
 │ रिएक्ट डैशबोर्ड │◄──────────────────┐
 └─────────┬───────┘ │
 │ 2. स्टोर अनुरोध │ 6. डेटा पढ़ें और प्रदर्शित करें
 ▼ │
 ┌─────────────────┐ │
 │ सुपाबेस │◄──────────────────┤
 │ पोस्टग्रेएसक्यूएल │ │
 └─────────┬───────┘ │
 │ 3. अनुरोध का पता लगाएं │ 5. डेटा संग्रहीत करें
 ▼ │
 ┌─────────────────┐ │
 │ इंडेक्सर │───────────────────┘
 │ (500 मिलीसेकंड का पोल) │
 └─────────┬───────┘
 │ 4. हाइपरकोर डेटा प्राप्त करें
 ▼
 ┌──────────────────┐
 क्विकनोड
 हाइपरलिक्विड
 │ अंतिम बिंदु │
 └──────────────────┘

पोर्टफोलियो ट्रैकर में तीन घटक होते हैं जो PostgreSQL डेटाबेस के माध्यम से आपस में संचार करते हैं। इंडेक्सर हाइपरलिक्विड से डेटा प्राप्त करता है, उसे डेटाबेस में संग्रहीत करता है, और फ्रंटएंड प्रदर्शन के लिए डेटाबेस से क्वेरी करता है।

आवश्यक शर्तें


  • Quicknode account with Hyperliquid endpoint
  • सुपाबेस खाता
  • Node.js v20+, npm, और एक कोड एडिटर
  • बुनियादी React/TypeScript और REST API अवधारणाएँ
  • बुनियादी SQL अवधारणाएँ
  • वैकल्पिक: अत्यधिक तरलता वाला निरंतर व्यापार अनुभव
Why Quicknode Endpoint?

Quicknode समर्पित हाइपरलिक्विड एपीआई एंडपॉइंट प्रदान करता है जो आपके स्वयं के नोड को चलाने की आवश्यकता को समाप्त करता है:

  • पूर्व-कॉन्फ़िगर किए गए एंडपॉइंट, जिन्हें सेट अप करने की आवश्यकता नहीं है
  • कनेक्शन प्रबंधन और फ़ेलओवर को संभालता है
  • अतिरिक्त बुनियादी ढांचे के बिना हाइपरकोर डेटा तक सीधी पहुंच

Quick Start

1. Clone the Repository​

git clone https://github.com/quiknode-labs/qn-guide-examples.git
cd qn-guide-examples/sample-dapps/hyperliquid-portfolio-tracker

2. Setup Environment File​

cp .env.example .env

3. Supabase Database Setup​


  1. Create a new Supabase account or login at supabase.com

  2. Create a new project, then click the Connect button

Connect Button


  1. In the App Frameworks section, select React and change का उपयोग करते हुए को Vite

Select React


  1. Copy the VITE_SUPABASE_URL और VITE_SUPABASE_ANON_KEY values to your .पर्यावरण file 1
  2. Navigate to the SQL संपादक, paste the content of supabase/schema.sql, then click दौड़ना

SQL संपादक

This creates all necessary tables and functions for storing and fetching trading data.

4. Quicknode Setup​


  1. Create a free trial Quicknode account
  2. Create a Hyperliquid RPC endpoint
  3. Copy the endpoint URL and paste it to your .पर्यावरण फ़ाइल
Important

सुनिश्चित करें कि आप मौजूदा को हटा दें /ईवीएम और जोड़ें /जानकारी अपने Quicknode एंडपॉइंट URL के अंत में इसे जोड़कर आप Hyperliquid सूचना एंडपॉइंट्स तक पहुंच प्राप्त कर सकते हैं।

5. Start the Application​

npm install && npm run dev:both

This runs both the frontend application and the indexer. Open your browser at http://localhost:5173 and use the demo wallet button to see the tracker in action.

समस्या निवारण


If the indexer stops responding or no data appears after wallet search, simply re-run the indexer:

npm run dev:indexer

Then search again by inputting a valid wallet address.

Preview

मुख्य पृष्ठ​

मुख्य पृष्ठ

Dashboard View​

Dashboard View

और अधिक जानें


Future Improvements


  • Liquidation Warnings: Alert users when positions approach dangerous margin levels
  • Performance Charts: Track portfolio performance over time with Recharts
  • Price Alerts: Send notifications using your favorite notification service
  • Multi-Wallet Dashboard: Compare multiple trading accounts side-by-side

Contributions & Feedback
We'd love to hear your feedback and welcome any contributions to this sample app!
To report issues or share feedback, open a GitHub issue in the प्रश्न-मार्गदर्शिका-उदाहरण repository.
To contribute, follow these steps:
  1. Fork the repository
  2. Create a feature branch:
    git checkout -b feature/amazing-feature
  3. Commit your changes:
    git commit -m "Add amazing feature"
  4. Push your branch:
    git push origin feature/amazing-feature
  5. Open a Pull Request.
Explore More Sample Apps
HyperCore Order Monitor
Track trading orders on Hyperliquid Core (L1) in real-time with Quicknode Streams and KV Store for dynamic filtering.
Hyperliquid Trading Dashboard
A dashboard for real-time whale trades, liquidations, and trending tokens from Hyperliquid using Quicknode Hypercore gRPC.
Hyperliquid TP/SL Heatmap
A real-time browser dashboard that visualizes resting Hyperliquid TP/SL trigger orders as price-level clusters, anchored against live bid/ask prices from Quicknode Hypercore gRPC streams.