[Solana] nft 민팅 사이트 만들기 1탄

🚨 본 글은 공부한 내용을 정리하는 글입니다. 틀린 정보가 있을 수 있으니 주의바랍니다. 댓글은 언제나 환영입니다.

이더리움에 비해 가스비도 저렴하고 속도도 빠른 솔라나에서 nft 민팅 사이트를 만들어보려고 한다. 솔라나를 처음 배우기 때문에 프로젝트를 만들면서 배우는 게 가장 좋다고 생각했다. buildspace 에서 다양한 프로젝트를 경험할 수 있도록 해주는데 여기서 Ship your custom NFT Collection on solana w/ Metaplex 를 통해 솔라나 민팅에 대해 배우고자 한다.

📍 최종 목표

---

최종 화면은 위 사진처럼 민팅 사이트를 만들고, 다른 사람들이 와서 팬텀 지갑을 이용해 nft를 민팅할 수 있도록 할 예정이다.

Metaplex

---

이더리움에서는 OpenZeppelin ERC-721 NFT 컨트랙트를 이용해서 mint 함수를 통해 nft를 민팅한다. 하지만 솔라나에는 Metaplex라는 라이브러리를 이용하면 컨트랙트 작성할 필요 없이 nft 민팅 기능을 구현할 수 있다.

또한 Metaplex에는 모든 nft가 민팅돼서 남아 있는 nft가 없을 때 사용자 지갑에서 돈이 빠져나가지 않도록 해주는 기능이 있다. 이더리움에서처럼 코드를 한 땀 한 땀 작성해도 되지만 라이브러리를 사용하는게 훨씬 안정적이고 편리하다.

App.js

---

import React from 'react';
import './App.css';
import twitterLogo from './assets/twitter-logo.svg';

// Constants
const TWITTER_HANDLE = '_buildspace';
const TWITTER_LINK = `https://twitter.com/${TWITTER_HANDLE}`;

const App = () => {
  return (
    <div className="App">
      <div className="container">
        <div className="header-container">
          <p className="header">🍭 Candy Drop</p>
          <p className="sub-text">NFT drop machine with fair mint</p>
        </div>
        <div className="footer-container">
          <img alt="Twitter Logo" className="twitter-logo" src={twitterLogo} />
          <a
            className="footer-text"
            href={TWITTER_LINK}
            target="_blank"
            rel="noreferrer"
          >{`built on @${TWITTER_HANDLE}`}</a>
        </div>
      </div>
    </div>
  );
};

export default App;

처음 깃헙에서 fork 해오면 App.js는 요렇게 돼있다. 여기서 맨 처음 추가해야 하는 것은 팬텀지갑이 사용자에 있는지 확인하는 것. return 위에 아래 코드들을 추가해준다.

 //팬텀 지갑 연결 체크
  const checkIfWalletIsConnected = async () => {
    try {
      const { solana } = window;

      if (solana && solana.isPhantom) {
          console.log('Phantom wallet found!');
        	
		  //이전에 지갑을 연결한 적 있으면 지갑에서 웹사이트를 trusted로 등록하게 한다.
          const response = await solana.connect({ onlyIfTrusted: true });
          console.log('Connected with Public Key:',
            response.publicKey.toString()
          );
      } else {
        alert('Solana object not found! Get a Phantom Wallet 👻');
      }
    } catch (error) {
      console.error(error);
    }
  };

 //페이지 로딩이 완료되고 나서 지갑 연결 체크
  useEffect(() => {
    const onLoad = async () => {
      await checkIfWalletIsConnected();
    };
    window.addEventListener('load', onLoad);
    return () => window.removeEventListener('load', onLoad);
  }, []);

팬텀 지갑을 설치하면 solana가 같이 설치되는데, solana.isPhantom 을 통해 사용자에게 팬텀지갑이 있는지 확인할 수 있다. 이 때 안전하게 페이지가 모두 준비되면 지갑 체크 함수를 실행한다.

👏 현재까지 상황

---