Moralis Boilerplateについて

# はじめに

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


# Moralis Boilerplate

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

https://docs.moralis.io/moralis-dapp/connect-the-sdk/boilerplate-projects

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


# インストール動画
https://www.youtube.com/watch?v=WZWCzsB1xUE


# コード
https://github.com/ethereum-boilerplate


# 手順

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

![スクリーンショット 2022-04-14 19.15.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43766/d6e051db-645d-b514-35c6-61a1a2764500.png)


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

```
//準備
$ 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

![スクリーンショット 2022-04-22 9.30.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43766/c11f7250-df96-4f47-4c3d-92dde485c826.png)

### 設定を書き込む

```
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とした。

![スクリーンショット 2022-04-22 9.30.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43766/8dc12475-e7cd-34f9-2b18-a628b01c8b01.png)

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

```src/components/NFTTokenIds.jsx
const queryMarketItems = useMoralisQuery("MarketItemCreated");
```

```src/components/NFTMarketTransactions.jsx
const queryMarketItems = useMoralisQuery("MarketItemCreated");
```

# 購入手順


![スクリーンショット 2022-04-14 18.38.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43766/28f55d34-272d-b05d-bb31-bd12667dd1f9.png)


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

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

https://github.com/dabit3/polygon-ethereum-nextjs-marketplace






# 参考

https://ethereumboilerplate.com/

https://github.com/reactjs/React.NET/issues/1243

https://moralis.io/web3-boilerplate-beginners-guide-to-web3/

https://morioh.com/p/214e85427719

https://morioh.com/p/697e81df80aa

https://dev.to/edge-and-node/building-scalable-full-stack-apps-on-ethereum-with-polygon-2cfb

https://www.youtube.com/watch?v=GKJBEEXUha0

https://github.com/dabit3/polygon-ethereum-nextjs-marketplace/

https://forum.moralis.io/t/cloning-opensea-nft-boilerplate-questions/5107/264