<aside> 💡 web3-react-js 와 ethers.js 를 같이 사용하여 구현했습니다.

</aside>

Web3.js 를 사용하게 된 이유

🧐 Web3.js를 사용한 이유 : MetaMask와 Coinbase가 같은 Ethereum 기반으로 이루어져 있어서 사용자가 MetaMask와 Coinbase Wallet 확장을 모두 설치한 경우 주입된 공급자에 연결하면 두 확장 모두 지갑 연결을 위한 팝업 창을 띄우는 상황이 발생합니다.

참고

• https://stackoverflow.com/questions/69377437/metamask-conflicting-with-coinbase-wallet
• https://docs.cloud.coinbase.com/wallet-sdk/docs/injected-provider-guidance

위의 두 가지 방법으로 해결해 보려고 했지만 어려움이 있었습니다.

1. 지갑을 gt-client 사이트에 연결 시 Coinbase 지갑 주소를 등록하지만, MetaMask로 인식하여 지갑이 등록되는 문제가 발생
2. MetaMask 와 Coinbase의 확장 프로그램이 두 가지 다 설치되어 있는 경우에 MetaMask의 메인넷 주소가 바뀌어도 메인넷 바뀜 자동 감지 기능이 동작하지 않았습니다

지갑 연결 방법

참고 : https://docs.cloud.coinbase.com/wallet-sdk/docs/web3-react#additional-resources

<aside> 💡 MetaMask와 Coinbase 중 CoinbaseWallet만 web3를 적용했습니다.

</aside>

설치

npm install ethers
npm install web3 # optional

npm install @web3-react/core
// 6 version

• index.js

import { Web3ReactProvider } from "@web3-react/core";
import { ethers } from "ethers";

const getLibrary = (provider) => {
  const library = new ethers.BrowserProvider(provider);
  library.pollingInterval = 8000; // frequency provider is polling
  return library;
};

ReactDOM.render(
  <Web3ReactProvider getLibrary={getLibrary}>
    <BrowserRouter>
      <ScrollToTop />
      <App />
    </BrowserRouter>
  </Web3ReactProvider>,
  document.getElementById("root")
);