web3 components

Web3 Components Library - เลิกใช้แล้ว

แทนที่ด้วย Goldrush Kit - https://github.com/covalenthq/goldrush-kit

ไลบรารี Web3 นี้ขับเคลื่อนโดย API Unified Covalent และประกอบด้วยส่วนประกอบปฏิกิริยาที่มีประโยชน์เพื่อดึงข้อมูลใด ๆ บนห่วงโซ่ข้ามเครือข่ายบล็อกเชนที่รองรับโควาเลนต์ 30+

ส่วนประกอบเหล่านี้ไม่จำเป็นต้องมีผู้ให้บริการ Web3 ที่ใช้งานอยู่เนื่องจากข้อมูลถูกโฮสต์จัดทำดัชนีและสอบถามจากเครือข่ายโควาเลนต์ อย่างไรก็ตามจำเป็นต้องใช้คีย์ API เพื่อใช้

โปรดดูการอ้างอิง Covalent API สำหรับเอกสารเกี่ยวกับวิธีการทำงานของ API

เริ่มต้นอย่างรวดเร็ว

1. ติดตั้งด้วย NPM: npm install @covalenthq/web3-components หรือติดตั้งด้วยเส้นด้าย: yarn install @covalenthq/web3-components

2. สร้างไฟล์ .env และตั้งค่าตัวแปร: REACT_APP_COVALENT_API_KEY= คีย์ Covalent API ของคุณ

หมายเหตุ: React V18.0 และยิ่งใหญ่กว่านั้นจำเป็นต้องใช้ส่วนประกอบเหล่านี้

ส่วนประกอบ Web3

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

<TokenBalances />

ส่วนประกอบ <TokenBalances /> ให้ตารางสมดุลที่สมบูรณ์และ paginated พร้อมโทเค็น ERC20 ทั้งหมดและ NFTs สำหรับ address กระเป๋าเงินและ chainId ที่กำหนด

อุปกรณ์ประกอบฉากที่จำเป็น:

• address
• chainId

อุปกรณ์ประกอบฉากเสริม:

• nft : ค่าเริ่มต้นเป็น true ตั้งค่าเป็น false เพื่อละเว้นการดึง NFTs
• 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 /> ให้ตารางผู้ถือโทเค็นที่สมบูรณ์และ paginated พร้อมที่อยู่กระเป๋าเงินและยอดคงเหลือ /รหัสโทเค็นทั้งหมดสำหรับโทเค็น ERC20 หรือคอลเลกชัน NFT tokenAddress และ chainId

อุปกรณ์ประกอบฉากที่จำเป็น:

• 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 /> ให้ตารางที่สมบูรณ์และ paginated พร้อมธุรกรรมทั้งหมดในลำดับตามลำดับเวลารวมถึงประเภทวิธีการรับที่อยู่จำนวนโทเค็นหรือรหัสโทเค็น NFT และค่าธรรมเนียมก๊าซสำหรับกระเป๋าเงินหรือ address สัญญาและ chainId

อุปกรณ์ประกอบฉากที่จำเป็น:

• 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 /> ให้เมนูแบบเลื่อนลงพร้อมรายการที่สมบูรณ์ของ blockchains ที่รองรับ Covalent API ทั้งหมด ส่วนประกอบนี้ใช้ฟังก์ชั่นการเรียกกลับโดยใช้ prop setChainName

อุปกรณ์ประกอบฉากที่จำเป็น:

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