FlutterとMetamaskを活用したNFT mint

はじめに

@yutakikuchi_です。
flutter_web3 packageを利用し、Metamaskを経由してNFT mintをする方法を簡単に記載しておきます。2022年2月現在、参考になる日本語ドキュメントが全くと言っていいほど無かったので、ここに書いておきます。また実験したデバイスはPCのChromeだけになるので、ネイティブアプリに対しては何もテストしておりません。

このNoteの例として、NFT mint先をPolygonのMumbaiに対して行っていますが、chainidを切り替えることによって、他のBlockchain Networkに対応できると思います。
Ref : https://mumbai.polygonscan.com/

今回利用するFlutter packageは下記のものです。pubspec.yamlに追加して、flutter pub getでinstallができます。
Ref : https://pub.dev/packages/flutter_web3

本Noteで示す範囲

NFT mintのための全体像を下記に書いております。最終的にはOpenSeaでの公開ができることを目指していますが、このNoteではFlutter -> Metamask -> Polygonの図の中のMint NFTの箇所だけを説明しています。

Metamaskを経由してNFTをmintする方法

巷にあるNFT mintのツールや手法がMetamaskのwalletから秘密鍵をexportしてMetamaskを経由せずに実施するものが多いですが、公開鍵と同時に秘密鍵が漏れてしまうとセキュリティ的に大事故になるので、本Noteでは秘密鍵をexportすること無くMetamaskを経由してBlockChainへトランザクションを送信します。また本Noteに記載する手法が実現できる条件として、下記が必要になります。

1. MetamaskがChromeにinstallされており、ご自身のETHやPolygonなどのアドレスを持ち、テストネットに接続ができる、またはFaucetで資金がある状態であること。
Ref : https://metamask.io/

2. NFT mint用に既にDeployされているSmart Contractを利用できることができること。
Ref : https://ethereum.org/ja/developers/tutorials/how-to-write-and-deploy-an-nft/

Flutterのindex.htmlの修正とDartのサンプルコード

Flutterのディレクトリ・ファイルであるweb/index.htmlのファイル内に下記を追記し、JSコードを読み込みます。

 <!-- Ethers -->
 <script src="https://cdn.ethers.io/lib/ethers-5.4.umd.min.js" type="application/javascript"></script>
 <!-- Wallet Connect -->
 <script src="https://cdn.jsdelivr.net/npm/@walletconnect/web3-provider@1.6.5/dist/umd/index.min.js" type="application/javascript"></script>

Dartのサンプルとしては下記のgithubを参考にし、lib/main.dartとして保存します。
Ref: https://github.com/y-pakorn/flutter_web3/blob/main/example/lib/main.dart#L26​
上記ではOPERATING_CHAIN = 56としたバイナンスのSmart Chainへの接続例となっていますが、値を任意のChainidに切り替えてもらえれば、別のBlockChain Networkに接続ができます。(Polygon Mumbaiだと80001)

Polygon Mumbaiに接続ができれば、後はMetamaskからPolygon Networkに送付するTxを組み立てます。Txの組み立て処理はtest functionの中にでも書きます。
Ref: https://github.com/y-pakorn/flutter_web3/blob/main/example/lib/main.dart#L90

test() async {
   // provider, signerの取得
   final web3provider = Web3Provider(ethereum!);
   final signer = web3provider.getSigner();

   // Mintしたい先のaddress
   final String user_address = 'xxxxx';

   // Deploy済みのcontract address
   final String contract_address = 'yyyyy';

   // Deploy済みのcontractのinterface
   const abi = [
     "function name() view returns (string)",
     "function symbol() view returns (string)",
     "function balanceOf(address owner) view returns (uint256)",
     "function mintNFT(address recipient, string memory tokenURI) payable returns (uint256)"
   ];

   // SmartContractにわたすtoken_uri
   final String token_uri = 'https://raw.githubusercontent.com/taijusanagi/example-nft-metadata/main/metadata/';
   // contractの組み立て
   final contract = Contract(contract_address, abi, signer);

   // SmartContractのmintNFT関数の呼び出し、transactionの送付
   final List<dynamic> tx = await Future.wait([
     contract.call<BigNumber>('mintNFT', [user_address, token_uri])
   ]);
   return tx;
 }

​事前にcontract_addressに対してDeployをしているSolidityのソースは下記を想定したものになります。Ref : https://ethereum.org/ja/developers/tutorials/how-to-write-and-deploy-an-nft/#write-contract
繰り返しになりますが、このNoteではDeploy済みのSmart Contractを利用します。(ERC-721) そのSmartContractで利用するInterfaceをconst abiの中に記載します。(function mintNFT...の用に記載) contract.callするだけでMetamaskを経由してトランザクションを送付することが可能です。

上までDartとして記載できた状態でファイル保存し、flutter run -d chrome --web-hostname localhost --web-port 8080 をterminalなどで実行して、ChromeのWebページ上でtest()を呼び出してあげればMetamaskと接続されて、Metamask経由でNFT mintのトランザクション送付が可能になります。Chrome上で実行すると下記のようなMetamaskのpopupが表示されて、確認ボタンを押下するとNFT mintができます。

参考

ERC-1155などのContract用のutilライブラリもflutter_web3 packageの中にはあるのでその処理や、同じ開発者が作ったflutter_web3_auctionというrepositoryを参考にするとflutter_web3によるMetamaskを経由したTransaction送付例がわかってくると思います。

Ref : https://github.com/y-pakorn/flutter_web3/blob/utils/lib/src/utils/erc1155.dart
Ref : https://github.com/y-pakorn/flutter_web3_auction/blob/master/lib/controllers/fixed_swap/contract_controller.dart
Ref : https://medium.com/coinmonks/building-modern-web-dapp-with-flutter-91656c71d8b