# FlutterでWalletConnectのSessionを利用したSendTransactionの実装 By [Y's note](https://paragraph.com/@y-s-note) · 2022-06-06 --- ### はじめに [ab3株式会社](https://corp.ab3.vision/)で代表をやっています、菊池佑太([@yutakikuchi\_](https://twitter.com/yutakikuchi_))と申します。 Mirrorでのblog投稿は初めてになりますが、これからはガンガン利用していきたいと思っています。 ab3株式会社ではリアルライフのログに着目したtoC向けのアプリとPlatformを開発しています。開発中の「**BeLife**」というアプリで普段の行動に関するデータを登録すると、そのデータをBlockChainに書き込んだり、データからNFTアートを生成したり、纏めるとlog to earnのような世界を目指しています。 BeLifeというアプリはPC, Smartphoneなど、様々なデバイスからアクセス可能なアプリとして提供予定で、[Flutter](https://flutter.dev/)で開発しており、2022/06月中には正式にリリース予定となっています。 ### ここで紹介する内容 BeLifeはある意味[Dapps](https://bitcoin.dmm.com/column/0142)という位置づけになり、(厳密に言うと違いますが) ユーザーがSmartPhoneで使うことを想定しています。このSmartPhone向けのDappsから任意のWalletをDeepLinkなどで呼び出して、NFTのmintなどをBlockChainに対して行う例をここでは紹介します。使うものはFlutterと関連Package、WalletConnect、Metamaskになります。下記ではWalletConnectとFlutterでの実装について書きます。 ### WalletConnect [WalletConnect](https://walletconnect.com/)とは一言でいうとDappsとWalletを簡単に接続するためのプロトコルであると言えます。任意のDappsから任意のWalletを呼び出すことができ、Dappsからのsessionの中でWalletを経由したsendtransactionが可能です。 例えばWallet機能が無いDappsがBlockChainに対してデータの書き込みなどを行おうとすると、一般的には特定のWalletアプリを経由して行う必要がありますが、世の中の事例的にDappsがPC版で作られるケースが多く、Google検索してもSmartPhone向けの記事はほとんど出てこないです。特に日本語でのドキュメントはほとんど無いと言えます。(PC版ChromeからMetamaskの拡張機能を呼び出す仕組みはそれなりにドキュメントで見ますが、これがNativeのアプリからMetamaskを呼び出すとなるとほとんど事例が出てきません。) WalletConnectは 下記 **walletconnect.com**にて展開されるプロトコルであり、自身でサーバーなどを立てる必要がありません。HTTPとWebsocketを活用して、DappsとWalletをsessionとして接続を確立させ、このsession上でDappsからの操作をWallet側に伝達をする仕組みになっています。 [https://walletconnect.com/](https://walletconnect.com/) なぜWalletConnectを使うのかという背景は[こちらのNote](https://note.com/yutakikuchi/n/nb37d984f6c9b)にまとまっています。一言でいうとMetamaskへの一般的なDeepLinkは簡単なtransactionしか送れないため、これをwalletconnectでsessionにして、NFT mintなど複雑なtransactionにも対応可能にします。 ![WalletConnectを活用したDappsとWalletとの接続図](https://storage.googleapis.com/papyrus_images/a748f5b1920131d9312228d8c856181da7cf70226e6d03d286835c35f24f25f8.png) WalletConnectを活用したDappsとWalletとの接続図 ### FlutterでWalletConnectを使ったSendTransactionの例 FlutterでWalletConnectのsessionを活用してNFT mintなどのtransactionを送る場合は下記のpackageを必要とします。 * [walletconnect\_dart](https://pub.dev/packages/walletconnect_dart) * [web3dart](https://pub.dev/packages/web3dart) walletconnect\_dartでDappsとWalletとのsessionを確立し、web3dartでsession上でtransactionを送付します。**挙動的には Dapps → walletconnect → Wallet(接続確認) → Dapps → Wallet(Transaction送付確認)となります。** これらの処理を実装する上では上記2点のpackageであるpub.devに公開されているexampleが参考になります。特にweb3dartは様々なトランザクションを作成、送付できるので、実装前に一度見ておくと良いと思います。SmartContractを呼び出す部分は下記が参考になります。 [https://github.com/xclud/web3dart/blob/development/example/contracts.dart](https://github.com/xclud/web3dart/blob/development/example/contracts.dart) \*\*またサンプルとなるSessionの確立とsendtransactionのソースコードの一部(すみません、全部では無いので適宜補間が必要です)\*\*を下記のgistに貼っておきました。下記の処理WalletConnectのsession上でPolygon(Mumbai)にDeployされた独自のSmartContractを呼び出し、NFTをmintしています。 [https://gist.github.com/yutakikuchi/407e1e5fc4522c57d63fe16a46c633bf](https://gist.github.com/yutakikuchi/407e1e5fc4522c57d63fe16a46c633bf) 一点だけ注意が必要なこととして、上記のコードを実行するに当たり、[WalletConnectEthereumCredentials](https://github.com/RootSoft/walletconnect-dart-sdk/blob/58581538e321537d42cd1cdb3d92cc6a1cfcf75a/example/mobile/lib/ethereum_transaction_tester.dart)のclassが必要になるので、左記のリンクからコピペします。 ### 最後に 質問がある方は [@yutakikuchi\_](https://twitter.com/yutakikuchi_) までDMでお願いいたします。全てには答えられないかもしれませんが、なるべく見ます。 --- *Originally published on [Y's note](https://paragraph.com/@y-s-note/flutter-walletconnect-session-sendtransaction)*