> ## Documentation Index
> Fetch the complete documentation index at: https://www.helius.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Interface de Swap Personnalisée
> Utilisez la boîte à outils Helius AI pour construire une interface de swap personnalisée Solana.
## 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](/docs/fr/agents/overview).
Ce guide présente les technologies suivantes :
* Intégration du portefeuille [Phantom](/docs/fr/agents/skills/phantom)
* [DFlow](/docs/fr/agents/skills/dflow) pour les devis et les swaps
* [Helius Sender](/docs/fr/sending-transactions/sender) pour l'envoi rapide de transactions
* [Transactions Améliorées de Helius](/docs/fr/enhanced-transactions/overview) pour l'analyse des transactions
## Résultat final
## Configuration
Avant de commencer, installez le [plugin Helius Claude Code](/docs/fr/agents/claude-code-plugin). Dans Claude Code, exécutez ceci comme deux commandes distinctes :
```
/plugin marketplace add helius-labs/core-ai
```
```
/plugin install helius@helius-labs
```
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 :
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` :
## 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 :
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](/docs/fr/agents/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 :
## 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 :
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 :
## 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.
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](/docs/fr/agents/skills/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é :
## 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 :
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 :
Maintenant, l'information est affichée dans l'interface utilisateur :
