17 Minuten Lesezeit

Übersicht

Als aktiver Trader auf Hyperliquid ist ein umfassender Portfolio-Tracker unverzichtbar, um Ihre Positionen, Ihren PnL und Ihre Margin-Auslastung in Echtzeit zu überwachen. Dieser Leitfaden zeigt Ihnen, wie Sie einen leistungsstarken Portfolio-Tracker erstellen, der jedes Hyperliquid-Wallet mithilfe des Hyperliquid-Info-Endpunkts von Quicknode überwacht. Über die Erstellung eines nützlichen Trading-Tools hinaus erklärt dieses Tutorial auch, wie HyperCore-Daten abgerufen, strukturiert und für die Entwicklung der Anwendung genutzt werden. Die Anwendung bietet folgende Funktionen:

• Live-Positionsverfolgung – Echtzeit-Updates zu unbefristeten Positionen mit PnL
• Portfolioanalyse – Kontowert, Margin-Auslastung und Risikokennzahlen
• Tresorverwaltung – Überwachung des Tresorwerts und der Schließzeiten
• Spot Holdings – Überwachung der Token-Guthaben und der USD-Werte
• Beliebige Wallet suchen – Zwischen verschiedenen Handelskonten wechseln

Ihre Aufgaben

Erstellen Sie in vier Phasen einen umfassenden Portfolio-Tracker:

1. Einrichten eines Quicknode-Endpunkts und eines Supabase-Kontos
2. Einrichten Ihres Datenbankschemas
3. Erstellen eines Indexers, der alle 500 ms HyperCore-Daten abruft
4. Erstellung eines Dashboards mit modernen UI-Bibliotheken zur Anzeige von Echtzeit-Handelsdaten

Was Sie benötigen

• Quicknode Hyperliquid-Endpunkt
• Supabase-Konto
• Node.js v20+, npm und ein Code-Editor
• Grundlegende Konzepte zu React/TypeScript und REST-APIs
• Grundlegende SQL-Konzepte
• Optional: Ununterbrochenes Handelserlebnis mit Hyperliquid

Warum sollten Sie sich für einen Quicknode-Endpunkt entscheiden?

Quicknode stellt dedizierte Hyperliquid-API-Endpunkte bereit, sodass Sie keinen eigenen Knoten betreiben müssen:

• Vorkonfigurierte Endgeräte, die keine Einrichtung erfordern
• Übernimmt die Verbindungsverwaltung und das Failover
• Direkter Zugriff auf HyperCore-Daten ohne zusätzliche Infrastruktur

Architekturübersicht

Der Portfolio-Tracker besteht aus drei Komponenten, die über eine PostgreSQL-Datenbank miteinander kommunizieren. Der Indexer ruft Daten aus Hyperliquid ab, speichert sie in der Datenbank, und das Frontend fragt die Datenbank zur Anzeige ab.

Komponenten des Tech-Stacks

• Frontend: React + TypeScript + Tailwind CSS + shadcn/ui & Radix UI

  • Zeigt Handelsdaten in einer responsiven Benutzeroberfläche an
  • Die Datenbank wird alle 1000 ms auf Aktualisierungen überprüft
  • Erledigt den Wechsel der Wallet über Datenbankabfragen

• Backend: Node.js-Indexer mit einem Abfrageintervall von 500 ms

  • Ruft Daten von 5 verschiedenen Hyperliquid-Endpunkten ab
  • Speichert Daten in PostgreSQL unter Berücksichtigung der korrekten Genauigkeit
  • Verarbeitet Anfragen zum Wechseln der Wallet vom Frontend aus

Überlegungen zur Umfrage

In dieser Anleitung werden kurze Abfrageintervalle (500 ms für den Indexer, 1000 ms für das Frontend) verwendet, um Echtzeit-Aktualisierungen zu veranschaulichen. Sie können diese Intervalle bei Bedarf anpassen:

• Frontend: src/Dashboard.tsx Zeilen 260–264 – Ändere die 1000 Wert in:

  const interval = setInterval(async () => {
    await fetchData(currentWallet);
  }, 1000);

• Indexer: src/indexer/indexer.ts Zeilen 623–630 – Ändere die 500 Wert in:

  setInterval(async () => {
    await indexer.checkForWalletSwitch();
    await indexer.indexData();
  }, 500);

Überwachen Sie Ihre Quicknode- und Supabase-Nutzung, um die Kosten zu optimieren.

• Datenbank: Supabase PostgreSQL

  • Speichert Handelsdaten in 6 Tabellen mit finanzieller Genauigkeit (DEZIMAL Typen)
  • Wickelt die Kommunikation zwischen Frontend und Indexer über wallet_switch_requests Tabelle
  • Verwendet Eindeutigkeitsprüfungen, um doppelte Einträge zu verhindern

• Datenquelle: Hyperliquid Info Endpunkt über Quicknode

  • Stellt Kontodaten, Positionen, Tresorbestände, Spot-Guthaben und Bevollmächtigungen bereit
  • Gibt Daten im JSON-Format zurück, wobei Zahlen als Zeichenfolgen mit genauer Angabe der Genauigkeit dargestellt werden
  • Zugriff über HTTP-POST-Anfragen mit dem Parameter „Wallet-Adresse“

                    ┌─────────────────┐
                    │   Perp Trader   │
                    └─────────┬───────┘
                              │ 1. Wallet-Adresse eingeben
                              ▼
                    ┌─────────────────┐
                    │ React-Dashboard │◄─────────────────┐
                    └─────────┬───────┘                  │
                              │ 2. Anfrage speichern         │ 6. Daten lesen und anzeigen
                              ▼                          │
                    ┌─────────────────┐                  │
                    │    Supabase     │◄─────────────────┤
                    │   PostgreSQL    │                  │
                    └─────────┬───────┘                  │
                              │ 3. Anfrage erkennen        │ 5. Daten speichern
                              ▼                          │
                    ┌─────────────────┐                  │
                    │     Indexer     │──────────────────┘
                    │   (500 ms Abfrage)  │
                    └─────────┬───────┘
                              │ 4. HyperCore-Daten abrufen
                              ▼
                    ┌─────────────────┐
                    │   Quicknode     │
                    │  Hyperliquid    │
                    │   Endpunkt      │
                    └─────────────────┘

Ablauf der Bewerbung

1. Durchsuchung der Geldbörse:

1. Der Benutzer ruft die Wallet auf → Das Frontend überprüft die Anfrage und speichert sie in der Datenbank
2. Der Indexer erkennt eine Anfrage (abfragt alle 500 ms) → Wechselt zur neuen Wallet
3. Die Datenerfassung beginnt → Es werden Daten von 5 vorgegebenen Endpunkten unabhängig voneinander abgerufen und in der Datenbank gespeichert
4. Die Frontend-Datenbank fragt die Umfragen ab (alle 1000 ms) → Die Benutzeroberfläche wird mit aktuellen Daten aktualisiert, die vom Indexer abgerufen werden

2. Wallet-Suche und mehr:

1. Der Benutzer gibt eine neue Wallet ein → Das Frontend ruft eine Funktion auf, um alle Daten der bisherigen Wallet zu löschen, und weist den Indexer an, zur neuen Wallet zu wechseln
2. Der Indexer erkennt eine neue Anfrage → Wechselt sofort zur neuen Wallet und beginnt mit dem Abruf von Daten unter Verwendung der neuen Wallet-Adresse
3. Datenaktualisierungen in Echtzeit → Das Dashboard beginnt mit dem Abruf der neuen Positionen und Kennzahlen der Wallet

Projektstruktur

Das Projekt basiert auf einer übersichtlichen, modularen Architektur, die die Bereiche Datenerfassung, UI-Komponenten und Geschäftslogik voneinander trennt. Diese Struktur sorgt für eine gute Wartbarkeit des Codes und ermöglicht eine einfache Erweiterung der Funktionen.

Aufschlüsselung nach Verzeichnissen

├── src/
│   ├── indexer/
│   │   ├── indexer.ts          # Hauptkoordination des Indexers und Wallet-Verwaltung
│   │   └── apicalls.ts         # Abfragen an den Hyperliquid-Info-Endpunkt
│   ├── components/
│   │   ├── ui/                 # shadcn/ui-Komponenten (Button, Input, Card usw.)
│   │   └── dashboard/          # Dashboard-Komponenten (WalletHeader, PortfolioMetrics usw.)
│   ├── shared/
│   │   ├── types.ts            # TypeScript-Schnittstellen und -Typen
│   │   ├── utils.ts            # Formatierung, Berechnungen und Hilfsfunktionen
│   │   ├── constants.ts        # UI-Konstanten für das Dashboard
│   │   └── supabase.ts         # Supabase-Client-Instanz für den Frontend-Zugriff
│   ├── Dashboard.tsx           # Hauptlogik des Dashboards
│   └── main.tsx                
├── supabase/
│   └── schema.sql              # Vollständiges Datenbankschema
├── package.json
└── .env                       

Durchführung des Projekts

Schritt 1: Das Repository klonen

Klonen Sie zunächst das Projekt-Repository und wechseln Sie in das Projektverzeichnis:

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

Schritt 2: Konfigurationsdatei einrichten

Erstellen Sie Ihr .env Datei durch Ausführen des folgenden Befehls:

cp .env.example .env

Schritt 3: Einrichtung der Supabase-Datenbank

Erstellen Sie ein neues Supabase-Konto oder melden Sie sich auf der Supabase-Website bei Ihrem bestehenden Supabase-Konto an.

Erstellen Sie ein neues Projekt und klicken Sie anschließend auf die Schaltfläche „Verbinden“.

Wählen Sie im Abschnitt „App-Frameworks“ die Option „React“ aus und ändern Sie die unter Verwendung von Feld nach Vite. Kopieren Sie das VITE_SUPABASE_URL und VITE_SUPABASE_ANON_KEY Werte und füge sie zu deiner .env Datei.

Navigieren Sie abschließend zum SQL-Editor in der oberen rechten Ecke und fügen Sie den Inhalt der schema.sql Datei und klicken Sie anschließend auf „Ausführen“. Dadurch werden alle erforderlichen Tabellen und Funktionen erstellt, die wir zum Speichern und Abrufen der Daten für das Frontend benötigen.

Schritt 4: Quicknode-Einrichtung

Kostenlose Testversion erstellen Quicknode-Konto, erstellen Sie dann Ihren ersten Hyperliquid-RPC-Endpunkt und fügen Sie ihn in Ihre .env Datei.

Info

Stellen Sie sicher, dass Sie die vorhandene /evm und füge hinzu /info am Ende Ihrer Quicknode-Endpunkt-URL, um Zugriff auf die Hyperliquid-Info-Endpunkte zu erhalten.

Schritt 5: Starten Sie die Anwendung

Sobald die Tabellen angelegt und Ihre Umgebung konfiguriert sind, können Sie das Projekt starten, indem Sie die folgenden Befehle im Stammverzeichnis ausführen:

npm install && npm run dev:both

Dadurch werden sowohl die Frontend-Anwendung als auch der Indexer ausgeführt.

Sobald der Indexer gestartet wird, wartet er darauf, dass Sie eine gültige Wallet-Adresse eingeben:

Öffnen Sie Ihre Frontend-Seite unter der Localhost-URL und klicken Sie auf die Schaltfläche „Demo-Wallet“, um eine Beispiel-Wallet-Adresse zu erhalten:

Nachdem der Indexer nach einer Wallet gesucht hat, beginnt er, alle 500 ms Daten für diese Adresse abzurufen:

Das Dashboard zeigt Echtzeit-Statistiken zur Wallet an:

Sie haben nun in Echtzeit Zugriff auf Ihren Kontostand, Ihre offenen Positionen und weitere Handelsdaten.

Fehlerbehebung

Bei der Arbeit mit dem Indexer können während der Einrichtung oder zur Laufzeit folgende Probleme auftreten:

• Der Indexer reagiert nicht mehr
• Nach der Wallet-Suche werden keine Daten angezeigt
• Der Indexer wurde versehentlich angehalten

Lösung:

Starten Sie den Indexer neu, indem Sie folgenden Befehl ausführen:

npm run dev:indexer

Versuchen Sie es dann erneut, indem Sie eine gültige Wallet-Adresse eingeben.

Ein tiefer Einblick in den Quellcode

Nachdem Sie den Portfolio-Tracker nun eingerichtet haben und er läuft, wollen wir uns einmal ansehen, wie er im Hintergrund funktioniert. In diesem Abschnitt werden die drei Kernkomponenten näher beleuchtet, die die Portfolio-Verfolgung in Echtzeit ermöglichen:

Der Indexer - Unterstützt Hyperliquid's Info Endpunkt über apicalls.ts, erkennt Anfragen zum Wallet-Wechsel und koordiniert alle 500 ms die Datenerfassung von fünf verschiedenen Hyperliquid-Endpunkten.

Das Schema und die Datenbank – Veranschaulicht die PostgreSQL-Tabellenstrukturen, in denen Handelsdaten mit finanzieller Genauigkeit gespeichert werden, einschließlich des Koordinationsmechanismus für die Kommunikation zwischen Frontend und Indexer.

Das Dashboard (Frontend) – Behandelt das State-Management in React, die Echtzeit-Datenbankabfrage, die Validierung von Wallet-Adressen sowie die Benutzeroberfläche, auf der Live-Handelsdaten angezeigt werden.

Der Indexer

Der Indexer läuft als separater Node.js-Prozess, der alle 500 ms den Quicknode-Endpunkt abfragt. Er ruft die Transaktionsdaten für die aktuelle Wallet-Adresse ab und speichert sie in der Datenbank. Der Indexer wartet auf Anfragen zum Wallet-Wechsel vom Frontend und sorgt mithilfe einer Sperrdatei für die Prozessisolierung.

Erkennung von Geldwechseln im Portemonnaie

Der Indexer fragt den wallet_switch_requests Alle 500 ms die Tabelle abfragen, um Wechsel der Frontend-Wallet zu erkennen, wobei Statusfelder verwendet werden, um Race-Conditions während des Wechselvorgangs zu vermeiden.

Hyperflüssigkeit Info Endpunkt-Integration

Der Indexer verwendet den HyperliquidAPI Klasse in apicalls.ts um mit dem Hyperliquid-Endpunkt von Quicknode zu kommunizieren. Jede API-Methode folgt einem einheitlichen Muster zum Abrufen verschiedener Arten von Handelsdaten:

// From apicalls.ts - Main account data fetching
async getClearinghouseState(walletAddress: string): Promise<ClearinghouseStateResponse> {
  const payload = {
    type: 'clearinghouseState',
    user: walletAddress
  };

  const response = await fetch(QUICKNODE_ENDPOINT, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(payload)
  });

  return await response.json();
}

Die getUserVaultEquities() Die Methode folgt derselben Struktur, jedoch mit Typ: 'userVaultEquities', wobei gezeigt wird, dass für jeden Endpunkt lediglich die Wallet-Adresse und der Endpunkttyp erforderlich sind. Alle Methoden verfügen über eine umfassende Fehlerbehandlung und Protokollierung zur Fehlerbehebung bei Problemen mit Handelsdaten.

Der Indexer im Detail

Die Hauptschleife für die Indizierung ruft 5 verschiedene Info Endpunkte und speichert die Ergebnisse in separaten Datenbanktabellen:

// From indexer.ts - Core data fetching and storage
const data = await hyperliquidAPI.getClearinghouseState(CURRENT_WALLET_ADDRESS);
const stateId = await this.storeClearinghouseState(data);

// Store positions with atomic replacement to prevent UI flickering
await this.storeAssetPositions(data.assetPositions, data.time);

// Fetch additional data types with error handling
try {
  const rateLimitData = await hyperliquidAPI.getUserRateLimit(CURRENT_WALLET_ADDRESS);
  await this.storeUserRateLimit(rateLimitData, timestamp);
} catch (error) {
  console.log(`No rate limit data available for ${CURRENT_WALLET_ADDRESS}`);
}

Der Indexer geht mit Ausfällen einzelner Endpunkte reibungslos um – fällt eine Datenquelle aus, arbeiten die anderen weiterhin normal weiter.

Der Indexer verwendet eine dateibasierte Sperre, um zu verhindern, dass mehrere Instanzen gleichzeitig ausgeführt werden:

// From indexer.ts - Lock file creation and process checking
function createLock(): boolean {
  if (fs.existsSync(LOCK_FILE)) {
    const { pid } = JSON.parse(fs.readFileSync(LOCK_FILE, 'utf8'));
    try {
      process.kill(pid, 0);
      console.error(`❌ Another indexer is already running (PID: ${pid})`);
      return false;
    } catch (e) {
      fs.unlinkSync(LOCK_FILE); // Remove stale lock
    }
  }

  fs.writeFileSync(LOCK_FILE, JSON.stringify({ pid: process.pid }));
  return true;
}

Der Indexer verwendet eine Sperrdatei, um zu verhindern, dass mehrere Instanzen gleichzeitig ausgeführt werden, und gewährleistet so die Datenkonsistenz.

Das Schema und die Datenbank (Supabase)

Nachdem wir nun gesehen haben, wie der Indexer Daten erfasst, wollen wir uns nun ansehen, wie diese Daten gespeichert und strukturiert werden. Die PostgreSQL-Datenbank speichert Handelsdaten in sechs Tabellen und wickelt die Kommunikation zwischen dem Frontend und dem Indexer ab. Jede Tabelle verwendet DEZIMAL Typen zur Gewährleistung finanzieller Genauigkeit und spezifische Einschränkungen zur Vermeidung von Doppeleinträgen.

Beispiele für Tabellenstrukturen

Tabelle „Asset-Positionen“ – Speichert unbefristete Handelspositionen mit finanzieller Genauigkeit:

-- From schema.sql - Core trading data storage
CREATE TABLE asset_positions (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  wallet_address TEXT NOT NULL,

  coin TEXT NOT NULL,                  -- Asset symbol (e.g., 'BTC', 'ETH', 'SOL')
  size DECIMAL(20, 5) NOT NULL,        -- Position size: 20 digits total, 5 after decimal
  leverage_type TEXT NOT NULL,         -- 'cross' or 'isolated' margin mode
  leverage_value INTEGER NOT NULL,     -- Leverage multiplier (1x, 5x, 10x, etc.)

  entry_price DECIMAL(20, 5),          -- Average entry price with 5 decimal precision
  position_value DECIMAL(20, 5),       -- Current USD value of the position
  unrealized_pnl DECIMAL(20, 5),       -- Profit/loss before closing position
  liquidation_price DECIMAL(20, 5),    -- Price at which position gets liquidated
  margin_used DECIMAL(20, 5),          -- Amount of margin allocated to this position

  timestamp BIGINT NOT NULL,           -- Unix timestamp in milliseconds from HyperCore
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()  -- Database insertion time
);

-- Unique constraint prevents duplicate positions per wallet-coin pair
ALTER TABLE asset_positions ADD CONSTRAINT unique_position_per_wallet
UNIQUE (wallet_address, coin);

Die DECIMAL(20, 5) Der Typ bietet insgesamt 20 Ziffern mit 5 Dezimalstellen.

Tabelle mit Anträgen auf Wallet-Wechsel – Koordiniert die Kommunikation zwischen Frontend und Indexer:

-- Aus schema.sql – Koordination zwischen Frontend und Indexer
CREATE TABLE wallet_switch_requests (
  id UUID DEFAULT gen_random_uuid() PRIMÄR KEY,
  requested_wallet_address TEXT NICHT NULL,           -- Ethereum-Adresse (0x-Format)
  status TEXT NOT NULL STANDARD 'pending',           -- Zustandsmaschine: ausstehend → in Bearbeitung → abgeschlossen
  created_at TIMESTAMP WITH TIME ZONE DEFAULT JETZT()
);

-- Index für effiziente statusbasierte Abfragen durch den Indexer
CREATE INDEX idx_wallet_switch_requests_status ON wallet_switch_requests(status);

Diese Tabelle dient als Nachrichtenwarteschlange zwischen dem React-Frontend und dem Node.js-Indexer. Wenn ein Benutzer eine neue Wallet-Adresse eingibt, fügt das Frontend einen „in Bearbeitung“ Anfrage. Der Indexer fragt ab, ob „in Bearbeitung“ Anfragen alle 500 ms, aktualisiert den Status auf „Verarbeitung“ um Race-Conditions zu vermeiden, und führt dann den Wallet-Wechsel durch. Der Statusablauf stellt sicher, dass jeweils nur ein Wallet-Wechsel stattfindet, selbst wenn Nutzer schnell nach verschiedenen Adressen suchen.

Das Dashboard (Frontend)

Nachdem der Indexer Daten erfasst und die Datenbank diese speichert, fehlt nur noch die Benutzeroberfläche. Das React-Frontend fragt die Datenbank alle 1000 ms ab, um aktuelle Handelsdaten abzurufen, und zeigt diese mithilfe modularer Komponenten an. Es verwaltet den Wallet-Wechsel, indem es Anfragen in die Datenbank einfügt und den lokalen Status sofort löscht.

Übersicht

Die Architektur des Dashboards basiert auf einer zentralisierten Zustandsverwaltung mit modularem Aufbau der Komponenten:

// From Dashboard.tsx - Centralized state management
const [latestState, setLatestState] = useState<ClearinghouseState | null>(null);
const [positions, setPositions] = useState<AssetPosition[]>([]);
const [vaultEquities, setVaultEquities] = useState<UserVaultEquity[]>([]);
const [spotBalances, setSpotBalances] = useState<SpotBalance[]>([]);
const [isLoading, setIsLoading] = useState(true);
const [hasInitialData, setHasInitialData] = useState(false);

Die Dashboard Die Komponente speichert alle Handelsdaten im React-State und gibt sie als Props an untergeordnete Komponenten weiter. Dieses Muster sorgt für eine einfache State-Verwaltung und erleichtert die Nachverfolgung des Datenflusses beim Debuggen.

Automatische Aktualisierung (Polling)

Das Frontend fragt die Datenbank alle 1000 ms mithilfe eines setInterval Schleife mit ordnungsgemäßer Aufräumung:

// From Dashboard.tsx - Auto-refresh with cleanup
useEffect(() => {
  if (currentWallet && hasStarted && hasInitialData) {
    const interval = setInterval(async () => {
      await fetchData(currentWallet);
    }, 1000);
    return () => clearInterval(interval);
  }
}, [currentWallet, hasStarted, hasInitialData, fetchData]);

// Data freshness detection provides visual feedback
const isDataStale = latestState && (Date.now() - latestState.timestamp > 3000);

Die Abfrage wird je nach Benutzeraktion automatisch gestartet und gestoppt und läuft nur bei Bedarf, um Ressourcen zu sparen. Die Benutzeroberfläche zeigt an, wenn Daten veraltet sind (älter als 3 Sekunden), um die Benutzer über die Aktualität der Daten auf dem Laufenden zu halten.

Muster für Datenbankabfragen

Das Frontend nutzt optimierte Abfragemuster, um Handelsdaten in Echtzeit aus Supabase abzurufen:

// From Dashboard.tsx - Real-time data queries
const { data: latestData, error: latestError } = await supabase
  .from('clearinghouse_states')
  .select('*')
  .eq('wallet_address', walletAddress)
  .order('timestamp', { ascending: false })
  .limit(1)
  .maybeSingle();

// Get all positions for this wallet
const { data: positionsData, error: positionsError } = await supabase
  .from('asset_positions')
  .select('*')
  .eq('wallet_address', walletAddress)
  .order('timestamp', { ascending: false });

if (positionsError && positionsError.code !== 'PGRST116') throw positionsError;

Die Abfragen behandeln Fälle, in denen Wallets keine Handelsdaten enthalten, auf elegante Weise und zeigen leere Ergebnisse anstelle von Fehlermeldungen an.

Umgang mit dem Wechsel der Geldbörse

Das Frontend überprüft die Wallet-Adressen und setzt den Status beim Wechsel sofort zurück:

// From Dashboard.tsx - Wallet validation and switching
const isValidWalletAddress = (address: string): boolean => {
  return /^0x[a-fA-F0-9]{40}$/.test(address);
};

const handleWalletSearch = async () => {
  if (!isValidWalletAddress(address)) {
    setError('Invalid wallet address format');
    return;
  }

  // Clear ALL old data immediately when switching wallets
  setLatestState(null);
  setPositions([]);
  setVaultEquities([]);
  setSpotBalances([]);
  setIsSearching(true);

  // Signal indexer to switch
  await switchIndexerWallet(address);
  setCurrentWallet(address);
};

Die Benutzeroberfläche überprüft die Gültigkeit der Wallet-Adressen und löscht beim Wechsel sofort alte Daten, wobei so lange ein Ladezustand angezeigt wird, bis die neuen Daten geladen sind.

Datenanzeige

Die Handelsdaten werden vom React-Zustand an spezielle UI-Komponenten weitergeleitet, die die Informationen aufbereiten und darstellen:

// From PortfolioMetrics.tsx - Portfolio overview card component
interface PortfolioMetricsProps {
  totalAccountValue: number;
  totalUnrealizedPnl: number;
  userRateLimit: UserRateLimit | null;
  vaultEquities: UserVaultEquity[];
  delegations: Delegation[];
  formatCurrency: (value: number) => string;
}

export const PortfolioMetrics: React.FC<PortfolioMetricsProps> = ({
  totalAccountValue,
  totalUnrealizedPnl,
  formatCurrency
}) => {
  return (
    <Card className="bg-slate-900/50 border-slate-700/50 backdrop-blur-sm mb-6">
      <CardContent className="p-4">
        <div className="text-xs text-slate-400 mb-3 font-medium tracking-wide uppercase">
          Perp Account Value
        </div>
        <div className="text-2xl font-bold text-white">
          {formatCurrency(totalAccountValue)}
        </div>
      </CardContent>
    </Card>
  );
};

Die Dashboard Die Komponente übergibt berechnete Werte und Formatierungsfunktionen an untergeordnete Komponenten, die für die visuelle Darstellung und Gestaltung der Handelsdaten zuständig sind.

Fazit

Herzlichen Glückwunsch! Sie haben erfolgreich einen Echtzeit-Hyperliquid-Portfolio-Tracker mithilfe des Hyperliquid-Info-Endpunkts von Quicknode erstellt. Sie haben gelernt, wie man fortlaufende Handelsdaten abruft, eine PostgreSQL-Datenbank für finanzielle Präzision strukturiert und ein responsives Dashboard erstellt, das sich in Echtzeit aktualisiert. Diese Grundlage eröffnet Möglichkeiten für fortgeschrittene Handelstools wie automatisierte Risikoüberwachung und den Vergleich mehrerer Wallets.

Sie können dieses Projekt weiter ausbauen, indem Sie Diagrammbibliotheken wie Recharts integrieren oder Handelsbenachrichtigungen mithilfe Ihres bevorzugten Benachrichtigungsdienstes erstellen. Werfen Sie einen Blick auf unsere anderen Hyperliquid-Anleitungen, um weitere Möglichkeiten zur Erweiterung von Hyperliquid zu entdecken.

Nächste Schritte

Da Sie nun über einen funktionierenden Portfolio-Tracker verfügen, finden Sie hier einige Möglichkeiten, die Anwendung zu erweitern und zu verbessern:

• Liquidationswarnungen, wenn Positionen sich gefährlichen Margenniveaus nähern
• Verfolgung der Portfolio-Entwicklung im Zeitverlauf anhand von Diagrammen
• Kürzere Ladezeiten zwischen den Wallet-Suchen

Weitere Ressourcen

• Quicknode-Anleitungen zu Hyperliquid
• HyperCore-API-Referenz
• Hyperliquid-Dokumentation

Wenn ihr nicht weiterkommt oder Fragen habt, schreibt sie einfach in unseren Discord-Server. Bleibt auf dem Laufenden, indem ihr uns auf Twitter (@Quicknode) oder in unserem Telegram-Ankündigungskanal folgt.

Wir ❤️ Feedback!

Teilen Sie uns gerne mit, wenn Sie Feedback oder Vorschläge für neue Themen haben. Wir freuen uns auf Ihre Rückmeldung.