NextJS + Web3-React 快速整合以太坊的錢包

Create NextJS Project (TypeScript)

yarn create next-app ether-wallet --ts

Prerequisites

yarn add ethers
yarn add @web3-react/core

Web3ReactProvider

Web3ReactProvider 可以幫我們取得用戶目前所使用的各種 Wallet
只要實作它的 getLibrary 函式，回傳 Web3Provider 即可
這邊使用 ethers 套件下的 Web3Provider

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

function getLibrary(provider:any) {
  return new ethers.providers.Web3Provider(provider);
}

function MyApp({ Component, pageProps }) {
  return (
    <Web3ReactProvider getLibrary={getLibrary}>
      <Component {...pageProps} />
    </Web3ReactProvider>
  );
}

Add Wallet Connectors

新增 Connector.tsx 來定義不同錢包的 Connector
目前大部分常見的錢包都可以找到相對應的 Connector
若是沒有就得自己想辦法實作 abstract connector
目前使用率最高的還是 MetaMask (injected connector)

yarn add @web3-react/injected-connector # Injected (Metamask)
yarn add @web3-react/walletconnect-connector # Wallet Connect
yarn add @web3-react/walletlink-connector # Coinbase Wallet

import { InjectedConnector } from "@web3-react/injected-connector";
import { WalletConnectConnector } from "@web3-react/walletconnect-connector";
import { WalletLinkConnector } from "@web3-react/walletlink-connector";

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

const Walletconnect = new WalletConnectConnector({
  rpc: "https://mainnet.infura.io/v3/84842078b09946638c03157f83405213",
  bridge: "https://bridge.walletconnect.org",
  qrcode: true
});

const Walletlink = new WalletLinkConnector({
  url: "https://mainnet.infura.io/v3/84842078b09946638c03157f83405213",
  appName: "Ether Wallet Demo"
});

export const Connectors = {
  Injected,
  Walletlink,
  Walletconnect
};

Web3React

Web3React 提供了很多 API 可以使用
account, activate, active, chainId, connector, deactivate, error, provider, setError 等
可以即時取得目前用戶 wallet 的連接狀況並進行控管

在此我們使用 3 顆按鈕，點擊時分別會啟用 (activate) 不同的 connector
若是已經連接了 (active)，那只顯示一顆 Disconnect 的按鈕

import { useWeb3React } from '@web3-react/core';
import { Connectors } from '../components/connectors';

const Home: NextPage = () =>
{
  const { active, activate, deactivate } = useWeb3React();
  return (
    <>
      {!active ?
        <>
          <button onClick={() => activate(Connectors.Injected)}>MetaMask</button>
          <button onClick={() => activate(Connectors.Walletconnect)}>Wallet Connect</button>
          <button onClick={() => activate(Connectors.Walletlink)}>Coinbase Wallet</button>
        </>
        :
        <button onClick={() => deactivate()}>Disconnect</button>
      }
    </>
  )
}