Skip to main content

​
Introduction

Ce guide vous accompagne dans un flux de développement assisté par IA pour construire une interface de swap de tokens sur Solana. Sa caractéristique principale est un panneau qui affiche les paires les plus échangées de l’utilisateur et lui permet d’en sélectionner une d’un seul clic. Cela en fait une expérience personnalisée. Chaque section montre les invites exactes qui ont été utilisées, ce que le modèle a produit comme sortie, et comment nous avons utilisé la boîte à outils Helius AI. Ce guide présente les technologies suivantes :

​
Résultat final

Interface de swap personnalisée avec panneau de paires récentes

Interface de swap personnalisée avec panneau de paires récentes

​
Configuration

Avant de commencer, installez le plugin Helius Claude Code. Dans Claude Code, exécutez ceci comme deux commandes distinctes :
Dans ce guide, nous utiliserons le modèle Opus 4.6. Veuillez changer si nécessaire.
Ce guide est conçu comme une démonstration. La sortie des grands modèles de langage (LLM) est intrinsèquement aléatoire, donc même si vous utilisez exactement les mêmes invites que dans ce guide, vos résultats peuvent différer.

​
Invite initiale

Utilisez cette invite pour définir l’interface utilisateur complète et le comportement en une seule fois :

Prompt

Construisez une interface de swap de token personnalisée pour Solana.Ajoutez une interface de swap de token dans le style habituel : une boîte centrée avec deux sélecteurs de tokens et un bouton de swap.À sa droite, affichez une liste de paires de tokens que l’utilisateur peut choisir directement. Affichez le logo de chaque token à côté de son nom.Pour calculer la liste, faites ceci : Après qu’un utilisateur se connecte avec son portefeuille, examinez son historique de swaps et extrayez les 10 dernières paires échangées qu’il a utilisées. Triez-les par fréquence de swaps.
Cette invite établit :
  • La disposition de base (boîte de swap + rail de paires récentes)
  • La règle de personnalisation (historique du portefeuille)
  • La stratégie de classement (fréquence d’utilisation récente)
Dans notre cas, le modèle a proposé ceci :
Laissez-moi mettre en place le projet. Je vais créer une application Vite + React + TypeScript avec connexion au portefeuille Phantom, swaps DFlow via Helius Sender, et historique des swaps de l’API Helius Wallet.
C’est une pile technologique raisonnable :
  • Vite + React + TypeScript pour une interface moderne et sûre en termes de typage
  • Phantom pour la connexion et la signature de portefeuille
  • DFlow pour les meilleures devises
  • API Helius pour l’historique de portefeuille
  • Helius Sender pour l’envoi de transactions
Le modèle nous a demandé d’ajouter un fichier .env avec notre clé API Helius. Après l’avoir fait, nous avons démarré l’application avec npm run dev :
Version initiale de l'application

Version initiale de l'application

​
Paires récentes manquantes

Après avoir connecté notre portefeuille, nous avons constaté que le panneau des paires récentes manquait certaines paires échangées récemment. Nous avons donc demandé à l’agent d’enquêter :

Prompt

Il ne montre pas Bonk / SOL en tant que paire récente même s’il y a des swaps récents. Pouvez-vous vérifier pourquoi ?2BnyMbNYLjYorNwbPjhUBHSQBTbCTjuqouQwZiYY6auh
Pour résoudre ce problème, l’agent devait connaître l’historique des transactions du portefeuille donné. Comme nous n’avons fourni que l’adresse du portefeuille, il a décidé d’utiliser directement deux outils Helius MCP pour obtenir ces informations : getTransactionHistory et parseTransactions. Cela lui a permis d’identifier rapidement le bug :
Le code repose uniquement sur events.swap au lieu d’analyser les transferts réels de tokens.
Laissez-moi corriger l’extraction de l’historique des swaps pour utiliser directement tokenTransfers et nativeTransfers.
Ainsi, il a résolu le problème en modifiant la méthode de détection des paires échangées : Nous vérifions maintenant simplement quels tokens ont été transférés vers et depuis le portefeuille lors d’une transaction. Nous voyons maintenant toutes nos paires échangées dans l’application :
Toutes les paires échangées montrées

Toutes les paires échangées montrées

​
Affinement de l’interface utilisateur

Bien que le design général de l’application soit déjà bon, la disposition de l’interface de swap nécessite encore quelques ajustements :

Prompt

Corrigez la conception de la boîte de sélection de tokens :Placez le sélecteur de tokens à droite.Rendez la largeur du champ de saisie pour le montant flexible afin qu’il s’intègre parfaitement dans la boîte.
L’agent a rapidement mis en œuvre ces changements d’interface utilisateur :
Nouvelle disposition pour la boîte de sélection de tokens

Nouvelle disposition pour la boîte de sélection de tokens

​
Affichage des devises

Actuellement, les montants des tokens dans l’interface de swap doivent être définis manuellement. Cela signifie que l’utilisateur ne voit pas combien de tokens il recevra en retour. Il serait utile de remplir automatiquement le champ du montant de token avec une devise récente de DFlow.

Prompt

Lorsque l’utilisateur a saisi un montant pour un token, obtenez une devise et affichez le montant de sortie pour l’autre token.
Pour implémenter cela, l’agent a utilisé sa compétence DFlow pour trouver le bon point de terminaison pour récupérer les devises. L’interface de swap récupère maintenant dynamiquement et affiche le montant de sortie coté :
Aperçu des devises montrant le montant de sortie dans le champ de réception

Aperçu des devises montrant le montant de sortie dans le champ de réception

​
Ajouter des informations sur le swap

Une fois qu’un swap est effectué, l’utilisateur n’a aucun moyen de le vérifier sur la chaîne. Ajoutons cela à l’interface utilisateur :

Prompt

Veuillez imprimer la signature complète de la transaction une fois le swap réussi. Liez-la également à un explorateur.
Pour les tests, nous effectuons un swap d’essai :
Popup de confirmation de portefeuille lors de la signature de swap

Popup de confirmation de portefeuille lors de la signature de swap

Maintenant, l’information est affichée dans l’interface utilisateur :
Sortie de swap réussie avec signature complète et lien vers explorateur

Sortie de swap réussie avec signature complète et lien vers explorateur