コンテンツへスキップ

あらゆるトレーダーの入り口に対応する一つのコネクター

モバイルウェブでは、KyberSwapのトレーダーはQRコードではなく、MetaMaskアプリを開くディープリンクで接続し、iOSユーザーは承認画面に直接移動します。

5分
あらゆるトレーダーの入り口に対応する一つのコネクター

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で構築しましょう。ユーザーがどのような方法で接続しても対応できる、ひとつの統合です。

AIによる翻訳です。エラーが含まれている可能性があります。常に情報を確認してください。

翻訳を評価する

この記事の執筆者:

  • MetaMask

    MetaMask(旧Consensys Software Inc)は、世界最大のセルフカストディ型金融プラットフォームです。暗号資産と従来の資産の両方にわたって、資産の保有・支払い・貯蓄・運用を一か所で行える環境をユーザーに提供しています。同社は、決済・貯蓄・投資・デジタル資産をシームレスな体験として統合したコンシューマー向けプラットフォームの構築を進めています。世界で最も広く利用されているセルフカストディウォレットとして成長を遂げたMetaMaskは、約190か国にわたるユーザーが自身の資金と資産を直接管理できる手段を提供しています。MetaMaskは2016年以来、Ethereumの成長において基盤的な役割を果たしてきました。現在、MetaMaskはブロックチェーン経済の中心に位置し、「Open Money」のオペレーティングシステムを構築することで、人々が自らの金融生活を完全にコントロールできる世界を目指しています。

    すべての記事を読む