Solana DeFi: Jupiter Swap UI (2023)

Einführung

Jupiter aggregiert verschiedene DEXs und AMMs, um über diese Börsen die effizientesten Swaps zu finden. Jupiter ermittelt für dich die günstigsten Swap-Routen über andere DEXs und AMMs und stellt so sicher, dass du den besten Preis erhältst. Egal, ob du einfach in Stablecoins tauschen oder mit den Token deines bevorzugten DeFi-Spiels interagieren möchtest: Jupiter ist unverzichtbar.

Jupiter Swap UI: Überblick

In dieser kurzen Anleitung erfährst du, wie du programmatisch mit Jupiter interagierst. Du entwickelst eine dApp, die über die Jupiter API Preisangebote abruft und anhand der Benutzereingabe Swaps von SOL zu USDC ausführt. Die App zeigt nützliche Funktionen wie das Abrufen von Preisangeboten in Echtzeit und von Benutzern signierte Swap-Transaktionen. Während du diesem Blogbeitrag folgst, kannst du jederzeit das folgende Repository mit dem vollständigen Code zurate ziehen.

Hier findest du das vollständige Repository: GitHub – Tidelaw/jup-ui

Voraussetzungen

Stelle sicher, dass Folgendes installiert ist:

• Node.js
• Next.js
• Tailwind (möglicherweise bereits in Next.js enthalten)

Abhängigkeiten

Wir empfehlen dringend, dem Blogbeitrag „Connect Wallet“ zu folgen. So richtest du den Ordner contexts korrekt ein und ermöglichst Benutzern, ihre Wallet zu verbinden und die Swap-Transaktionen zu signieren.

Die einzigen zusätzlichen Abhängigkeiten, die weder bei der ursprünglichen Projekterstellung noch im Blogbeitrag „Connect Wallet“ enthalten sind, sind die Pakete @project-serum/anchor und axios. Am einfachsten kopierst du diese package.json. Anschließend kannst du mit npm i alle Pakete auf einmal installieren.

Swap.tsx

Zuerst implementieren wir die Preisangebotsfunktion. Sie gibt zurück, wie viel USDC du voraussichtlich für die eingegebene Menge SOL erhältst. Mit Jupiter ist das ganz einfach: Wir müssen lediglich die Input- und Output-Mint-Adressen der Token sowie die gewünschte Tauschmenge angeben.

Wir benötigen eine Zustandsvariable, um die SOL-Menge zu speichern, die der Benutzer tauschen möchte. Zuerst richten wir die Eingabefelder ein: Der folgende Code enthält sowohl den DaisyUI-Schieberegler als auch das Texteingabefeld (beide als <input>-Tags), obwohl nur eines davon erforderlich ist. Das input-Tag benötigt die Eigenschaften value und onChange, damit es die Zustandsvariable laufend aktualisieren kann.

Jetzt können wir einen useEffect-Hook erstellen. Sobald ein Benutzer einen neuen SOL-Wert zur Umwandlung eingibt, senden wir eine Anfrage an Jupiter, um das Preisangebot für die angeforderte Menge abzurufen.

Quote.tsx

Wechsle jetzt zum Ordner src/api/ und erstelle dort eine neue Datei namens quote.tsx. In dieser Datei fragen wir die angebotenen Beträge bei Jupiter ab. Um die Anfrage intern zu empfangen, müssen wir die handler-Funktion einrichten und ausschließlich POST-Anfragen zulassen. Sobald das Frontend die gewünschte Tauschmenge gesendet hat, müssen wir nur die URL in config auf req.body.amount setzen und die Anfrage an Jupiter senden.

Hier siehst du ein Beispiel für die zurückgegebene Payload. Wir geben dieses Objekt an das Frontend zurück. Von dort wird es an einen weiteren Endpunkt weitergeleitet, an dem wir den Swap ausführen.

Beachte die Abstraktion { data }, die auf die Eigenschaft data.data zugreift. Damit können wir data über res.status(200).json(data) direkt an das Frontend zurückgeben.

Jetzt aktualisieren wir in der return-Funktion die Zustandsvariable für das Preisangebot, sobald unsere interne API mit den obigen Daten geantwortet hat. Danach können wir auf die genaue USDC-Eigenschaft zugreifen. Wir müssen ihren Wert jedoch durch eine Million teilen und auf zwei Dezimalstellen runden, damit er den korrekten USD-Betrag darstellt. Das ähnelt der Darstellung von nativem SOL in Lamports, deren Wert durch eine Milliarde geteilt werden muss.

Jetzt können wir den Wert einfach in das HTML einfügen. Anschließend wird er im Frontend angezeigt.

Jupiter UI: Den Swap ausführen

Da uns jetzt das simulierte Angebotsobjekt vorliegt, können wir eine neue Funktion erstellen, die den Swap ausführt und eine Anfrage an den API-Endpunkt sendet.

Jetzt können wir unter dem Dateipfad src/api/swap einen API-Endpunkt erstellen, der diese Anfrage empfängt. Dieses Beispiel verwendet eine statisch typisierte Wallet-Adresse. Du kannst jedoch stattdessen den useWallet-Hook verwenden und dessen Wert an den Endpunkt übergeben. Nachdem wir das Angebotsobjekt an den Swap-Endpunkt gesendet haben, erhalten wir eine serialisierte Transaktion, die nur noch im Frontend signiert werden muss. Du kannst das testen, indem du das Objekt in der Konsole protokollierst.

Nachdem wir diese serialisierte Transaktion vom Backend empfangen haben, können wir sie für den Versand vorbereiten. Zuerst müssen wir den Transaktionspuffer abrufen und ihn anschließend deserialisieren, damit die Transaktion signiert werden kann. Wenn du zuvor der Anleitung zum Verbinden einer Wallet gefolgt bist, solltest du diese Transaktion einfach mit wallet.signTransaction signieren können. Nach der Signierung serialisieren wir sie erneut und senden sie mit der Funktion sendRawTransaction.

Du könntest weitere Funktionen wie auf der eigentlichen Website jup.ag hinzufügen und beispielsweise Transaktionssignaturen anzeigen. Momentan wird die Signatur jedoch nur in der Browserkonsole protokolliert, wo technisch versierte Benutzer weiterhin darauf zugreifen können.

Fazit: Erste Schritte mit Helius

In dieser Anleitung hast du eine dApp entwickelt, die über die Jupiter API Preisangebote abruft und anhand von Benutzereingaben Swaps von SOL zu USDC ausführt. Hoffentlich dient dir diese Anleitung auch künftig als hilfreiche Referenz. Wie immer kannst du deine Fragen gerne im Helius Discord stellen. Außerdem kannst du mit einem kostenlosen Helius RPC eine Verbindung herstellen. Einige Ideen für mögliche Projekterweiterungen findest du unten. Wenn du verstanden hast, wie du eine dApp entwickelst, die über die Jupiter API Preisangebote abruft und Swaps ausführt, kannst du im nächsten Schritt Helius für Monitoring und Analysen einsetzen. Jupiter aggregiert verschiedene DEXs und AMMs und findet die besten Swap-Routen. Deshalb sind die dort übertragenen Daten äußerst umfangreich und wertvoll, um die Marktdynamik zu verstehen.

Nächste Schritte

• Zusätzliche Eigenschaft in der Payload beim Senden des Angebotsobjekts an den Endpunkt swap.ts.
• Transaktionssignatur anzeigen
• Weitere Token hinzufügen oder die Tauschrichtung zwischen USDC und SOL umkehren
• Fehlerbehandlung und Reaktionsfähigkeit bei nicht verbundener Wallet
• TX im Backend deserialisieren und senden, um den RPC zu verbergen?

Verwendete Ressourcen

• https://station.jup.ag/docs/apis/swap-api#using-the-api
• https://station.jup.ag/api-v6/post-swap

‍