읽는 데 17분

개요

Hyperliquid에서 지속적으로 거래하는 트레이더라면, 포지션, PnL, 마진 사용률을 실시간으로 모니터링하기 위해 포괄적인 포트폴리오 추적 도구를 갖추는 것이 필수적입니다. 이 가이드에서는 Quicknode의 Hyperliquid 정보 엔드포인트를 사용하여 모든 Hyperliquid 지갑을 모니터링할 수 있는 강력한 포트폴리오 추적 도구를 구축하는 방법을 안내합니다. 이 튜토리얼은 유용한 거래 도구를 만드는 것을 넘어, 애플리케이션 구축을 위해 HyperCore 데이터가 어떻게 가져오고, 구조화되며, 활용되는지 그 원리를 명확히 설명합니다. 이 애플리케이션은 다음과 같은 기능을 보여줍니다:

• 실시간 포지션 추적 - PnL을 반영한 무기한 포지션의 실시간 업데이트
• 포트폴리오 분석 - 계좌 가치, 마진 사용 현황 및 위험 지표
• 금고 관리 - 금고 내 자산 가치 및 보관 일정 추적
• Spot Holdings - 토큰 잔액 및 USD 가치 모니터링
• 모든 지갑 검색 - 서로 다른 거래 계좌 간 전환

주요 업무

4단계에 걸쳐 완벽한 포트폴리오 추적 도구를 구축해 보세요:

1. Quicknode 엔드포인트 및 Supabase 계정 설정하기
2. 데이터베이스 스키마 설정하기
3. 500ms마다 HyperCore 데이터를 가져오는 인덱서를 생성하기
4. 최신 UI 라이브러리를 활용하여 실시간 거래 데이터를 표시하는 대시보드 구축

준비물

• Quicknode Hyperliquid 엔드포인트
• Supabase 계정
• Node.js v20 이상, npm, 코드 편집기
• React/TypeScript 및 REST API의 기본 개념
• SQL의 기본 개념
• 선택 사항: 하이퍼리퀴드(Hyperliquid)의 무제한 거래 경험

왜 Quicknode 엔드포인트를 선택해야 할까요?

Quicknode는 사용자가 직접 노드를 실행할 필요가 없도록 하는 전용 Hyperliquid API 엔드포인트를 제공합니다:

• 별도의 설정 없이 바로 사용할 수 있는 사전 구성된 엔드포인트
• 연결 관리 및 장애 조치 기능을 처리합니다.
• 추가 인프라 없이 HyperCore 데이터에 직접 액세스

아키텍처 개요

포트폴리오 추적기는 PostgreSQL 데이터베이스를 통해 통신하는 세 가지 구성 요소로 이루어져 있습니다. 인덱서는 Hyperliquid에서 데이터를 가져와 데이터베이스에 저장하고, 프론트엔드는 표시를 위해 데이터베이스에 쿼리를 실행합니다.

기술 스택 구성 요소

• 프론트엔드: React + TypeScript + Tailwind CSS + shadcn/ui 및 Radix UI

  • 반응형 인터페이스를 통해 거래 데이터를 표시합니다
  • 1000ms마다 여론조사 데이터베이스를 확인하여 업데이트 여부를 확인합니다.
  • 데이터베이스 요청을 통해 지갑 전환을 처리합니다.

• 백엔드: 500ms 폴링 간격을 갖는 Node.js 인덱서

  • 5개의 서로 다른 Hyperliquid 엔드포인트에서 데이터를 가져옵니다.
  • 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 사용량을 모니터링하여 비용을 최적화하세요.

• 데이터베이스: Supabase PostgreSQL

  • 재무 정밀도로 데이터를 6개의 테이블에 저장합니다 (소수 유형)
  • 다음 방식을 통해 프론트엔드와 인덱서 간의 통신을 처리합니다. 지갑 전환 요청 표
  • 중복 입력을 방지하기 위해 고유 제약 조건을 사용합니다.

• 데이터 출처: 하이퍼리퀴드 정보 Quicknode를 통한 엔드포인트

  • 계정 데이터, 포지션, 금고 보유 자산, 현물 잔고 및 위임 정보를 제공합니다.
  • 정밀도를 나타내는 숫자를 문자열로 처리하여 JSON 형식의 데이터를 반환합니다.
  • 지갑 주소 매개변수를 포함한 HTTP POST 요청을 통해 액세스됩니다.

                    ┌─────────────────┐
                    │   Perp Trader   │
                    └─────────┬───────┘
                              │ 1. 지갑 주소 입력
                              ▼
                    ┌─────────────────┐
                    │ React 대시보드 │◄─────────────────┐
                    └─────────┬───────┘                  │
                              │ 2. 요청 저장         │ 6. 데이터 읽기 및 표시
                              ▼                          │
                    ┌─────────────────┐                  │
                    │    Supabase     │◄─────────────────┤
                    │   PostgreSQL    │                  │
                    └─────────┬───────┘                  │
                              │ 3. 요청 감지        │ 5. 데이터 저장
                              ▼                          │
                    ┌─────────────────┐                  │
                    │     인덱서     │──────────────────┘
                    │   (500ms 폴링)  │
                    └─────────┬───────┘
                              │ 4. HyperCore 데이터 가져오기
                              ▼
                    ┌─────────────────┐
                    │   Quicknode     │
                    │  Hyperliquid    │
                    │   엔드포인트      │
                    └─────────────────┘

신청 절차

첫 번째 지갑 검색:

1. 사용자가 지갑에 접속 → 프론트엔드가 유효성을 확인하고 요청을 데이터베이스에 저장합니다
2. 인덱서가 요청을 감지함 (500ms마다 폴링) → 새로운 지갑으로 전환
3. 데이터 수집 시작 → 지정된 5개의 엔드포인트에서 각각 데이터를 가져와 데이터베이스에 저장합니다.
4. 프론트엔드가 데이터베이스를 조회 (1000ms마다) → 인덱서에서 가져온 최신 데이터로 UI가 업데이트됨

두 번째 지갑 검색 및 그 이후:

1. 사용자가 새 지갑을 입력하면 → 프론트엔드가 이전 지갑의 데이터를 모두 삭제하고, 인덱서에게 새 지갑으로 전환하도록 지시합니다.
2. 인덱서가 새로운 요청을 감지하면 → 즉시 새로운 지갑으로 전환하고, 새로운 지갑 주소를 사용하여 데이터 가져오기를 시작합니다.
3. 데이터가 실시간으로 업데이트됨 → 대시보드가 새로운 지갑의 포지션 및 지표를 불러오기 시작합니다

프로젝트 구조

이 프로젝트는 데이터 수집, UI 구성 요소, 비즈니스 로직 간의 역할을 명확히 구분하는 간결하고 모듈식 아키텍처를 따릅니다. 이러한 구조 덕분에 코드베이스의 유지보수가 용이하며, 기능을 손쉽게 확장할 수 있습니다.

디렉토리 분류

├── src/
│   ├── indexer/
│   │   ├── indexer.ts          # 메인 인덱서 오케스트레이션 및 지갑 관리
│   │   └── apicalls.ts         # Hyperliquid 정보 엔드포인트 쿼리
│   ├── components/
│   │   ├── ui/                 # shadcn/ui 컴포넌트 (Button, Input, Card 등)
│   │   └── dashboard/          # 대시보드 컴포넌트 (WalletHeader, PortfolioMetrics 등)
│   ├── shared/
│   │   ├── types.ts            # TypeScript 인터페이스 및 타입
│   │   ├── utils.ts            # 서식 지정, 계산 및 유틸리티 함수
│   │   ├── constants.ts        # 대시보드용 UI 상수
│   │   └── supabase.ts         # 프론트엔드 액세스를 위한 Supabase 클라이언트 인스턴스
│   ├── Dashboard.tsx           # 메인 대시보드 로직
│   └── main.tsx                
├── supabase/
│   └── schema.sql              # 전체 데이터베이스 스키마
├── package.json
└── .env                       

프로젝트 실행

1단계: 저장소 복제하기

먼저, 프로젝트 저장소를 복제하고 프로젝트 디렉터리로 이동합니다:

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

2단계: 환경 설정 파일 구성

나만의 .env 다음 명령을 실행하여 파일을 생성합니다:

cp .env.example .env

3단계: Supabase 데이터베이스 설정

Supabase 웹사이트에서 새로운 Supabase 계정을 만들거나 기존 Supabase 계정에 로그인하세요.

새 프로젝트를 생성한 다음, ‘연결’ 버튼을 클릭하세요.

‘앱 프레임워크’ 섹션에서 React를 선택하고 다음을 변경합니다. ~를 사용하여 필드를 Vite로 복사합니다. 다음을 복사하세요. VITE_SUPABASE_URL 그리고 VITE_SUPABASE_ANON_KEY 값을 계산하여 다음의 .env 파일.

마지막으로, 오른쪽 상단에 있는 SQL 편집기로 이동하여 다음의 내용을 붙여넣으세요. schema.sql 파일을 열고 ‘실행’을 클릭하세요. 그러면 프론트엔드에서 데이터를 저장하고 불러오는 데 필요한 모든 테이블과 함수가 생성됩니다.

4단계: Quicknode 설정

무료 체험판 만들기 Quicknode 계정, 그런 다음 첫 번째 Hyperliquid RPC 엔드포인트를 생성하고 이를 .env 파일.

정보

기존의 것을 반드시 제거하십시오. /evm 그리고 다음을 추가합니다 /정보 Hyperliquid 정보 엔드포인트에 액세스하려면 Quicknode 엔드포인트 URL 끝에 다음을 추가하십시오.

5단계: 애플리케이션 실행

테이블이 생성되고 환경 설정이 완료되면, 루트 디렉터리에서 다음 명령어를 실행하여 프로젝트를 시작할 수 있습니다:

npm install && npm run dev:both

이렇게 하면 프론트엔드 애플리케이션과 인덱서가 모두 실행됩니다.

인덱서가 실행을 시작하면, 사용자가 유효한 지갑 주소를 검색할 때까지 대기합니다:

로컬호스트 URL에서 프론트엔드 페이지를 열고, 데모 지갑 버튼을 클릭하여 예시 지갑 주소를 확인하세요:

지갑을 검색한 후, 인덱서는 해당 주소에 대한 데이터를 500ms마다 가져오기 시작합니다:

대시보드에는 지갑에 대한 실시간 통계가 표시됩니다:

이제 계좌 잔고, 보유 포지션 및 기타 거래 데이터를 실시간으로 확인할 수 있습니다.

문제 해결

인덱서를 사용하는 동안 설정 또는 실행 중에 다음과 같은 문제가 발생할 수 있습니다.

• 인덱서가 응답하지 않습니다
• 지갑 검색 후 데이터가 표시되지 않습니다
• 실수로 인덱서를 중지시켰습니다

해결책:

다음 명령을 실행하여 인덱서를 다시 시작하십시오:

npm run dev:indexer

그런 다음 유효한 지갑 주소를 입력하여 다시 검색해 보세요.

코드베이스 심층 분석

포트폴리오 추적 도구를 설치하고 실행했으니, 이제 그 내부 작동 원리를 살펴보겠습니다. 이 섹션에서는 실시간 포트폴리오 추적을 가능하게 하는 세 가지 핵심 구성 요소를 자세히 살펴보겠습니다:

인덱서 - Hyperliquid의 정보 엔드포인트를 통해 apicalls.ts, 지갑 전환 요청을 감지하고, 500ms마다 5개의 서로 다른 Hyperliquid 엔드포인트에서 데이터를 수집하도록 조정합니다.

스키마 및 데이터베이스 - 금융 수준의 정밀도로 거래 데이터를 저장하는 PostgreSQL 테이블 구조를 보여 주며, 여기에는 프론트엔드와 인덱서 간의 통신 조정 메커니즘도 포함됩니다.

대시보드(프론트엔드) - React 상태 관리, 실시간 데이터베이스 폴링, 지갑 주소 유효성 검사, 그리고 실시간 거래 데이터를 표시하는 사용자 인터페이스를 다룹니다.

인덱서

인덱서는 별도의 Node.js 프로세스로 실행되며, 500ms마다 Quicknode 엔드포인트를 폴링합니다. 이 인덱서는 현재 지갑 주소의 거래 데이터를 가져와 데이터베이스에 저장합니다. 또한 인덱서는 프론트엔드에서 전송되는 지갑 전환 요청을 대기하며, 잠금 파일을 사용하여 프로세스 격리를 처리합니다.

지갑 내 동전 변화 감지

인덱서는 다음을 주기적으로 확인합니다. 지갑 전환 요청 500ms마다 테이블을 확인하여 프론트엔드 지갑 전환을 감지하고, 전환 과정에서 경합 상태를 방지하기 위해 상태 필드를 사용합니다.

초유동체 정보 엔드포인트 통합

인덱서는 다음을 사용합니다. HyperliquidAPI ~ 수업 apicalls.ts Quicknode의 Hyperliquid 엔드포인트와 통신하기 위해. 각 API 메서드는 다양한 유형의 거래 데이터를 가져오는 데 있어 일관된 패턴을 따릅니다:

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

그 getUserVaultEquities() 이 메서드는 동일한 구조를 따르지만, type: 'userVaultEquities', 이를 통해 각 엔드포인트에 필요한 것은 지갑 주소와 엔드포인트 유형뿐임을 보여줍니다. 모든 메서드에는 거래 데이터 관련 문제를 디버깅할 수 있도록 포괄적인 오류 처리 및 로깅 기능이 포함되어 있습니다.

인덱서에 대한 심층 설명

주 인덱싱 루프는 5가지 다른 정보 엔드포인트를 처리하고 그 결과를 별도의 데이터베이스 테이블에 저장합니다:

// 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}`);
}

인덱서는 개별 엔드포인트의 장애를 원활하게 처리합니다. 즉, 하나의 데이터 소스에 장애가 발생하더라도 나머지 데이터 소스는 정상적으로 계속 작동합니다.

인덱서는 여러 인스턴스가 동시에 실행되는 것을 방지하기 위해 파일 기반 잠금을 사용합니다:

// 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;
}

인덱서는 잠금 파일을 사용하여 여러 인스턴스가 동시에 실행되는 것을 방지함으로써 데이터 일관성을 보장합니다.

스키마 및 데이터베이스 (Supabase)

인덱서가 데이터를 수집하는 방식을 살펴보았으니, 이제 그 데이터가 어떻게 저장되고 구성되는지 살펴보겠습니다. PostgreSQL 데이터베이스는 거래 데이터를 6개의 테이블에 저장하며, 프론트엔드와 인덱서 간의 통신을 처리합니다. 각 테이블은 소수 재무적 정확성을 위한 데이터 유형과 중복 입력을 방지하기 위한 고유 제약 조건.

테이블 구조 예시

자산 포지션 표 - 금융적 정밀도를 바탕으로 영구 거래 포지션을 저장합니다:

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

그 DECIMAL(20, 5) 이 유형은 소수점 이하 5자리를 포함해 총 20자리를 제공합니다.

월렛 전환 요청 테이블 - 프론트엔드와 인덱서 간의 통신을 조정합니다:

-- schema.sql에서 - 프론트엔드-인덱서 연동
CREATE TABLE wallet_switch_requests (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  요청된_지갑_주소 TEXT NOT NULL,           -- 이더리움 주소 (0x 형식)
  status TEXT NOT NULL 기본값 'pending',           -- 상태 기계: 보류 중 → 처리 중 → 완료
  생성 일시 TIMESTAMP WITH TIME ZONE 기본값 현재()
);

-- 인덱서가 상태 기반 쿼리를 효율적으로 처리할 수 있도록 하는 인덱스
CREATE INDEX idx_wallet_switch_requests_status ON wallet_switch_requests(status);

이 테이블은 React 프론트엔드와 Node.js 인덱서 간의 메시지 큐 역할을 합니다. 사용자가 새로운 지갑 주소를 입력하면, 프론트엔드는 '처리 중' 요청. 인덱서는 다음을 폴링합니다. '처리 중' 500ms마다 요청을 보내고, 상태를 '처리 중' 경합 상태를 방지한 뒤 지갑 전환을 수행합니다. 이러한 상태 진행 과정을 통해 사용자가 서로 다른 주소를 빠르게 검색하더라도 한 번에 하나의 지갑 전환만 이루어지도록 보장합니다.

대시보드 (프론트엔드)

인덱서가 데이터를 수집하고 데이터베이스가 이를 저장하는 가운데, 마지막 구성 요소는 사용자 인터페이스입니다. React 프론트엔드는 1000ms마다 데이터베이스를 폴링하여 최신 거래 데이터를 가져오고, 모듈형 컴포넌트를 사용하여 이를 표시합니다. 또한 데이터베이스에 요청을 삽입하고 로컬 상태를 즉시 초기화함으로써 지갑 전환을 관리합니다.

개요

대시보드 아키텍처는 중앙 집중식 상태 관리와 모듈식 컴포넌트 조합을 핵심으로 합니다:

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

그 대시보드 이 컴포넌트는 React 스테이트에 모든 거래 데이터를 저장하고, 이를 프로퍼티(props)로 자식 컴포넌트에 전달합니다. 이 패턴을 사용하면 스테이트 관리를 간단하게 유지할 수 있을 뿐만 아니라, 디버깅 시 데이터 흐름을 쉽게 추적할 수 있습니다.

자동 새로고침 폴링

프론트엔드는 다음을 사용하여 1000ms마다 데이터베이스를 조회합니다. setInterval 적절한 정리 처리가 포함된 루프:

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

폴링은 사용자의 동작에 따라 자동으로 시작 및 중지되며, 리소스를 절약하기 위해 필요한 경우에만 실행됩니다. 인터페이스에는 데이터가 오래된 경우(3초 이상 경과한 경우)가 표시되어, 사용자가 데이터의 최신 상태를 파악할 수 있도록 합니다.

데이터베이스 쿼리 패턴

프론트엔드는 최적화된 쿼리 패턴을 사용하여 Supabase에서 거래 데이터를 실시간으로 가져옵니다:

// 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;

이 쿼리들은 지갑에 거래 데이터가 없는 경우를 원활하게 처리하여, 오류 대신 빈 결과를 표시합니다.

지갑 전환 관리

프론트엔드는 지갑 주소를 검증하며, 전환 시 즉시 상태를 초기화합니다:

// 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);
};

이 인터페이스는 지갑 주소를 검증하며, 전환 시 즉시 기존 데이터를 지우고, 새 데이터가 로드될 때까지 로딩 상태를 표시합니다.

데이터 표시

트레이딩 데이터는 React 상태에서 정보를 형식화하고 표시하는 전용 UI 컴포넌트로 전달됩니다:

// 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>
  );
};

그 대시보드 컴포넌트는 계산된 값과 서식 지정 함수를 자식 컴포넌트에 전달하며, 자식 컴포넌트는 거래 데이터의 시각적 표시와 스타일을 처리합니다.

결론

축하합니다! Quicknode의 Hyperliquid 정보 엔드포인트를 사용하여 실시간 Hyperliquid 포트폴리오 추적기를 성공적으로 구축하셨습니다. 무기한 거래 데이터를 가져오는 방법, 금융 데이터의 정밀성을 위해 PostgreSQL 데이터베이스를 구성하는 방법, 그리고 실시간으로 업데이트되는 반응형 대시보드를 구축하는 방법을 배웠습니다. 이러한 기반을 바탕으로 자동화된 리스크 모니터링 및 다중 지갑 비교와 같은 고급 거래 도구를 구현할 수 있는 가능성이 열립니다.

Recharts와 같은 차트 라이브러리를 통합하거나, 선호하는 알림 서비스를 활용해 거래 알림을 구축함으로써 이 프로젝트를 더욱 확장할 수 있습니다. Hyperliquid를 활용한 다양한 개발 방법을 알아보려면 당사의 다른 Hyperliquid 가이드도 확인해 보세요.

다음 단계

이제 제대로 작동하는 포트폴리오 추적기를 만들었으니, 이 애플리케이션을 확장하고 개선할 수 있는 몇 가지 방법을 소개합니다:

• 포지션이 위험한 마진 수준에 근접할 때 표시되는 청산 경고
• 차트를 활용한 시간 경과에 따른 포트폴리오 성과 추적
• 지갑 검색 간 로딩 시간이 단축됩니다

추가 자료

• Quicknode Hyperliquid 가이드
• HyperCore API 참조
• Hyperliquid 문서

진행에 막히거나 궁금한 점이 있다면 저희 디스코드에 문의해 주세요. 트위터 (@Quicknode)나 텔레그램 공지 채널을 팔로우하여 최신 소식을 받아보세요.

여러분의 피드백을 ❤️ 환영합니다!

의견이나 다루었으면 하는 새로운 주제가 있다면 알려주세요. 여러분의 의견을 기다리고 있습니다.