Zenn
😃

Next.jsでThirdwebのSmart WalletとEmbedded Walletsを試してみた

2023/10/05に公開
Next.js
#
thirdweb
tech

はじめに

ThirdwebのWallet機能がいろいろと充実しているので、Smart WalletとEmbedded Walletsを試してみました。ERC-4337に準拠したSmart WalletとEmbedded Walletsによって、メールやソーシャルログインで使えて、さらにSmart Walletではガスレスも対応できているのが良いです。

読者対象

  • Next.jsの開発経験がある
  • Thirdwebのダッシュボードを使ったことがある

準備（Thirdwebのダッシュボードから）

Thirdweb
https://thirdweb.com/

手順（チェーンはMumbai）

  1. SettingsからAPI Keysを作成
  2. ContractsのExploreからSmart walletのAccount Factoryを作成
  3. WalletsのConnectからWalletを設定して生成コードを作成

1. SettingsからAPI Keyを作成

2. ContractsのExploreからSmart walletのAccount Factoryを作成
今回はAccount Factoryを作成してみました。

作成されたものが確認できます。
このコントラクトアドレスはページを実装するときにfactoryAddressとして必要です。

3. WalletsのConnectからWalletを設定して生成コードを作成
今回はMetaMaskとEmbedded WalletsとSmart Walletを選びました。
（Smart Walletを使うには、少なくとも１つのWalletを選択します）
ここで生成されるコードを参考に実装していきます。

生成されたコード

import {
  ThirdwebProvider,
  ConnectWallet,
  metamaskWallet,
  embeddedWallet,
} from "@thirdweb-dev/react";

const smartWalletOptions = {
  factoryAddress: "YOUR_FACTORY_ADDRESS",
  gasless: true,
};

export default function App() {
  return (
    <ThirdwebProvider
      activeChain="mumbai"
      clientId="YOUR_CLIENT_ID"
      supportedWallets={[
        smartWallet(
          metamaskWallet({ recommended: true }),
          smartWalletOptions,
        ),
        smartWallet(
          embeddedWallet(),
          smartWalletOptions,
        ),
      ]}
    >
      <ConnectWallet
        theme={"dark"}
        modalSize={"compact"}
      />
    </ThirdwebProvider>
  );
}

コードを書く

生成されたコードを参考に実装していきます。

手順

  • Next.js + Typescriptでプロジェクトを作成
  • SDK入れる ( yarn add @thirdweb-dev/react @thirdweb-dev/sdk ethers@^5 )
  • env.localに作成しておいたAPI KeyとAccount FactoryのAddressを記述
  • _app.tsxを編集
  • index.tsxを編集

Thirdwebバージョン
"@thirdweb-dev/react": "^3.16.2"
"@thirdweb-dev/sdk": "^3.10.64"

サンプルコード
_app.tsx

import "@/styles/globals.css";
import type { AppProps } from "next/app";
import {
  ThirdwebProvider,
  smartWallet,
  metamaskWallet,
  embeddedWallet,
} from "@thirdweb-dev/react";

const activeChain = "mumbai";
const smartWalletOptions = {
  factoryAddress: process.env.NEXT_PUBLIC_FACTORY_ADDRESS || "",
  gasless: true,
};

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ThirdwebProvider
      activeChain={activeChain}
      clientId={process.env.NEXT_PUBLIC_TW_CLIENT_ID}
      supportedWallets={[
        smartWallet(metamaskWallet({ recommended: true }), smartWalletOptions),
        smartWallet(embeddedWallet(), smartWalletOptions),
      ]}
    >
      <Component {...pageProps} />
    </ThirdwebProvider>
  );
}

export default MyApp;

index.tsx

import { ConnectWallet } from "@thirdweb-dev/react";
import type { NextPage } from "next";

const Home: NextPage = () => {
  return (
    <main className="flex flex-col items-center justify-center p-10">
      <div className="">
        <ConnectWallet
          theme={"dark"}
          modalSize={"compact"}
          btnTitle={"Connect Wallet"}
          modalTitleIconUrl={""}
        />
      </div>
    </main>
  );
};

export default Home;

動作確認

yarn devして、
起動させたURL(localhost:3000など)をPCブラウザで確認します。


Gmailログインで認証してみます。
メールアドレス入力の場合は認証コードが送信されますので、そのコードを入力して認証します。

アドレスが生成されました。Smart Walletのアドレスが最初に表示されます。

今回の場合は、Smart WalletとPersonal Wallet (Embedded Wallet)の２つのアドレスが生成されます。

Smart Walletのアドレス
ガスレスに対応しているのはSmart Walletのアドレスです。
Connectted to Smart Walletをクリックすると、ThirdwebのページでAccountの詳細が確認できます。保有しているNFTも確認できます。

Personal Wallet (Embedded Wallet)のアドレス
ThirdwebのダッシュボードでWalletsのEmbedded WalletsからWallet Usersが確認できます。

まとめ

設定から実装までを実験してみましたが、すごく簡単という印象でした。
Thirdwebはダッシュボードも使いやすいですし、ますます進化していますね！

ここには載せていないですが、Smart Walletのアドレスで、MATICの全額送金をテストしましたが、資金不足にならずに送金できました。Personal Wallet (Embedded Wallet)のアドレスだと資金不足エラーが出ます。

また、残高ゼロのSmart Walletのアドレスで、EditionDropのNFT（価格無料）をcontract.erc1155.claimしてみましたが、ガスレスで処理できていました。
（ガス代をどこでどう処理しているのかは理解できなかったですが）

クレカ決済も対応とあるので、今度は機会あればそちらも試してみたいなと思います。

Discussion