[CloseSea] 지갑연결 버튼

지갑 연결 버튼 컴포넌트

import React from "react";
const ConnectWalletBtn = ({ setAccount }) => {
  const getRequestAccount = async () => {
    const [account] = await window.ethereum.request({
      method: "eth_requestAccounts",
    });
    return account;
  };
  const connectWallet = async () => {
    const account = await getRequestAccount();
    setAccount(account);
    localStorage.setItem("account", account);
    window.ethereum.on("accountsChanged", async () => {
      const account = await getRequestAccount();
      setAccount(account);
      localStorage.setItem("account", account);
    });
  };

  return <div onClick={connectWallet}>지갑 연결</div>;
};

export default ConnectWalletBtn;

window.ethereum은 메타마스크가 있다면 실행할 수 있다.

method에 account를 요청하고 on함수를 통해 account가 바뀌면 감지할수 있도록 설정해놨다.

첫 마운트시 지갑과 네트워크 비교 로직

useEffect(() => {
    if (window.ethereum) {
      const web3 = new Web3(window.ethereum);
      setWeb3(web3);
    }
    (async () => {
      const getAccount = localStorage.getItem("account");
      if (getAccount) {
        const [metaAccount] = await window.ethereum.request({
          method: "eth_requestAccounts",
        });
        if (getAccount === metaAccount) {
          setAccount(getAccount);
          window.ethereum.on("accountsChanged", async () => {
            const account = await window.ethereum.request({
              method: "eth_requestAccounts",
            });
            setAccount(account);
            localStorage.setItem("account", account);
          });
          setLoading(true);
          await window.ethereum
            .request({
              jsonrpc: "2.0",
              method: "wallet_switchEthereumChain",
              params: [{ chainId: "0x5" }],
            })
            .catch(() => {
              alert("goerli 네트워크에서만 사용가능");
            });
          setLoading(false);
          window.ethereum.on("chainChanged", async function (networkId) {
            if (networkId !== "0x5") {
              setLoading(true);
              await window.ethereum
                .request({
                  id: 1,
                  jsonrpc: "2.0",
                  method: "wallet_switchEthereumChain",
                  params: [{ chainId: "0x5" }],
                })
                .catch(() => {
                  alert("goerli 네트워크에서만 사용가능");
                });
              setLoading(false);
            }
          });
        }
      }
    })();
  }, []);

account값을 로컬스토리지에 저장해놓고 새로고침시 로컬스토리지에 있는값과 현재 account를 비교했다.