Opensea 클론코딩

Opensea란?

Opensea 에서는 수많은 NFT가 거래되고 있습니다. 오픈씨가 지원하는 체인은 이더리움, 폴리곤, 그리고 클레이튼이다.

오픈씨는 결제와 경매를 위해 Wrapped Coin을 사용하며,  ETH는 WETH, KLAY는 WKLAY의 형태로 같은 가치를 지닌 토큰 및 NFT를 생성해 거래를 하며, 개인간의 NFT 거래소이다.

 

 

 

1. react로 기본 뼈대만들기

NFT를 보여주기 위한 dApp 개발을 위한 리액트 뼈대를 설정

 

npx create-react-app web3-practice
code web3-practice

create-react-app 명령어가 적용되지 않는 문제점이 있었다.

다른곳에 리액트 5.0.0이 깔려있어서 그런 것인지, 기존의 다른곳에 설치된 리액트를 삭제. 결국엔 4.0.3 설치 함으로써 해결 할 수 있었다.

 

npm install -g create-react-app
npm add create-react-app
npx create-react-app --scripts-version 4.0.3 ...

 

참고링크:https://github.com/facebook/create-react-app/issues/11756

 

 

 

app.js

import './App.css';

function App() {
  return (
    <div className="App">
      
    </div>
  );
}

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

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

 

 

2. 메타마스크 지갑 연결

이더리움 객체 가져오기

 

EIP-1139를 통해 지갑 소프트웨어는 웹 페이지에 자바스크립트 객체 형태로 window.ethereum 은 공급자 객체이기 때문에 web3.js를 사용할 수 있게 해준다.

 

먼저 web3 설치

npm install web3

공급자 객체 연결은 처음 한번만 하면 되기 때문에 useEffect()를 사용해 컴포넌트가 처음 마운트 되었을 때 web3 객체를 연결하도록 한다.

 

import {useState} from 'react';
import Web3 from 'web3';

function App() {
		const [web3, setWeb3] = useState();
    useEffect(() => {
        if (typeof window.ethereum !== "undefined") {. // window.ethereum이 있다면
            try {
                const web = new Web3(window.ethereum);  // 새로운 web3 객체를 만든다
                setWeb3(web);
            } catch (err) {
                console.log(err);
            }
        }
    }, []);
}

 

지갑 연결하기

"Connect to Metamask" 버튼을 만들어, 해당 버튼을 누르면 어플리케이션에 메타마스크 지갑을 연결하도록 한다

메타마스크 지갑을 연결하여, 메타마스크를 통해 web3를 사용한다

 

버튼을 생성, connectWallet()함수를 실행하는 이벤트를 추가

function App() {
	//...
    return (
        <div className="App">
            <button
                className="metaConnect"
                onClick={() => {
                    connectWallet();
                }}
            >
                connect to MetaMask
            </button>
        </div>
    );
}

connectWallet() 함수는 메타마스크로부터 계정을 연결하고, 계정 주소를 상태로 저장

window.ethereum.request({method: 'eth_requestAccounts'}) 는 메타마스크 지갑과 연결된 계정 정보를 받는 JSON-RPC Call API 입니다

 

function app() {
	const [account, setAccount] = useState('');
	// ...

	const connectWallet = async () => {
        accounts = await window.ethereum.request({
            method: "eth_requestAccounts",
        });

        setAccount(accounts[0]);
    };

	return (
        <div className="App">
            <button
                className="metaConnect"
                onClick={() => {
                    connectWallet();
                }}
            >
                connect to MetaMask
            </button>
            <div className="userInfo">주소: {account}</div>  // 연결된 계정 주소를 화면에 출력합니다
        </div>
    );
}

잔액 조회하기

"getBalance" 버튼을 만들어 메타마스크에 연결한 어카운트에 있는 잔고를 조회한다.
( +오픈씨와 같이 이더리움말고도 클레이튼도 보이게 추가해봐야겠다..)

function app() {
	const [balance, setBalance] = useState('');
	// ...

	const getBalance = async (address) => {
    	web3.eth.getBalance(address)
        .then((result) => {
        	setBalance(result)
            })
        }

	return (
        <div className="App">
           // ...
           <button className="metaConnect" onclick={() => {getBalance(account)}}>
           		getBalance
           </button>
    );
}

 

이렇게 했을경우 wei(이더리움 가장 작은 단위) 단위값 를 반환하게 되어 소수점 표현이 안된다.

 

setBalance(web3.utils.fromWei(result, "ether") + "ETH")

로 적용해주어 소수점까지 표현할 수 있게된다.