Moralis Boilerplateについて

はじめに

NFTGardenなどNFT作成支援サービスが続々と登場している中、いゆわるOpenSeaのようなマーケットプレイスを作ろうとした場合、現状では、フルスクラッチで作成するか、既存のSaaSサービスを用いるかの流れになると考えられる。フルスクラッチの場合は、根幹となるコントラクトの作成にくわえて、インデックス構造の担保や、Walletなど認証機能の担保など非常に多くを考える必要となってくるため、解決策としては、SaaSの利用が考えられる。
SaaSの一つとして、Moralisがあげられる。
Moralisは、ブロックチェーン分野において、開発のためのユーザーフレンドリーなインターフェース提供を目的としており、ノード管理、認証、トランザクションインデックスなどブロックチェーンバックエンドを総合的に担保される。

Moralis Boilerplate

Moralisの中で、注目されるのは、Boilerplateという仕組みで、シンプルなフロントエンドの仕組みをコードとして提供している。提供されているのは、Walletなどの様々な機能や、Unityとのゲーム事例など様々な事例が提供されている中でNFTマーケットの機能が提供されており、ethereum-nft-marketplace-boilerplateとして展開されている。

バックエンドはMoralisを使うことを前提として書かれており、単体で動かすことはできないが、Moralisと連携した場合には非常にシンプルな手順で動かすことができる。
日本におけるmastdonのようなイメージで、コードをforkして、様々な機能を足すことも可能であるため、NFTマーケットの雛形としては非常に魅力的といえる。本項では、Moralisの設定から立ち上げの流れの手順を覚書として記載しておく。

インストール動画

コード

手順

##　moralisのノード立ち上げ
あらかじめMORALISのノードを立ち上げておく
(無料版は7日で自動的にシャットダウンされる)

コードの準備と設定ファイルの編集

//準備
$ git clone https://github.com/ethereum-boilerplate/ethereum-boilerplate.git
$ cd ethereum-boilerplate
$ yarn install
$ yarn start

//.envにMORALISの設定を書き込む
$ touch .env

REACT_APP_MORALIS_APPLICATION_ID = xxxxxxxxxxxx
REACT_APP_MORALIS_SERVER_URL = https://xxxxxx.grandmoralis.com:2053/server

コントラクトの準備

remixなどを通じて、コントラクトをdeployする

// marketplaceBoilerplate.solをdeploy
https://github.com/ethereum-boilerplate/ethereum-nft-marketplace-boilerplate/blob/main/src/contracts/marketplaceBoilerplate.sol

deployされたコントラクトのaddressを貼り付ける

//src/provider/MoralisDappProvider/MoralisDappProvider.js

const [contractABI, setContractABI] = useState('{"noContractDeployed": true}'); //Smart Contract ABI here
const [marketAddress, setMarketAddress] = useState(); //Smart Contract Address Here

syncの設定

syncに関する詳細な説明はこちら
https://docs.moralis.io/moralis-dapp/automatic-transaction-sync/smart-contract-events

Add New Sync -> Sync And Watch Contract Events

設定を書き込む

Topic -> MarketItemCreated (uint256,address,uint256,address,address,uint256,bool)

Abi -> 

{
	"anonymous": false,
	"inputs": [
		{
			"indexed": true,
			"internalType": "uint256",
			"name": "itemId",
			"type": "uint256"
		},
		{
			"indexed": true,
			"internalType": "address",
			"name": "nftContract",
			"type": "address"
		},
		{
			"indexed": true,
			"internalType": "uint256",
			"name": "tokenId",
			"type": "uint256"
		},
		{
			"indexed": false,
			"internalType": "address",
			"name": "seller",
			"type": "address"
		},
		{
			"indexed": false,
			"internalType": "address",
			"name": "owner",
			"type": "address"
		},
		{
			"indexed": false,
			"internalType": "uint256",
			"name": "price",
			"type": "uint256"
		},
		{
			"indexed": false,
			"internalType": "bool",
			"name": "sold",
			"type": "bool"
		}
	],
	"name": "MarketItemCreated",
	"type": "event"
}

Address -> deployしたaddress
TableName -> なんでも良いが、MarketItemCreatedとした。

コードの修正(syncで設定したtable　nameを設定する)

src/components/NFTTokenIds.jsx

const queryMarketItems = useMoralisQuery("MarketItemCreated");

src/components/NFTMarketTransactions.jsx

const queryMarketItems = useMoralisQuery("MarketItemCreated");

購入手順

Moralisを使わずに実装する..

複数のコントラクトにまたがるNFT一覧などの実装はMoralisを利用した方が圧倒的に便利ですが、コントラクトを指定した状態であれば、下記のtemplateなども使うことができそうです。

参考