👻

Mailchainを使ったNFT取得者への通知方法について

2023/02/08に公開

ブロックチェーン

こちらの記事は、下の記事を翻訳したものです。

このガイドでは、Mailchainとthirdwebを使用して、ユーザーがあなたのNFTを請求した後にメッセージを送信する方法を説明します。

Mailchainは、他のウォレットにメッセージを送ることができるプロトコルです。また、web3のメールとしても機能するため、様々なタスクに柔軟に対応することができます。

私たちの場合、ユーザーがNFTを請求した後、ユーザーのウォレットアドレスにメールを送信します。

ここでは、Mailchainのセットアップ方法、thirdweb上でNFTドロップのコントラクトを作成する方法、そして最後にユーザーにNFT請求時のおけるシームレスな体験を提供するために、両方を統合するdAppを作成する方法を説明します。

Mailchainのアカウントを作成する

Mailchainのウェブアプリにアクセスします。

登録フォームが表示されるので、ユーザー名を作成し、パスワードを設定し、後で必要になるので、詳細オプションから秘密の回復フレーズをコピーします。

ここで、Continueをクリックして、アカウントを作成します。

これで、メールボックスが表示されるはずです。

ウォレットアドレスやENSからメールを送信する場合は、ウォレットを登録することができるようになりました。

このチュートリアルでは、Mailchainのユーザー名を使ってメールを送信することにします。しかし、アドレスを使って送信する場合の手順も全く同じです。

さて、MailchainアプリとそのSDKを通してメールを送ることができます!

Mailchainの仕組みをより理解するために、アプリを使って他のウォレットにメッセージを送信する実験をしてみましょう。

NFTドロップの作成

次に、thirdwebを使用してNFT Dropコントラクトをデプロイします。thirdweb のダッシュボードにあるNFT Dropのデプロイページに移動し、Deploy Nowをクリックします。以下のようなドロワーが表示されるはずです。

必要な情報を入力し、希望のネットワーク（テストネットから始めることをお勧めします）を選択し、Deploy Nowをクリックします。

トランザクションを承認するよう促されます。その後、コントラクトは選択したネットワークにデプロイされます。

NFT Dropダッシュボードに自動的にリダイレクトされるはずです。

フロントエンドアプリケーションでミントする必要があるので、このステップでNFTを自由にアップロード/バッチアップロードしてください。

NFTのアップロードが完了したら、Claim Conditions（請求条件）　タブに移動して請求条件を設定し、ドロップを請求できるようにします。

このステップでは、NFTを請求できる人、各NFTの価格などの詳細を変更することができます。ご希望に応じて自由に変更してください。

フロントエンドアプリケーションからコントラクトとやり取りするために必要ですので、このNFT Dropのコントラクトアドレスをメモしておいてください。

アプリの作成

アプリを作成する

Mailchain と NFT Drop コントラクトがセットアップされたので、アプリを作成します。安全なディレクトリに移動し、ターミナルで次のコマンドを実行します。

npx thirdweb create app

アプリ作成ウィザードが起動し、アプリを作成するための様々な設定を求められるはずです。

このチュートリアルでは、上記の構成を使用しました。しかし、あなたの好きな設定を自由に使ってください。

このアプリは、web3 の機能と thirdweb SDK が組み込まれ、開発プロセスを容易にするためにインストールされます。

アプリの設定

作成されたアプリのディレクトリに移動し、pagesディレクトリの_app.jsファイルを開きます。

ここで、activeChainId を、あなたのコントラクトがデプロイされているネットワークに変更します。

例えば、私のコントラクトがPolygon Mumbaiにデプロイされている場合、ここではChainId.Mumbaiを使用します。

次に、プロジェクトのルートに .env.local という新しいファイルを作成し、以下を追加します。

SECRET_RECOVERY_PHRASE=<secret_recovery_phrase>
MAILCHAIN_ADMIN_USERNAME=<mailchain_admin_username>

これらの値をあなたの認証情報に置き換えていることを確認してください。

さて、設定が完了したのでMailchainを実装してみましょう。

MailchainのAPIルートを作成する

Mailchainと対話するために、Mailchain SDKをインストールする必要があります。

ターミナルで以下のコマンドを実行します。

yarn add @mailchain/sdk

これでMailchain SDKがインストールされ、メールを送信する準備が整いました。

次に、pagesディレクトリにapiという新しいディレクトリを作成し、その中にsend-message.jsという新しいファイルを作成します。

これは、ウォレットにメッセージを送信するためのAPIルートとして機能します。このファイルには、次の内容を記述します。

import { Mailchain } from "@mailchain/sdk";

const mailchain = Mailchain.fromSecretRecoveryPhrase(
  process.env.SECRET_RECOVERY_PHRASE
);

export default async function handler(req, res) {
  try {
    if (req.method != "POST")
      return res.status(405).json({ message: "Please send POST request" });
    const address = req.body.address;
    console.log(address);
    if (!address)
      return res
        .status(400)
        .json({ message: "Please provide a wallet address" });
    // Trigger mail
    const result = await mailchain.sendMail({
      from: `${process.env.MAILCHAIN_ADMIN_USERNAME}@mailchain.com`,
      to: [`${address}@ethereum.mailchain.com`],
      subject: "Thanks for claiming the drop 👋🏻",
      content: {
        text: "We are happy to see you here 👋🏻 Please join our Discord server to access the community 🔥",
        html: "<p>We are happy to see you here 👋🏻 Please join our Discord server to access the community 🔥</p>",
      },
    });

    console.log(result);
    res.json({ message: "Mail sent successfully!" });
  } catch (err) {
    console.error(err);
    res.status(500).json({ message: "Internal server error" });
  }
}

上記のコードでは、以下のことを行っています。

Mailchainアプリで取得したシークレットリカバリーフレーズを使用してMailchain SDKを初期化する。
要求元の呼び出し元がPOSTリクエストを送信したかどうかを確認します。POSTリクエストでない場合はメールを送信しません。
リクエストボディからメール受信者のウォレットアドレスを受け取ったかどうかを確認します。そうでない場合は、メールの送信を行いません。
すべてのチェックが終了したら、メールを書き込みます。
- ここで、fromフィールドがありますが、メールチェーンのユーザー名であれば、username@mailchain.com、ウォレットの場合は、0xaddress@ethereum.mailchain.com、ENSは、ens-name.eth@ens.mailchain.com と入力すればよいでしょう。
- Toフィールドがあり、これは配列になっています。複数のウォレットに送ることができます。ただし、一度に送るのは1つのウォレットのアドレスのみとします。NFTがクレームされたら、フロントエンドからアドレスを取得する予定です。
フロントエンドアプリにメールが正常に送信されたことを知らせるために、成功レスポンスを送信しています。

メールのsubject(件名)やcontent(内容)は自由に変更してください。

送信したメッセージはすべてここで見ることができます: https://app.mailchain.com/sent. アプリをテストしている間、このタブを開いたままにして、メッセージが送信されているかどうかを確認することをお勧めします。

これでAPIルートの準備が整いましたので、ドロップUIを作成する準備が整いました。

NFTをクレームしてメールをトリガーする(それをきっかけに送る)

pagesディレクトリの下にあるindex.jsファイルに、以下の内容を記述します。

import { ConnectWallet, useAddress, Web3Button } from "@thirdweb-dev/react";
import styles from "../styles/Home.module.css";

const dropAddress = "<contract_address_here>";

export default function Home() {
  const address = useAddress();

  const triggerMail = async () => {
    try {
      const response = await fetch("/api/send-message", {
        method: "POST",
        body: JSON.stringify({ address }),
        headers: {
          "Content-Type": "application/json",
        },
      });
      const data = await response.json();
      if (!response.ok) {
        console.log(data);
        return alert(
          "Unable to send mail! However, the drop has been claimed!"
        );
      }
      alert(
        "Drop claimed successfully! Check your mailchain for further instructions!"
      );
    } catch (err) {
      console.error(err);
      alert(
        "An error occurred while sending the mail, however the drop has been claimed successfully"
      );
    }
  };

  return (
    <div className={styles.container}>
      <main className={styles.main}>
        <h1 className={styles.title}>Claim our drop!</h1>

        <p className={styles.description}>
          Claim the drop using the button below and we will send further
          instructions through Mailchain!
        </p>

        <div className={styles.connect}>
          <Web3Button
            contractAddress={dropAddress}
            action={async (contract) => {
              await contract.erc721.claim(1);
              await triggerMail();
            }}
          >
            Claim Drop!
          </Web3Button>
        </div>
      </main>
    </div>
  );
}

このガイドでは、スタイリング(CSSなどの見た目)には焦点を当てません。しかし、すでにテンプレートに付属しているスタイルは継承しています。

ご自由にデザインしてください。変数 dropAddress を、以前コピーしたご自身の NFT Drop コントラクトのアドレスに変更することを確認してください。

上記のコードでは、以下のことを行っています。

先ほど作成したAPIを呼び出す関数triggerMail()を作成し、thirdweb SDKからuseAddress()フックを使用して取得した接続済みウォレットアドレスを送信します。
Web3Buttonコンポーネントを作成し、ドロップを要求し、APIを呼び出してメールを送信するtriggerMail()関数を素早く呼び出します。Web3Button は、ウォレットの接続、ステートのロード、正しいネットワークへの切り替え、指定されたアクションの実行など、すべてを処理するため、非常に簡単で便利です。

そして、これで完了です。アプリの準備は完了です。あとはテストして遊んでみてください。

アプリのテスト

プロジェクトのルートで、ターミナルから以下のコマンドを実行し、アプリにアクセスできる開発サーバーを起動します。

yarn dev

ここで、ブラウザでlocalhost:3000にアクセスすると、ウォレットに接続でき、すべてが正しく行われていれば、ドロップを請求できるはずです。

その後、Mailchainのメールボックスを確認すると、APIを通じて送信しようとしたメッセージが表示され、ドロップが請求され、NFTを手に入れることができます！

このメールが届けば、アプリは完全に動作しています!

まとめ

このガイドでは、Mailchainをthirdwebで使用し、誰かがNFTを要求したときにウォレットに通信を追加する方法について見てきました。

さらに応用すれば、マーケットプレイスで出品した商品が売れたときに出品者にメールを送ることもできます。

Mailchainとthirdwebでできることはたくさんあります。もし、コードのどこかに行き詰まったら、GitHubのレポジトリを自由に参照してください。

もし何かで助けが必要だったり、提案があったり、挨拶したい場合は、今すぐ私たちのDiscordサーバーに参加してください。