まいにちDapps#8 Manifoldの開発者向け機能で何ができるのか

前日にShopify×Manifoldでトークンゲート付きのECサイトを作った際に、Manifold製のプラグインの完成度に感動しました。恥ずかしながらManifoldを使ったことがほとんどなかったので、改めてどんな機能があるのか触ってみようというのが今回の趣旨です。

クリエイター向けUI

まずUIから触れる機能を確認していきます。

https://studio.manifold.xyz/home

New Contractを作成します。ASCIIアートをコントラクトに埋め込む箇所があるのが自分のコントラクト感があって人気の一つだと昔(半年以上前に)聞いたことがあります

Deployボタンを押してデプロイ

デプロイできました。

Token ページでトークンを作成してみます。

テストネットではトークンの発行方式が3パターンあるみたいです。

Single Token
Batch of Tokens
Edition

Settingからロイヤリティやアドミン権限の設定ができました。

ここまでの感覚としては、Thirdwebに比べて搭載する機能をユーザーフローの後半で追加できる傾向があり、柔軟性が高いかなと思いました。またテストしたものをそのままMainnetに持って行けるのは便利そうだなと感じました（選べるネットワークがEth MainnetとOptimismだけなのは少し残念ですね）。

Mintページを作成するにはClaim Pageという拡張Appを入れる必要があり、メインネット化しないといけないため今回はパスします。

このほか、一時期話題になったBurn Redeemという機能も使えます。こちらもメインネットにする必要があります。

Developer向け

さて、ここから本題でDevelopperアカウントを作成して開発者として何ができるか見ていきます。

https://developer.manifoldxyz.dev/apps

メールアドレスでアカウント作成します。

New Appを作成します。Getting Startに沿ってSignature Grantにしてみます（現時点で何か分かってませんがおそらく署名をした人がログインできるサイトのようなものが作れるのでしょう）

こちらのサンプルコードを動かしてみます。

https://github.com/manifoldxyz/manifold-templates/tree/main/nextjs/nft_profile_page

Connect Walletボタンが表示され、ウォレット接続をすると自分の保持しているNFTが表示されるサンプルです。(ウォレット内のNFTの画像が死んでてすみません)

下記部分が実装です。envファイルにはdevelopperページで作成したclient idを設定します。

useEffect(() => {
    window.addEventListener("m-authenticated", async (event) => {
      // Get the data client instance
      const client = event.detail.client;

      // Get the NFTs owned by the currently connected wallet
      // Data client API's can be found here: https://docs.manifold.xyz/v/manifold-for-developers/client-widgets/connect-widget/data-client-apis
      setNfts(await client.getNFTsOfOwner());
      setAuthenticated(true);
    });
    window.addEventListener("m-unauthenticated", async (event) => {
      console.log("m-unauth event: ", event);
      setNfts([]);
      setAuthenticated(false);
    });
  });

<div
  dangerouslySetInnerHTML={{
    __html: `<div
      data-widget="m-connect"
      data-app-name='${process.env.NEXT_APP_MANIFOLD_APP_NAME}'
      data-client-id='${process.env.NEXT_APP_MANIFOLD_CLIENT_ID}'
      data-network='${process.env.NEXT_APP_NETWORK}'
    ></div>`,
  }}
/>

マーケットプレイス機能も見てみましょう。

Listing widgetのサンプルコードはこちらになります。

https://github.com/manifoldxyz/manifold-templates/tree/77303f47f0e945726208965175b7a6a449322c37/nextjs/marketplace_page

_document.jsで必要なscriptとcssを読み込んでいますね

import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html lang="en">
      <Head>
        {/* -- Stylesheets for connect and marketplace widgets -- */}
        {/* replace the specific version with `latest` to get the most up-to-date version of the widgets. */}
        {/* WARNING: `latest` may cause breakage, so use with caution */}
        <link rel="stylesheet" href="https://connect.manifoldxyz.dev/2.2.4/connect.css" />
        <script src="https://connect.manifoldxyz.dev/2.2.4/connect.umd.js" async></script>

        <script src="https://identity.manifoldxyz.dev/2.1.0/walletIdentity.umd.min.js"></script>
        <link rel="stylesheet" href="https://identity.manifoldxyz.dev/2.1.0/walletIdentity.css" />

        <script src="https://restrictedtoken.manifoldxyz.dev/0.1.0/restrictedToken.umd.min.js"></script>
        <link rel="stylesheet" href="https://restrictedtoken.manifoldxyz.dev/0.1.0/restrictedToken.css" />

        <link rel="stylesheet" href="https://marketplace.manifoldxyz.dev/3.3.7/marketplace.css" />
        <script src="https://marketplace.manifoldxyz.dev/3.3.7/marketplace.umd.js" async></script>
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}