web3 components

Web3 구성 요소 라이브러리 - 더 이상 사용되지 않습니다

Goldrush Kit -https://github.com/covalenthq/goldrush-kit으로 교체

이 Web3 라이브러리는 공유 Unified API에 의해 구동되며 유용한 반응 구성 요소로 구성되어 30 개 이상의 공유 지원 블록 체인 네트워크에서 온 체인 데이터를 가져옵니다.

이러한 구성 요소는 데이터가 공유 네트워크에서 호스팅, 인덱싱 및 쿼리되기 때문에 활성 Web3 공급자가 필요하지 않습니다. 그러나 API 키는이를 사용하려면 API 키가 필요합니다.

API 작동 방식에 대한 문서는 공유 API 참조를 참조하십시오.

빠른 시작

1. npm : npm install @covalenthq/web3-components 또는 원사로 설치하십시오 : yarn install @covalenthq/web3-components

2. .env 파일을 만들고 변수를 설정하십시오 : REACT_APP_COVALENT_API_KEY= 공유 API 키

참고 :이 구성 요소를 사용하려면 V18.0 이상 반응이 필요합니다.

Web3 구성 요소

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

<TokenBalances />

<TokenBalances /> 구성 요소는 주어진 지갑 address 및 chainId 대한 모든 ERC20 토큰 및 NFT와 함께 완전하고 페이지 진화 된 균형 균형 테이블을 제공합니다.

필수 소품 :

• address
• chainId

선택적 소품 :

• nft : 기본값은 true 으로. 페치 NFT를 생략하기 위해 false 로 설정하십시오.
• noNFTFetch : 기본값은 true 으로 표시됩니다. 모든 NFT 메타 데이터를 가져 오기 위해 false 로 설정하여 시간이 걸릴 수 있습니다.
• 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 /> 구성 요소는 유형, 방법, 수신 주소, 토큰 금액 또는 NFT 토큰 ID 및 주어진 지갑 또는 계약 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 /> 구성 요소는 모든 공유 API 지원 블록 체인의 전체 목록이있는 드롭 다운 메뉴를 제공합니다. 이 구성 요소는 setChainName props를 사용하여 콜백 함수를 사용합니다.

필수 소품 :

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