OpenSea Clone (1)

Clone OpenSea_Wallet

1. 메타마스크 지갑 연결

아무래도 오픈씨는 NFT Marketplace이니까 지갑연결이 제일 먼저이다!
먼저 지갑연결을 위해 메타마스크는 Web3, 카이카스는 caver-js mondule을 사용했다

_app.js

useEffect(() => {
    if (typeof window.ethereum !== "undefined") {
      try {
        const web = new Web3(window.ethereum);
        setWeb3(web);
      } catch (err) {
        console.log(err);
      }
    }
    if (typeof klaytn !== "undefined") {
      try {
        const caver = new Caver(klaytn);
        setCaver(caver);
      } catch (err) {
        console.log(err);
      }
    }
  }, []);

  const connectWallet = async () => {
    accounts = await window.ethereum.request({
      method: "eth_requestAccounts",
    });
    setAccount(accounts[0]);
    setWalletType("eth");
  };
 const connectKaikas = async () => {
    accounts = await klaytn.enable();
    setAccount(accounts[0]);
    setWalletType("klay");
  };

• useEffect를 이용해 화면 시작시, 메타마스크 또는 카이카스와 연결이 되어있는 지 확인하고 객체를 생성한다 생성한 객체는 useState를 이용해 저장한다

• connectKaikas :함수 실행시 카이카스 지갑주소를 요청하며 받아온 지갑주소와 연결된 지갑의 형태를 klay로 useState를 이용해 관리한다

  • 자세한 내용은 클레이튼 공식문서에서 확인 가능하다

• connectWallet : 함수 실행시 이더리움 지갑주소를 요청하며, 받아온 지갑주소와 연결된 지갑의 형태를 eth로 useState를 이용해 관리한다

  • 자세한 내용은 메타마스크 공식문서에서 확인 가능하다

실제 실행 화면

2. 메타마스크 지갑을 통해 로그인 관리

사실 지갑주소를 연결하기만 해도 로그인이 되었다고 표현할 수 있다.
그러나 지갑이 연결되어 있다는걸 확인하기 편리하게 상태 관리로 표현하였다

header.js

const loginButton = () => {
    if (!isLogin) {
      connectWallet();
    }
    if (isLogin) {
      setAccount("");
    }
    setIsLogin(!isLogin);
    tokenSave(account);
  };
  const kaikasLoginButton = (e) => {
    if (!isLogin) {
      connectKaikas();
    }
    if (isLogin) {
      setAccount("");
    }
    setIsLogin(!isLogin);
    tokenSave(account);
  };

• loginButton : 로그인 버튼을 누르면 로그인을 isLogin을 통해 저장하고 메타마스크또는 카이카스 로그인 상태에서 다시 버튼을 누르면 주소값을 초기화하는 간단한 로직을 만들었다

_app.js

function MyApp({ Component, pageProps }) {
  ...
  return(
    ...
      {(!isLogin && router.route === "/") || isLogin ? (
        <Component
		  caver={caver}
          web3={web3}
          account={account}
          isLogin={isLogin}
          setIsLogin={setIsLogin}
          connectWallet={connectWallet}
		  connectKaikas={connectKaikas}
		  walletType={walletType}
        />
      ) : (
        <Notlogin isLogin={isLogin} setIsLogin={setIsLogin} connectWallet={connectWallet} />
      )}
   ...
   )
}

• 위에서 만든 로그인을 통해 초기페이지가 아닌 다른페이지에서 로그인이 안되있을 경우 로그인을 할 수 있는 페이지를 만들어서 이동시키도록 했다

실제 실행 화면

마치며

OpenSea를 클론하기 위한 간단한 준비를 마쳤으며 다음 목표로 넘어가보쟈 😀😀