見出し画像

Mobile AppからWalletConnectを経由してMetamaskのトランザクションをシームレスに発生させるための調査

菊池佑太

はじめに

@yutakikuchi_です。

本Noteは技術調査であり、投稿した内容全てが実装できるかどうかは未確認です。

Flutterなどで開発されたのMobile AppやBrowserからMetamask経由でのトランザクションを発生させたい場合、WalletConnectを使用してUniversal link的な扱いができるのかを調べてみました。この動機として、自作したMobile AppからBlockChainにトランザクションを発生させたい場合、安全な手段として、秘密鍵を直接Mobile Appに入れること無く、MetamaskなどのWalletを経由した手段を取り、トランザクション発生箇所だけをMetamaskなどのWalletに委ねるためです。

理想としてはFlutterで作成したMobile Appから直接MetamaskのDeeplinking機能などを利用してMetamaskを呼び出すことですが、Metamaskの標準のDeeplinking機能は簡単な特定のトランザクションしか発生させることができない状態になっています。よって様々なトランザクションをMobile appからMetamask経由で実施する場合は、一工夫追加で必要になります。

https://docs.metamask.io/guide/mobile-best-practices.html#deeplinking
https://metamask.github.io/metamask-deeplinks/#

2022.03時点での技術課題

現状Web3 Wallet関係の技術はまだまだPC側が先行しており、MobileでAppを作るときなどプロトコルやライブラリ開発などが仕組みの一部が不完全だったりするので、PCでできることをベースにMobileでその仕組を構築しようとすると結構なハードルがあります。

上でも簡単に触れましたが、自作のMobile AppからWalletの機能を使ったトランザクションを発生させたい場合、UniversallinkやDeeplinkでWalletを呼び出したいですが、Metamaskを使ったケースに置いては簡単なトランザクションしか発生させることができません。
https://docs.metamask.io/guide/mobile-best-practices.html#deeplinking

これがPCだと、具体的にはChromeやBraveなどのブラウザにExtensionを入れてさえしまえば、AppからWalletの機能を呼び出してトランザクションの発生が簡単にできてしまいます。

MetamaskはWeb Browser機能も持っているので、AppがURLを持っていればそっちを使えば全てMetamaskで完結でいいじゃんという話も出てきそうですが、MetamaskのWeb Browserは外部とのOAuthの仕組み連携ができない状況であり、それを前提としているAppでは使えません。
https://github.com/MetaMask/metamask-mobile/issues/3515#issuecomment-1027158301

WalletにDeeplinkさせる解決方法

僕自身まだ未実装ですが、WalletConnect(Protocol)を利用してWallet側にトランザクションをBridge/Relayさせてあげることが可能です。WalletConnectとは複数の独立したアプリケーション(Dapp, Wallet)をシームレスに繋ぐためのプロトコルで、AppからQRコードなどを利用しながらWalletにアクセスし、ログインやトランザクションの発生ができます。具体的に試してみたい人は下記のWalletConnectの公式サイトに有るExampleのDappがあるので、PC/Mobile Browser(Chromeなど)でアクセスしてQRコードを読み取ってみると良いです。Browserで操作しつつ、MobileのMetamask等の方でBrowserの操作の確認/承認ができます。
https://example.walletconnect.org/

画像1

アプリの呼び出しはwcというスキーマによって呼び出しがされ、BridgeするServerのURLとkeyをWallet側に渡し、Bridge Serverを経由しながらkeyをベースにWalletとDappのトランザクションを中継します。

// Example URL
wc:8a5e5bdc-a0e4-4702-ba63-8f1a5655744f@1?bridge=https%3A%2F%2Fbridge.walletconnect.org&key=41791102999c339c844880b23950704cc43aa840f3739e365323cda4dfa89e7a

https://example.walletconnect.org/ 
WalletConnect経由で呼び出されたWalletの方でURLの承認が一度必要であり、それ実行した後はsendTransactionなど様々なclient側からのmethod呼び出しがWalletに対してシームレスにできます。※URLの承認は最初の一度だけですが、下記のようにトランザクションの確認は都度Walletのアプリ側で必要になりますが、これによりAppからWalletが簡単に呼び出すことが可能です。

画像2


WalletConnectを活用してWallet経由のトランザクションを発生させたいMobile Appを作られようとしている方、WalletConnectは現在のStableVersionはV1ですが、V2の開発も進んでおり、今から利用する方はV2で考えても良いかもしれません。
https://docs.walletconnect.com/
https://docs.walletconnect.com/2.0/

上ではBridge Serverを公式のhttps://bridge.walletconnect.org/を経由していますが、自前で構築することも可能なようなので、どこまで自前の実装でWallet連携可能なのかは現在詳細を確認中です。

その他

WalletConnectのGithubに様々なrepositoryがあり、それらを参考にするとMobileのAppでWallet経由でのトランザクション管理を簡単にできるものが作れそうです。
https://github.com/orgs/WalletConnect/repositories

現在はdeprecatedになっていますが、nodeやpythonでBridge Serverを構築したサンプルは下記にあります。
https://github.com/WalletConnect/node-walletconnect-bridge
https://github.com/WalletConnect/py-walletconnect-bridge

Bridgetに関してトランザクションのRelayについては下記のRepoを見ると良いようです。(WalletConnectのVersionはv2ですが。)
https://github.com/WalletConnect/walletconnect-monorepo/tree/v2.0/servers/relay

この記事が気に入ったらサポートをしてみませんか？