web3란?
front단에서 스마트컨트랙트를 읽어올 수 있도록 만들어주는 라이브러리.
설치 및 사용하기
1. 라이브러리 설치
npm install web3 web3-utils // 두가지 패키지를 설치합니다
2. front단에서 폴더생성
[src] > (src폴더 내부에 생성)[ contracts ] > (contracts 폴더 내부에 생성)[ index.ts ]
3. index.ts
import { AbiItem } from 'web3-utils';
const mintOcnAbi: AbiItem[] // mintOcnAbi의 타입은 배열이라는 뜻
const saleOcnAbi: AbiItem[]abi란 우리가 만든 스마트컨트랙트의 인터페이스가 정의된 파일. (설명서라고 할 수 있다)
그중에서 type을 가지고 있는 것이 abiitem이다.
4. AbiItem 가져오기
리믹스로 간다.
내가 짠 컨트랙트 파일을 컴파일 하면 밑에 contract 칸이 생긴다. 그 밑에 abi를 복사할 수 있는 버튼이 있다.
-> 컨트랙트는 내가 컴파일 하고자 하는 컨트랙트 각각 해주면 된다.
그럼 각각의 abi가 나오고, 그걸 작성하던 index.ts 파일에 써줄 것이다.
5. index.ts
import { AbiItem } from 'web3-utils';
const mintOcnAbi: AbiItem[] = [// 여기에 카피 내용을 복붙해주면 된다]
const saleOcnAbi: AbiItem[] = [// 여기도 마찬가지]
6. address 가져오기
address는 빌드를 해야 나온다.
리믹스로 가서 deploy 페이지로 간다 (세번째 아이콘)
environment를 london -> InjectedWeb3로 바꿔준다. InjectedWeb3를 눌러주면 metaMask와 연결하도록 되어있다.
원하는 계정을 누르고 연결해준다.
이후에 원하는 스마트컨트랙트를 선택해주고 deploy해준다.
- 메타마스크에서 서명이 일어나고 confirm을 눌러주면 deploy 성공이다.
이제 이 contract는 실제 테스트 네트워크에 올라가있는 smart contract가 된다.
=> 여기 deployed contracts 밑에
MINT~ 나오는 주소를 복사해주면 된다.
가져와야 하는 주소는 컨트랙트별로 각각 deploy해줘야한다.
7. index.ts
deploy해서 나온 address를 입력해준다.
import { AbiItem } from 'web3-utils';
const mintOcnAbi: AbiItem[] = [];
const saleOcnAbi: AbiItem[] = [];
const mintOcnAddress = "//여기에 복사된 주소를 넣는다.";
const saleOcnAddress = "//마찬가지"
8. web3 연결하기
index.ts >
import Web3 from "web3";
❣️❣️ window 객체에 metamask를 설치해주면 ethereum이라는 오브젝트가 생성된다.
그런데 리액트가 이것을 인지하지 못한다.
type-script에서는 react-app-env.d.ts 파일에서 이 ethereum의 타입을 강제 지정 해줌으로써, 리액트가 이를 인지할 수 있도록 해준다
react-app-env.d.ts >
/// <reference types="react-scripts"/>
interface Window {
ethereum: any;
}
9. index.ts >
import Web3 from "web3";
export const web3 = new Web3(window.ethereum);
export const mintOcnContract = new web3.eth.Contract(
// 두가지 인자 필요 1.abi 2.address
mintOcnAbi,
mintOcnAddress
);
export const saleOcnContract = new web3.eth.Contract(
saleOcnAbi,
saleOcnAddress
)
10. 메타마스크랑 연결해주기
app.js (실습에서는 ts 파일로 했음.) >
const APP = ()=> {
const [account,setAccount] = ""; // 메타마스크 계정 가져와서 담을 상태 생성
// 메타마스크에서 계정 가져오기 함수
const getAccount = async()=> {
try{// try-catch를 이용
if(window.ethereum){ // 메타 마스크 설치 되어 있으면
const accounts = await window.ethereum.request({ // 계정 가져오기
method : "eth_requestAccounts",
});
setAccount(accounts[0]); // 가져온 계정을 account 상태에 담아라
}else{ // 설치 안되어있으면 alert 띄워라
alert("Please install MetaMask")
}
}
catch(error){
console.error(error);
}
};
useEffect(()=>{
getAccount();
},[]);