web3 components

Biblioteca de componentes Web3 - depreciada

Substituído por Kit Goldrush - https://github.com/covalenthq/goldrush-kit

Esta biblioteca do Web3 é alimentada pela API unificada covalente e consiste em componentes de reação úteis para buscar qualquer dados na cadeia em qualquer uma das mais de 30 redes de blockchain suportadas com mais 30 anos.

Esses componentes não exigem um provedor ativo do Web3, pois os dados são hospedados, indexados e consultados da rede covalente. No entanto, é necessária uma chave da API para usá -los.

Consulte a referência covalente da API para obter documentação sobre como a API funciona.

Início rápido

1. Instale com npm: npm install @covalenthq/web3-components ou instale com fios: yarn install @covalenthq/web3-components

2. Crie um arquivo .env e defina a variável: REACT_APP_COVALENT_API_KEY= sua chave de API covalente

Nota: React v18.0 e maior é necessário para usar esses componentes

Componentes Web3

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

<TokenBalances />

O componente <TokenBalances /> fornece uma tabela completa e paginada com todos os tokens e NFTs ERC20 para um determinado address e chainId .

Adereços necessários:

• address
• chainId

Adereços opcionais:

• nft : Padrão para true . Defina como false para omitir NFTs buscando.
• noNFTFetch : Padrões para true . Defina como false para buscar todos os metadados da NFT, que podem levar algum tempo.
• quoteCurrency : Padrões para USD . Visite a referência da API para ver a lista completa das opções de moeda de cotação.

Código de exemplo:

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

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

export default App ;

---

<ERC20Transfers />

O componente ERC20Transfer retorna uma lista paginada de todas as transferências de token ERC20 de um endereço de carteira em uma cadeia específica. Ele pega um address e chainId como entradas e usa as Get Transactions for Address .

Adereços necessários:

• address
• chainId

Adereços opcionais:

• ascending : padrão para false e fornece a transferência mais recente primeiro. Defina como true para obter transferências em ordem cronológica.
• noLogs : Padrão para false . Defina como true para omitir os logs de eventos decodificados.
• quoteCurrency : Padrões para USD . Visite a referência da API para ver a lista completa das opções de moeda de cotação.

Código de exemplo:

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

O componente <TokenHolders /> fornece uma tabela completa e paginada de token com todos os endereços e equilíbrios /IDs de token da carteira para um determinado tokenAddress de token ou NFT de token ou chainId .

Adereços necessários:

• tokenAddress
• chainId

Adereços opcionais:

• blockHeight : Padrões para latest . Especifique uma altura de bloco para buscar todos os detentores de token a partir dessa altura.
• pageSize : Padrões para 99999 .

Código de exemplo:

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

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

export default App ;

---

<Transactions />

O componente <Transactions /> fornece uma tabela completa e paginada com todas as transações em ordem cronológica descendente, incluindo o tipo, métodos, endereço de recebimento, valor do token ou Taxas de ID e gás de token NFT para uma determinada carteira ou address de contrato e chainId .

Adereços necessários:

• address
• chainId

Adereços opcionais:

• ascending : padrão para false e fornece a transferência mais recente primeiro. Defina como true para obter transferências em ordem cronológica.
• noLogs : Padrão para false . Defina como true para omitir os logs de eventos decodificados.
• pageSize : Padrões para 99999 .
• quoteCurrency : Padrões para USD . Visite a referência da API para ver a lista completa das opções de moeda de cotação.

Código de exemplo:

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

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

export default App ;

---

<ChainSelector/>

O componente <ChainSelector /> fornece um menu suspenso com uma lista completa de todas as blockchains covalentes suportadas pela API. Este componente pega uma função de retorno de chamada usando o setChainName Prop.

Adereços necessários:

• setChainName

Código de exemplo:

 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 ;