Creating a Custom Hyperliquid Dashboard: Track Live Holdings in React

As the demand for decentralized derivatives exchange grows, platforms like Hyperliquid are becoming the go-to for real-time perpetual trading. If you're building a Web3 frontend or crypto portfolio tracker, showing live token holdings directly from Hyperliquid can dramatically improve your user experience.

In this guide, we'll walk you through building a custom Hyperliquid trading dashboard in React. You'll learn how to fetch and display a user's real-time balances using a clean component-based architecture.

What is Hyperliquid?

Hyperliquid is a high-performance, decentralized perpetual exchange offering instant finality, low fees, and composable APIs. As a trader, you can access dozens of markets with lightning-fast performance. As a developer, you can use their APIs to build dashboards, bots, and analytics tools.

By integrating Hyperliquid data, you can:

Fetch real-time token balances from any Hyperliquid address
Build portfolio dashboards and analytics charts
Provide wallet-based trading interfaces

Also, Check | How to Fetch Token Pricing with On-Chain Bonding Curves

Prerequisites

Before you start building the dashboard, ensure you have the following ready:

A basic understanding of React.js
Node.js and npm/yarn installed
A Hyperliquid wallet address for testing
Tailwind CSS or your preferred styling library (optional)

Step 1: Set up Your React App

First, let's set up your React app if you haven't done so already:

We'll use Vite for lightning-fast development:

# 1. Create your Vite + React project
npm create vite@latest hyperliquid-dashboard -- --template react

# 2. Navigate into the project folder
cd hyperliquid-dashboard

# 3. Install dependencies
npm install

# 4. Start the dev server
npm run dev

Now, install any required packages:

npm install wagmi viem @tanstack/react-query @rainbow-me/rainbowkit

NOTE: Now, you'll need to set up a wallet connection using wagmi. You can follow the Wagmi Quick Start Guide for configuring your wallet connection.

Also, Explore | Build a Crypto Payment Gateway Using Solana Pay and React

Step 2: Fetch Holdings Data

Let's start with the custom hook to get holdings from the Hyperliquid testnet API.

// components/useHyperLiquidHoldings.jsx

import { useEffect, useState } from "react";
import { useAccount } from "wagmi";

export const useHyperliquidHoldings = () => {
  const [holdings, setHoldings] = useState(null);
  const [loading, setLoading] = useState(false);
  const { address } = useAccount();
  useEffect(() => {
    if (!address) {
      setHoldings(null);
      setLoading(false);
      return;
    }
    const fetchHoldings = async () => {
      setLoading(true);
      try {
        const response = await fetch("https://api.hyperliquid-testnet.xyz/info", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            type: "spotClearinghouseState",
            user: address, //for testing use can use the any address like zero address 0x0000000000000000000000000000000000000000
          }),
        });
        const data = await response.json();
        setHoldings(data);
      } catch (error) {
        console.error("Error fetching holdings:", error);
      } finally {
        setLoading(false);
      }
    };
    fetchHoldings();
  }, [address]);
  return { holdings, loading };
};

Step 3: Create the Holdings Table

Next, build a responsive table UI to display the balances.

// components/HoldingTable.jsx

export default function HoldingsTable({ balances }) {
  return (
    <div className="table-container">
      <h2 className="table-title">Your Token Balances</h2>
      <div className="table-wrapper">
        <table className="responsive-table">
          <thead>
            <tr>
              <th>Coin</th>
              <th>Token ID</th>
              <th>Hold</th>
              <th>Total</th>
              <th>Entry Notional</th>
            </tr>
          </thead>
          <tbody>
            {!balances || balances.length === 0 ? (
              <tr>
                <td colSpan="5" className="no-data">
                  No balances available.
                </td>
              </tr>
            ) : (
              balances.map((item, i) => (
                <tr key={i}>
                  <td>{item.coin}</td>
                  <td>{item.token}</td>
                  <td>{item.hold}</td>
                  <td>{item.total}</td>
                  <td>{item.entryNtl}</td>
                </tr>
              ))
            )}
          </tbody>
        </table>
      </div>
    </div>
  );
}

Also, Discover | Create DeFi Index Fund with Custom ERC-4626 Tokenized Vaults

Step 4: Build the Navbar

Add a simple navbar component for reusable top navigation.

// components/Navbar.jsx
import { ConnectButton } from "@rainbow-me/rainbowkit";
import React from "react";

function Navbar() {
  return (
    <div className="navbar">
      <h1 className="logo">HYPER LIQUID</h1>
      <ConnectButton />
    </div>
  );
}
export default Navbar;

Step 5: Set up Providers

If you're planning to expand later (like wallet integration), create a Providers wrapper.

// components/Provider.jsx

import { WagmiProvider } from "wagmi";
import {
  RainbowKitProvider,
  darkTheme,
  getDefaultConfig,
} from "@rainbow-me/rainbowkit";
import "@rainbow-me/rainbowkit/styles.css";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

const hyperLiquidChain = {
  id: 998,
  name: "Hyper Liquid",
  nativeCurrency: { name: "Hyper Liquid", symbol: "HYPE", decimals: 18 },
  rpcUrls: {
    default: { http: ["https://rpc.hyperliquid-testnet.xyz/evm"] },
  },
};

const config = getDefaultConfig({
  chains: [hyperLiquidChain],
  projectId: "3c81036dac8bb5451ee3e10fd92ea0e0",
});

const queryClient = new QueryClient();

function Providers({ children }) {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <RainbowKitProvider
          theme={darkTheme({
            overlayBlur: "small",
            borderRadius: "medium",
          })}
          modalSize="compact"
        >
          {children}
        </RainbowKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
}
export default Providers;

Also, Check | Decentralized Prediction Market Development on Ethereum

Step 6: Compose the App

Here's how your main app logic comes together:

// App.jsx
import HoldingsTable from "./components/HoldingTable";
import Navbar from "./components/Navbar";
import { useHyperliquidHoldings } from "./components/useHyperLiquidHoldings";

function App() {
  const { holdings } = useHyperliquidHoldings();
  return (
    <div>
      <Navbar />
      <div className="holding-section">
        <HoldingsTable balances={holdings?.balances} />
      </div>
    </div>
  );
}
export default App;

And entry point:

// main.jsx
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./index.css";
import App from "./App.jsx";
import Providers from "./components/Provider.jsx";

createRoot(document.getElementById("root")).render(
  <StrictMode>
    <Providers>
      <App />
    </Providers>
  </StrictMode>
);

Step 7: Add a simple index.css file

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

.navbar {
  width: 100%;
  padding: 10px 20px;
  border: 1px solid black;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.holding-section {
  padding: 50px;
}

.table-container {
  padding: 1rem;
  background-color: #1a1a1a;
  color: #fff;
  border-radius: 8px;
  margin-top: 20px;
  max-width: 100%;
  overflow-x: auto;
}

.table-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1rem;
  text-align: center;
}

.table-wrapper {
  overflow-x: auto;
}

.responsive-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px;
}

.responsive-table th,
.responsive-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #333;
}

.responsive-table th {
  background-color: #2a2a2a;
  font-weight: 600;
}

.responsive-table tr:hover {
  background-color: #333;
}

.no-data {
  text-align: center;
  color: #ccc;
  padding: 1rem;
}

Step 8: Run and Test

Make sure to:

Replace the test wallet address in useHyperLiquidHoldings.jsx
Style your components in index.css or using Tailwind
Open your app on http://localhost:5173 and view live balances

Conclusion

You've just built a functi onal Hyperliquid dashboard that fetches and displays live wallet holdings. With this foundation, you can extend your app to support:

Wallet connection via MetaMask
Real-time trade execution
PnL tracking
Historical analytics

This kind of integration gives you powerful insights into decentralized trading activities and is a stepping stone toward building full-featured Web3 trading interfaces.