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安装： yarn install @covalenthq/web3-components

2. 创建.env文件并设置变量： REACT_APP_COVALENT_API_KEY=您的共价api键

注意：使用这些组件需要v18.0及更高

Web3组件

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

<TokenBalances />

<TokenBalances />组件提供了一个完整而分页的余额表，所有ERC20令牌和NFTS都用于给定的钱包address和chainId 。

必需的道具：

• address
• chainId

可选道具：

• nft ：默认为true 。设置为false省略提取NFT。
• 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 />

ERC20 Transfers组件返回了特定链上钱包地址的所有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收集tokenAddress和chainId所有钱包地址和余额 /令牌ID。

必需的道具：

• 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 />组件提供了一张完整的分页表，所有交易的按时间顺序排列，包括给定钱包或合同address以及chainId类型，方法，方法，接收地址，代币金额或NFT令牌ID和GAS费用。

必需的道具：

• 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 Prop采用回调函数。

必需的道具：

• 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 ;