पढ़ने में 17 मिनट लगेंगे

अवलोकन

हाइपरलिक्विड पर निरंतर ट्रेडिंग करने वाले ट्रेडर के लिए, अपने पोर्टफोलियो ट्रैकर का व्यापक उपयोग करके वास्तविक समय में अपनी पोजीशन, लाभ-हानि (PnL) और मार्जिन उपयोग की निगरानी करना आवश्यक है। यह गाइड आपको क्विकनोड के हाइपरलिक्विड इन्फो एंडपॉइंट का उपयोग करके किसी भी हाइपरलिक्विड वॉलेट की निगरानी करने वाला एक शक्तिशाली पोर्टफोलियो ट्रैकर बनाने का तरीका बताती है। एक उपयोगी ट्रेडिंग टूल बनाने के अलावा, यह ट्यूटोरियल यह भी स्पष्ट करेगा कि एप्लिकेशन बनाने के लिए हाइपरकोर डेटा को कैसे प्राप्त किया जाता है, संरचित किया जाता है और उपयोग किया जाता है। एप्लिकेशन निम्नलिखित कार्य प्रदर्शित करता है:

• लाइव पोजीशन ट्रैकिंग - लाभ-हानि (PnL) के साथ स्थायी पोजीशन पर वास्तविक समय में अपडेट
• पोर्टफोलियो विश्लेषण - खाता मूल्य, मार्जिन उपयोग और जोखिम मेट्रिक्स
• वॉल्ट प्रबंधन - वॉल्ट के मूल्य और लॉक-अप शेड्यूल पर नज़र रखें
• स्पॉट होल्डिंग्स - टोकन बैलेंस और USD मूल्यों की निगरानी करें
• किसी भी वॉलेट को खोजें - विभिन्न ट्रेडिंग खातों के बीच स्विच करें

आप क्या करेंगे

चार चरणों में एक संपूर्ण पोर्टफोलियो ट्रैकर बनाएं:

1. क्विकनोड एंडपॉइंट और सुपाबेस अकाउंट सेटअप करना
2. अपने डेटाबेस स्कीमा को सेट अप करना
3. एक इंडेक्सर बनाना जो हर 500 मिलीसेकंड में हाइपरकोर डेटा प्राप्त करता है
4. आधुनिक यूआई लाइब्रेरी का उपयोग करके एक डैशबोर्ड बनाना जो वास्तविक समय के ट्रेडिंग डेटा को प्रदर्शित करता है।

आपको क्या चाहिए होगा

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

Quicknode एंडपॉइंट क्यों चुनें?

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

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

वास्तुकला का अवलोकन

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

तकनीकी स्टैक घटक

• फ्रंटएंड : रिएक्ट + टाइपस्क्रिप्ट + टेलविंड सीएसएस + शेडकन/यूआई और रेडिक्स यूआई

  • यह ट्रेडिंग डेटा को एक रिस्पॉन्सिव इंटरफेस में प्रदर्शित करता है।
  • यह डेटाबेस को हर 1000 मिलीसेकंड में अपडेट करने के लिए पोल करता है।
  • डेटाबेस अनुरोधों के माध्यम से वॉलेट स्विचिंग को संभालता है

• बैकएंड : 500ms पोलिंग अंतराल के साथ Node.js इंडेक्सर

  • यह 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 के उपयोग की निगरानी करें।

• डेटाबेस : सुपाबेस पोस्टग्रेएसक्यूएल

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

• डेटा स्रोत: हाइपरलिक्विड जानकारी क्विकनोड के माध्यम से एंडपॉइंट

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

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

आवेदन की प्रक्रिया

पहला वॉलेट सर्च:

1. उपयोगकर्ता वॉलेट में जानकारी दर्ज करता है → फ्रंटएंड अनुरोध को मान्य करता है और डेटाबेस में संग्रहीत करता है
2. इंडेक्सर अनुरोध का पता लगाता है (हर 500 मिलीसेकंड में पोल ​​करता है) → नए वॉलेट पर स्विच करता है
3. डेटा संग्रह शुरू होता है → दिए गए 5 एंडपॉइंट्स से स्वतंत्र रूप से डेटा प्राप्त करता है और उसे डेटाबेस में संग्रहीत करता है।
4. फ्रंटएंड डेटाबेस को हर 1000 मिलीसेकंड में पोल ​​करता है → इंडेक्सर से प्राप्त नए डेटा के साथ UI अपडेट होता है

दूसरा वॉलेट सर्च और उससे आगे:

1. उपयोगकर्ता नया वॉलेट दर्ज करता है → फ्रंटएंड पिछले वॉलेट के सभी डेटा को साफ़ करने के लिए कॉल करता है और इंडेक्सर को नए वॉलेट पर स्विच करने का आदेश देता है।
2. इंडेक्सर को नया अनुरोध प्राप्त होता है → यह तुरंत नए वॉलेट पर स्विच करता है और नए वॉलेट पते का उपयोग करके डेटा प्राप्त करना शुरू कर देता है।
3. डेटा रीयल-टाइम में अपडेट होता है → डैशबोर्ड नए वॉलेट की स्थिति और मेट्रिक्स प्राप्त करना शुरू कर देता है

परियोजना संरचना

यह प्रोजेक्ट एक साफ-सुथरे, मॉड्यूलर आर्किटेक्चर का अनुसरण करता है जो डेटा संग्रह, यूआई घटकों और व्यावसायिक तर्क के बीच विभिन्न कार्यों को अलग करता है। यह संरचना कोडबेस को रखरखाव योग्य बनाती है और सुविधाओं के आसान विस्तार की अनुमति देती है।

निर्देशिका का विवरण

├── स्रोत/
 │ ├── इंडेक्सर/
 │ │ ├── indexer.ts # मुख्य इंडेक्सर ऑर्केस्ट्रेशन और वॉलेट प्रबंधन
 │ │ └── apicalls.ts # हाइपरलिक्विड जानकारी एंडपॉइंट क्वेरीज़
 │ ├── घटक/
 │ │ ├── ui/ # shadcn/ui घटक (बटन, इनपुट, कार्ड, आदि)
 │ │ └── डैशबोर्ड/ # डैशबोर्ड घटक (वॉलेटहेडर, पोर्टफोलियोमेट्रिक्स, आदि)
 │ ├── साझा/
 │ │ ├── types.ts # टाइपस्क्रिप्ट इंटरफेस और प्रकार
 │ │ ├── utils.ts # फ़ॉर्मेटिंग, गणनाएँ और उपयोगिता फ़ंक्शन
 │ │ ├── constants.ts # डैशबोर्ड के लिए UI स्थिरांक
 │ │ └── supabase.ts # फ्रंटएंड एक्सेस के लिए सुपाबेस क्लाइंट इंस्टेंस
 │ ├── Dashboard.tsx # मुख्य डैशबोर्ड लॉजिक
 │ └── main.tsx
 ├── सुपाबेस/
 │ └── 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: पर्यावरण फ़ाइल सेटअप करें

अपना बनाएँ .पर्यावरण इस कमांड को चलाकर फ़ाइल को इस प्रकार भरें:

cp .env.example .env

चरण 3: सुपाबेस डेटाबेस सेटअप

सुपाबेस वेबसाइट पर एक नया सुपाबेस खाता बनाएं या अपने मौजूदा सुपाबेस खाते में लॉग इन करें।

एक नया प्रोजेक्ट बनाएं, फिर कनेक्ट बटन पर क्लिक करें।

ऐप फ्रेमवर्क सेक्शन में, रिएक्ट चुनें और बदलें का उपयोग करते हुए फ़ील्ड को Vite में कॉपी करें। VITE_SUPABASE_URL और VITE_SUPABASE_ANON_KEY मानों को जोड़ें और उन्हें अपने में जोड़ें .पर्यावरण फ़ाइल।

अंत में, ऊपरी दाएं कोने में स्थित SQL संपादक पर जाएं और उसमें निम्नलिखित सामग्री पेस्ट करें। स्कीमा.sql फ़ाइल खोलें, फिर रन पर क्लिक करें। इससे फ्रंटएंड के लिए डेटा को स्टोर और फ़ेच करने हेतु आवश्यक सभी टेबल और फ़ंक्शन बन जाएँगे।

चरण 4: क्विकनोड सेटअप

अपना निःशुल्क परीक्षण बनाएं क्विकनोड खाताफिर अपना पहला हाइपरलिक्विड आरपीसी एंडपॉइंट बनाएं और उसे अपने में पेस्ट करें। .पर्यावरण फ़ाइल।

जानकारी

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

चरण 5: आवेदन शुरू करें

टेबल बन जाने और आपका वातावरण कॉन्फ़िगर हो जाने के बाद, आप रूट डायरेक्टरी में निम्नलिखित कमांड चलाकर प्रोजेक्ट शुरू कर सकते हैं:

npm install && npm run dev:both

इससे फ्रंटएंड एप्लिकेशन और इंडेक्सर दोनों चलेंगे।

जब इंडेक्सर चलना शुरू हो जाएगा, तो यह आपके द्वारा एक वैध वॉलेट पते की खोज करने की प्रतीक्षा करेगा:

अपने फ्रंटएंड पेज को लोकलहोस्ट यूआरएल पर खोलें और उदाहरण वॉलेट पता प्राप्त करने के लिए डेमो वॉलेट बटन पर क्लिक करें:

वॉलेट की खोज करने के बाद, इंडेक्सर हर 500 मिलीसेकंड में उस पते के लिए डेटा प्राप्त करना शुरू कर देगा:

डैशबोर्ड वॉलेट के लिए वास्तविक समय के आंकड़े प्रदर्शित करेगा:

अब आप खाते के मूल्य, सक्रिय पदों और अन्य ट्रेडिंग डेटा को वास्तविक समय में देख सकते हैं।

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

इंडेक्सर के साथ काम करते समय, सेटअप या रनटाइम के दौरान आपको निम्नलिखित समस्याओं का सामना करना पड़ सकता है:

• इंडेक्सर ने प्रतिक्रिया देना बंद कर दिया
• वॉलेट खोज के बाद कोई डेटा दिखाई नहीं देता
• इंडेक्सर गलती से बंद हो गया

समाधान:

निम्न कमांड चलाकर इंडेक्सर को पुनः आरंभ करें:

npm run dev:indexer

फिर एक वैध वॉलेट पता दर्ज करके दोबारा खोजने का प्रयास करें।

कोडबेस का गहन विश्लेषण

अब जबकि आपने पोर्टफोलियो ट्रैकर को सफलतापूर्वक चालू कर लिया है, आइए जानें कि यह आंतरिक रूप से कैसे काम करता है। यह अनुभाग उन तीन मुख्य घटकों पर विस्तार से चर्चा करेगा जो वास्तविक समय में पोर्टफोलियो ट्रैकिंग को संभव बनाते हैं:

इंडेक्सर - हाइपरलिक्विड को संभालता है जानकारी अंतिम बिंदु के माध्यम से apicalls.tsयह वॉलेट स्विचिंग अनुरोधों का पता लगाता है, और हर 500 मिलीसेकंड में 5 अलग-अलग हाइपरलिक्विड एंडपॉइंट से डेटा संग्रह को व्यवस्थित करता है।

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

डैशबोर्ड (फ्रंटएंड) - इसमें रिएक्ट स्टेट मैनेजमेंट, रीयल-टाइम डेटाबेस पोलिंग, वॉलेट एड्रेस वैलिडेशन और लाइव ट्रेडिंग डेटा प्रदर्शित करने वाला यूजर इंटरफेस शामिल है।

इंडेक्सर

इंडेक्सर एक अलग Node.js प्रोसेस के रूप में चलता है जो हर 500ms में Quicknode एंडपॉइंट से डेटा प्राप्त करता है। यह वर्तमान वॉलेट पते के लिए ट्रेडिंग डेटा प्राप्त करता है और उसे डेटाबेस में संग्रहीत करता है। इंडेक्सर फ्रंटएंड से वॉलेट स्विच अनुरोधों की प्रतीक्षा करता है और लॉक फ़ाइल का उपयोग करके प्रोसेस आइसोलेशन को नियंत्रित करता है।

वॉलेट परिवर्तन का पता लगाना

इंडेक्सर पोल करता है वॉलेट_स्विच_अनुरोध फ्रंटएंड वॉलेट स्विच का पता लगाने के लिए हर 500 मिलीसेकंड में टेबल को स्कैन करें, स्विच प्रक्रिया के दौरान रेस कंडीशन को रोकने के लिए स्टेटस फ़ील्ड का उपयोग करें।

हाइपरलिक्विड जानकारी एंडपॉइंट एकीकरण

इंडेक्सर इसका उपयोग करता है हाइपरलिक्विडएपीआई कक्षा में 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();
}

The getUserVaultEquities() यह विधि उसी संरचना का अनुसरण करती है लेकिन इसके साथ प्रकार: '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;
}

इंडेक्सर एक लॉक फाइल का उपयोग करके एक साथ कई इंस्टेंस को चलने से रोकता है, जिससे डेटा की स्थिरता सुनिश्चित होती है।

स्कीमा और डेटाबेस (सुपाबेस)

अब जब हमने देख लिया है कि इंडेक्सर डेटा कैसे एकत्र करता है, तो आइए देखें कि वह डेटा कैसे संग्रहीत और संरचित होता है। 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);

The दशमलव(20, 5) यह टाइप कुल 20 अंक प्रदान करता है जिसमें 5 दशमलव स्थान होते हैं।

वॉलेट स्विच अनुरोध तालिका - फ्रंटएंड और इंडेक्सर के बीच संचार का समन्वय करती है:

-- schema.sql से - फ्रंटएंड-इंडेक्सर समन्वय
 बनाएं टेबल wallet_switch_requests (
 आईडी यूयूआईडी डिफ़ॉल्ट gen_random_uuid ( ) प्राथमिक चाबी ,
 अनुरोधित_वॉलेट_पता टेक्स्ट नहीं व्यर्थ ,           -- एथेरियम पता (0x प्रारूप)
  स्थिति मूलपाठ नहीं व्यर्थ गलती करना 'लंबित' ,           स्टेट मशीन: लंबित → प्रोसेसिंग → पूर्ण
 created_at TIMESTAMP साथ समय क्षेत्र डिफ़ॉल्ट अब ( )
 ) ;

 -- इंडेक्सर द्वारा कुशल स्थिति-आधारित क्वेरी के लिए इंडेक्स
 बनाएं INDEX idx_wallet_switch_requests_status ON wallet_switch_requests ( status ) ;

यह टेबल रिएक्ट फ्रंटएंड और नोड.जेएस इंडेक्सर के बीच एक मैसेज क्यू के रूप में काम करती है। जब कोई उपयोगकर्ता नया वॉलेट पता दर्ज करता है, तो फ्रंटएंड एक नया वॉलेट पता सम्मिलित करता है। 'लंबित' अनुरोध। इंडेक्सर इसके लिए पोल करता है। 'लंबित' हर 500 मिलीसेकंड में अनुरोध प्राप्त करता है, स्थिति को अपडेट करता है 'प्रसंस्करण' रेस कंडीशन से बचने के लिए, यह वॉलेट स्विच करता है। स्टेटस प्रोग्रेशन यह सुनिश्चित करता है कि एक समय में केवल एक ही वॉलेट स्विच हो, भले ही उपयोगकर्ता तेजी से अलग-अलग पते खोज रहे हों।

डैशबोर्ड (फ्रंटएंड)

इंडेक्सर डेटा एकत्र करता है और डेटाबेस उसे स्टोर करता है, इसके बाद अंतिम चरण यूजर इंटरफेस का होता है। रिएक्ट फ्रंटएंड हर 1000 मिलीसेकंड में डेटाबेस से अपडेटेड ट्रेडिंग डेटा प्राप्त करता है और मॉड्यूलर कंपोनेंट्स का उपयोग करके उसे प्रदर्शित करता है। यह डेटाबेस में रिक्वेस्ट भेजकर और लोकल स्टेट को तुरंत क्लियर करके वॉलेट स्विचिंग को मैनेज करता है।

अवलोकन

डैशबोर्ड आर्किटेक्चर मॉड्यूलर घटक संरचना के साथ केंद्रीकृत स्थिति प्रबंधन पर केंद्रित है:

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

The डैशबोर्ड यह कंपोनेंट रिएक्ट स्टेट में सभी ट्रेडिंग डेटा रखता है और इसे प्रॉप्स के रूप में चाइल्ड कंपोनेंट्स को पास करता है। यह पैटर्न स्टेट मैनेजमेंट को सरल रखता है और डीबगिंग के दौरान डेटा फ्लो को ट्रैक करना आसान बनाता है।

ऑटो-रिफ्रेश पोलिंग

फ्रंटएंड हर 1000 मिलीसेकंड में डेटाबेस की जाँच करता है। सेट अंतराल उचित सफाई के साथ लूप:

// 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 सेकंड से अधिक पुराना) पर जानकारी देता है ताकि उपयोगकर्ताओं को डेटा की नवीनता के बारे में सूचित किया जा सके।

डेटाबेस क्वेरी पैटर्न

फ्रंटएंड, सुपाबेस से ट्रेडिंग डेटा को वास्तविक समय में प्राप्त करने के लिए अनुकूलित क्वेरी पैटर्न का उपयोग करता है:

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

यह इंटरफ़ेस वॉलेट पतों को मान्य करता है और स्विच करते समय पुराने डेटा को तुरंत साफ़ कर देता है, और नया डेटा लोड होने तक लोडिंग स्थिति दिखाता है।

डेटा प्रदर्शन

ट्रेडिंग डेटा रिएक्ट स्टेट से विशेष यूआई घटकों तक प्रवाहित होता है जो जानकारी को प्रारूपित और प्रस्तुत करते हैं:

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

The डैशबोर्ड यह कंपोनेंट गणना किए गए मानों और फ़ॉर्मेटिंग फ़ंक्शन को चाइल्ड कंपोनेंट को पास करता है, जो ट्रेडिंग डेटा की दृश्य प्रस्तुति और स्टाइलिंग को संभालते हैं।

निष्कर्ष

बधाई हो! आपने Quicknode के Hyperliquid info एंडपॉइंट का उपयोग करके सफलतापूर्वक एक रीयल-टाइम हाइपरलिक्विड पोर्टफोलियो ट्रैकर बनाया है। आपने निरंतर ट्रेडिंग डेटा प्राप्त करना, वित्तीय सटीकता के लिए PostgreSQL डेटाबेस को संरचित करना और रीयल-टाइम में अपडेट होने वाला एक रिस्पॉन्सिव डैशबोर्ड बनाना सीख लिया है। यह आधार स्वचालित जोखिम निगरानी और मल्टी-वॉलेट तुलना जैसे उन्नत ट्रेडिंग टूल के लिए संभावनाएं खोलता है।

आप Recharts जैसी चार्टिंग लाइब्रेरी को एकीकृत करके या अपनी पसंदीदा नोटिफिकेशन सेवा का उपयोग करके ट्रेडिंग अलर्ट बनाकर इस प्रोजेक्ट को और आगे बढ़ा सकते हैं। हाइपरलिक्विड पर और अधिक काम करने के तरीकों के बारे में जानने के लिए हमारे अन्य हाइपरलिक्विड गाइड देखें।

अगले कदम

अब जबकि आपके पास एक कार्यशील पोर्टफोलियो ट्रैकर है, तो एप्लिकेशन को विस्तारित और बेहतर बनाने के कई तरीके यहां दिए गए हैं:

• जब निवेश खतरनाक मार्जिन स्तर के करीब पहुंच जाए तो परिसमापन की चेतावनी जारी की जाती है
• चार्ट के साथ समय के साथ पोर्टफोलियो प्रदर्शन की ट्रैकिंग
• वॉलेट खोजों के बीच लोडिंग का समय कम

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

• क्विकनोड हाइपरलिक्विड गाइड
• हाइपरकोर एपीआई संदर्भ
• हाइपरलिक्विड प्रलेखन

अगर आपको कोई समस्या आ रही है या आपके कोई सवाल हैं, तो उन्हें हमारे Discord पर पूछें। नवीनतम जानकारी के लिए हमें Twitter (@Quicknode) पर फॉलो करें या हमारे Telegram अनाउंसमेंट चैनल पर हमसे जुड़ें।

हमें आपकी प्रतिक्रिया बहुत पसंद है!

अगर आपके पास कोई सुझाव या नए विषयों के लिए कोई अनुरोध हो तो हमें जरूर बताएं । हमें आपसे सुनना अच्छा लगेगा।