मुख्य सामग्री पर जाएं
नमूना ऐप्स पर वापस जाएँ

हाइपरकोर ऑर्डर मॉनिटर

ट्रेडिंग ऑर्डर को ट्रैक करें Hyperliquid कोर (L1) वास्तविक समय में Quicknode Streams और डायनामिक फ़िल्टरिंग के लिए केवी स्टोर।

परिनियोजन आइकन
ऐप डिप्लॉय करें
GitHub आइकन
रेपो देखें
फ्रंटएंड फ्रेमवर्क/लाइब्रेरी:
प्रतिक्रिया
भाषा:
टाइपप्रति
बिल्ड टूल/डेवलपमेंट सर्वर:
Next.js
नमूना ऐप पूर्वावलोकन

अवलोकन

यह सैंपल ऐप ट्रेडिंग ऑर्डर की रीयल-टाइम ट्रैकिंग को सक्षम बनाता है। Hyperliquid कोर (L1)। यह इसका लाभ उठाता है Quicknode Streams + की-वैल्यू स्टोर (केवी स्टोर) की मदद से स्ट्रीम को रीस्टार्ट किए बिना ही स्मार्ट और डायनामिक फ़िल्टरिंग की जा सकती है। व्हेल ट्रेडर्स पर नज़र रखें, ऑर्डर स्टेटस ट्रैक करें और आधुनिक यूआई के ज़रिए लाइव अपडेट प्राप्त करें।

वास्तुकला​

Hyperliquid कोर (L1)
 -> Quicknode Streams + केवी
 -> POST /api/webhook/ streams (हस्ताक्षर सत्यापित)
 -> OrderLog upsert + SSE emit
 -> लाइव यूआई ऑर्डर फ़ीड

विशेषताएँ​


  • केवी स्टोर सूचियों के माध्यम से वास्तविक समय में पते को फ़िल्टर करना
  • गतिशील स्थिति फ़िल्टरिंग (खुला, भरा हुआ, रद्द, अस्वीकृत, ट्रिगर)
  • स्ट्रीम स्तर पर ब्लॉकचेन-आधारित फ़िल्टरिंग
  • लाइव UI अपडेट के लिए सर्वर-सेंट इवेंट्स (SSE)
  • Quicknode Streams सेटअप स्क्रिप्ट (बनाना + सक्रिय करना)
  • व्यापारियों के पते थोक में जोड़ें
  • वेबहुक हस्ताक्षर सत्यापन और टाइमस्टैम्प जांच
  • ईएनएस संकल्प के लिए Ethereum पते (वैकल्पिक)
  • प्रिज्मा + SQLite स्थानीय संग्रहण

आवश्यक शर्तें​


  • Node.js 20+ और एक पैकेज मैनेजर (pnpm, yarn, npm)।
  • Quicknode खाता साथ Streams और केवी स्टोर एक्सेस: एक खाता बनाएं, और अपना प्राप्त करें Admin API चाबी के लिए QN_API_KEY.
  • सार्वजनिक वेबहुक यूआरएल: टनल का उपयोग करें जैसे एनग्रोक या ऐप को इस तरह से तैनात करें APP_URL पहुँच योग्य है Quicknode .
  • वैकल्पिक: Ethereum mainnet आरपीसी endpoint ईएनएस नाम समाधान के लिए (QN_EVM_ENDPOINT).

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

फ़िल्टर/
 hl-orders-filter.js # Quicknode Streams फ़िल्टर (हाइपरकोर)
 स्क्रिप्ट/
 setup- streams # KV सूचियाँ और स्ट्रीम (विरामित) बनाता है
 activate- streams # आईडी द्वारा स्ट्रीम को सक्रिय करता है
 स्रोत/
 app/api/ # API रूट ( webhooks , उपयोगकर्ता, एसएसई)
 lib/ # Quicknode , वेबहुक, एसएसई सहायक
 प्रकार/ # टाइपस्क्रिप्ट परिभाषाएँ
 प्रिज्मा/
 schema.prisma # SQLite स्कीमा

पर्यावरण चर​

प्रतिलिपि .env.example को .पर्यावरण और भरें:

QN_API_KEY="" # Streams + KV अनुमतियों के साथ Quicknode API कुंजी
 QN_STREAM_SECURITY_TOKEN="" # स्ट्रीम सुरक्षा टोकन (सेटअप स्क्रिप्ट से)
 APP_URL="http://localhost:3000" # सार्वजनिक ऐप URL (स्थानीय webhooks के लिए ngrok)
 DATABASE_URL="file:./dev.db" # SQLite DB
 QN_EVM_ENDPOINT="" # वैकल्पिक: ENS समाधान के लिए Ethereum RPC
 ADMIN_API_KEY="" # स्थानीय विकास के लिए वैकल्पिक, उत्पादन के लिए आवश्यक

टिप्पणियाँ:

  • QN_स्ट्रीम_सुरक्षा_टोकन द्वारा लौटाया जाता है स्थापित करना: streams.
  • APP_URL पहुँच योग्य होना चाहिए Quicknode (एनजीरोक या तैनात यूआरएल का उपयोग करें)।
  • सुनिश्चित करें कि आपकी एपीआई कुंजी में दोनों शामिल हों। Streams और केवी स्टोर की अनुमतियां सक्षम हैं।

शुरू करना​

1. आवश्यक शर्तें स्थापित करें​

पीएनपीएम स्थापित करना
 # npm इंस्टॉल करें
 # यार्न इंस्टॉल

2. अपनी env फ़ाइल बनाएँ​

cp .env.example .env

3. आवश्यक चर जोड़ें​

भरें .पर्यावरण (देखना आवश्यक शर्तेंस्थानीय के लिए webhooks अपने ऐप को ngrok के साथ एक्सपोज़ करें और HTTPS URL को कॉपी करें। APP_URL:

ngrok http 3000

4. डेटाबेस को प्रारंभ करें​

pnpm prisma migrate dev --name hypercore-order-monitor
 pnpm db:seed

सीड स्क्रिप्ट स्टेटस फ़िल्टर बनाती है (सक्षम करना) खुला, भरा हुआ, उत्प्रेरित (डिफ़ॉल्ट रूप से) और एक नमूना व्यापारी का पता जोड़ता है।

5. बनाएं Quicknode Streams + केवी सूचियाँ​

pnpm रन सेटअप: streams

मुद्रित सुरक्षा टोकन की प्रतिलिपि इसमें डालें .पर्यावरण (QN_स्ट्रीम_सुरक्षा_टोकन).

6. ऐप शुरू करें​

पीएनपीएम देव

7. स्ट्रीम को सक्रिय करें​

pnpm run activate: streams

खुला http://localhost:3000ट्रेडर के पते जोड़ें, और आपको लाइव ऑर्डर इवेंट दिखाई देने चाहिए। streams बाँटना webhooks .

डेटाबेस​

डिफ़ॉल्ट रूप से SQLite का उपयोग किया जाता है। Prisma स्कीमा इसमें है। प्रिज्मा/स्कीमा.प्रिज्मा.

सामान्य कमांड:

pnpm prisma migrate dev --name <name>
pnpm db:seed
pnpm prisma studio

वेबहुक सुरक्षा और पेलोड​


  • Endpoint : POST /api/webhook/ streams
  • आवश्यक हेडर: x-qn-nonce, x-qn-टाइमस्टैम्प, x-qn-हस्ताक्षर
  • पेलोड को जीज़िप कंप्रेस किया जा सकता है; हैंडलर इसे स्वतः पहचान लेता है। सामग्री-एन्कोडिंग: जीज़िप
  • हस्ताक्षर सत्यापन का उपयोग QN_स्ट्रीम_सुरक्षा_टोकन

एपीआई एंडपॉइंट्स​


सार्वजनिक एंडपॉइंट:

  • GET /api/health - स्वास्थ्य जांच
  • GET /api/users - निगरानी में रखे गए व्यापारियों की सूची
  • GET /api/statuses - सूची स्थिति फ़िल्टर
  • POST /api/webhook/ streams - Quicknode Streams WEbhook
  • GET /api/sse - एसएसई ऑर्डर इवेंट्स की स्ट्रीम

संरक्षित एंडपॉइंट (आवश्यकता है Authorization: Bearer <ADMIN_API_KEY>):

  • POST /api/users - एक व्यापारी जोड़ें
  • POST /api/users/bulk - बड़ी संख्या में व्यापारियों को जोड़ें (50 पतों की सीमा)
  • PATCH /api/users?id=... - व्यापारी को अपडेट करें
  • DELETE /api/users?id=... व्यापारी को हटाएँ
  • GET /api/orders फ़िल्टर के साथ ऑर्डर की सूची
  • पैच /एपीआई/स्थितियाँ - सक्षम स्थिति अपडेट करें
  • POST /api/statuses/reset - डिफ़ॉल्ट पर पुनः सेट करें

सिंक्रोनाइज़ेशन स्क्रिप्ट​


  • pnpm रन सिंक:स्थिति - केवी स्थिति सूची का डेटाबेस के साथ मिलान करता है
  • pnpm रन सिंक: उपयोगकर्ता - केवी उपयोगकर्ता सूची का डेटाबेस के साथ मिलान करता है
  • pnpm run reset:kv - हाइपरकोर केवी सूचियों को हटाता है

पूर्व दर्शन

पूर्व दर्शन

योगदान और प्रतिक्रिया
हमें आपकी प्रतिक्रिया सुनकर खुशी होगी और इस सैंपल ऐप में किसी भी तरह के योगदान का हम स्वागत करते हैं!
समस्याओं की रिपोर्ट करने या प्रतिक्रिया साझा करने के लिए, GitHub में एक समस्या खोलें। प्रश्न-मार्गदर्शिका-उदाहरण भंडार।
योगदान देने के लिए, इन चरणों का पालन करें:
  1. रिपॉजिटरी को फोर्क करें
  2. एक फीचर ब्रांच बनाएं:
    git checkout -b feature/amazing-feature
  3. अपने बदलावों को सेव करें:
    git commit -m "अद्भुत सुविधा जोड़ें"
  4. अपनी शाखा को आगे बढ़ाएं:
    git push origin feature/amazing-feature
  5. एक पुल रिक्वेस्ट खोलें।
और भी सैंपल ऐप्स देखें
Hyperliquid पोर्टफोलियो ट्रैकर
एक रीयल-टाइम पोर्टफोलियो ट्रैकर बनाएं जो निगरानी करता है Hyperliquid स्थायी पदों, लाभ-हानि, मार्जिन उपयोग और वॉल्ट होल्डिंग्स का उपयोग करके Quicknode 'एस Hyperliquid जानकारी endpoint .
Hyperliquid पोर्टफोलियो ट्रैकर
Hyperliquid ट्रेडिंग डैशबोर्ड
व्हेल ट्रेड, लिक्विडेशन और ट्रेंडिंग टोकन की रीयल-टाइम जानकारी के लिए एक डैशबोर्ड। Hyperliquid का उपयोग करते हुए Quicknode हाइपरकोर gRPC .
Hyperliquid टीपी/एसएल हीटमैप
एक रीयल-टाइम ब्राउज़र डैशबोर्ड जो आराम करने की स्थिति को दर्शाता है Hyperliquid टीपी/एसएल ट्रिगर ऑर्डर मूल्य स्तर के अनुसार कार्य करते हैं। clusters लाइव बिड/आस्क कीमतों के आधार पर, Quicknode हाइपरकोर gRPC streams .