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

ponta

ponta

· 4 min read
Thumbnail

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

クリエイター向けUI

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

https://studio.manifold.xyz/home

Image

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

Image

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

Image

デプロイできました。

Image

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

Image

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

Image
  • Single Token
  • Batch of Tokens
  • Edition

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

Image

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

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

Image

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

Developer向け

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

https://developer.manifoldxyz.dev/apps

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

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

Image

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

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

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

Image

下記部分が実装です。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>
  )
}

Next.jsで立ち上げてみたところ↓

Image

最後にRoyalty Registryを見てみます。

https://royaltyregistry.xyz/lookup

ImageImage

Royalty Registryの目的は二つです

  1. マーケットプレイスが適切なon-chainのロイヤリティ設定を簡単に利用できるようにする
  2. 元々on-chainロイヤリティをサポートしていなかったコントラクトがそれらを追加することを可能にする

実装はこちらにあります。

on-chainロイヤリティの規格はEIP2981が最近では主流ですが、規格が定まる前に各マケプレ・発行ツールで実装されたNFTが存在するので、これらをまとめて扱えるようになる便利なコントラクトを提供してくれています。

  • EIP2981
  • Manifold and Foundation
  • Rarible
  • SuperRare
  • Zora (limited functionality)
  • Artblocks

まとめ

全体的に、Thirdwebと比べると開発者フレンドリーというよりは非エンジニア向け≒アーティスト向けのツールだなと感じました。Dapp開発ツールとしてはNFT関連でも引き続きThirdwebを採用すると思います。

アーティストさんからの依頼があれば関連Dappを作成したり、コントラクトをより深掘りしてみようかと思います。

弊社Pontechはweb3に関わる開発を得意とするテック企業です。サービス開発に関するご相談はこちらのフォームからお願いいたします。

また、受託開発案件に共に取り組むメンバーを募集しています!ご興味のある方はぜひお話させてください!


ponta

About ponta

2019年からEthereumを中心にDapp開発に従事。スキーとNBAとTWICEが好き。

Copyright © 2024 Pontech.Inc