Web3 react를 사용하여 DApp 개발 방법

63522 단어 blockchain web3react tutorial web3

Web3 react는 블록체인, DApp, Web3 개발에서 많이 사용되는 라이브러리입니다.그것은 2800여 개의 별을 가지고 있으며, 이미 Github의 10000여 개의 환매 회사에 의해 사용되고 있다.
주: web3-react을 알고 있다면 1절에서 조작 지침을 직접 배울 수 있습니다.
최종 업데이트: 2022/01/30

무엇이 web3-react입니까?
여정을 시작하기 전에 여기서 사용하는 스택과 기술에 대해 살펴보겠습니다.

프런트엔드: 반응, 다음.js, 타자 원고

블록체인 API: 이더넷.js

개발 환경: Hardat, MetaMask, 이더리움 테스트망

web3-react은 일종의 반응/에테르다.Uniswap 엔지니어링 담당자인 Noah Zinsmeister가 개발한 현대 이더리움 DApp 구축에 사용되는 js 프레임워크.프런트엔드와 블록체인 API 사이에서 작동합니다.

At a high level, web3-react is a state machine which ensures that certain key pieces of data (the user's current account, for example) relevant to your dApp are kept up-to-date.

To this end, web3-react uses Context to efficiently store this data, and inject it wherever you need it in your application. (via web3-react v6 docs)

기본 블록체인 API가 ethers.js인 react 라이브러리입니다.안정적인 버전은 v6이고, 현재 v8은 베타 버전입니다.너는 https://github.com/NoahZinsmeister/web3-react에서 web3-react 환매 협의를 찾을 수 있다
그것이 광범위하게 사용되었기 때문에, 나는 놀랍게도 문서가 거의 없다는 것을 발견했다.지금까지 나는 단지 네 개의 파일을 참고할 수 있을 뿐이다.
웹3 react(v6 및 v8 베타 버전)

소스 코드

키트의

예제(v6 및 v8 베타 버전)

웹3용 문서

콘센스 블로그의 강좌, 저자: 로렌조 시시리아

v6에서 v8 베타까지는 약간의 주요 변화가 있다.광범위하게 사용되는 갈고리 useWeb3React은'후방 호환에만 사용한다'는 주석을 달았다.(동네에 있는 게하드 스턴 칸프와 윌리엄 시바브가 좋은 docs for web3-react을 썼다)
나는 웹3의 끊임없이 증가하는 수요를 충족시킬 수 있기 때문에 web3-react의 v8이 광범위하게 사용될 것이라고 예견할 수 있다.개발자가 v6와 v8(beta 버전)에서 사용할 수 있도록 돕기 위해 이 강좌를 썼습니다.
유용한 링크: 웹3.v6의 소스 코드와 문서:

소스 코드 https://github.com/NoahZinsmeister/web3-react/tree/v6

파일 https://github.com/NoahZinsmeister/web3-react/tree/v6/docs

Lorenzo's Web3-React Tutorial은 이 조작 지침에 큰 도움이 된다. 나는 그 중에서 예시 코드를 복사했다.감사합니다.이 자습서는 블록체인과 DApp 간에 데이터를 동기화하는 정책을 보여주므로 매우 좋습니다.

"SWR and Ether.js are two nice libraries to work with if you want to streamline your data fetching strategy with Ethereum dapp."

몇 개의 도서관이 있는데, 그 중 일부 도서관의 비교는 WAGMI docs에서 찾을 수 있다.

Web3 반응

와트미터

DAPP

사용

Web3 모드

Web3 사용자 인터페이스

Web3UI

비계 eth/eth 구성 요소/eth 연결

1. 놀이터 만들기: 다음 만들기.js 프로젝트
우선, 우리는 다음 단계를 시작한다.js 프로젝트는 web3-react을 사용하여 DAPP를 작성합니다.그리고 의존항을 추가합니다.다음 6단계를 따르십시오.

1.1 프로젝트를 만듭니다.

yarn create next-app playeth --typescript
cd playeth

1.2 src을 우리의 소스 코드 디렉토리로 사용합니다.

mkdir src
mv pages src/pages
mv styles src/styles

tsconfig.json 편집, 추가:

    "baseUrl": "./src",

1.3 정리 index.tsx:index.tsx을 간단하게 만듭니다.

import type { NextPage } from 'next'
import styles from '../styles/Home.module.css'

const Home: NextPage = () => {
  return (
    <div>
      <main className={styles.main}>
        <h2>
          Welcome to playground
        </h2>
      </main>
    </div>
  )
}
export default Home

1.4 프로젝트 실행 및 보기: http://localhost:3000/

yarn dev

1.5 종속성 추가
우리는 이곳에서 ethers.js, web3-react 등을 사용할 것이다.

yarn add ethers
yarn add  @web3-react/core  @web3-react/injected-connector

설치된 web3-react은 안정적인 버전 6입니다.x、 x.
사용하는 ethers.js 구성 요소만 추가하려면 첫 번째 명령을

yarn add @ethersproject/providers

으로 바꿀 수 있습니다

2. Web3 react, ethers 및 MetaMask를 사용하여 블록체인에 연결
DApp(web3 응용)와 전통적인 웹 응용 사이의 주요 차이점은 DApp가 하나의 집중된 서버가 아니라 블록체인에 연결되어 1) 사용자의 로그인과 권한 수여에 사용되고 2) 데이터와 3) 기능, 예를 들어 DeFi, NFT, 게임, DAO 관리 등이다.
Desktop Explorer에서 DAPP를 사용할 경우 다음 세 가지를 수행할 수 있습니다.

사용자 측 MaskMask 지갑

이태.브라우저/서버와 블록체인 엔드포인트 사이의 js

서버/브라우저 에서

React 및 Web3 Reactweb3-react과 DApp를 시작하겠습니다.이 두 섹션은 다음과 같습니다.

Web3 ReactProvider, 컨텍스트

Web3React를 사용하여

연결
v6에서 v8까지 큰 업그레이드가 있습니다.useWeb3React에는 "백엔드 호환성"에 대한 주석이 있습니다.

2.1 _app.tsx에 Provider 추가<Web3ReactProvider>에 컨텍스트 공급자 _app.tsx을 추가합니다.

import '../styles/globals.css'
import type { AppProps } from 'next/app'

import { Web3ReactProvider } from '@web3-react/core'
import { Web3Provider } from '@ethersproject/providers'

function getLibrary(provider: any): Web3Provider {
  const library = new Web3Provider(provider)
  library.pollingInterval = 12000
  return library
}

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <Web3ReactProvider getLibrary={getLibrary}>
      <Component {...pageProps} />
    </Web3ReactProvider>
  )
}

export default MyApp

2.2 편집 index.tsxuseWeb3React을 사용하여 MetaMask를 통해 주입된 공급자를 사용하여 블록체인에 연결합니다.windows.ethereum으로 직접 전화를 걸 수 있습니다.MetaMask 이더넷 공급업체 API 설명서는 here입니다.
Chrome 브라우저에 MetaMask 확장자를 설치해야 합니다.index.tsx을 편집하고 MetaMask wallet과 블록체인 공급자를 사용하여 블록체인을 브라우저에 연결하는 버튼을 제공합니다.

import type { NextPage } from 'next'
import styles from '../styles/Home.module.css'
import { useEffect } from 'react'

import { useWeb3React } from '@web3-react/core'
import { Web3Provider } from '@ethersproject/providers'
import { InjectedConnector } from '@web3-react/injected-connector'

const ConnectWallet = () => {
  const injectedConnector = new InjectedConnector({supportedChainIds: [1,3, 4, 5, 42, ],})
  const { chainId, account, activate, active,library } = useWeb3React<Web3Provider>()
  const onClick = () => {
    activate(injectedConnector)
  }

  useEffect(() => {
    console.log(chainId, account, active)
    },);

  return (
    <div>
      <div>ChainId: {chainId}</div>
      <div>Account: {account}</div>
      {active ? (
        <div>✅ </div>
      ) : (
        <button type="button" onClick={onClick}>
          Connect Connect
        </button>
      )}
    </div>
  )
}

const Home: NextPage = () => {
  return (
    <div >
      <main className={styles.main}>
        <h2 >Welcome to playground</h2>
        <ConnectWallet />
      </main>
    </div>
  )
}

export default Home

우리 어떡하지?디스플레이account에 ConnectWallet 구성 요소를 추가하여wallet에 연결합니다.

지갑 연결 버튼을 누르면 activate(injectedConnector) 갈고리의 useWeb3React을 호출합니다.

이 연결되면 chainId과 account이 표시됩니다.

yarn dev을 실행하면 http://localhost:3000/에서 이 간단한 DApp를 즐길 수 있습니다.

참고: 이 페이지에서 지갑의 연결을 정말로 끊으려면 MetaMask 연결을 끊으십시오.

3. 이더리움 Mainnet에서 데이터 가져오기: 블록체인 읽기
2절에서 우리는 블록체인과 상호작용하는 환경을 구축했다.이 절에서, 우리는 이더리움 Mainnet에서 데이터를 얻으려고 시도할 것이다.

3.1useState와useEffect를 사용하여 데이터를 조회하고 표시index.tsx에서 변경되었습니다. 이것은 신속하고 더러운 코드 세션입니다. 설명에만 사용됩니다.

  const [balance,setBalance]= useState("")
...
  useEffect(() => {
    library?.getBalance(account).then((result)=>{
      setBalance(result/1e18)
    })
    },);
...
      <div>Balance: {balance}</div>

3.2 SWR을 사용하여 데이터 조회
SWR(https://swr.now.sh/)은 재검증 중에 효력이 없음을 나타냅니다.Lorenzo's Web3-React Tutorial은 이런 전략을 사용하는 것을 권장합니다.SWR에 대한 한마디:

SWR first returns the data from cache (stale), then sends the fetch request (revalidate), and finally comes with the up-to-date data again.

insatll swr 이후 편집 index.tsx

import useSWR from 'swr'
...
    const fetcher = (library) => (...args) => {
      const [method, ...params] = args
      console.log("fetcher",method, params)
      const result = library[method](...params)
     return library[method](...params)
    }

    const BalanceSWR  = () => {
      const { account, library } = useWeb3React<Web3Provider>()
      const { data: balance } = useSWR(['getBalance', account, 'latest'], {
        fetcher: fetcher(library),
      })
      console.log(balance)
      if(!balance) {
        return <div>...</div>
      }
      return <div>Balance: Ξ {balance/1e18}</div>
    }  
...
      {active && <BalanceSWR />}

Lorenzo의 Web3 React 자습서 설명:

As you can see, it is a partially applied function. In that way, I can inject the library (my Web3Provider) when I configure the fetcher. Later, every time a key changes, the function can be resolved by returning the required promise.

3.3 실시간 데이터 업데이트
SWR을 사용하면 데이터를 실시간으로 업데이트할 수 있다는 장점이 있습니다.
Lorenzo의 Web3 React 튜토리얼을 따르겠습니다.
사용하는 기능은 SWR의 mutate 함수입니다.

Etheruem 청취 블록 번호 변경: ethers.공급자()

정보

SWR mutate를 사용하여

새로 고침 트리거BalanceSWR에서 index.tsx 구성 요소 편집:

      const { account, library } = useWeb3React<Web3Provider>()
      const { data: balance,mutate } = useSWR(['getBalance', account, 'latest'], {
        fetcher: fetcher(library),
      })

      useEffect(() => {
        // listen for changes on an Ethereum address
        console.log(`listening for blocks...`)
        library.on('block', () => {
          console.log('update balance...')
          mutate(undefined, true)
        })
        // remove listener when the component is unmounted
        return () => {
          library.removeAllListeners('block')
        }
        // trigger the effect only on component mount
      }, [])

로렌조의 강좌는 스마트 계약과 어떻게 상호작용하고 스마트 계약 사건을 경청하는지를 더 많이 소개했다.너는 계속 읽고 실험할 수 있다: https://consensys.net/blog/developers/how-to-fetch-and-update-data-from-ethereum-with-react-and-swr/
Web3 react version 8로 이동하여 변경 사항을 살펴보겠습니다.

4. Web3 버전 8 심층
여기에 그것을 어떻게 사용하는지 예시가 하나 있다.우리는 그 중에서 몇 가지 코드 세션을 직접 얻을 것이다.패키지/example에서 이 예를 찾을 수 있습니다/

1. 예제 항목 만들기
다음 생성js 프로젝트는 우리가 1절에서 한 것과 같다.
패키지를 편집합니다.종속성을 추가하려면 다음과 같이 하십시오.

    "@ethersproject/bignumber": "^5.4.2",
    "@ethersproject/experimental": "^5.5.0",
    "@ethersproject/providers": "^5.5.1",
    "@ethersproject/units": "^5.4.0",
    "@walletconnect/ethereum-provider": "^1.7.1",
    "@web3-react/core": "8.0.6-beta.0",
    "@web3-react/eip1193": "8.0.2-beta.0",
    "@web3-react/empty": "8.0.2-beta.0",
    "@web3-react/metamask": "8.0.3-beta.0",
    "@web3-react/network": "8.0.2-beta.0",
    "@web3-react/types": "8.0.2-beta.0",
    "@web3-react/url": "8.0.2-beta.0",
    "@web3-react/walletconnect": "8.0.4-beta.0",
    "@web3-react/walletlink": "8.0.4-beta.0",

종속성을 설치하려면 명령을 실행하십시오.

yarn install

2단계 AccountsComponent
기반: https://github.com/NoahZinsmeister/web3-react/blob/main/packages/example/components/Accounts.tsx 생성 components/AccountsComponent.tsx

import type { BigNumber } from '@ethersproject/bignumber'
import { formatEther } from '@ethersproject/units'
import type { Web3ReactHooks } from '@web3-react/core'
import { useEffect, useState } from 'react'

function useBalances(
  provider?: ReturnType<Web3ReactHooks['useProvider']>,
  accounts?: string[]
): BigNumber[] | undefined {
  const [balances, setBalances] = useState<BigNumber[] | undefined>()

  useEffect(() => {
    if (provider && accounts?.length) {
      let stale = false

      void Promise.all(accounts.map((account) => provider.getBalance(account))).then((balances) => {
        if (!stale) {
          setBalances(balances)
        }
      })

      return () => {
        stale = true
        setBalances(undefined)
      }
    }
  }, [provider, accounts])

  return balances
}

export function AccountsComponent({
  accounts,
  provider,
  ENSNames,
}: {
  accounts: ReturnType<Web3ReactHooks['useAccounts']>
  provider: ReturnType<Web3ReactHooks['useProvider']>
  ENSNames: ReturnType<Web3ReactHooks['useENSNames']>
}) {
  const balances = useBalances(provider, accounts)

  if (accounts === undefined) return null

  return (
    <div>
      Accounts:{' '}
      <b>
        {accounts.length === 0
          ? 'None'
          : accounts?.map((account, i) => (
              <ul key={account} style={{ margin: 0, overflow: 'hidden', textOverflow: 'ellipsis' }}>
                <li>{ENSNames?.[i] ?? account}</li>
                <li>{balances?.[i] ? ` (Ξ${formatEther(balances[i])})` : null}</li>
              </ul>
            ))}
      </b>
    </div>
  )
}

몇 가지 설명:

계정의 ENS/주소 및 이더리움 잔액을 표시하는 구성 요소

웹3 provider의 getBalance 기능을 사용하여 이더리움 잔액

3단계 MetaMaskCardcomponents/MetaMaskCard.tsx을 생성합니다.MetaMaskCard는 https://github.com/NoahZinsmeister/web3-react/tree/main/packages/example/components의 MetaMaskCard, Connect, Status 구성 요소를 기반으로 합니다.

import type { Web3ReactHooks } from '@web3-react/core'
import { AccountsComponent } from './AccountsComponent'
import { initializeConnector } from '@web3-react/core'
import { MetaMask } from '@web3-react/metamask'

const [metaMask, hooks] = initializeConnector<MetaMask>((actions) => new MetaMask(actions))
const {  useChainId, useAccounts, useError, useIsActivating, useIsActive, useProvider, useENSNames } = hooks

function Connect({
  isActivating,
  error,
  isActive,
}: {
  chainId: ReturnType<Web3ReactHooks['useChainId']>
  isActivating: ReturnType<Web3ReactHooks['useIsActivating']>
  error: ReturnType<Web3ReactHooks['useError']>
  isActive: ReturnType<Web3ReactHooks['useIsActive']>
}) {

  if (error) {
    return (
      <div style={{ display: 'flex', flexDirection: 'column' }}>
        <button
          onClick={() => metaMask.activate()}
        >
          Try Again?
        </button>
      </div>
    )
  } else if (isActive) {
    return (
      <div style={{ display: 'flex', flexDirection: 'column' }}>
        <button onClick={() => metaMask.deactivate()}>Disconnect</button>
      </div>
    )
  } else {
    return (
      <div style={{ display: 'flex', flexDirection: 'column' }}>
        <button
          onClick={
            isActivating
              ? undefined
              : () => metaMask.activate()
          }
          disabled={isActivating}
        >
          Connect
        </button>
      </div>
    )
  }
}

function Status({
  isActivating,
  error,
  isActive,
}: {
  isActivating: ReturnType<Web3ReactHooks['useIsActivating']>
  error: ReturnType<Web3ReactHooks['useError']>
  isActive: ReturnType<Web3ReactHooks['useIsActive']>
}) {
  return (
    <div>
      {error ? (
        <>
          🔴 {error.name ?? 'Error'}
          {error.message ? `: ${error.message}` : null}
        </>
      ) : isActivating ? (
        <>🟡 Connecting</>
      ) : isActive ? (
        <>🟢 Connected</>
      ) : (
        <>⚪️ Disconnected</>
      )}
    </div>
  )
}

export default function MetaMaskCard() {
  const chainId = useChainId()
  const accounts = useAccounts()
  const error = useError()
  const isActivating = useIsActivating()

  const isActive = useIsActive()

  const provider = useProvider()
  const ENSNames = useENSNames(provider)

  return (
      <div style={{border: '1px solid'}}>
        <b>MetaMask</b>
        <Status isActivating={isActivating} error={error} isActive={isActive} />
        <AccountsComponent accounts={accounts} provider={provider} ENSNames={ENSNames} />
        <Connect chainId={chainId} isActivating={isActivating} error={error} isActive={isActive} />
      </div>

  )
}

몇 가지 설명:

세 가지 구성 요소: MetaMaskCard, Connect, 상태

연결 구성 요소는 metaMask.activate()으로 전화를 걸어 MetaMask 지갑을 연결할 수 있는 버튼을 제공합니다.

isActivating 및 isActive10

상태 구성 요소에 따라 상태 표시

우리는 여기에 필요한 모든 갈고리가 있다.

const [metaMask, hooks] = initializeConnector<MetaMask>((actions) => new MetaMask(actions))
const {  useChainId, useAccounts, useError, useIsActivating, useIsActive, useProvider, useENSNames } = hooks

4단계: index.tsx넥스트를 사용합니다.js 동적 가져오기는 MetaMaskCard를 가져옵니다.

import type { NextPage } from 'next'
import styles from 'styles/Home.module.css'

import dynamic from 'next/dynamic'

const MetaMaskCard = dynamic(() => import('../components/MetaMaskCard'), { ssr: false })

const Home: NextPage = () => {
  return (
    <div>
      <main  className={styles.main}>
        <h2>
          Welcome to playground
        </h2>
        <MetaMaskCard />
      </main>
    </div>
  )
}
export default Home

명령 yarn dev 실행 및 예제 응용 프로그램 액세스:localhost:3000
요컨대 웹3 React는 React와 이더리움 사이의 상하문과 연결을 포함하는 편리한 도구를 제공합니다.즐겨라.

Reference

이 문제에 관하여(Web3 react를 사용하여 DApp 개발 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/yakult/how-to-use-web3-react-to-develop-dapp-1cgn

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

[uestc oj] H. - 구 선생님 은 여동생.

mongodb sharding config 데이터베이스 집합 소개

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다