인프런 nft 강좌 #2 - react 세팅

📌 세팅

현재 web3 관련해서 create-react-app으로 생성 시 버그가 있으므로, 아래 boiler-plate를 clone해서 사용하자.

( https://github.com/h662/web3-boilerplate )

 

🔖 UI

chakra ui를 사용하자. ( https://chakra-ui.com/ )

npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6

 

🔖 index.tsx

import React from "react";
import ReactDOM from "react-dom";

import App from "./App";
import reportWebVitals from "./reportWebVitals";

import {ChakraProvider} from "@chakra-ui/react"

ReactDOM.render(
  <React.StrictMode>
    <ChakraProvider>
    <App />
    </ChakraProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

App 부분을 ChakraProvider로 감싸주기만 하면 끝이다.

 

🔖 react-router-dom 설치

npm i react-router-dom

📦 에러 관련 세팅

npm i react-app-rewired

 

🔖 config-overrides.js

module.exports = function override(config, env) {
    config.module.rules.push({
      test: /\.mjs$/,
      include: /node_modules/,
      type: "javascript/auto",
    });
  
    return config;
  };

 

🔖package.json

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

 

위처럼 작성돼 있는 script 부분을 아래와 같이 바꿔주자.

 

  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },

📦  기본 세팅 - router

🔖 App.tsx

import React, { FC } from "react";
import {Button} from "@chakra-ui/react"
import {BrowserRouter, Route, Routes} from 'react-router-dom'
import Main from "./routes/main";

const App: FC = () => {
  return(
    <BrowserRouter>
      <Routes>
        <Route path="/" element = {<Main/>}/>
      </Routes>
    </BrowserRouter>
  )
};

export default App;

 

🔖 src >  routes > main.tsx

import React , {FC} from 'react';
import {Box} from '@chakra-ui/react'

const Main: FC = () =>{
    return <Box>Main</Box>
}

export default Main

📌 web3 세팅

기본적으로 metamask 설치가 필요하다.

npm i web3 web3-utils

• web3는 프론트에서 스마트 컨트렉트를 읽어올 수 있는 라이브러리이다.

📦 Abi 가져오기

src > contracts > index.ts 생성

🔖index.ts

import {AbiItem} from "web3-utils"

const mintAnimalTokenAbi: AbiItem[]
const saleAnimalTokenAbi: AbiItem[]

해당 ABI를 복사한다.

그리고 각 AbiItem[] 뒤에 = 를 붙이고, ABI를 붙여놔준다.

📦 address 가져오기

metamask와 연결해주자.

이 때, ganache-cli 와 geth를 이용해서 테스트넷을 구성할 것이다.

( gas 비가 드는데, 나머지 네트워크들은 다 비용이 든다 ㅠ )

자세한 내용은 전에 썼던 블로그 내용을 확인하자.

mintAnimalToken.sol을 먼저 배포해주고, 후에 mintAnimalToken.sol 의 주소를 복사해서 SaleAnimalToken.sol도 배포해주자.

그리고 배포된 컨트렉트의 주소를 각각의 address 에 넣어주자.

 

🔖 index.ts

import {AbiItem} from "web3-utils"
import Web3 from "web3"

const mintAnimalTokenAbi: AbiItem[] = [...]
const saleAnimalTokenAbi: AbiItem[] = [...]


const mintAnimalTokenAddress = "0xf4c098AeEAFCBA566aB920FEadbB495b2F9C8F3F"
const saleAnimalTokenAddress = "0xE557E0586aB3caf70Cc6d105D4f213E222257CD1"

export const web3 = new Web3(window.ethereum)

export const mintAnimalTokenContract = new web3.eth.Contract(
	mintAnimalTokenAbi,
	mintAnimalTokenAddress
)

export const saleAnimalTokenContract = new web3.eth.Contract(
	saleAnimalTokenAbi,
	saleAnimalTokenAddress
)

 

이제 실행해보자.

react와 연결하라고 뜬다.