web3 components

Bibliothèque de composants web3 - déprécié

Remplacé par le kit Goldrush - https://github.com/coovalenthq/goldrush-kit

Cette bibliothèque Web3 est alimentée par l'API unifiée covalente et se compose de composants REACT utiles pour récupérer toutes les données sur la chaîne sur l'un des plus de 30 réseaux de blockchain pris en charge covalents.

Ces composants ne nécessitent pas de fournisseur Web3 actif car les données sont hébergées, indexées et interrogées à partir du réseau covalent. Cependant, une clé API est nécessaire pour les utiliser.

Veuillez vous référer à la référence de l'API covalente pour la documentation sur le fonctionnement de l'API.

Démarrage rapide

1. Installer avec NPM: npm install @covalenthq/web3-components ou installer avec du fil: yarn install @covalenthq/web3-components

2. Créez un fichier .env et définissez la variable: REACT_APP_COVALENT_API_KEY= votre clé d'API covalente

Remarque: React v18.0 et plus sont nécessaires pour utiliser ces composants

Composants web3

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

<TokenBalances />

Le composant <TokenBalances /> fournit une table de solde complète et paginée avec tous les jetons ERC20 et NFT pour une address de portefeuille et chainId donné.

Accessoires requis:

• address
• chainId

Accessoires facultatifs:

• nft : par défaut est true . Réglé sur false pour omettre d'obtenir des NFT.
• noNFTFetch : par défaut est true . Réglé sur false pour récupérer toutes les métadonnées NFT, ce qui peut prendre un certain temps.
• quoteCurrency : par défaut est USD . Visitez la référence de l'API pour voir la liste complète des options de devises de devis.

Exemple de code:

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

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

export default App ;

---

<ERC20Transfers />

Le composant ERC20Transfers renvoie une liste paginée de tous les transferts de jetons ERC20 d'une adresse de portefeuille sur une chaîne particulière. Il prend une address et chainId en entrées et utilise les Get Transactions for Address .

Accessoires requis:

• address
• chainId

Accessoires facultatifs:

• ascending : par défaut est false et fournit d'abord le transfert le plus récent. Réglé sur true pour obtenir des transferts dans l'ordre chronologique.
• noLogs : par défaut est false . Défini sur true pour omettre des journaux d'événements décodés pour aller chercher.
• quoteCurrency : par défaut est USD . Visitez la référence de l'API pour voir la liste complète des options de devises de devis.

Exemple de code:

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

Le composant <TokenHolders /> fournit une table de détenteurs de jetons complète et paginée avec toutes les adresses et équilibres de portefeuille / jetons pour un jeton ERC20 ou NFT tokenAddress et chainId .

Accessoires requis:

• tokenAddress
• chainId

Accessoires facultatifs:

• blockHeight : par défaut est latest . Spécifiez une hauteur de bloc pour récupérer tous les porte-jetons à partir de cette hauteur.
• pageSize : par défaut est 99999 .

Exemple de code:

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

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

export default App ;

---

<Transactions />

Le composant <Transactions /> fournit une table complète et paginée avec toutes les transactions en ordre chronologique décroissant, y compris le type, les méthodes, la réception d'adresse, la quantité de jeton ou address identification de jeton NFT et les frais de gaz pour un portefeuille ou un contrat donné et chainId .

Accessoires requis:

• address
• chainId

Accessoires facultatifs:

• ascending : par défaut est false et fournit d'abord le transfert le plus récent. Réglé sur true pour obtenir des transferts dans l'ordre chronologique.
• noLogs : par défaut est false . Défini sur true pour omettre des journaux d'événements décodés pour aller chercher.
• pageSize : par défaut est 99999 .
• quoteCurrency : par défaut est USD . Visitez la référence de l'API pour voir la liste complète des options de devises de devis.

Exemple de code:

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

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

export default App ;

---

<ChainSelector/>

Le composant <ChainSelector /> fournit un menu déroulant avec une liste complète de toutes les blockchains pris en charge de l'API covalents. Ce composant prend une fonction de rappel à l'aide de setChainName Prop.

Accessoires requis:

• setChainName

Exemple de code:

 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 ;