फ्लैशब्लॉक्स Base अनुप्रयोग

एक डैप जो प्रदर्शित करता है Base फ्लैशब्लॉक्स की क्षमताओं का तुलनात्मक विश्लेषण, जिसमें लेनदेन की पुष्टि की गई है: फ्लैशब्लॉक्स बनाम पारंपरिक ब्लॉक्स।

Author

सर्गेन उयसल

ऐप डिप्लॉय करें

रेपो देखें

फ्रंटएंड फ्रेमवर्क/लाइब्रेरी:

प्रतिक्रिया

भाषा:

टाइपप्रति

बिल्ड टूल/डेवलपमेंट सर्वर:

Next.js

अवलोकन

यह एप्लिकेशन एक व्यावहारिक प्रदर्शन प्रदान करता है Base फ्लैशब्लॉक्स एक ऐसी तकनीक है जिसे मानक ब्लॉकों की तुलना में 10 गुना तेजी से लेनदेन की पूर्व-पुष्टि प्रदान करने के लिए डिज़ाइन किया गया है। इसमें एक लाइव, साइड-बाय-साइड तुलना डैशबोर्ड है जो आपको एक परीक्षण लेनदेन भेजने और फ्लैशब्लॉक्स बनाम पारंपरिक ब्लॉकों के पुष्टिकरण समय को देखने की सुविधा देता है। Base सेपोलिया testnet .

यह उदाहरण ऐप केवल शैक्षिक और प्रदर्शन उद्देश्यों के लिए प्रदान किया गया है।

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

अपने स्वयं के अनुप्रयोगों में फ्लैशब्लॉक्स को लागू करने के बारे में विस्तृत जानकारी के लिए, Quicknode पर हमारी व्यापक गाइड देखें।

फ्लैशब्लॉक्स के बारे में अधिक जानने के लिए, हमारा "फ्लैशब्लॉक्स ऑन Base क्या हैं " वीडियो देखें।

विशेषताएँ

⚡ आमने-सामने तुलना : फ्लैशब्लॉक्स और पारंपरिक लेनदेन पुष्टिकरणों की लाइव दृश्य तुलना
🔄 लेनदेन ट्रैकिंग: परीक्षण लेनदेन भेजें और पुष्टिकरण गति की निगरानी करें गेटब्लॉक मतदान
🎯 दोहरी क्लाइंट वास्तुकला: दोनों के साथ एक साथ निगरानी baseSepoliaPreconf और बेससेपोलिया चेन

टेक्नोलॉजी स्टैक

फ्रंटएंड फ्रेमवर्क

Next.js : बेहतर प्रदर्शन के लिए ऐप राउटर के साथ रिएक्ट फ्रेमवर्क
टाइपस्क्रिप्ट : टाइप-सेफ डेवलपमेंट का अनुभव
Tailwind CSS : तीव्र यूआई विकास के लिए उपयोगिता-केंद्रित CSS फ्रेमवर्क
shadcn/ui : आधुनिक, सुलभ रिएक्ट कंपोनेंट लाइब्रेरी

वेब3 एकीकरण

Viem : TypeScript-first Ethereum फ्लैशब्लॉक्स समर्थन के साथ इंटरफ़ेस करें
Wagmi : React हुक्स के लिए Ethereum अंतःक्रियाएँ
RainbowKit : वॉलेट कनेक्शन का शानदार अनुभव
Base सेपोलिया : Testnet फ्लैशब्लॉक्स प्रदर्शन के लिए

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

Node.js 18+ और pnpm (या npm/yarn)
एक Quicknode खाता जिसमें Base सेपोलिया endpoint
Reown (पूर्व में WalletConnect) से प्रोजेक्ट आईडी
ब्राउज़र वॉलेट के साथ Base सेपोलिया सपोर्ट (मेटामास्क, रैबी, आदि)
थोड़ी मात्रा में Base परीक्षण के लिए सेपोलिया ईटीएच ( Quicknode के फाउसेट से उपलब्ध)

की स्थापना Quicknode

Endpoint बनाएं : अपने Quicknode खाते में लॉग इन करें और एक नया एंडपॉइंट बनाएं। endpoint के लिए Base सेपोलिया testnet .
Endpoint यूआरएल प्राप्त करें : बनाने के बाद endpoint जाओ endpoint डैशबोर्ड पर जाएं और HTTPS फ़ाइल को कॉपी करें। endpoint यूआरएल. Quicknode एंडपॉइंट्स बिना किसी अतिरिक्त कॉन्फ़िगरेशन की आवश्यकता के फ्लैशब्लॉक्स को सीधे सपोर्ट करते हैं।

Reown (पूर्व में WalletConnect) की स्थापना

प्रोजेक्ट बनाएं : रीओन क्लाउड पर जाएं और वॉलेट कनेक्टिविटी के लिए एक नया प्रोजेक्ट बनाएं।
प्रोजेक्ट आईडी प्राप्त करें : एप्लिकेशन कॉन्फ़िगरेशन में उपयोग के लिए प्रोजेक्ट डैशबोर्ड से अपनी प्रोजेक्ट आईडी कॉपी करें।

त्वरित शुरुआत

1. रिपॉजिटरी को क्लोन करें

git clone https://github.com/quiknode-labs/qn-guide-examples.git
 cd qn-guide-examples/sample-dapps/flashblocks-base

2. आवश्यक घटक स्थापित करें

पीएनपीएम स्थापित करना
 # या npm का उपयोग करके
 NPM स्थापित करना
 # या धागे का उपयोग करके
 धागा स्थापित करना

3. पर्यावरण विन्यास

cp .env.example .env.local

संपादन करना .env.local:

# Quicknode Endpoint (अनिवार्य)
 NEXT_PUBLIC_QUICKNODE_ENDPOINT = your_quicknode_base_sepolia_endpoint_here

 # वॉलेटकनेक्ट प्रोजेक्ट आईडी (अनिवार्य)
 NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID = your_walletconnect_project_id_here

4. डेवलपमेंट सर्वर चलाएँ

पीएनपीएम देव
 # या npm का उपयोग करके
 npm run dev
 # या धागे का उपयोग करके
 यार्न देव

मिलने जाना http://localhost:3000 फ्लैशब्लॉक्स को क्रियान्वित होते हुए अनुभव करने के लिए!

यह काम किस प्रकार करता है

लेनदेन पुष्टिकरण रणनीति

यह ऐप Viem का उपयोग करता है। गेटब्लॉक गति में अंतर प्रदर्शित करने के लिए विभिन्न क्लाइंट कॉन्फ़िगरेशन के साथ विधि:

फ्लैशब्लॉक्स क्लाइंटउपयोग baseSepoliaPreconf श्रृंखला जो स्वचालित रूप से लागू होती है लंबित टैग
पारंपरिक ग्राहक: मानक का उपयोग करता है बेससेपोलिया श्रृंखला के साथ नवीनतम टैग

// Flashblocks client
export const flashblocksClient = createPublicClient({
  chain: baseSepoliaPreconf, // Auto-uses "pending" for Flashblocks
  transport: http(QUICKNODE_ENDPOINT),
})

// Traditional client
export const traditionalClient = createPublicClient({
  chain: baseSepolia, // Standard blocks with "latest"
  transport: http(QUICKNODE_ENDPOINT),
})

टिप्पणीयह पोलिंग कार्यान्वयन प्रदर्शन उद्देश्यों के लिए अनुकूलित है। उत्पादन अनुप्रयोगों को इसका उपयोग करना चाहिए। लेनदेन रसीद की प्रतीक्षा करें बेहतर प्रदर्शन के लिए।

फ्लैशब्लॉक्स का लाभ

10 गुना तेज़ पुष्टिकरण : लेन-देन की पुष्टि 2-4 सेकंड के बजाय 200-600 मिलीसेकंड में देखें
प्रगतिशील अपडेट : देखें कि कैसे 10 फ्लैशब्लॉक मिलकर एक पूरा ब्लॉक बनाते हैं।
समान सुरक्षा : क्रिप्टोग्राफिक गारंटी बरकरार रहती है और त्वरित प्रतिक्रिया मिलती है।
बेहतर यूएक्स : Near - त्वरित प्रतिक्रिया वेब2 उपयोगकर्ताओं की अपेक्षाओं के अनुरूप है