web3 components

Web3組件庫 - 不推薦使用

替換為Goldrush套件-https：//github.com/covalenthq/goldrush-kit

該Web3庫由共價統一API提供動力，由有用的React組件組成，可在30多個共價支撐的區塊鍊網絡中獲取任何鏈上數據。

由於數據是從共價網絡託管，索引和查詢的，因此這些組件不需要活動的Web3提供商。但是，需要使用API​​​​鍵。

請參閱共價API參考，以獲取有關API的工作方式的文檔。

快速開始

1. 使用npm： npm yarn install @covalenthq/web3-components或使用YARN安裝： npm 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 ;