리액트로 metamask 지갑 연결

먼저 간단하게 react 셋팅해주시면 됩니다. npx create-react-app 으로만 진행하시면 됩니다.

 

1. 먼저 App.js에서 requestAccount function이 적용될 button과 나중에 ethereum 주소가 나올 위치만 선정해서 구현해놓습니다.

// App.js

import logo from "./logo.svg";
import "./App.css";

function App() {

  async function requestAccount() {
    console.log(window.ethereum);
  }

  return (
    <div className="App">
      <header className="App-header">
        <button onClick={requestAccount}>Request Account</button>
        <h3>Wallet Address: 02x...ccc</h3>
      </header>
    </div>
  );
}

export default App;

• 현재 console을 통해 window.ethereum 여부에 따라 구분지어서 진행할 수 있다는 의미에 해당합니다. 

console.log(window.ethereum)

2. window.ethereum에 조건에 따라서 metamask가 설치가 되어 있다면 지갑을 열어서 해당 주소를 가지고 오게 하고 없다면 Meta Mask not detected err를 발생시킵니다.

  async function requestAccount() {
    console.log("Requesting account...");
    if (window.ethereum) {
      console.log("detected");
      try {
        const accounts = await window.ethereum.request({
          method: "eth_requestAccounts",
        });
        console.log(accounts)
      } catch (err) {
        console.log("Error connecting...");
      }
    } else {
      console.log("Meta Mask not detected");
    }
  }

 

• 만약 지갑이 연결되어 있지 않으면 metamask 연결하라는 창이 나오고 접속을 했을 때 해당 console.log에는 ethereum 주소 확인이 가능합니다.

console.log(accounts)

3. useState를 활용해서 request Account 클릭시 accounts[0]의 값을 담아서 Wallet Address에 보여주게 합니다.

import logo from "./logo.svg";
import "./App.css";
import { useState } from "react";

function App() {
  const [walletAddress, setWalletAddress] = useState("");

  async function requestAccount() {
    console.log("Requesting account...");
    if (window.ethereum) {
      console.log("detected");
      try {
        const accounts = await window.ethereum.request({
          method: "eth_requestAccounts",
        });
        setWalletAddress(accounts[0]);
      } catch (err) {
        console.log("Error connecting...");
      }
    } else {
      console.log("Meta Mask not detected");
    }
  }

  return (
    <div className="App">
      <header className="App-header">
        <button onClick={requestAccount}>Request Account</button>
        <h3>Wallet Address: {walletAddress}</h3>
      </header>
    </div>
  );
}

export default App;

• walletAddress에 값을 담아서 Wallet Address에 내보낼 것이기 때문에 accounts[0]에는 ethereum address가 있기 때문에 그 값을 setWalletAddress(accounts[0])으로 진행해서 walletAddress에 값을 받게 됩니다. 그럼 walletAddress를 불러오면 현재 유저 이더리움 주소를 가지고 오는 것을 볼 수 있습니다.