With the rise of decentralized exchange platform development, Hyperliquid is quickly becoming a favorite for real-time perpetual trading. If you're working on a Web3 frontend or a crypto portfolio tracker, integrating live token holdings from Hyperliquid can add serious value to your app.

What is Hyperliquid?

Hyperliquid is a fast, decentralized exchange built for perpetual contracts. It offers:

• Instant transaction finality
• Low fees
• Developer-friendly APIs

As a trader, you get blazing-fast execution across multiple markets. As a developer, you can build tools like dashboards, bots, or analytics apps with ease.

Also, Read | Build a Custom Bonding Curve for Token Sales with Solidity

With Hyperliquid's API, you can:

• Fetch real-time token balances
• Build portfolio dashboards and charts
• Create wallet-based trading interfaces

What You'll Need

Before we dive in, make sure you have:

• A basic understanding of React
• Node.js and npm (or yarn)
• A test wallet address on Hyperliquid
• Tailwind CSS for styling

You may also like | Build a Crypto Payment Gateway Using Solana Pay and React

Step 1: Set Up Your React App

We'll use Vite for fast setup and development.

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

# 2. Go into your project folder
cd hyperliquid-dashboard

# 3. Install dependencies
npm install

# 4. Start your dev server
npm run dev

Step 2: Install Required Packages

You'll need some packages for wallet connection and API queries:

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

Follow RainbowKit's or Wagmi's quickstart guide to connect a wallet.

Step 3: Fetch Portfolio Data from Hyperliquid

Create a custom React hook to pull live data from the Hyperliquid testnet API.

// useUserPortfolio.js
import { useEffect, useState } from 'react';
import { useAccount } from 'wagmi';

export const useUserPortfolio = () => {
  const { address } = useAccount();
  const [portfolio, setPortfolio] = useState(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (!address) return;

    const fetchData = async () => {
      setLoading(true);
      try {
        const res = await fetch('https://api.hyperliquid-testnet.xyz/info', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            type: 'spotClearinghouseState',
            user: address || 'your test address',
          }),
        });
        const data = await res.json();
        setPortfolio(data);
      } catch (err) {
        console.error('Error fetching data:', err);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [address]);

  return { portfolio, loading };
};

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

Step 4: Create the Dashboard UI

Build a component that displays key metrics like token balances, account value, and P&L over time. Use libraries like Recharts to create smooth, animated charts.

import { useState } from 'react';
import {
  LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer, CartesianGrid,
  AreaChart, Area
} from 'recharts';

// Helper: Format timestamp
const formatDate = (ts) => {
  const date = new Date(Number(ts));
  return `${date.getMonth() + 1}/${date.getDate()} ${date.getHours()}:${date.getMinutes()}`;
};

const timeOptions = ['day', 'week', 'month', 'allTime'];

const PortfolioDashboard = ({ portfolioData }) => {
  const [selectedTime, setSelectedTime] = useState('day');

  const selectedData = portfolioData?.find(([label]) => label === selectedTime);
  const { accountValueHistory = [], pnlHistory = [], vlm = '0' } = selectedData?.[1] || {};

  // Combine both datasets by timestamp
  const chartData = accountValueHistory.map(([timestamp, value], i) => ({
    time: formatDate(timestamp),
    accountValue: Number(value),
    pnl: Number(pnlHistory[i]?.[1] || 0),
  }));

  const currentPnl = Number(chartData[chartData.length - 1]?.pnl || 0);
  const startValue = Number(chartData[0]?.accountValue || 0);
  const endValue = Number(chartData[chartData.length - 1]?.accountValue || 0);
  const pnlPercentage = startValue !== 0 ? ((currentPnl / startValue) * 100).toFixed(2) : '0.00';

  return (
    

      {/* Header Section */}
      

        

          

            Portfolio Overview
          
          
Track your Hyperliquid performance
        
        

          {timeOptions.map((opt) => (
             setSelectedTime(opt)}
              className={`px-4 py-2 rounded-md text-sm font-medium transition-all ${selectedTime === opt
                ? 'bg-gray-700 text-white shadow-md'
                : 'text-gray-400 hover:text-white'
                }`}
            >
              {opt.charAt(0).toUpperCase() + opt.slice(1)}
            
          ))}
        
      

      {/* Key Stats */}
      

        

          
Volume
          
${Number(vlm).toLocaleString()}
        
        

          
PNL
          

            
= 0 ? 'text-green-400' : 'text-red-400'}`}>
              ${Math.abs(currentPnl).toFixed(2)}
            
            = 0 ? 'text-green-400' : 'text-red-400'}`}>
              {currentPnl >= 0 ? '↑' : '↓'} {pnlPercentage}%
            
          
        
        

          
Start Value
          
${startValue.toFixed(2)}
        
        

          
End Value
          
${endValue.toFixed(2)}
        
      

      {/* Charts */}
      

        {/* Account Value Chart */}
        

          

            
Account Value
            

              
Current Value
              
${endValue.toFixed(2)}
            
          
          
            
              
                
                  
                  
                
              
              
              
              
              
              
            
          
        

        {/* PNL Chart */}
        

          

            
Profit & Loss
            

              
Current PNL
              
= 0 ? 'text-green-400' : 'text-red-400'}`}>
                ${currentPnl.toFixed(2)}
              
            
          
          
            
              
                
                  = 0 ? '#4ade80' : '#f87171'} stopOpacity={0.8} />
                  = 0 ? '#4ade80' : '#f87171'} stopOpacity={0} />
                
              
              
              
              
              
              = 0 ? '#4ade80' : '#f87171'}
                fillOpacity={1}
                fill='url(#colorPnl)'
              />
            
          
        
      
    
  );
};

export default PortfolioDashboard;

Step 5: Add a Simple Navbar

Use the RainbowKit ConnectButton to let users link their wallet.

import { ConnectButton } from '@rainbow-me/rainbowkit';
function Navbar() {
 return (
   

     
📊 Hyperliquid Dashboard
     
   
 );
}

Also, read | Decentralized Prediction Market Development on Ethereum 

Step 6: Set Up Providers

Wrap your app with WagmiProvider, RainbowKitProvider, and React Query so you're ready for wallet interactions and data fetching.

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(
  
    
      
    
  
);

Step 7: Putting It All Together

Your main app logic should show different states:

• Wallet not connected
• Loading portfolio

• Display portfolio once data is fetched

   

import Navbar from './components/Navbar';
import PortfolioDashboard from './components/PortfolioDashboard';
import { useUserPortfolio } from './hooks/useUserPortfolio';
import { useAccount } from 'wagmi';


function App() {
  const { address, isConnected } = useAccount();
  const { portfolio, loading } = useUserPortfolio(address);

  return (
    

      
      

        {!isConnected ? (
          

            🔗 Please connect your wallet to view your portfolio.
          
        ) : loading ? (
          
Loading portfolio...
        ) : (
          
        )}
      
    
  );
}

export default App;

Step 9: Run and Test

• Replace the test address in your hook
• Start your app: http://localhost:5173
• View live token balances from Hyperliquid

Sample UI Preview

Conclusion

And that's it! We have built a working portfolio tracker that fetches real-time wallet data from Hyperliquid. In case you are planning to build your deFi protocol leveraging the potential of Hyperliquid, connect with our skilled blockchain developers to get started.