Skip to main content

​
Einführung

Dieser Leitfaden führt Sie durch einen KI-unterstützten Entwicklungsablauf zur Erstellung einer Token-Swap-Benutzeroberfläche auf Solana. Das herausragende Merkmal ist ein Panel, das die am häufigsten gehandelten Paare des Benutzers anzeigt und die Auswahl mit einem einzigen Klick ermöglicht. Dies macht es zu einem personalisierten Erlebnis. Jeder Abschnitt zeigt die genauen Eingabeaufforderungen, die verwendet wurden, was das Modell als Ausgaben erzeugte und wie wir das Helius AI-Toolkit genutzt haben. Dieser Leitfaden zeigt die folgenden Technologien:

​
Endergebnis

Personalisierte Swap-Benutzeroberfläche mit Panel für jüngste Paare

Personalisierte Swap-Benutzeroberfläche mit Panel für jüngste Paare

​
Einrichtung

Bevor Sie beginnen, installieren Sie das Helius Claude Code-Plugin. Führen Sie in Claude Code diese als zwei separate Befehle aus:
In diesem Leitfaden verwenden wir Opus 4.6 als Modell. Bitte wechseln Sie bei Bedarf.
Dieser Leitfaden dient als Demonstration. Die Ausgabe von Modellen mit großer Sprachfähigkeit (LLM) ist von Natur aus zufällig. Selbst wenn Sie exakt dieselben Eingabeaufforderungen wie in diesem Leitfaden verwenden, können Ihre Ergebnisse variieren.

​
Erste Eingabeaufforderung

Verwenden Sie diese Eingabeaufforderung, um die vollständige Benutzeroberfläche und das Verhalten in einem Durchgang zu definieren:

Eingabeaufforderung

Erstellen Sie eine personalisierte Token-Swap-Oberfläche für Solana.Fügen Sie eine Token-Swap-Benutzeroberfläche im regulären Stil hinzu: ein zentriertes Feld mit zwei Token-Auswahlen und einem Swap-Button.Zeigen Sie rechts daneben eine Liste von Token-Paaren an, die der Benutzer direkt auswählen kann. Zeigen Sie das Logo jedes Tokens neben seinem Namen an.Um die Liste zu berechnen, tun Sie Folgendes: Nachdem ein Benutzer seine Wallet verbunden hat, schauen Sie in seine Swap-Historie und extrahieren Sie die 10 zuletzt verwendeten Handelspaare. Sortieren Sie sie nach Häufigkeit der Swaps.
Diese Eingabeaufforderung legt fest:
  • Das Kernlayout (Swap-Feld + Schiene für jüngste Paare)
  • Die Personalisierungsregel (Wallet-Historie)
  • Die Bewertungsstrategie (Häufigkeit anhand der letzten Nutzung)
In unserem Fall schlug das Modell Folgendes vor:
Lassen Sie mich das Projekt erstellen. Ich werde eine Vite + React + TypeScript-App mit Phantom-Wallet-Verbindung, DFlow-Swaps über Helius Sender und Swap-Historie von der Helius Wallet API erstellen.
Dies ist ein sinnvoller Stack:
  • Vite + React + TypeScript für eine moderne, typsichere Benutzeroberfläche
  • Phantom zur Wallet-Verbindung und Signierung
  • DFlow für die besten Angebote
  • Helius APIs für Wallet-Historie
  • Helius Sender für Transaktionssenden
Das Modell wies uns an, eine .env-Datei mit unserem Helius API-Schlüssel hinzuzufügen. Nachdem wir dies getan hatten, starteten wir die App mit npm run dev:
Erste Version der App

Erste Version der App

​
Fehlende jüngste Paare

Nach dem Verbinden unserer Wallet stellten wir fest, dass im Panel für jüngste Paare einige gehandelte Paare fehlten, die wir kürzlich getauscht hatten. Also baten wir den Agenten, nachzuforschen:

Eingabeaufforderung

Es wird Bonk / SOL nicht als jüngstes Paar angezeigt, obwohl es kürzliche Swaps gab. Können Sie nachsehen, warum?2BnyMbNYLjYorNwbPjhUBHSQBTbCTjuqouQwZiYY6auh
Um dieses Problem zu lösen, musste der Agent die Transaktionshistorie der angegebenen Wallet kennen. Da wir nur die Adresse der Wallet bereitgestellt hatten, entschied er sich, zwei Helius MCP Tools direkt zu verwenden, um diese Informationen zu erhalten: getTransactionHistory und parseTransactions. So konnte er den Fehler schnell identifizieren:
Der Code verlässt sich ausschließlich auf events.swap anstatt tatsächliche Token-Transfers zu analysieren.
Lassen Sie mich die Swap-Historien-Erfassung so ändern, dass tokenTransfers und nativeTransfers direkt verwendet werden.
Er löste das Problem, indem er änderte, wie wir Handelspaare erkennen: Wir prüfen jetzt einfach, welche Token in einer Transaktion in und aus der Wallet transferiert wurden. Wir sehen nun alle unsere Handelspaare in der App:
Alle Handelspaare angezeigt

Alle Handelspaare angezeigt

​
Verfeinerung der Benutzeroberfläche

Während das Gesamtdesign der App bereits gut ist, benötigt das Layout der Swap-Benutzeroberfläche noch einige Verbesserungen:

Eingabeaufforderung

Verbessern Sie das Design des Token-Auswahlfelds:Setzen Sie den Token-Auswähler nach rechts.Machen Sie die Breite des Eingabefelds für die Menge flexibel, sodass es sich gut in das Feld einfügt.
Der Agent implementierte diese UI-Änderungen umgehend:
Neues Layout für das Token-Auswahlfeld

Neues Layout für das Token-Auswahlfeld

​
Angebotsanzeige

Derzeit müssen die Token-Mengen in der Swap-Benutzeroberfläche manuell eingestellt werden. Das bedeutet, dass der Benutzer nicht sieht, wie viele Token er im Austausch erhält. Es wäre nützlich, das Mengenfeld der Token automatisch durch ein aktuelles DFlow-Angebot zu füllen.

Eingabeaufforderung

Wenn der Benutzer eine Menge für einen Token eingegeben hat, holen Sie ein Angebot ein und zeigen Sie die Ausgabemenge für den anderen Token an.
Um dies zu implementieren, nutzte der Agent seine DFlow Fähigkeit, um den richtigen Endpunkt für die Angebotsabfrage zu finden. Die Swap-Benutzeroberfläche ruft nun dynamisch die angebotene Ausgabemenge ab und zeigt sie an:
Angebotsvorschau zeigt die Ausgabemenge im Empfangsfeld

Angebotsvorschau zeigt die Ausgabemenge im Empfangsfeld

​
Hinzufügen von Swap-Informationen

Nachdem ein Swap stattgefunden hat, hat der Benutzer keine Möglichkeit, dies On-Chain zu verifizieren. Lassen Sie uns das zur Benutzeroberfläche hinzufügen:

Eingabeaufforderung

Bitte drucken Sie die vollständige Transaktionssignatur aus, sobald der Swap erfolgreich ist. Verlinken Sie sie auch zu einem Explorer.
Zum Testen führen wir einen Beispielswaus:
Wallet-Bestätigungspopup während der Swap-Verifizierung

Wallet-Bestätigungspopup während der Swap-Verifizierung

Nun werden die Informationen in der Benutzeroberfläche angezeigt:
Erfolgreiche Swap-Ausgabe mit vollständiger Signatur und Explorer-Link

Erfolgreiche Swap-Ausgabe mit vollständiger Signatur und Explorer-Link