KyberSwap 是一个去中心化交易平台,其 DEX 聚合器已为超过 500 万用户促成了逾 1500 亿美元的交易。在将前端整合到 Wagmi v3 和 Viem 的过程中,团队用 MetaMask Connect 提供的官方 metaMask() connector 取代了自行编写的 MetaMask 检测代码。本案例将介绍 KyberSwap 为何做出这一改变、移动端网页发生了哪些变化,以及 Connect 集成如何与 KyberSwap 为 MetaMask 用户提供兑换汇率这一独立角色并行运作。
KyberSwap 的使命:为每一笔交易提供最优汇率
KyberSwap 的 DEX 聚合器是一款去中心化交易解决方案,旨在为每一笔交易提供最优汇率和可靠的执行。它基于 Smart Settlement 运行,这是一种智能路由算法,通过接入跨链的深度流动性,最大化成交输出并尽量降低滑点。围绕这一核心,还有限价单、覆盖 23 个网络的跨链兑换,以及提供收益机会的 Kyber Earn。
对于一个以执行质量为核心的平台来说,入口有一个朴素的要求:连接钱包应该毫不费力。
自行编写的钱包代码是一笔维护成本
KyberSwap 之前的方案是将 Wagmi v2 与 ethers.js 以及一个临时拼凑的 injected connector 层结合使用,其中包括用于检测并连接 MetaMask 的自定义代码。在迁移到 Wagmi v3 和 Viem 的过程中,团队选择弃用这些代码,改用 MetaMask Connect 的官方 connector。
这一决定有三个原因。现在,一个 connector 即可同时覆盖桌面端的浏览器扩展程序,以及移动端网页的深度链接和中继流程。需要维护的自定义钱包检测代码更少了。此外,随着 EIP-6963 和 MetaMask Wallet Protocol (MWP) 成为钱包与 dapp 相互发现的标准方式,沿用 MetaMask 支持的路径也能让 KyberSwap 与之保持一致。
之前 | 使用 MetaMask Connect 之后 |
Wagmi v2、ethers.js 以及临时拼凑的 injected connector 方案 | Wagmi v3 和 Viem,搭配官方 metaMask() connector |
需要维护自行编写的 MetaMask 检测与连接代码 | 检测与连接均由 connector 处理 |
移动端网页依赖 WalletConnect 二维码 | 通过 MWP 中继,以原生深度链接方式连接 MetaMask 应用 |
需要自定义代码来跟进钱包发现标准 | 通过 MetaMask 支持的路径与 EIP-6963 和 MWP 保持一致 |
打造顺畅的移动端跳转
在移动端网页上,二维码并不是一个顺手的方式:用户本来就在手机上。MetaMask Connect 为 KyberSwap 提供了深度链接连接流程,可通过 MWP 中继打开 MetaMask 应用,因此使用手机的交易者无需扫描任何内容即可完成连接。
KyberSwap 在 iOS 端的跳转体验上投入了特别的精力。目标是让用户直接进入 MetaMask 的授权确认界面,从点击连接到确认授权之间不再有任何多余步骤。无论交易者是通过桌面扩展程序还是移动应用进入,最终都能获得一致的连接体验。
技术栈
层级 | 组件 |
交易 | KyberSwap DEX 聚合器、Smart Settlement、限价单、跨链兑换(23 个网络)、Kyber Earn |
前端 | Wagmi v3、Viem |
钱包连接 | MetaMask Connect (connect-evm)、metaMask() connector |
发现与传输 | EIP-6963、MetaMask Wallet Protocol 中继 |
钱包 | MetaMask 浏览器扩展程序(桌面端)、MetaMask 移动应用 |
目前成效
自采用 MetaMask Connect 以来,KyberSwap 反馈用户连接一直稳定可靠,上线过程从第一天起就很顺利,也没有收到任何投诉或问题反馈。
用 KyberSwap 的话来说,用户层面的成果是:连接和交易现在感觉就像一步完成。交易者通过 MetaMask 连接后,即可直接以最优汇率进行兑换,中间没有任何阻碍。MetaMask Connect 负责这一流程的入口,其余部分则交给 Smart Settlement。
两项集成,一段合作关系
Connect 集成只是 KyberSwap 与 MetaMask 合作关系的一半。另一半则是反向运作:KyberSwap Aggregator API 为 MetaMask 用户提供跨链的兑换汇率和交易执行。MetaMask Connect 将 MetaMask 用户带入 KyberSwap,而 Aggregator API 则将 KyberSwap 的路由能力带入 MetaMask。
“MetaMask 在两个方面都是我们珍视的合作伙伴。MetaMask Connect 简化了交易者连接 KyberSwap 的方式,无论使用扩展程序还是移动应用,都能获得可靠、一致的体验。与此同时,KyberSwap Aggregator API 也为 MetaMask 用户提供跨链的最优兑换汇率和交易执行。这段合作建立在我们最看重的同一原则之上:让 DeFi 交易对每个人来说都更简单、更顺畅、更高效。” — Ken Tran,KyberSwap 业务拓展经理
KyberSwap 给开发者的建议
以官方文档为准。这样可以确保您的集成符合标准,过渡也比参考旧示例或自定义连接方式更顺畅。
将钱包连接迁移作为整体技术栈清理的一部分。KyberSwap 在升级到 Wagmi v3 和 Viem 的同时替换了其 MetaMask 代码,因此连接器的变更只是计划中整合工作的一环,而不是一个单独的项目。
端到端测试移动端跳转。对用户来说,关键在于点击连接后会跳转到哪里。KyberSwap 已确认 iOS 用户可以直接进入 MetaMask 的授权界面。
结合自身架构进行评估。此次迁移对 KyberSwap 的架构来说进行得很顺利,但每个团队的技术栈各不相同,具体如何选择取决于您产品的需求。
使用 MetaMask Connect 进行构建:一次集成,即可适用于每一位用户,无论他们选择何种方式连接。