Web3Modalなどのウォレットログイン機構

はじめに

もともとブラウザにログインする形でのdAppsでの通貨の管理について、Web3.jsなどでログイン機構と残高の管理を実装していましたが、Ethereumに加えてMaticやFLOWなど様々なものを管理する必要がでてきたので、いくつか方法を書いておきたいと思います。

Web3Modal(ETH/MATIC)を利用する

Webからモーダルを開く。ChromeなどにインストールしたMetamaskと連動できるので既存のMetamaskユーザーには新たに何かする必要がないので便利。

install

npm install --save web3modal

example

import Web3Modal from 'web3modal'

let web3Modal
if (typeof window !== 'undefined') {
  web3Modal = new Web3Modal({
    network: 'mainnet', // optional
    cacheProvider: true,
    providerOptions, // required
  })
}

customのwalletリンクも貼れるので便利に使えます。
Walletごとにネットワークを選ぶことも可能

  'custom-walletlink': {
    display: {
      logo: '',
      name: '',
      description: 'Connect to demo Wallet',
    },
    options: {
      appName: '',
      networkUrl: `https://mainnet.infura.io/v3/${INFURA_ID}`,
      chainId: 1,
    },

doc

BLOCTO(FLOW)

FLOWの場合は、BLOCTOを利用する。
必要最低限の実装でモーダルログインを実装できる。

instrall

npm install @onflow/fcl --save

example

  import * as fcl from "@onflow/fcl";

  const [user, setUser] = useState({loggedIn: null,addr:null})
  useEffect(() => fcl.currentUser.subscribe(setUser), [])

doc

BLOCTO(ETH/MATIC)

install

npm install @web3-react/core
npm install @blocto/blocto-connector

example

import { useWeb3React } from '@web3-react/core'
import { BloctoConnector } from '@blocto/blocto-connector'

export const Wallet = () => {
  const { chainId, account, activate, active } = useWeb3React<Web3Provider>()

  const onClick = () => {
    activate(connector)
  }

  return (
    <div>
      {active ? (
        <button type="button" onClick={onClick}>
          Connect
        </button>
      )}
    </div>
  )
}

doc

BLOCT　CLIENT側

EthereumなどFlow以外のトークンは、BloctoWallet側であらかじめ追加しておく必要があるが、

Ethereumの場合は、BloctoWalletの連動にはコントラクトの制御がひつようなようでGasPriceがかかるようで、かなりお高め。