web3 components

Библиотека компонентов Web3 - устарела

Замените набор Goldrush - https://github.com/covalenthq/goldrush-kit

Эта библиотека Web3 оснащена ковалентным унифицированным API и состоит из полезных компонентов React для получения любых данных в цепей в любой из 30+ ковалентных сетей блокчейнов.

Эти компоненты не требуют активного поставщика Web3, поскольку данные размещены, индексируются и запрошены из ковалентной сети. Однако для их использования требуется ключ API.

Пожалуйста, обратитесь к ссылке на ковалентный API для документации о том, как работает API.

Быстрый старт

1. Установите с помощью NPM: npm install @covalenthq/web3-components или установите с пряжей: yarn install @covalenthq/web3-components

2. Создайте файл .env и установите переменную: REACT_APP_COVALENT_API_KEY= ваш ковалентный клавиша API

Примечание: React v18.0, и для использования этих компонентов требуется больше

Web3 Компоненты

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

<TokenBalances />

Компонент <TokenBalances /> обеспечивает полную таблицу баланса и на страницах со всеми токенами и NFT ERC20 для данного 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 /> обеспечивает полную таблицу держателей токенов с помощью всех адресов кошелька и баланс /идентификаторов токенов /токенов для заданного токена ERC20 или NFT Collection 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 /> предоставляет раскрывающееся меню с полным списком всех ковалентных блокчейнов, поддерживаемых 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 ;