Zum Hauptinhalt springen

​
Einführung

Dieser Leitfaden führt dich durch einen KI-gestützten Entwicklungsablauf zum Erstellen einer Token-Swap-UI auf Solana. Das besondere Merkmal ist ein Panel, das die am häufigsten gehandelten Paare des Benutzers anzeigt und sie mit einem Klick auswählen lässt. So entsteht eine personalisierte Benutzererfahrung. Jeder Abschnitt zeigt die genauen verwendeten Prompts, die Ausgabe des Modells und wie wir das Helius AI Toolkit eingesetzt haben. Dieser Leitfaden zeigt die folgenden Technologien:

​
Endergebnis

Personalisierte Swap-UI mit Panel für kürzlich verwendete Paare

Personalized swap UI with recent pairs panel

​
Einrichtung

Installiere zunächst das Helius Claude Code Plugin. Führe dann in Claude Code diese beiden separaten Befehle aus:
In diesem Leitfaden verwenden wir Opus 4.6 als Modell. Wechsle bei Bedarf zu diesem Modell.
Dieser Leitfaden dient als Demonstration. Die Ausgabe eines Large Language Model (LLM) ist grundsätzlich zufällig. Daher können deine Ergebnisse abweichen, selbst wenn du genau dieselben Prompts wie in diesem Leitfaden verwendest.

​
Erster Prompt

Definiere mit diesem Prompt die gesamte UI und ihr Verhalten in einem Durchgang:

Prompt

Erstelle eine personalisierte Token-Swap-Oberfläche für Solana.Füge eine Token-Swap-UI im üblichen Stil hinzu: eine zentrierte Box mit zwei Token-Auswahlfeldern und einem Swap-Button.Zeige rechts daneben eine Liste von Token-Paaren an, die der Benutzer direkt auswählen kann. Zeige neben dem Namen jedes Tokens dessen Logo an.Gehe zum Erstellen der Liste so vor: Nachdem ein Benutzer seine Wallet verbunden hat, untersuche seinen Swap-Verlauf und extrahiere die 10 zuletzt verwendeten Handelspaare. Sortiere sie nach der Häufigkeit der Swaps.
Dieser Prompt legt Folgendes fest:
  • Das grundlegende Layout (Swap-Box + Leiste mit kürzlich verwendeten Paaren)
  • Die Personalisierungsregel (Wallet-Verlauf)
  • Die Sortierstrategie (Häufigkeit der letzten Nutzung)
In unserem Fall schlug das Modell Folgendes vor:
Ich erstelle das Grundgerüst des Projekts. Ich erstelle eine Vite-, React- und TypeScript-App mit Phantom-Wallet-Verbindung, DFlow-Swaps über Helius Sender und einem Swap-Verlauf aus der Helius Wallet API.
Das ist ein sinnvoller Stack:
  • Vite + React + TypeScript für eine moderne, typsichere UI
  • Phantom zum Verbinden der Wallet und Signieren
  • DFlow für die besten Kursangebote
  • Helius APIs für den Wallet-Verlauf
  • Helius Sender zum Senden von Transaktionen
Das Modell wies uns an, eine .env-Datei mit unserem Helius API key hinzuzufügen. Danach starteten wir die App mit npm run dev:
Erste Version der App

Initial version of the app

​
Fehlende kürzlich verwendete Paare

Nachdem wir unsere Wallet verbunden hatten, stellten wir fest, dass im Panel für kürzlich verwendete Paare einige Handelspaare fehlten, die wir vor Kurzem getauscht hatten. Deshalb baten wir den Agent, das Problem zu untersuchen:

Prompt

Bonk / SOL wird nicht als kürzlich verwendetes Paar angezeigt, obwohl es kürzlich Swaps gab. Kannst du prüfen, warum?2BnyMbNYLjYorNwbPjhUBHSQBTbCTjuqouQwZiYY6auh
Um dieses Problem zu lösen, musste der Agent den Transaktionsverlauf der angegebenen Wallet kennen. Da wir nur die Wallet-Adresse angegeben hatten, entschied er sich, zwei Helius MCP-Tools direkt zu verwenden, um diese Informationen abzurufen: getTransactionHistory und parseTransactions. So konnte er den Fehler schnell identifizieren:
Der Code stützt sich ausschließlich auf events.swap, anstatt die tatsächlichen Token-Übertragungen zu analysieren.
Ich korrigiere die Extraktion des Swap-Verlaufs, sodass tokenTransfers und nativeTransfers direkt verwendet werden.
Er behob das Problem, indem er die Erkennung von Handelspaaren änderte: Wir prüfen jetzt einfach, welche Tokens in einer Transaktion in die Wallet hinein- und aus ihr herausübertragen wurden. Jetzt sehen wir alle unsere Handelspaare in der App:
Alle Handelspaare werden angezeigt

All trading pairs shown

​
UI-Optimierung

Das Gesamtdesign der App ist bereits gut, aber das Layout der Swap-UI muss noch etwas optimiert werden:

Prompt

Korrigiere das Design der Token-Auswahlbox:Platziere die Token-Auswahl auf der rechten Seite.Gestalte die Breite des Eingabefelds für den Betrag flexibel, sodass es sauber in die Box passt.
Der Agent setzte diese UI-Änderungen umgehend um:
Neues Layout für die Token-Auswahlbox

New layout for the token selector box

​
Anzeige des Kursangebots

Derzeit müssen die Token-Beträge in der Swap-UI manuell festgelegt werden. Der Benutzer sieht daher nicht, wie viele Tokens er im Gegenzug erhält. Es wäre sinnvoll, das Feld für den Token-Betrag automatisch mit einem aktuellen DFlow-Kursangebot auszufüllen.

Prompt

Wenn der Benutzer einen Betrag für ein Token eingegeben hat, rufe ein Kursangebot ab und zeige den Ausgabebetrag für das andere Token an.
Für die Implementierung nutzte der Agent seine DFlow-Funktion, um den richtigen endpoint zum Abrufen von Kursangeboten zu finden. Die Swap-UI ruft den angebotenen Ausgabebetrag jetzt dynamisch ab und zeigt ihn an:
Vorschau des Kursangebots mit dem Ausgabebetrag im Empfangsfeld

Quote preview showing the output amount in the receive field

​
Swap-Informationen hinzufügen

Sobald ein Swap abgeschlossen ist, kann der Benutzer ihn nicht on-chain überprüfen. Fügen wir diese Möglichkeit der UI hinzu:

Prompt

Gib nach einem erfolgreichen Swap die vollständige Transaktionssignatur aus. Verlinke sie außerdem mit einem Explorer.
Zum Testen führen wir einen Beispiel-Swap aus:
Bestätigungs-Pop-up der Wallet beim Signieren des Swaps

Wallet confirmation popup during swap signing

Jetzt werden die Informationen in der UI angezeigt:
Ausgabe eines erfolgreichen Swaps mit vollständiger Signatur und Explorer-Link

Successful swap output with full signature and explorer link