web3 components

Biblioteca de componentes Web3 - Destrisado

Reemplazado por el kit de oro - https://github.com/covalenthq/goldrush-kit

Esta biblioteca Web3 funciona con la API unificada covalente y consiste en componentes reactos útiles para obtener cualquier datos en la cadena en cualquiera de las más de 30 redes de blockchain admitidas covalentes.

Estos componentes no requieren un proveedor de Web3 activo ya que los datos se alojan, indexan y consultan desde la red covalente. Sin embargo, se requiere una clave API para usarlos.

Consulte la referencia de la API covalente para obtener documentación sobre cómo funciona la API.

Comienzo rápido

1. Instale con npm: npm install @covalenthq/web3-components o instalar con hilo: yarn install @covalenthq/web3-components

2. Cree un archivo .env y establezca la variable: REACT_APP_COVALENT_API_KEY= su tecla API covalente

Nota: React V18.0 y mayor se requiere para usar estos componentes

Componentes web3

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

<TokenBalances />

El componente <TokenBalances /> proporciona una tabla de equilibrio completa y paginada con todos los tokens ERC20 y NFT para una address de billetera dada y chainId .

Accesorios requeridos:

• address
• chainId

Accesorios opcionales:

• nft : el valor predeterminado es true . Establecer en false para omitir la búsqueda de NFT.
• noNFTFetch : el valor predeterminado es true . Establecer en false para obtener todos los metadatos NFT, que pueden llevar algún tiempo.
• quoteCurrency : El valor predeterminado es USD . Visite la referencia de la API para ver la lista completa de opciones de moneda de cotización.

Código de muestra:

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

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

export default App ;

---

<ERC20Transfers />

El componente ERC20Transfers devuelve una lista paginada de todas las transferencias de token ERC20 de una dirección de billetera en una cadena en particular. Toma una address y chainId como entradas y usa las Get Transactions for Address .

Accesorios requeridos:

• address
• chainId

Accesorios opcionales:

• ascending : el valor predeterminado a false y proporciona la transferencia más reciente primero. Establecido en true para obtener transferencias en orden cronológico.
• noLogs : el valor predeterminado a false . Establecer en true para omitir los registros de eventos decodificados.
• quoteCurrency : El valor predeterminado es USD . Visite la referencia de la API para ver la lista completa de opciones de moneda de cotización.

Código de muestra:

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

El componente <TokenHolders /> proporciona una tabla de titulares de tokens completos y paginados con todas las direcciones de billetera e IDS /Token para una token de token ERC20 o NFT tokenAddress y chainId .

Accesorios requeridos:

• tokenAddress
• chainId

Accesorios opcionales:

• blockHeight : el valor predeterminado es latest . Especifique una altura de bloque para obtener todos los soportes de token a partir de esa altura.
• pageSize : Predeterminado es 99999 .

Código de muestra:

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

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

export default App ;

---

<Transactions />

El componente <Transactions /> proporciona una tabla completa y paginada con todas las transacciones en orden cronológico descendente, incluido el tipo, los métodos, la dirección de recepción, la cantidad de token o la identificación de token NFT y las tarifas de gas para una billetera dada o address de contrato y chainId .

Accesorios requeridos:

• address
• chainId

Accesorios opcionales:

• ascending : el valor predeterminado a false y proporciona la transferencia más reciente primero. Establecido en true para obtener transferencias en orden cronológico.
• noLogs : el valor predeterminado a false . Establecer en true para omitir los registros de eventos decodificados.
• pageSize : Predeterminado es 99999 .
• quoteCurrency : El valor predeterminado es USD . Visite la referencia de la API para ver la lista completa de opciones de moneda de cotización.

Código de muestra:

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

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

export default App ;

---

<ChainSelector/>

El componente <ChainSelector /> proporciona un menú desplegable con una lista completa de todas las cadenas de bloques compatibles con API covalentes. Este componente toma una función de devolución de llamada utilizando el setChainName Prop.

Accesorios requeridos:

• setChainName

Código de muestra:

 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 ;