KyberSwapは分散型取引プラットフォームで、そのDEXアグリゲーターは500万人以上のユーザーによる1,500億米ドル超の取引を支えてきました。チームがフロントエンドをWagmi v3とViemに統合した際、自社で作り込んでいたMetaMask検出コードを、MetaMask Connectの公式metaMask()コネクターに置き換えました。このケーススタディでは、KyberSwapがこの移行に踏み切った理由、モバイルウェブでの変化、そしてKyberSwapがMetaMaskユーザーにスワップレートを提供する別の役割と、Connectの統合がどのように並び立っているのかを紹介します。
KyberSwapの使命は、あらゆる取引で最良のレートを提供すること
KyberSwapのDEXアグリゲーターは、あらゆる取引で最良のレートと信頼性の高い実行を実現するために作られた分散型取引ソリューションです。基盤となるのはSmart Settlementというスマートルーティングアルゴリズムで、複数のチェーンにまたがる深い流動性にアクセスすることで、出力を最大化しスリッページを最小化します。この中核の周りには、指値注文、23のネットワークに対応したクロスチェーンスワップ、利回りの機会を提供するKyber Earnが揃っています。
実行品質を軸に作られたプラットフォームにとって、入口に求められる条件はシンプルです。ウォレットの接続は、何も考えずにできるべきなのです。
自前のウォレットコードは、保守コストがかさむ
KyberSwapのこれまでの構成は、Wagmi v2とethers.js、そして場当たり的なinjectedコネクター層の組み合わせで、MetaMaskを検出して接続するためのカスタムコードも含まれていました。Wagmi v3とViemへの移行の一環として、チームはそのコードを廃止し、MetaMask Connectの公式コネクターを採用することにしました。
決め手は3つあります。1つのコネクターで、デスクトップのブラウザ拡張機能と、モバイルウェブのディープリンク+リレーのフローの両方をカバーできるようになりました。カスタムのウォレット検出コードも減らせます。さらに、MetaMaskがサポートする方式にとどまることで、EIP-6963やMetaMask Wallet Protocol(MWP)がウォレットとdappが互いを見つける標準的な方法になっていく中でも、KyberSwapはその流れに沿い続けられます。
導入前 | MetaMask Connect導入後 |
Wagmi v2、ethers.js、場当たり的なinjectedコネクター構成 | Wagmi v3とViem、公式のmetaMask()コネクター |
自前のMetaMask検出・接続コードを保守する必要がある | 検出と接続はコネクターが処理 |
モバイルウェブではWalletConnectのQRコードに依存 | MWPリレー経由で、MetaMaskアプリにネイティブのディープリンクで接続 |
ウォレット検出の標準規格に追従するためのカスタムコード | MetaMaskがサポートする方式で、EIP-6963およびMWPに準拠 |
モバイルでの引き継ぎを確実に
モバイルウェブでは、QRコードは使いにくい方法です。ユーザーはすでにスマートフォンを使っているからです。MetaMask Connectを使えば、KyberSwapはMWPリレー経由でMetaMaskアプリを開くディープリンク接続フローを提供でき、スマートフォンのトレーダーは何もスキャンせずに接続できます。
KyberSwapは、特にiOSでの引き継ぎに力を入れました。目標は、ユーザーがMetaMaskの承認画面に直接たどり着くこと、つまり接続をタップしてから承認するまでに余計なステップを挟まないことでした。その結果、トレーダーがデスクトップ拡張機能から来ても、モバイルアプリから来ても、同じ接続体験が得られるようになりました。
技術スタック
レイヤー | コンポーネント |
取引 | KyberSwap DEXアグリゲーター、Smart Settlement、指値注文、クロスチェーンスワップ(23ネットワーク)、Kyber Earn |
フロントエンド | Wagmi v3、Viem |
ウォレット接続 | MetaMask Connect(connect-evm)、metaMask()コネクター |
検出とトランスポート | EIP-6963、MetaMask Wallet Protocolリレー |
ウォレット | MetaMaskブラウザ拡張機能(デスクトップ)、MetaMaskモバイルアプリ |
これまでの成果
MetaMask Connectを導入して以来、KyberSwapは、ユーザーにとって接続が安定しており、導入は初日からスムーズで、苦情や問題は一切寄せられていないと報告しています。
KyberSwap自身の言葉を借りれば、ユーザーにとっての成果は、接続と取引がひとつのステップのように感じられるようになったことです。トレーダーはMetaMaskで接続すると、間に何も挟まずに、そのまま最良のレートでスワップに進めます。このフローの入口をMetaMask Connectが担い、その先をSmart Settlementが担っています。
2つの統合、ひとつの関係
Connectの統合は、KyberSwapとMetaMaskの関係の半分にすぎません。残りの半分は逆方向に働いています。KyberSwap Aggregator APIが、チェーンをまたいだスワップレートと実行をMetaMaskユーザーに提供しているのです。MetaMask ConnectはMetaMaskユーザーをKyberSwapに迎え入れ、Aggregator APIはKyberSwapのルーティングをMetaMaskに届けます。
「MetaMaskは、2つの面で大切なパートナーです。MetaMask Connectによって、トレーダーがKyberSwapに接続する方法がシンプルになり、拡張機能でもモバイルアプリでも、信頼できる一貫した体験を提供できるようになりました。同時に、KyberSwap Aggregator APIは、チェーンをまたいで利用できる最良のスワップレートと実行をMetaMaskユーザーに届けています。これは、私たちが最も大切にしている『DeFi取引を、誰にとってもよりシンプルで、スムーズで、効率的にする』という原則に基づくパートナーシップです。」— Ken Tran、KyberSwap ビジネスデベロップメントマネージャー
KyberSwapから開発者へのアドバイス
公式ドキュメントを活用しましょう。公式ドキュメントに沿うことで、実装が標準仕様に準拠した状態に保たれ、古いサンプルや独自の接続処理をもとに作業するよりもスムーズに移行できます。
ウォレット接続の移行は、スタック全体の整理の一環として行いましょう。KyberSwapは、Wagmi v3とViemへの移行にあわせてMetaMaskのコードを置き換えました。そのため、コネクターの変更は独立したプロジェクトではなく、計画的な統合の一部でした。
モバイルでの引き継ぎをエンドツーエンドでテストしましょう。ユーザーにとって重要なのは、接続をタップした後にどこへ移動するかです。KyberSwapは、iOSユーザーがMetaMaskの承認画面に直接移動できることを確認しました。
自社のアーキテクチャと照らし合わせて検討しましょう。KyberSwapの構成では移行がスムーズに進みましたが、チームごとにスタックは異なり、最適な判断はプロダクトのニーズによって変わります。
MetaMask Connectで構築しましょう。ユーザーがどのような方法で接続しても対応できる、ひとつの統合です。