KyberSwap est une plateforme de trading décentralisée dont l'agrégateur DEX a facilité plus de 150 Md$ US de transactions pour plus de 5 millions d'utilisateurs. Lorsque son équipe a consolidé le frontend sur Wagmi v3 et Viem, elle a remplacé son code de détection de MetaMask développé sur mesure par le connecteur officiel metaMask() de MetaMask Connect. Cette étude de cas explique pourquoi KyberSwap a fait ce choix, ce qui a changé sur le web mobile, et comment l'intégration de Connect s'articule avec le rôle distinct de KyberSwap, qui fournit des taux de swap aux utilisateurs de MetaMask.
La mission de KyberSwap : le meilleur taux sur chaque trade
Le DEX Aggregator de KyberSwap est une solution de trading décentralisée conçue pour offrir les meilleurs taux et une exécution fiable sur chaque trade. Il repose sur Smart Settlement, un algorithme de routage intelligent conçu pour maximiser le montant reçu et minimiser le slippage en accédant à une liquidité profonde sur plusieurs chaînes. Autour de ce cœur, on trouve les ordres limites, les swaps crosschain sur 23 réseaux et Kyber Earn pour les opportunités de rendement.
Une plateforme centrée sur la qualité d'exécution a une exigence simple pour sa porte d'entrée : connecter un wallet ne devrait demander aucun effort de réflexion.
Le code de wallet développé sur mesure, une facture de maintenance
L'ancienne configuration de KyberSwap combinait Wagmi v2, ethers.js et une couche de connecteur injecté ad hoc, avec du code personnalisé pour détecter MetaMask et s'y connecter. En passant à Wagmi v3 et Viem, l'équipe a choisi d'abandonner ce code au profit du connecteur officiel de MetaMask Connect.
Trois éléments ont motivé cette décision. Un seul connecteur couvre désormais à la fois l'extension de navigateur sur desktop et le flux de deep link et de relais sur le web mobile. Il y a moins de code de détection de wallet personnalisé à maintenir. Et rester sur la voie prise en charge par MetaMask permet à KyberSwap de rester aligné à mesure que l'EIP-6963 et le MetaMask Wallet Protocol (MWP) deviennent la référence pour que les wallets et les dapps se découvrent mutuellement.
Avant | Avec MetaMask Connect |
Wagmi v2, ethers.js et une configuration de connecteur injecté ad hoc | Wagmi v3 et Viem avec le connecteur officiel metaMask() |
Code de détection et de connexion à MetaMask développé sur mesure, à maintenir | Détection et connexion gérées par le connecteur |
Le web mobile reposait sur un QR code WalletConnect | Connexion native par deep link à l'application MetaMask via le relais MWP |
Code personnalisé pour suivre les standards de découverte de wallets | Alignement avec l'EIP-6963 et le MWP grâce à la voie prise en charge par MetaMask |
Réussir la transition vers le mobile
Sur le web mobile, le QR code n'est pas pratique : l'utilisateur est déjà sur son téléphone. MetaMask Connect offre à KyberSwap un flux de connexion par deep link qui ouvre l'application MetaMask via le relais MWP, ce qui permet à un trader sur mobile de se connecter sans rien scanner.
KyberSwap a porté une attention particulière à la transition sur iOS. L'objectif était que les utilisateurs arrivent directement sur l'écran d'approbation de MetaMask, sans étape supplémentaire entre le moment où ils appuient sur « Connecter » et celui où ils approuvent. Résultat : l'expérience de connexion est la même, que le trader arrive depuis l'extension desktop ou l'application mobile.
La stack
Couche | Composants |
Trading | KyberSwap DEX Aggregator, Smart Settlement, ordres limites, swaps crosschain (23 réseaux), Kyber Earn |
Frontend | Wagmi v3, Viem |
Connexion du wallet | MetaMask Connect (connect-evm), connecteur metaMask() |
Découverte et transport | EIP-6963, relais MetaMask Wallet Protocol |
Wallet | Extension de navigateur MetaMask (desktop), application mobile MetaMask |
Impact à ce jour
Depuis l'adoption de MetaMask Connect, KyberSwap indique que la connexion est fiable pour les utilisateurs, que le déploiement s'est déroulé sans accroc dès le premier jour et qu'aucune plainte ni aucun problème n'a été signalé.
Selon KyberSwap, le résultat côté utilisateur est que se connecter et trader ne forment plus qu'une seule étape. Un trader se connecte via MetaMask et passe directement à un swap au meilleur taux, sans rien entre les deux. MetaMask Connect gère la porte d'entrée de ce parcours, et Smart Settlement s'occupe du reste.
Deux intégrations, une seule relation
L'intégration de Connect n'est que la moitié de la relation entre KyberSwap et MetaMask. L'autre moitié va dans le sens inverse : l'API KyberSwap Aggregator fournit aux utilisateurs de MetaMask des taux de swap et une exécution sur plusieurs chaînes. MetaMask Connect amène les utilisateurs de MetaMask vers KyberSwap, et l'API Aggregator amène le routage de KyberSwap dans MetaMask.
« MetaMask est un partenaire précieux sur deux fronts. MetaMask Connect a simplifié la façon dont les traders se connectent à KyberSwap, en leur offrant une expérience fiable et cohérente, qu'ils utilisent l'extension ou l'application mobile. En parallèle, l'API KyberSwap Aggregator offre aux utilisateurs de MetaMask les meilleurs taux de swap disponibles et une exécution optimale sur plusieurs chaînes. C'est un partenariat fondé sur le principe qui nous tient le plus à cœur : rendre le trading DeFi plus simple, plus fluide et plus efficace pour tous. » — Ken Tran, Business Development Manager, KyberSwap
Les conseils de KyberSwap aux builders
Appuyez-vous sur la documentation officielle. Elle garantit que votre intégration reste conforme au standard et rend la transition plus fluide que si vous partiez d'anciens exemples ou d'un câblage personnalisé.
Intégrez la migration de la connexion au wallet dans un nettoyage plus large de votre stack. KyberSwap a remplacé son code MetaMask en passant à Wagmi v3 et Viem : le changement de connecteur n'était donc qu'un volet d'une consolidation planifiée, et non un projet à part.
Testez le passage au mobile de bout en bout. Ce qui compte pour les utilisateurs, c'est l'endroit où ils arrivent après avoir appuyé sur « Connecter ». KyberSwap a vérifié que les utilisateurs iOS accèdent directement à l'écran d'approbation de MetaMask.
Confrontez-la à votre propre architecture. La migration s'est bien déroulée avec la configuration de KyberSwap, mais la stack de chaque équipe est différente, et la bonne décision dépend des besoins de votre produit.
Développez avec MetaMask Connect : une seule intégration qui fonctionne pour tous les utilisateurs, quelle que soit leur façon de se connecter.