Nuxt3とMetaMaskを使ってウォレットに接続する方法

前提

この記事を読む前に、以下の前提条件を確認してください。

1. 基本的なプログラミング知識: この記事は、基本的なプログラミングの知識を持っている方を対象としています。特にJavaScriptやVue.jsの基本的な概念についての理解が必要です。

2. Nuxt3の環境: 本記事の内容を実際に試す場合、Nuxt3の開発環境がセットアップされていることが前提となります。まだセットアップしていない方は、公式ドキュメントを参考にしてください。

3. MetaMaskのインストール: 実際の接続テストを行うためには、ブラウザにMetaMaskの拡張機能がインストールされている必要があります。

これらの前提を満たしている方は、次のセクションに進んでください。それでは、Nuxt3とMetaMaskを使用してEthereumアカウント(Wallet)に接続する方法を一緒に学びましょう。

必要なツールとライブラリ

本記事での実装に進む前に、以下のツールとライブラリが必要となります。これらを正しくセットアップすることで、スムーズに開発を進めることができます。

Ethers.js

Ethers.jsは、Ethereumのブロックチェーンとのやり取りを簡単にするためのJavaScriptライブラリです。スマートコントラクトの呼び出しやトランザクションの送信など、Ethereum関連の多くの操作をこのライブラリを通じて行うことができます。

npm install --save ethers @metamask/providers
または
yarn add ethers @metamask/providers

MetaMask

既に前提として挙げましたが、MetaMaskはEthereumのウォレットとして機能するブラウザ拡張機能です。この拡張機能を通じて、ウェブアプリケーションからEthereumのネットワークにアクセスすることができます。

インストール方法

MetaMask公式サイトから、ご使用のブラウザに合わせてダウンロードしてください。
もしくはMetaMaskの拡張機能

実装

1. MetaMaskがインストールされていない場合エラーが発生します。（MetaMaskがインストールされていません。）
2. 拡張機能のメタマスクが立ち上がります。
3. 操作を進め、接続すると account にWalletアドレスが設定されます。
   ※ その他例外が発生するとそれぞれのエラーメッセージが設定されます。

const account = ref<string | null>(null);
const errorMessage = ref<string | null>(null);

const connectToMetamask = async () => {
  if (window.ethereum == null) {
    errorMessage.value = "MetaMaskがインストールされていません。";
    return;
  }

  const provider = new ethers.BrowserProvider(window.ethereum);

  try {
    const signer = await provider.getSigner();
    account.value = await signer.getAddress();
    errorMessage.value = null;
  } catch (error: any) {
    if (error.code === 'ACTION_REJECTED') {
      errorMessage.value = "ユーザーが接続を拒否しました。";
    } else {
      errorMessage.value = "エラーが発生しました: " + error.message;
    }
  }
}

簡単なUI

接続する用のボタンと、解除の案内を設置しておきます。
※ 機能としてウォレットの解除がないので、ユーザー操作で解除するしかない

<template>
  <div>
    <v-container>
      <div 
        v-if="!account"
        class="text-h5"
      >
        <p>Ethers.jsを使ってMetaMaskに接続する</p>
        <v-btn @click="connectToMetamask">MetaMaskに接続</v-btn>
      </div>
      <v-card v-else>
        <v-card-title>MetaMaskに接続しました</v-card-title>
        <v-card-subtitle>アカウント: {{ account }}</v-card-subtitle>
        <v-card-text>
          <p>接続を解除するには、Google拡張機能のMetaMaskから操作し、リロードしてください。</p>
        </v-card-text>
      </v-card>
      <div v-if="errorMessage">{{ errorMessage }}</div>
    </v-container>
  </div>
</template>

初期表示

一応、初期表示でもウォレットに接続させるように。

onMounted(() => {
  connectToMetamask();
});

アンビエント宣言

このままだと、おそらく型エラーを出ちゃいます。
TypeScriptを使用している場合、window.ethereumのようなグローバルオブジェクトに新しいプロパティを追加する際には、アンビエント宣言（Ambient Declaration）をしてもいいかなと思います。
※ 自分は気になるので一応。

window.d.ts

import { MetaMaskInpageProvider } from "@metamask/providers";

export declare global {
  interface Window {
    ethereum: MetaMaskInpageProvider;
  }
}

まとめ

本記事では、Nuxt3とMetaMaskを利用してEthereumアカウントに接続する方法を書いてみました。今後、さまざまなDApp（分散型アプリケーション）やブロックチェーン関連の拡張もしてみようかと思います。

今回のページ: https://study.theblueback.com/ethers

【今回の作業ブランチ】
https://github.com/yutahhh/firebase-study/tree/feature/%2312

お疲れ様でした。