React Web3 for Metamask Connection

필요 라이브러리 및 개념

• web3
• metamask
• react-web3
• @ethersproject (aka. ethers.js)

yarn add -D @web3-react/core @ether @ethersproject/providers

import { Web3Provider } from '@ethersproject/providers'

export default function getLibrary(provider: any): Web3Provider {
  const library = new Web3Provider(provider, 'any')
  library.pollingInterval = 15000
  return library
}

export const NetworkContextName = 'NETWORK'

import { StrictMode } from 'react'
import ReactDOM from 'react-dom'
import App from './pages/App'
import reportWebVitals from './reportWebVitals'

import { NetworkContextName } from './constants'
import getLibrary from './utils/getLibrary'

import { createWeb3ReactRoot, Web3ReactProvider } from '@web3-react/core'

const Web3ProviderNetwork = createWeb3ReactRoot(NetworkContextName)

ReactDOM.render(
  <StrictMode>
    <Web3ReactProvider getLibrary={getLibrary}>
      <Web3ProviderNetwork getLibrary={getLibrary}>
        <App />
      </Web3ProviderNetwork>
    </Web3ReactProvider>
  </StrictMode>,
  document.getElementById('root')
)
reportWebVitals()

yarn add -D @web3-react/injected-connector @web3-react/abstract-connector

import { InjectedConnector } from '@web3-react/injected-connector'

export const injected = new InjectedConnector({
  supportedChainIds: [1, 3, 4, 5, 42]
})

import { AbstractConnector } from '@web3-react/abstract-connector'

import { AbstractConnector } from '@web3-react/abstract-connector'
import { injected } from 'connectors'

export const NetworkContextName = 'NETWORK'
export enum ChainId {
  MAINNET = 1,
  ROPSTEN = 3,
  RINKEBY = 4,
  GÖRLI = 5,
  KOVAN = 42,
}

export interface WalletInfo {
  connector?: AbstractConnector
  name: string
  iconName: string
  description: string
  href: string | null
  color: string
  primary?: true
  mobile?: true
  mobileOnly?: true
}

export const SUPPORTED_WALLETS: { [key: string]: WalletInfo } = {
  INJECTED: {
    connector: injected,
    name: 'Injected',
    iconName: 'arrow-right.svg',
    description: 'Injected web3 provider.',
    href: null,
    color: '#010101',
    primary: true
  },
  METAMASK: {
    connector: injected,
    name: 'MetaMask',
    iconName: 'metamask.png',
    description: 'Easy-to-use browser extension.',
    href: null,
    color: '#E8831D'
  },