Next.jsでMetamask認証をする（Third Webを使用）

備忘録的な感じで書いてます。

Next.jsとTailwind CSSをインストール

プロジェクトを作成する

terminal

npx create-next-app my-project
cd my-project

Tailwind CSSのインストール

terminal

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

テンプレートパスの設定

tailwind.config.js

/** @type {import('tailwindcss').Config} */ 
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

CSSにTailwindディレクティブを追加

globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

ビルドする

terminal

npm run dev

Tailwindが使えるようになっている

index.js

export default function Home() {
  return (
    <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
  )
}

3rdwebのインストール

terminal

npm i @3rdweb/hooks

Third Webプロバイダの設定(_app.js)

_app.js

import "../styles/globals.css";
import { ThirdwebWeb3Provider } from "@3rdweb/hooks";

import "regenerator-runtime/runtime";

function MyApp({ Component, pageProps }) {
  const supportedChainIds = [80001, 4];

  const connectors = {
    injected: {},
  };

  return (
    <ThirdwebWeb3Provider
      supportedChainIds={supportedChainIds}
      connectors={connectors}
    >
      <Component {...pageProps} />
    </ThirdwebWeb3Provider>
  );
}

export default MyApp;

UIの設計（index.js）

index.js

export default function Home() {

  return (
    <div className="flex flex-col items-center justify-center min-h-screen py-2 bg-slate-100">
        <button
          className="px-4 py-2 rounded-md bg-purple-600 cursor-pointer hover:bg-purple-500 text-xl font-semibold duration-100 text-white"
        >
          Connect Wallet
        </button>
    </div>
  );
}

Wallet機能の設計（index.js）

最上部に以下を記述する。

index.js

import { useWeb3 } from "@3rdweb/hooks" 

以下をHome()の中に記述する。

index.js

const { connectWallet, address, error } = useWeb3();

buttonの中にonClickを記述。

index.js

<button className="px-4 py-2 rounded-md bg-purple-600 cursor-pointer hover:bg-purple-500 text-xl font-semibold duration-100 text-white"
onClick={()=>connectWallet("injected")}
>
      Connect Wallet
</button>

ユーザーのウォレットアドレスを表示

index.js

return (
  <div className="flex flex-col items-center justify-center min-h-screen py-2 bg-slate-100">
    {address ? (
      <p className="px-2 py-1 rounded-full bg-gray-200 hover:bg-gray-300 font-mono font-medium cursor-pointer duration-100">
        {address}
      </p>
    ) : (
      <button
        className="px-4 py-2 rounded-md bg-purple-600 cursor-pointer hover:bg-purple-500 text-xl font-semibold duration-100 text-white"
        onClick={()=>connectWallet("injected")}
      >
        Connect Wallet
      </button>
    )}
  </div>
);

エラー処理

index.js

const { connectWallet, address, error } = useWeb3();

error ? console.log(error) : null;

完成！

補足

supportedChainIdsの番号について

80001はMumbai Testnet Network、
4はRinkeby Testnet Networkを表しています。

必要なネットワークを調べる場合は、以下のリンクから検索可能です。
https://chainlist.org/

参考URL

• https://tailwindcss.com/docs/guides/nextjs
• https://dev.to/byteslash/metamask-authentication-in-nextjs-with-third-web-55ff