इनस्टॉल goldrush-kit
का उपयोग करते हुए npm
:
npm install @covalenthq/goldrush-kit
या yarn
:
yarn add @covalenthq/goldrush-kit
- इम्पोर्ट
GoldRushProvider
import { GoldRushProvider } from "@covalenthq/goldrush-kit";
- एप्लिकेशन के चारों ओर
GoldRushProvider
लपेटें. - प्रोवाइडर को कॉन्फ़िगर करें और इसे अपनी सहसंयोजक एपीआई की के साथ
एपिकी
प्रॉप्स में जोड़ें. आप कवलेंट वेबसाइट पर निःशुल्क कुंजी के लिए पंजीकरण कर सकते हैं.
<GoldRushProvider apikey="<YOUR_API_KEY>">{children}</GoldRushProvider>
- अपने एप्लिकेशन में स्टाइलशीट जोड़ें.
import "@covalenthq/goldrush-kit/styles.css";
5.वांछित कंपोनेंट्स जोड़ें. यदि आप next.js
संस्करण ^13.0
का उपयोग कर रहे हैं और app
राउटर का उपयोग कर रहे हैं, तो सुनिश्चित करें कि आपके पास नेक्स्ट के सर्वर कंपोनेंट्स
मॉड्यूल को अक्षम करने के लिए फ़ाइल के शीर्ष पर use client;
है। अधिक जानकारी के लिए गोल्डरश के कंपोनेंट्स दस्तावेज़ पर जाएँ।
import {
GoldRushProvider,
NFTWalletTokenListView,
TokenBalancesListView,
TokenTransfersListView,
AddressActivityListView,
} from "@covalenthq/goldrush-kit";
आरंभ करने के लिए यहां एक पूर्ण उदाहरण दिया गया है। यदि आप next.js
संस्करण ^13.0
का उपयोग कर रहे हैं और app
राउटर का उपयोग कर रहे हैं, तो सुनिश्चित करें कि आपके पास नेक्स्ट के सर्वर कंपोनेंट्स मॉड्यूल को अक्षम करने के लिए फ़ाइल के शीर्ष पर use client;
है
ध्यान दें: आपको अपनी एपीआई की को हमेशा निजी रखना चाहिए, इसे कभी भी सीधे अपने कोड में न डालें, विशेषकर फ्रंट एंड कोड में। इसके बजाय, कुंजी को अपने कोड में इंजेक्ट करने के लिए एक पर्यावरण चर का उपयोग करें।
// 'use client';
// If using Next.js, put your API key in a .env.local file
<GoldRushProvider apikey={process.env.NEXT_PUBLIC_API_KEY} mode="dark" color="emerald">
<TokenBalancesListView
chain_names={[
"eth-mainnet",
"matic-mainnet",
"bsc-mainnet",
"avalanche-mainnet",
"optimism-mainnet",
]}
hide_small_balances
address="0xfc43f5f9dd45258b3aff31bdbe6561d97e8b71de"
/>
<TokenTransfersListView
chain_name="eth-mainnet"
address="0xfc43f5f9dd45258b3aff31bdbe6561d97e8b71de"
contract_address="0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48"
/>
<AddressActivityListView address="0xfc43f5f9dd45258b3aff31bdbe6561d97e8b71de" />
<NFTWalletTokenListView
address="0xfc43f5f9dd45258b3aff31bdbe6561d97e8b71de"
chain_name="eth-mainnet"
/>
</GoldRushProvider>
टेम्पलेट | विवरण | लिंक |
---|---|---|
Wallet & Portfolio UI | अपने टोकन और एनएफटी को कई श्रृंखलाओं में प्रदर्शित करें. | https://github.com/covalenthq/goldrush-wallet-portfolio-ui |
NFT Collection Gallery & Analytics UI | जल्द आ रहा है! | |
Uniswap-like Analytics UI | जल्द आ रहा है! |
ऊपर उपयोग किए गए कंपोनेंट्स रिएक्ट, टेलविंड और टाइपस्क्रिप्ट निर्मित हैं। आप स्टोरीबुक का उपयोग करके कंपोनेंट्स का प्रीव्यू और कस्टमाइज़ कर सकते हैं
स्टोरीबुक डेवलपर्स को त्वरित रूप से प्रोटोटाइप बनाने और अलग-अलग कंपोनेंट्स को विकसित करने का एक तरीका प्रदान करता है, जबकि रिएक्ट एक वेब एप्लिकेशन को जल्दी से बनाने के लिए उपकरण प्रदान करता है। टेलविंड पूर्व-निर्मित यूआई कंपोनेंट्स और उपयोगिता वर्गों की एक लाइब्रेरी प्रदान करता है, जबकि टाइपस्क्रिप्ट विकास प्रक्रिया में प्रकार की सुरक्षा और स्वत: पूर्णता जोड़ता है। साथ में, ये उपकरण डेवलपर्स को वे उपकरण प्रदान करते हैं जिनकी उन्हें जटिल, आधुनिक वेब एप्लिकेशन जल्दी और आसानी से बनाने के लिए आवश्यकता होती है.
अपने प्रोजेक्ट की रूट डायरेक्टरी में एक .env
फ़ाइल बनाएं और जोड़ें और फ़ाइल में निम्नलिखित जोड़ें।
STORYBOOK_COVALENT_API_KEY = "<आपकी_एपीआई_कुंजी>"
npm run dev
npm run build:library
npm run build:storybook
योगदान, मुद्दे और सुविधा अनुरोधों का स्वागत है! बेझिझक जांच करें issues पेज.
यदि इस परियोजना से आपको मदद मिली तो ⭐️ दें!
यह प्रोजेक्ट Apache 2.0 लाइसेंस प्राप्त है।