블로그 1뉴스 개발자 엔터프라이즈 블록 체인 설명 이벤트 및 컨퍼런스 보도 자료뉴스 레터

뉴스 레터 구독.

이메일 주소

우리는 귀하의 개인 정보를 존중합니다

홈 블로그 블록 체인 개발

React 및 SWR을 사용하여 Ethereum에서 데이터를 가져오고 업데이트하는 방법

다음은 사용자의 이더 리움 지갑에서 토큰 잔액과 자금 이체가 업데이트되도록 dapp의 프런트 엔드를 구성하는 방법입니다 .by Lorenzo Sicilia 2020 년 6 월 18 일 게시일 : 2020 년 6 월 18 일

이더 리움 히어로로 데이터 가져 오기

이더 리움을 통해 탈 중앙화 애플리케이션 (dapp)을 구축 할 수 있습니다. 일반적인 애플리케이션과 dapp의 주요 차이점은 최소한 이더 리움 메인 넷에 배포 된 다른 스마트 계약을 활용하는 한 백엔드를 배포 할 필요가 없다는 것입니다..

그 때문에 프런트 엔드가 중요한 역할을합니다. 스마트 계약에서 데이터를 마샬링 및 마샬링하고, 지갑 (하드웨어 또는 소프트웨어)과의 상호 작용을 처리하고 평소와 같이 UX를 관리합니다. 뿐만 아니라 설계 상 dapp은 JSON-RPC 호출을 사용하고 소켓 연결을 열어 업데이트를받을 수 있습니다..

보시다시피 조정해야 할 몇 가지 사항이 있지만 걱정하지 마세요. 생태계는 지난 몇 달 동안 상당히 성숙해졌습니다..

전제 조건

이 자습서에서는 다음이 이미 있다고 가정합니다.

Geth 노드에 연결하기위한 지갑

가장 간단한 접근 방식은 MetaMask 설치 사용할 수 있도록 인 푸라 즉시 사용 가능한 인프라.

귀하의 계정에 일부 Ether

Ethereum으로 개발할 때 테스트 넷으로 전환하고 테스트 Ether를 사용하는 것이 좋습니다. 테스트 목적으로 자금이 필요한 경우 수도꼭지를 사용할 수 있습니다.. https://faucet.rinkeby.io/

React의 기본 이해

단계별로 안내 할 것이지만 React가 어떻게 작동하는지 (후크 포함) 알고 있다고 가정합니다. 익숙하지 않은 것이 있으면 React 문서.

작동하는 React 플레이 그라운드

이 튜토리얼을 Typescript로 작성했지만 몇 가지만 입력되었으므로 최소한의 변경으로 Javascript에서도 사용할 수 있습니다. 나는 사용했다 Parcel.js 그러나 자유롭게 사용하십시오 React 앱 만들기 너무 또는 다른 웹 애플리케이션 번 들러.

이더 리움 메인 넷에 연결

MetaMask가 준비되면 web3-react 네트워크와의 상호 작용을 처리합니다. Ethereum을 사용하는 데 유용한 많은 유틸리티가 포함 된 유용한 훅 useWeb3React를 제공합니다..

yarn add @ web3-react / core @ web3-react / injected-connector 코드 언어 : CSS (css)

그렇다면 공급자가 필요합니다. 공급자는 쿼리를 발행하고 서명 된 상태 변경 트랜잭션을 보내기 위해 이더 리움 블록 체인에 대한 연결을 추상화합니다..

Web3Provider를 사용합니다. Ether.js.

이미 몇 개의 라이브러리가있는 것 같지만 Ethereum과 상호 작용할 때 Javascript 데이터 유형을 Solidity 유형으로 변환해야합니다. 또한 작업을 실행하려면 트랜잭션에 서명해야합니다. Ether.js는 이러한 기능을 우아하게 제공합니다..

yarn add @ ethersproject / providersCode language : CSS (css)

알림 : 위의 Ether.js 패키지는 현재 v5입니다. 베타.

그 후에 우리는 필요한 모든 것이 있는지 확인하기 위해 최소한의 hello world를 적어 둘 준비가되었습니다.

import React from ‘react’import {Web3ReactProvider} from ‘@ web3-react / core’import {Web3Provider} from ‘@ ethersproject / providers’import {useWeb3React} from ‘@ web3-react / core’import {InjectedConnector} from ‘@ web3-react / injected-connector ‘export const injectedConnector = new InjectedConnector ({supportedChainIds : [1, // Mainet 3, // Ropsten 4, // Rinkeby 5, // Goerli 42, // Kovan],}) function getLibrary (제공자 : 임의) : Web3Provider {const library = new Web3Provider (provider) library.pollingInterval = 12000 return library} export const Wallet = () => {const {chainId, 계정, 활성화, 활성} = useWeb3React () const onClick = () => {activate (injectedConnector)} return ( <div> <div>ChainId : {chainId} div> <div>계정 : {account} div> {활성? ( <div>✅ div> ) : ( <버튼 유형 ="단추" onClick = {onClick}> 연결 버튼> )} div> )} 내보내기 const 앱 = () => {반환 ( <Web3ReactProvider getLibrary = {getLibrary}> <지갑 /> Web3ReactProvider> )} 코드 언어 : JavaScript (자바 스크립트)

숙제를했다면 다음과 같은 것이 있어야합니다.

삽입 된 커넥터.

지금까지 수행 한 작업 : GIT – 1 단계

메인 넷에서 데이터를 가져 오는 방법

나는 사용할 것이다 SWR 데이터 가져 오기 관리.

이것이 내가 이루고 싶은 것.

const {데이터 : 잔액} = useSWR (["getBalance", 계정, "최근"]) 코드 언어 : JavaScript (JavaScript)

꽤 멋지다 &# 128578;

트릭을 공개합시다! SWR은 Stale-While-Revalidate를 의미합니다. RFC 5861.

SWR은 먼저 캐시에서 데이터를 반환 (부실) 한 다음 가져 오기 요청 (재 검증)을 보내고 마지막으로 최신 데이터를 다시 제공합니다..

SWR은 키를 허용하고 백그라운드에서 해결을 관리합니다.

이를 위해 SWR은 프라 미스를 반환하여 키를 해결할 수있는 가져 오기 프로그램을 전달하도록 허용합니다. Hello World는 Fetch API 또는 Axios를 기반으로하는 가져 오기 프로그램이있는 REST API 요청을 기반으로합니다..

SWR의 놀라운 점은 가져 오기 프로그램을 생성하기위한 유일한 요구 사항은 약속을 반환해야한다는 것입니다..

그래서 다음은 이더 리움 용 페처의 첫 번째 구현입니다.

const 가져 오기 프로그램 = (라이브러리) => (… 인수) => {const [method, … params] = args console.log (method, params) return library [method] (… params)} 코드 언어 : JavaScript (javascript)

보시다시피 부분적으로 적용된 기능입니다. 이렇게하면 가져 오기 프로그램을 구성 할 때 라이브러리 (내 Web3Provider)를 삽입 할 수 있습니다. 나중에 키가 변경 될 때마다 필요한 promise를 반환하여 함수를 해결할 수 있습니다..

이제 구성 요소를 만들 수 있습니다.

내보내기 const 잔액 = () => {const {account, library} = useWeb3React () const {data : balance} = useSWR ([ ‘getBalance’, account, ‘latest’], {fetcher : fetcher (library),}) if (! balance) {return <div>…div> } 반환 <div>잔액 : {balance.toString ()} div> } 코드 언어 : JavaScript (자바 스크립트)

반환 된 잔액 개체는 BigNumber입니다..

균형 구성 요소.

보시다시피 숫자는 형식이 지정되지 않았고 매우 큽니다. Solidity는 최대 256 비트의 정수를 사용하기 때문입니다..

사람이 읽을 수있는 형식으로 숫자를 표시하기 위해 솔루션은 앞서 언급 한 Ether.js 유틸리티의 유틸리티 중 하나를 사용합니다. formatEther (balance)

yarn install @ ethersproject / unitsCode 언어 : CSS (css)

이제 구성 요소를 재 작업하여 사람이 읽을 수있는 형식으로 BitInt를 처리하고 형식을 지정할 수 있습니다.

내보내기 const 잔액 = () => {const {account, library} = useWeb3React () const {data : balance} = useSWR ([ ‘getBalance’, account, ‘latest’], {fetcher : fetcher (library),}) if (! balance) {return <div>…div> } 반환 <div>Ξ {parseFloat (formatEther (balance)). toPrecision (4)} div> } 코드 언어 : JavaScript (자바 스크립트) 사람이 읽을 수있는 형식의 BitInt.

지금까지 우리가 한 일 : GIT 2 단계

실시간으로 데이터를 업데이트하는 방법

SWR은 내부 캐시를 업데이트하기 위해 mutate 함수를 노출합니다..

const {data : balance, mutate} = useSWR ([ ‘getBalance’, account, ‘latest’], {fetcher : fetcher (library),}) const onClick = () => {mutate (new BigNumber (10), false)} 코드 언어 : JavaScript (자바 스크립트)

mutate 함수는 생성 된 키 (예 : [ ‘getBalance’, account, ‘latest’])에 자동으로 바인딩됩니다. 두 개의 매개 변수를 허용합니다. 새 데이터와 유효성 검사가 트리거되어야하는지 여부입니다. 필요한 경우 SWR 자동으로 가져 오기 프로그램을 사용하여 캐시를 업데이트합니다. &# 128165;

예상대로 Solidity 이벤트는 EVM의 로깅 기능 위에 작은 추상화를 제공합니다. 애플리케이션은 이더 리움 클라이언트의 RPC 인터페이스를 통해 이러한 이벤트를 구독하고 수신 할 수 있습니다..

Ether.js에는 이벤트를 구독하는 간단한 API가 있습니다.

const {계정, 라이브러리} = useWeb3React () library.on ("blockNumber", (blockNumber) => {console.log ({blockNumber})}) 코드 언어 : 자바 스크립트 (자바 스크립트)

이제 새로운 구성 요소에서 두 가지 접근 방식을 결합 해 보겠습니다.

내보내기 const 잔액 = () => {const {account, library} = useWeb3React () const {data : balance, mutate} = useSWR ([ ‘getBalance’, account, ‘latest’], {fetcher : fetcher (library),}) useEffect (() => {// 이더 리움 주소의 변경 사항 수신 console.log (`listening for blocks …`) library.on ( ‘block’, () => {console.log ( ‘update balance …’) mutate (undefined, true)}) // 컴포넌트가 마운트 해제되면 리스너 제거 return () => {library.removeAllListeners ( ‘block’)} // 구성 요소 마운트에만 효과 트리거}, []) if (! balance) {return <div>…div> } 반환 <div>Ξ {parseFloat (formatEther (balance)). toPrecision (4)} div> } 코드 언어 : JavaScript (자바 스크립트)

처음에 SWR은 계정 잔액을 가져온 다음 차단 이벤트를 수신 할 때마다 mutate를 사용하여 다시 가져 오기를 실행합니다..

알림 : 현재 이벤트에서 실제 잔액을 가져올 수 없기 때문에 mutate (undefined, true)를 사용했습니다. 방금 잔액을 다시 가져 오기만했습니다..

아래는 일부 ETH를 교환하는 두 개의 Ethereum 지갑을 사용한 빠른 데모입니다..

ETH를 교환하는 두 개의 Ethereum 지갑 데모.

지금까지 수행 한 작업 : GIT 3 단계

스마트 계약과 상호 작용하는 방법

지금까지 SWR 사용의 기본 사항과 Web3Provider를 통해 기본 호출을 수행하는 방법을 설명했습니다. 이제 스마트 계약과 상호 작용하는 방법을 알아 보겠습니다..

Ether.js는 Solidity 컴파일러에서 생성 한 ABI (Contract Application Binary Interface) ABI를 사용하여 스마트 계약 상호 작용을 처리합니다..

ABI (Contract Application Binary Interface)는 블록 체인 외부에서 그리고 계약 간 상호 작용을 위해 Ethereum 생태계의 계약과 상호 작용하는 표준 방법입니다..

예를 들어, 아래의 간단한 스마트 계약이 있습니다.

pragma 견고성 ^ 0.5.0; 계약 테스트 {constructor () public {b = hex"12345678901234567890123456789012"; } event Event (uint indexed a, bytes32 b); 이벤트 Event2 (단위 인덱스 a, bytes32 b); function foo (uint a) public {emit Event (a, b); } bytes32 b; } 코드 언어 : JavaScript (자바 스크립트)

이것은 생성 된 ABI입니다

[{ "유형": "행사", "입력": [{ "이름": "ㅏ", "유형": "uint256", "색인": 진실 }, { "이름": "비", "유형": "바이트 32", "색인": 거짓}], "이름": "행사" }, { "유형": "행사", "입력": [{ "이름": "ㅏ", "유형": "uint256", "색인": 진실 }, { "이름": "비", "유형": "바이트 32", "색인": 거짓}], "이름": "이벤트 2" }, { "유형": "함수", "입력": [{ "이름": "ㅏ", "유형": "uint256" }], "이름": "foo", "출력": []}] 코드 언어 : JSON / JSON (주석 포함) (json)

ABI를 사용하려면 간단히 코드에 직접 복사하고 필요한 곳에 가져올 수 있습니다. 이 데모에서는 표준 ERC20 ABI는 DAI와 MKR의 두 토큰 잔액을 검색하기 때문입니다..

다음 단계는 구성 요소를 만드는 것입니다.

내보내기 const TokenBalance = ({기호, 주소, 소수}) => {const {account, library} = useWeb3React () const {data : balance, mutate} = useSWR ([address, ‘balanceOf’, account], {fetcher : fetcher (library, ERC20ABI),}) useEffect (() => {// 이더 리움 주소의 변경 사항 수신 console.log (`전송 수신 …`) const contract = new Contract (address, ERC20ABI, library.getSigner ()) const fromMe = contract.filters.Transfer (account, null) library.on (fromMe, (from, to, amount, event) => {console.log ( ‘Transfer | sent’, {from, to, amount, event}) mutate (undefined, true)}) const toMe = contract.filters.Transfer (null, account) library.on (toMe, (from , to, amount, event) => {console.log ( ‘Transfer | received’, {from, to, amount, event}) mutate (undefined, true)}) // 구성 요소가 마운트 해제되면 리스너 제거 return () => {library.removeAllListeners (toMe) library.removeAllListeners (fromMe)} // 컴포넌트 마운트에만 효과 트리거}, []) if (! balance) {return <div>…div> } 반환 ( <div> {parseFloat (formatUnits (balance, decimals)). toPrecision (4)} {symbol} div> )} 코드 언어 : JavaScript (자바 스크립트)

확대 해 보겠습니다. 두 가지 주요 차이점이 있습니다.

주요 정의

useSWR ([address, ‘balanceOf’, account]))에서 사용하는 키는 메소드가 아닌 이더 리움 주소로 시작해야합니다. 그 때문에 가져 오는 사람은 우리가 달성하려는 것을 인식하고 ABI를 사용할 수 있습니다..

그에 따라 가져 오기 프로그램을 리팩터링 해 보겠습니다.

const fetcher = (라이브러리 : Web3Provider, abi ?: any) => (… 인수) => {const [arg1, arg2, … params] = args // 계약 if (isAddress (arg1)) {const address = arg1 const method = arg2 const contract = new Contract (address, abi, library.getSigner () ) return contract [method] (… params)} // eth 호출입니다. const method = arg1 return library [method] (arg2, … params)} 코드 언어 : JavaScript (javascript)

이제 이더 리움의 JSON-RPC 호출과 상호 작용할 수있는 범용 페 처가 있습니다.. &# 128588;

로그 필터

다른 측면은 ERC20 이벤트를 수신하는 방법입니다. Ether.js는 주제와 이벤트 이름을 기반으로 필터를 구성하는 편리한 방법을 제공합니다. 주제에 대한 자세한 정보는 Solidity 문서.

const contract = new Contract (address, ERC20ABI, library.getSigner ()) const fromMe = contract.filters.Transfer (account, null) 코드 언어 : JavaScript (javascript)

ABI를 사용하여 계약 인스턴스를 빌드 한 후 필터를 라이브러리 인스턴스에 전달할 수 있습니다..

경고:

ERC20 이벤트의 금액을 직접 사용하여 잔액을 늘리거나 줄이려는 유혹을받을 수 있습니다..

용을 인식하십시오. 가져 오기 프로그램을 설정할 때 당시 잔액 값이 포함 된 on 함수에 콜백으로 클로저를 전달했습니다..

useRef를 사용하여이 문제를 해결할 수 있지만 간단하게 잔액이 최신 상태인지 확인하기 위해 캐시를 재 검증하겠습니다. mutate (undefined, true)

이제 필요한 모든 부품이 준비되었습니다. 마지막 부분은 약간의 접착제입니다.

우리가 작업하는 네트워크에 따라 TokenBalance 구성 요소를 토큰 목록에 매핑하는 좋은 방법을 갖기 위해 몇 가지 상수를 구성했습니다.

export const Networks = {MainNet : 1, Rinkeby : 4, Ropsten : 3, Kovan : 42,} export interface IERC20 {symbol : string address : string decimals : number name : string} export const TOKENS_BY_NETWORK : {[key : number] : IERC20 []} = {[Networks.Rinkeby] : [{주소 : "0x5592EC0cfb4dbc12D3aB100b257153436a1f0FEa", 상징: "DAI", 이름: "다이", 소수 : 18,}, {주소 : "0xF9bA5210F91D0474bd1e1DcDAeC4C58E359AaD85", 상징: "MKR", 이름: "만드는 사람", 소수 : 18,},],} 코드 언어 : JavaScript (자바 스크립트)

상수가 있으면 구성된 토큰을 내 구성 요소에 쉽게 매핑 할 수 있습니다.

내보내기 const TokenList = ({chainId}) => {반환 ( <> {TOKENS_BY_NETWORK [chainId] .map ((토큰) => ( <TokenBalance key = {token.address} {… token} /> ))})} 코드 언어 : JavaScript (자바 스크립트)

모든 설정! 이제 우리는 이더와 토큰 잔액을로드하는 이더 리움 지갑을 가지고 있습니다. 그리고 사용자가 자금을 보내거나 받으면 지갑 UI가 업데이트됩니다..

이더와 토큰 잔액을로드하는 이더 리움 지갑.

지금까지 수행 한 작업은 다음과 같습니다. GIT 4 단계

리팩토링

분리 된 파일의 모든 구성 요소를 이동하고 SWRConfig 공급자를 사용하여 가져 오기 프로그램을 전역 적으로 사용할 수 있도록합니다..

<SWRConfig 값 = {{fetcher : fetcher (library, ERC20ABI)}}> <EthBalance /> <TokenList chainId = {chainId} /> <SWRConfig />코드 언어 : HTML, XML (xml)

SWRConfig를 사용하면 몇 가지 옵션을 항상 사용 가능한 상태로 구성하여 SWR을보다 편리하게 사용할 수 있습니다..

const {data : balance, mutate} = useSWR ([address, ‘balanceOf’, account]) 코드 언어 : JavaScript (javascript)

리팩토링 이후의 모든 내용은 다음과 같습니다. GIT 5 단계

마무리

SWR 과 Ether.js Ethereum dapp으로 데이터 가져 오기 전략을 간소화하려는 경우 사용할 수있는 두 개의 멋진 라이브러리입니다..

주요 장점
  • 선언적 접근
  • 웹 소켓 또는 SWR 옵션을 통해 항상 최신 데이터
  • 맞춤형 React 컨텍스트로 상태 관리를위한 바퀴를 재발 명하지 마십시오.

dapp에서 여러 스마트 계약을 사용하고이 튜토리얼이 마음에 든다면 web3 가져 오기 프로그램을 작은 유틸리티로 일반화했습니다. swr-eth (별은 감사합니다 &# 128123;)

마지막으로 전체 GIT 저장소는 다음과 같습니다.https://github.com/aboutlo/swr-eth-tutorial).

받은 편지함으로 직접 더 많은 이더 리움 자습서 받기

최신 Ethereum 개발자 과정, 도구, 전문가 팁 등을 보려면 뉴스 레터를 구독하십시오.. InfuraMetaMask 뉴스 레터 최신 이더 리움 뉴스, 엔터프라이즈 솔루션, 개발자 리소스 등에 대한 뉴스 레터를 구독하십시오.성공적인 블록 체인 제품을 구축하는 방법웨비나

성공적인 블록 체인 제품을 구축하는 방법

이더 리움 노드를 설정하고 실행하는 방법웨비나

이더 리움 노드를 설정하고 실행하는 방법

나만의 Ethereum API를 구축하는 방법웨비나

나만의 Ethereum API를 구축하는 방법

소셜 토큰을 만드는 방법웨비나

소셜 토큰을 만드는 방법

스마트 계약 개발에서 보안 도구 사용웨비나

스마트 계약 개발에서 보안 도구 사용

금융 디지털 자산 및 DeFi의 미래웨비나

금융의 미래 : 디지털 자산 및 DeFi

Mike Owergreen Administrator
Sorry! The Author has not filled his profile.
follow me