web3 components

Web3 -Komponentenbibliothek - veraltet

Ersetzt durch Goldrush -Kit - https://github.com/covalenthq/goldrush-kit

Diese Web3-Bibliothek wird von der kovalenten, einheitlichen API betrieben und besteht aus nützlichen React-Komponenten, um alle On-Chain-Daten in einem der über 30 kovalenten unterstützten Blockchain-Netzwerke abzurufen.

Diese Komponenten erfordern keinen aktiven Web3 -Anbieter, da die Daten aus dem kovalenten Netzwerk gehostet, indiziert und abgefragt werden. Ein API -Schlüssel ist jedoch erforderlich, um sie zu verwenden.

Weitere Informationen zur Funktionsweise der API finden Sie in der kovalenten API -Referenz.

Schneller Start

1. Installieren Sie mit NPM: npm install @covalenthq/web3-components yarn install @covalenthq/web3-components installieren

2. Erstellen Sie eine .env -Datei und setzen Sie die Variable: REACT_APP_COVALENT_API_KEY= Ihre kovalente API -Taste

HINWEIS: Um diese Komponenten zu verwenden, ist React v18.0 und größer erforderlich

Web3 -Komponenten

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

<TokenBalances />

Die <TokenBalances /> -Komponente bietet eine vollständige und paginierte Balances -Tabelle mit allen ERC20 -Token und NFTs für eine bestimmte address und chainId .

Erforderliche Requisiten:

• address
• chainId

Optionale Requisiten:

• nft : Standards zu true . Auf false einstellen, um NFTs abzurufen.
• noNFTFetch : Standards an true . Setzen Sie sich auf false , um alle NFT -Metadaten abzurufen, was einige Zeit dauern kann.
• quoteCurrency : Standardeinstellungen zu USD . Besuchen Sie die API -Referenz, um die vollständige Liste der Angebotswährungsoptionen anzuzeigen.

Beispielcode:

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

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

export default App ;

---

<ERC20Transfers />

Die ERC20TRANSFERS -Komponente gibt eine paginierte Liste aller ERC20 -Token -Transfers einer Brieftaschenadresse in einer bestimmten Kette zurück. Es dauert eine address und chainId als Eingänge und verwendet die Get Transactions for Address Adressendpunkte.

Erforderliche Requisiten:

• address
• chainId

Optionale Requisiten:

• ascending : Standardeinstellungen zu false und bietet zuerst die neueste Übertragung. Auf true eingestellt, um Transfers in chronologischer Reihenfolge zu erhalten.
• noLogs : Standardeinstellungen zu false . Setzen Sie sich auf true , um decodierte Ereignisprotokolle abzugeben.
• quoteCurrency : Standardeinstellungen zu USD . Besuchen Sie die API -Referenz, um die vollständige Liste der Angebotswährungsoptionen anzuzeigen.

Beispielcode:

 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 />

Die <TokenHolders /> -Komponente bietet eine vollständige und paginierte Token -Halter -Tabelle mit allen Brieftaschenadressen und -Balances /Token -IDs für ein bestimmtes ERC20 -Token- oder NFT -Sammlung tokenAddress und chainId .

Erforderliche Requisiten:

• tokenAddress
• chainId

Optionale Requisiten:

• blockHeight : Standard für latest . Geben Sie eine Blockhöhe an, um alle Tokenhalter in dieser Höhe zu holen.
• pageSize : Standards bis 99999 .

Beispielcode:

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

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

export default App ;

---

<Transactions />

Die <Transactions /> -Komponente bietet eine vollständige und paginierte Tabelle mit allen Transaktionen in absteigender chronologischer Reihenfolge, einschließlich der Art, der Methoden, der Empfangsadresse, der Token -Menge oder der NFT -Token -ID und der Gasgebühren für eine bestimmte Brieftasche oder address und chainId .

Erforderliche Requisiten:

• address
• chainId

Optionale Requisiten:

• ascending : Standardeinstellungen zu false und bietet zuerst die neueste Übertragung. Auf true eingestellt, um Transfers in chronologischer Reihenfolge zu erhalten.
• noLogs : Standardeinstellungen zu false . Setzen Sie sich auf true , um decodierte Ereignisprotokolle abzugeben.
• pageSize : Standards bis 99999 .
• quoteCurrency : Standardeinstellungen zu USD . Besuchen Sie die API -Referenz, um die vollständige Liste der Angebotswährungsoptionen anzuzeigen.

Beispielcode:

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

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

export default App ;

---

<ChainSelector/>

Die <ChainSelector /> -Komponente bietet ein Dropdown -Menü mit einer vollständigen Liste aller kovalenten API -unterstützten Blockchains. Diese Komponente nimmt eine Rückruffunktion mit der setChainName -Prop.

Erforderliche Requisiten:

• setChainName

Beispielcode:

 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 ;