web3 components

Web3コンポーネントライブラリ - 非推奨

Goldrushキットに置き換えられました-https：//github.com/covalenthq/goldrush-kit

このWeb3ライブラリは、共有結合統合APIを搭載しており、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キー

注：これらのコンポーネントを使用するには、React V18.0以上が必要です

Web3コンポーネント

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

<TokenBalances />

<TokenBalances />コンポーネントは、特定のウォレットaddressとchainIdのすべてのERC20トークンとNFTを備えた完全かつパジネートバランステーブルを提供します。

必要な小道具：

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

ERC20Transfersコンポーネントは、特定のチェーン上のウォレットアドレスのすべての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のタイプ、メソッド、受信者、トークンID、およびガス料金を含む、すべてのトランザクションを備えたすべてのトランザクションを備えたすべてのトランザクションを備えたすべてのトランザクションを提供します。

必要な小道具：

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