web3 components

مكتبة مكونات Web3 - تم إهمالها

تم استبداله بمجموعة Goldrush - https://github.com/covalenthq/goldrush-kit

يتم تشغيل مكتبة Web3 هذه بواسطة واجهة برمجة التطبيقات الموحدة التساهمية وتتألف من مكونات React مفيدة لجلب أي بيانات على السلسلة عبر أي من شبكات blockchain المدعومة من 30 شبكات المدعومة.

لا تتطلب هذه المكونات مزودًا نشطًا لـ Web3 نظرًا لأن البيانات مستضافة وفهرستها والاستعلام عنها من الشبكة التساهمية. ومع ذلك ، مطلوب مفتاح API لاستخدامها.

يرجى الرجوع إلى مرجع API Covalent للوثائق حول كيفية عمل واجهة برمجة التطبيقات.

بداية سريعة

1. تثبيت مع NPM: npm install @covalenthq/web3-components أو التثبيت مع الغزل: yarn install @covalenthq/web3-components

2. قم بإنشاء ملف .env وقم بتعيين المتغير: REACT_APP_COVALENT_API_KEY= مفتاح API الخاص بك التساهمية

ملاحظة: React V18.0 و Mreature مطلوب لاستخدام هذه المكونات

مكونات Web3

• <TokenBalances />
• <ERC20Transfers />
• <TokenHolders />
• <Transactions />
• <ChainSelector />

<TokenBalances />

يوفر مكون <TokenBalances /> جدول أرصدة كاملة ومتراكبة مع جميع الرموز المميزة و NFTS address محفظة و chainId .

الدعائم المطلوبة:

• address
• chainId

الدعائم الاختيارية:

• nft : الإعدادات الافتراضية إلى true . ضبط على false لحذف جلب NFTS.
• noNFTFetch : الافتراضيات إلى true . تم تعيينه على false لجلب جميع بيانات تعريف NFT ، والتي قد تستغرق بعض الوقت.
• quoteCurrency : الافتراضات إلى USD . تفضل بزيارة مرجع API لمشاهدة القائمة الكاملة لخيارات العملة الاقتباس.

نموذج الرمز:

 import { TokenBalances } from '@covalenthq/web3-components' ;

function App ( ) {
  return (
    < div className = "TokenBalances" >
      < TokenBalances
        address = "demo.eth"
        chainId = "1"
      />
    </ div >
  )
}

export default App ;

---

<ERC20Transfers />

يقوم مكون ERC20Transfers بإرجاع قائمة باجية لجميع عمليات نقل رمز ERC20 لعنوان محفظة على سلسلة معينة. يستغرق address و chainId كمدخلات ويستخدم Get Transactions for Address .

الدعائم المطلوبة:

• address
• chainId

الدعائم الاختيارية:

• ascending : الإعدادات الافتراضية إلى false وتوفر أحدث نقل أولاً. ضبط على true للحصول على التحويلات في ترتيب زمني.
• noLogs : الافتراضيات إلى false . ضبط على true لحذف جلب سجلات الأحداث التي تم فك تشفيرها.
• quoteCurrency : الافتراضات إلى USD . تفضل بزيارة مرجع API لمشاهدة القائمة الكاملة لخيارات العملة الاقتباس.

نموذج الرمز:

 import { useState } from 'react'
import { ERC20Transfers } from '@covalenthq/web3-components'
import { Input } from 'antd'
const { Search } = Input
const FormControls = ( { onSubmit } ) => {
    return (
        < Search placeholder = 'Enter Wallet Address or ENS' onSearch = { onSubmit } enterButton
        style = { {
            width : 500 ,
        } } />
    )
}
function App ( ) {
    const [ walletAddress , setWalletAddress ] = useState ( null )
    const onSubmit = ( values ) => {
        setWalletAddress ( values )
    }
    if ( walletAddress ) {
        return (
            < >
            < div style = { { width : '80%' , margin : 'auto' } } >
              < FormControls onSubmit = { onSubmit } />
              < ERC20Transfers address = { walletAddress } chainId = { 1 } />
            </ div >
            </ >
        )
    } else {
        return (
            < >
            < div style = { { width : '80%' , margin : 'auto' } } >
              < FormControls onSubmit = { onSubmit } />
            </ div >
            </ >
        )
    }
}
export default App ;

---

<TokenHolders />

يوفر مكون <TokenHolders /> طاولة حاملات رمزية كاملة ومرهقة مع جميع عناوين المحفظة ومعرفات الرصيد /الرمز المميز لمجموعة Token أو NFT tokenAddress و chainId .

الدعائم المطلوبة:

• tokenAddress
• chainId

الدعائم الاختيارية:

• blockHeight : الإعدادات الافتراضية إلى latest . حدد ارتفاع كتلة لجلب جميع حاملي الرمز المميز حتى هذا الارتفاع.
• pageSize : الافتراضيات إلى 99999 .

نموذج الرمز:

 import { TokenHolders } from '@covalenthq/web3-components' ;

function App ( ) {
  return (
    < div className = "TokenHolders" >
      < TokenHolders
        tokenAddress = "0xD417144312DbF50465b1C641d016962017Ef6240"
        chainId = "1"
      />
    </ div >
  )
}

export default App ;

---

<Transactions />

يوفر مكون <Transactions /> جدولًا كاملاً ومُعدًا مع جميع المعاملات في الترتيب الزمني التنازلي بما في ذلك النوع أو الأساليب وعنوان الاستلام أو مبلغ الرمز المميز أو معرف الرمز المميز NFT ورسوم الغاز لمحفظة أو address معين chainId .

الدعائم المطلوبة:

• address
• chainId

الدعائم الاختيارية:

• ascending : الإعدادات الافتراضية إلى false وتوفر أحدث نقل أولاً. ضبط على true للحصول على التحويلات في ترتيب زمني.
• noLogs : الافتراضيات إلى false . ضبط على true لحذف جلب سجلات الأحداث التي تم فك تشفيرها.
• pageSize : الافتراضيات إلى 99999 .
• quoteCurrency : الافتراضات إلى USD . تفضل بزيارة مرجع API لمشاهدة القائمة الكاملة لخيارات العملة الاقتباس.

نموذج الرمز:

 import { Transactions } from '@covalenthq/web3-components' ;

function App ( ) {
  return (
    < div className = "Transactions" >
      < Transactions
        address = "demo.eth"
        chainId = "1"
      />
    </ div >
  )
}

export default App ;

---

<ChainSelector/>

يوفر مكون <ChainSelector /> قائمة منسدلة مع قائمة كاملة بجميع blockchains المدعومة من API. يأخذ هذا المكون وظيفة رد الاتصال باستخدام دعامة setChainName .

الدعائم المطلوبة:

• setChainName

نموذج الرمز:

 import { ChainSelector } from '@covalenthq/web3-components' ;

const [ chainName , setChainName ] = useState ( 'eth-mainnet' )

function App ( ) {
  return (
    < div className = "ChainSelector" >
      < ChainSelector setChainName = { setChainName } />
    </ div >
  )
}

export default App ;