まいにちDapps#3 サービス内ウォレットを作成できるツールまとめ

「まいにちDapps」の3日目では、サービス内ウォレットの導入方法について掘り下げていきます。

前回は、mintサイトからクレジットカードを用いて購入できる方法を説明しました。しかしせっかくクレジットカード決済に対応しても、ユーザーにMetamaskなどのウォレットを準備してもらう必要がある場合、非クリプトユーザーにとってのオンボーディングUXが大幅に低下してしまう可能性があります。そのため、サービス固有のウォレットを導入し、従来のWeb2と同様のUXを提供する方法を探求します。

今回もいくつかの方法を試していきましょう

Paper.xyzのEmbedded Wallet
Web3Auth
Crossmint
Privy

Paper.xyzのEmbedded Wallet

前日に続いてPaper.xyzを使用します。PaperはNFTを中心としたDapps開発ツールで、現在はThirdwebに買収され統合が進められています。

こちらの参考記事に従って手順を進めていきましょう。

まず、https://withpaper.com/dashboard/embedded-wallets/auth-settings にアクセスします。ログインを求められる場面で、メールアドレスを入力すると、7桁のワンタイムコードがメールで送信されます。これをペーストすることでログインができます。これこそが今日目指すUXです。

次に、Application NameとAllowlisted Domainsを入力します。localhostでテストするのでDomainにhttp://localhost:3000 を入力します。

Next.jsのプロジェクトを立ち上げます。

npx create-next-app@latest

Thirdwebのセットアップをします。yarn add @thirdweb-dev/react

providers/Providers.tsxというファイルを作り、

"use client";

import { ThirdwebProvider, paperWallet } from "@thirdweb-dev/react";

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <ThirdwebProvider
      activeChain="mumbai"
      supportedWallets={[
        paperWallet({ paperClientId: "your client id" }),
      ]}
    >
      {children}
    </ThirdwebProvider>
  );
}

Layout.tsxからProviderを読み込みます。

page.tsxでConnect Walletボタンを設置します。

"use client";

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

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <ConnectWallet></ConnectWallet>
    </main>
  );
}

メアドでログインが可能なConnect Walletボタンができました。

ウォレットログインが完了した状態になります。

ちなみに他のウォレットと選択制にすることも可能です。

比較的シンプルに導入できたのではないでしょうか？Thirdwebを使うプロジェクトの場合は導入の手軽さから第一の選択肢になりそうです。現在は1000アクティブユーザーまでは無料で使えるようです。

Web3Auth

続いてweb2のAuthとweb3を繋ぐサービスとして人気のweb3Authを紹介します。

https://dashboard.web3auth.io/home/overview にアクセスします。

Quick Startからプロジェクトを作成します。

Next.jsのプロジェクトを立ち上げます。

https://web3auth.io/docs/integration-builder を参考にコードを作成します。

yarn add web3@1.10.0 @web3auth/modal @web3auth/base

（web3のverを指定するのはこのエラーに遭遇したためです）

App.tsxの内容とweb3RPC.tsをコピーして持ってきます。

walletconnectのアップグレードの影響かエラーが出ていたので@walletconnect/sign-client も追加しました。

ログインモーダルができました。

ポップアップでGoogleログインを要求されて、成功すると表示がされます。

個人的には以前同チームが開発するTorus Walletが使いづらかったイメージがあってあまり好印象ではなかったのですが、今やかなり利用率が高く洗練されたサービスになっている印象があります。

FirebaseAuthとのインテグレーションも次回以降で試してみようと思います。

Crossmint

CrossmintでもPaperwalletと同様の機能があるようなので試してみましょう。

まずはこちらの動画を参考にバックエンドのチュートリアルを進めていきます。

https://staging.crossmint.com/console/projects/apiKeys にアクセスしてapiKeyを作成します。

https://docs.crossmint.com/reference/create-wallet に遷移して右のAuthenticationにCLIENT SECRETとProject IDを入れます。

Walletの作成やNFTの発行がAPI経由でできました。特にメールアドレスの認証がないのでテキトーな文字列の実在しないメアドでウォレットが作れてしまうのがあまりよくないなと思いました。

そしてフロントエンドはサンプルが見当たらなかったので自分で作成してみました。

APIを作成してフロントエンドからメールアドレスを入力してPOSTします。

import { NextResponse } from "next/server";

export async function POST(request: Request) {
  const data = await request.json();

  const { email } = data;

  const body = {
    email: email,
    chain: "polygon",
  };

  const response = await fetch(
    `https://staging.crossmint.com/api/v1-alpha1/wallets`,
    {
      method: "POST",
      headers: {
        "X-PROJECT-ID": "your project id",
        "X-CLIENT-SECRET": "your client secret",
        "content-type": "application/json",
      },
      body: JSON.stringify(body),
    }
  );

  const wallet = await response.json();
  console.log(wallet);
  return NextResponse.json(wallet);
}

"use client";

import { useState } from "react";

export default function Home() {
  const [emailAddress, setEmailAddress] = useState("");
  const [wallet, setWallet] = useState("");

  const createWallet = async () => {
    const response: any = await fetch(`/api/create-wallet`, {
      method: "POST",
      body: JSON.stringify({
        email: emailAddress,
      }),
    });
    const result = await response.json();
    console.log(result);
    setWallet(result.publicKey);
  };
  return (
    <main className="flex min-h-screen flex-col items-center p-24">
      <div className="relative mb-6">
        <div className="absolute inset-y-0 left-0 flex items-center pl-3.5 pointer-events-none">
          <svg
            className="w-4 h-4 text-gray-500 dark:text-gray-400"
            aria-hidden="true"
            xmlns="http://www.w3.org/2000/svg"
            fill="currentColor"
            viewBox="0 0 20 16"
          >
            <path d="m10.036 8.278 9.258-7.79A1.979 1.979 0 0 0 18 0H2A1.987 1.987 0 0 0 .641.541l9.395 7.737Z" />
            <path d="M11.241 9.817c-.36.275-.801.425-1.255.427-.428 0-.845-.138-1.187-.395L0 2.6V14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2.5l-8.759 7.317Z" />
          </svg>
        </div>
        <input
          type="email"
          id="input-group-1"
          className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
          placeholder="name@pontech.com"
          onChange={(event) => setEmailAddress(event.target.value)}
        />
      </div>
      <button
        type="button"
        onClick={createWallet}
        className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
      >
        ログイン
      </button>
      {wallet ? <p>ウォレットアドレス：{wallet}</p> : <></>}
    </main>
  );
}