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

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

## Next.jsとTailwind CSSをインストール
https://tailwindcss.com/docs/guides/nextjs

### プロジェクトを作成する
```console:terminal
npx create-next-app my-project
cd my-project
```

### Tailwind CSSのインストール
```console:terminal
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```

### テンプレートパスの設定
```react: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ディレクティブを追加
```css:globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

### ビルドする
```console:terminal
npm run dev
```

### Tailwindが使えるようになっている
```react:index.js
export default function Home() {
  return (
    <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
  )
}
```

## 3rdwebのインストール
```console:terminal
npm i @3rdweb/hooks
```

## Third Webプロバイダの設定(_app.js)
```react:_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）
```react: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）
最上部に以下を記述する。
```react:index.js
import { useWeb3 } from "@3rdweb/hooks" 
```

以下をHome()の中に記述する。
```react:index.js
const { connectWallet, address, error } = useWeb3();
```
buttonの中に`onClick`を記述。
```react: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>
```

## ユーザーのウォレットアドレスを表示
```react: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>
);
```

## エラー処理
```react: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