Zum Inhalt springen

Ein Connector für jeden Weg, den ein Trader nimmt

Auf mobilen Websites verbinden sich KyberSwap-Trader über einen Deep Link, der die MetaMask-App öffnet, anstatt einen QR-Code zu verwenden. iOS-Nutzer gelangen direkt zum Genehmigungsbildschirm.

5 Min.
Ein Connector für jeden Weg, den ein Trader nimmt

KyberSwap ist eine dezentrale Trading-Plattform, über deren DEX-Aggregator bereits Transaktionen im Wert von mehr als 150 Mrd. US-Dollar für über 5 Mio. Nutzer abgewickelt wurden. Als das Team das Frontend auf Wagmi v3 und Viem umgestellt hat, ersetzte es den selbst entwickelten Code zur MetaMask-Erkennung durch den offiziellen metaMask()-Connector von MetaMask Connect. Diese Fallstudie zeigt, warum sich KyberSwap für diesen Schritt entschieden hat, was sich im mobilen Web verändert hat und wie die Connect-Integration neben KyberSwaps separater Rolle steht, MetaMask-Nutzern Swap-Kurse zu liefern.

KyberSwaps Aufgabe: der beste Kurs bei jedem Trade

Der DEX Aggregator von KyberSwap ist eine dezentrale Trading-Lösung, die für beste Kurse und zuverlässige Ausführung bei jedem Trade entwickelt wurde. Er läuft auf Smart Settlement, einem intelligenten Routing-Algorithmus, der den Output maximieren und Slippage minimieren soll, indem er tiefe Liquidität über mehrere Chains hinweg erschließt. Um diesen Kern herum gibt es Limit Orders, Crosschain-Swaps über 23 Netzwerke und Kyber Earn für Renditemöglichkeiten.

Eine Plattform, die auf Ausführungsqualität ausgelegt ist, stellt an ihren Eingang eine klare Anforderung: Eine Wallet zu verbinden sollte keinerlei Nachdenken erfordern.

Selbst entwickelter Wallet-Code ist eine Wartungsrechnung

KyberSwaps bisheriges Setup kombinierte Wagmi v2 mit ethers.js und einer Ad-hoc-Schicht für Injected-Connectors, einschließlich eigenem Code zur Erkennung von MetaMask und zur Verbindung damit. Im Zuge der Umstellung auf Wagmi v3 und Viem entschied sich das Team, diesen Code zugunsten des offiziellen Connectors von MetaMask Connect aufzugeben.

Drei Dinge gaben den Ausschlag. Ein einziger Connector deckt jetzt sowohl die Browser-Extension auf dem Desktop als auch den Deep-Link- und Relay-Flow im mobilen Web ab. Es muss weniger eigener Code zur Wallet-Erkennung gewartet werden. Und mit dem von MetaMask unterstützten Weg bleibt KyberSwap auf Kurs, während EIP-6963 und das MetaMask Wallet Protocol (MWP) zum Standard werden, über den Wallets und Dapps einander finden.

Vorher

Mit MetaMask Connect

Wagmi v2, ethers.js und ein Ad-hoc-Setup für Injected-Connectors

Wagmi v3 und Viem mit dem offiziellen metaMask()-Connector

Selbst entwickelter Code zur MetaMask-Erkennung und -Verbindung, der gewartet werden muss

Erkennung und Verbindung werden vom Connector übernommen

Im mobilen Web wurde ein WalletConnect-QR-Code genutzt

Native Deep-Link-Verbindung zur MetaMask-App über das MWP-Relay

Eigener Code, um Standards zur Wallet-Erkennung nachzuverfolgen

Ausrichtung an EIP-6963 und MWP über den von MetaMask unterstützten Weg

Die mobile Übergabe richtig umsetzen

Im mobilen Web ist ein QR-Code ein umständlicher Weg: Die Nutzer sind ja bereits auf ihrem Smartphone. MetaMask Connect gibt KyberSwap einen Deep-Link-Verbindungsflow an die Hand, der die MetaMask-App über das MWP-Relay öffnet, sodass sich Trader auf dem Smartphone verbinden, ohne etwas scannen zu müssen.

KyberSwap hat besonders viel Aufwand in die Übergabe unter iOS gesteckt. Das Ziel: Nutzer landen direkt auf dem MetaMask-Bestätigungsbildschirm, ohne zusätzlichen Schritt zwischen dem Tippen auf „Verbinden“ und der Bestätigung. Das Ergebnis ist dasselbe Verbindungserlebnis, egal ob ein Trader über die Desktop-Extension oder die mobile App kommt.

Der Stack

Ebene

Komponenten

Trading

KyberSwap DEX Aggregator, Smart Settlement, Limit Orders, Crosschain-Swaps (23 Netzwerke), Kyber Earn

Frontend

Wagmi v3, Viem

Wallet-Verbindung

MetaMask Connect (connect-evm), metaMask()-Connector

Erkennung und Transport

EIP-6963, MetaMask Wallet Protocol Relay

Wallet

MetaMask-Browser-Extension (Desktop), MetaMask-Mobile-App

Bisherige Wirkung

Seit der Einführung von MetaMask Connect berichtet KyberSwap, dass die Verbindung für Nutzer zuverlässig funktioniert, der Rollout vom ersten Tag an reibungslos verlief und bislang keine Beschwerden oder Probleme gemeldet wurden.

Das Ergebnis für die Nutzer ist laut KyberSwap, dass sich Verbinden und Traden jetzt wie ein einziger Schritt anfühlen. Ein Trader verbindet sich über MetaMask und gelangt direkt zu einem Swap zum besten Kurs, ohne Umwege dazwischen. MetaMask Connect kümmert sich um den Eingang dieses Flows, Smart Settlement um den Rest.

Zwei Integrationen, eine Beziehung

Die Connect-Integration ist die eine Hälfte von KyberSwaps Beziehung zu MetaMask. Die andere Hälfte verläuft in die entgegengesetzte Richtung: Die KyberSwap Aggregator API liefert MetaMask-Nutzern Swap-Kurse und Ausführung über mehrere Chains hinweg. MetaMask Connect bringt MetaMask-Nutzer zu KyberSwap, und die Aggregator API bringt KyberSwaps Routing in MetaMask.

„MetaMask ist an zwei Fronten ein geschätzter Partner. MetaMask Connect hat vereinfacht, wie Trader sich mit KyberSwap verbinden, und bietet ihnen ein zuverlässiges, einheitliches Erlebnis – ob mit der Extension oder der mobilen App. Gleichzeitig liefert die KyberSwap Aggregator API MetaMask-Nutzern die besten verfügbaren Swap-Kurse und Ausführung über mehrere Chains hinweg. Es ist eine Partnerschaft, die auf dem Prinzip beruht, das uns am wichtigsten ist: DeFi-Trading für alle einfacher, reibungsloser und effizienter zu machen.“ — Ken Tran, Business Development Manager, KyberSwap

KyberSwaps Rat an Builder

Verlass dich auf die offizielle Dokumentation. So bleibt deine Integration am Standard ausgerichtet, und der Umstieg gelingt sauberer als mit älteren Beispielen oder individuellen Eigenlösungen.

Migriere die Wallet-Verbindung im Rahmen einer umfassenderen Stack-Bereinigung. KyberSwap hat seinen MetaMask-Code beim Umstieg auf Wagmi v3 und Viem ersetzt. Die Änderung des Connectors war also Teil einer geplanten Konsolidierung und kein eigenständiges Projekt.

Teste die mobile Übergabe von Anfang bis Ende. Für Nutzer:innen zählt vor allem, wo sie landen, nachdem sie auf „Verbinden“ getippt haben. KyberSwap hat geprüft, dass iOS-Nutzer:innen direkt auf dem MetaMask-Bestätigungsbildschirm ankommen.

Wäge es gegen deine eigene Architektur ab. Die Migration verlief für das Setup von KyberSwap reibungslos, aber der Stack jedes Teams ist anders, und die richtige Entscheidung hängt von den Anforderungen deines Produkts ab.

Entwickle mit MetaMask Connect: eine Integration, die für alle Nutzer:innen funktioniert, egal wie sie sich verbinden möchten.

KI-übersetzt. Kann Fehler enthalten. Bitte überprüfen Sie die Informationen stets.

Bewerten Sie die Übersetzung

Dieser Artikel wurde verfasst von:

  • MetaMask

    MetaMask, ehemals Consensys Software Inc, ist die weltweit größte Self-Custody-Finanzplattform und bietet Menschen einen zentralen Ort, um ihr Geld in Krypto- und traditionellen Vermögenswerten zu verwahren, auszugeben, zu sparen und zu vermehren. Das Unternehmen entwickelt die Verbraucherplattform, auf der all das stattfindet, und vereint Zahlungen, Sparen, Investieren und digitale Assets in einem nahtlosen Erlebnis. Ausgehend von der weltweit meistgenutzten Self-Custody-Wallet gibt MetaMask Nutzern die direkte Kontrolle über ihr Geld und ihre Vermögenswerte – mit einer Reichweite in rund 190 Ländern. MetaMask hat seit 2016 eine grundlegende Rolle beim Wachstum von Ethereum gespielt. Heute steht MetaMask im Mittelpunkt der Blockchain-Wirtschaft, entwickelt das Betriebssystem für Open Money und gibt Menschen die volle Kontrolle über ihr finanzielles Leben.

    Alle Artikel lesen