KyberSwap es una plataforma de trading descentralizada cuyo agregador de DEX ha facilitado más de 150.000 millones de USD en transacciones para más de 5 millones de usuarios. Cuando su equipo consolidó el frontend en Wagmi v3 y Viem, reemplazó el código de detección de MetaMask creado a mano por el conector oficial metaMask() de MetaMask Connect. Este caso de estudio explica por qué KyberSwap dio este paso, qué cambió en la web móvil y cómo encaja la integración de Connect con el otro papel de KyberSwap: proporcionar tarifas de swap a los usuarios de MetaMask.
La misión de KyberSwap: la mejor tarifa en cada operación
El DEX Aggregator de KyberSwap es una solución de trading descentralizada creada para ofrecer las mejores tarifas y una ejecución confiable en cada operación. Funciona con Smart Settlement, un algoritmo de enrutamiento inteligente diseñado para maximizar el resultado y minimizar el slippage al acceder a una liquidez profunda en distintas cadenas. En torno a ese núcleo están las órdenes limit, los swaps entre cadenas en 23 redes y Kyber Earn para oportunidades de rendimiento.
Una plataforma centrada en la calidad de ejecución tiene un requisito muy claro para su puerta de entrada: conectar una wallet no debería requerir pensarlo.
El código de wallet hecho a mano es una factura de mantenimiento
La configuración anterior de KyberSwap combinaba Wagmi v2 con ethers.js y una capa de conectores inyectados ad hoc, incluido código personalizado para detectar MetaMask y conectarse a ella. Al pasar a Wagmi v3 y Viem, el equipo decidió eliminar ese código y adoptar el conector oficial de MetaMask Connect.
Tres factores impulsaron la decisión. Un solo conector cubre ahora tanto la extensión del navegador en escritorio como el flujo de deep link y relay en la web móvil. Hay menos código personalizado de detección de wallets que mantener. Y seguir por la vía compatible de MetaMask mantiene a KyberSwap alineada a medida que EIP-6963 y el MetaMask Wallet Protocol (MWP) se convierten en la forma estándar en que las wallets y las dapps se encuentran.
Antes | Con MetaMask Connect |
Wagmi v2, ethers.js y una configuración de conectores inyectados ad hoc | Wagmi v3 y Viem con el conector oficial metaMask() |
Código de detección y conexión de MetaMask creado a mano que había que mantener | Detección y conexión gestionadas por el conector |
La web móvil dependía de un QR de WalletConnect | Conexión nativa mediante deep link a la app de MetaMask a través del relay de MWP |
Código personalizado para seguir los estándares de detección de wallets | Alineación con EIP-6963 y MWP a través de la vía compatible de MetaMask |
Cómo lograr un traspaso móvil impecable
En la web móvil, un código QR resulta incómodo: el usuario ya está en su teléfono. MetaMask Connect ofrece a KyberSwap un flujo de conexión mediante deep link que abre la app de MetaMask a través del relay de MWP, de modo que un trader desde su teléfono se conecta sin tener que escanear nada.
KyberSwap puso especial empeño en el traspaso en iOS. El objetivo era que los usuarios llegaran directamente a la pantalla de aprobación de MetaMask, sin pasos adicionales entre tocar conectar y aprobar. El resultado es la misma experiencia de conexión tanto si el trader llega desde la extensión de escritorio como desde la app móvil.
El stack
Capa | Componentes |
Trading | KyberSwap DEX Aggregator, Smart Settlement, órdenes limit, swaps entre cadenas (23 redes), Kyber Earn |
Frontend | Wagmi v3, Viem |
Conexión de wallet | MetaMask Connect (connect-evm), conector metaMask() |
Detección y transporte | EIP-6963, relay del MetaMask Wallet Protocol |
Wallet | Extensión de navegador de MetaMask (escritorio), app móvil de MetaMask |
Impacto hasta ahora
Desde que adoptó MetaMask Connect, KyberSwap informa de que la conexión ha sido confiable para los usuarios, que el despliegue fue fluido desde el primer día y que no ha recibido quejas ni incidencias.
El resultado para el usuario, según KyberSwap, es que conectarse y operar ahora se siente como un solo paso. Un trader se conecta a través de MetaMask y entra directamente en un swap con la mejor tarifa, sin nada en medio. MetaMask Connect se encarga de la puerta de entrada de ese flujo, y Smart Settlement se encarga del resto.
Dos integraciones, una sola relación
La integración de Connect es una mitad de la relación de KyberSwap con MetaMask. La otra mitad funciona en sentido contrario: la API de KyberSwap Aggregator proporciona a los usuarios de MetaMask tarifas de swap y ejecución en distintas cadenas. MetaMask Connect lleva a los usuarios de MetaMask a KyberSwap, y la API de Aggregator lleva el enrutamiento de KyberSwap a MetaMask.
“MetaMask ha sido un socio muy valioso en dos frentes. MetaMask Connect simplificó la forma en que los traders se conectan a KyberSwap, ofreciéndoles una experiencia confiable y coherente tanto si usan la extensión como la app móvil. Al mismo tiempo, la API de KyberSwap Aggregator ofrece a los usuarios de MetaMask las mejores tarifas de swap y la mejor ejecución disponibles en distintas cadenas. Es una alianza basada en el principio que más nos importa: hacer que el trading en DeFi sea más sencillo, fluido y eficiente para todos.” — Ken Tran, Business Development Manager, KyberSwap
Consejos de KyberSwap para desarrolladores
Apóyate en la documentación oficial. Así tu integración se mantiene alineada con el estándar y la transición resulta más limpia que si trabajas a partir de ejemplos antiguos o de conexiones personalizadas.
Migra la conexión de la wallet como parte de una limpieza más amplia del stack. KyberSwap reemplazó su código de MetaMask al pasar a Wagmi v3 y Viem, por lo que el cambio de conector fue una pieza de una consolidación planificada, no un proyecto aparte.
Prueba el traspaso a móvil de principio a fin. Lo que de verdad le importa al usuario es adónde llega después de tocar «conectar». KyberSwap comprobó que los usuarios de iOS lleguen directamente a la pantalla de aprobación de MetaMask.
Evalúalo según tu propia arquitectura. La migración fue sin contratiempos para la configuración de KyberSwap, pero el stack de cada equipo es distinto, y la decisión correcta depende de las necesidades de tu producto.
Crea con MetaMask Connect: una sola integración que funciona para todos los usuarios, sin importar cómo elijan conectarse.