web3 components

Web3 Components Library - Tercerahkan

Diganti dengan goldrush kit - https://github.com/covalenthq/goldrush-kit

Perpustakaan Web3 ini ditenagai oleh API Unified Covalent dan terdiri dari komponen React yang berguna untuk mengambil data on-rantai apa pun di salah satu dari 30+ jaringan blockchain yang didukung kovalen.

Komponen -komponen ini tidak memerlukan penyedia Web3 aktif karena data di -host, diindeks dan ditanya dari jaringan kovalen. Namun, kunci API diperlukan untuk menggunakannya.

Silakan merujuk ke referensi API kovalen untuk dokumentasi tentang cara kerja API.

Awal yang cepat

1. Instal dengan NPM: npm install @covalenthq/web3-components atau Instal dengan Benang: yarn install @covalenthq/web3-components

2. Buat file .env dan atur variabel: REACT_APP_COVALENT_API_KEY= kunci API kovalen Anda

Catatan: React v18.0 dan Greater diperlukan untuk menggunakan komponen ini

Komponen web3

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

<TokenBalances />

Komponen <TokenBalances /> menyediakan tabel saldo yang lengkap dan paginated dengan semua token ERC20 dan NFT untuk address dompet dan chainId yang diberikan.

Alat peraga yang diperlukan:

• address
• chainId

Alat peraga opsional:

• nft : Default ke true . Diatur ke false untuk menghilangkan pengambilan nfts.
• noNFTFetch : Default ke true . Setel ke false untuk mengambil semua metadata NFT, yang mungkin memakan waktu.
• quoteCurrency : Default ke USD . Kunjungi referensi API untuk melihat daftar lengkap opsi mata uang kutipan.

Kode contoh:

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

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

export default App ;

---

<ERC20Transfers />

Komponen ERC20TRANSFERS mengembalikan daftar paginated dari semua transfer token ERC20 dari alamat dompet pada rantai tertentu. Dibutuhkan address dan chainId sebagai input dan menggunakan Get Transactions for Address .

Alat peraga yang diperlukan:

• address
• chainId

Alat peraga opsional:

• ascending : Default ke false dan memberikan transfer terbaru terlebih dahulu. Diatur ke true untuk mendapatkan transfer dalam urutan kronologis.
• noLogs : Default ke false . Diatur ke true untuk menghilangkan log event yang diterjemahkan.
• quoteCurrency : Default ke USD . Kunjungi referensi API untuk melihat daftar lengkap opsi mata uang kutipan.

Kode contoh:

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

Komponen <TokenHolders /> menyediakan tabel pemegang token yang lengkap dan paginasi dengan semua alamat dan saldo dompet /token ID untuk token ERC20 atau NFT Collection tokenAddress and chainId .

Alat peraga yang diperlukan:

• tokenAddress
• chainId

Alat peraga opsional:

• blockHeight : Default ke latest . Tentukan ketinggian blok untuk mengambil semua pemegang token pada ketinggian itu.
• pageSize : default ke 99999 .

Kode contoh:

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

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

export default App ;

---

<Transactions />

Komponen <Transactions /> menyediakan tabel lengkap dan paginasi dengan semua transaksi dalam urutan kronologis menurun termasuk jenis, metode, alamat penerima, jumlah token atau NFT token ID dan biaya gas untuk dompet atau address kontrak dan chainId yang diberikan.

Alat peraga yang diperlukan:

• address
• chainId

Alat peraga opsional:

• ascending : Default ke false dan memberikan transfer terbaru terlebih dahulu. Diatur ke true untuk mendapatkan transfer dalam urutan kronologis.
• noLogs : Default ke false . Diatur ke true untuk menghilangkan log event yang diterjemahkan.
• pageSize : default ke 99999 .
• quoteCurrency : Default ke USD . Kunjungi referensi API untuk melihat daftar lengkap opsi mata uang kutipan.

Kode contoh:

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

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

export default App ;

---

<ChainSelector/>

Komponen <ChainSelector /> menyediakan menu dropdown dengan daftar lengkap semua blockchains yang didukung API kovalen. Komponen ini mengambil fungsi panggilan balik menggunakan penyangga setChainName .

Alat peraga yang diperlukan:

• setChainName

Kode contoh:

 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 ;