DeFi sur Solana : interface Jupiter Swap (2023)

Introduction

Jupiter est un agrégateur de différents DEX et AMM qui identifie les swaps les plus efficaces parmi ces plateformes. Jupiter recherche pour vous les itinéraires de swap aux meilleurs prix sur différents DEX et AMM afin de vous garantir le meilleur tarif. Que vous souhaitiez simplement obtenir des stablecoins ou interagir avec les tokens de votre jeu DeFi préféré, l’utilisation de Jupiter est essentielle.

Interface Jupiter Swap : présentation

Découvrez comment interagir avec Jupiter par programmation grâce à ce guide rapide ! Vous allez créer une dApp qui utilise l’API de Jupiter pour récupérer des estimations de prix et effectuer des swaps de SOL vers USDC selon les données saisies par l’utilisateur. Cette application présente des fonctionnalités utiles, comme la récupération en temps réel des estimations de prix et la signature des transactions de swap par l’utilisateur. Au fil de cet article, n’hésitez pas à consulter le dépôt suivant, qui contient l’intégralité du code final.

Voici le dépôt complet : GitHub - Tidelaw/jup-ui

Prérequis

Vérifiez que les éléments suivants sont installés :

• Node.js
• Next.js
• Tailwind (peut être inclus dans Next.js)

Dépendances

Il est vivement recommandé de suivre l’article Connect Wallet afin de configurer correctement le dossier des contextes, qui permet à l’utilisateur de connecter son portefeuille et de signer les transactions de swap.

Les seules dépendances supplémentaires qui ne sont pas incluses lors de la création initiale du projet ni dans l’article Connect Wallet sont les packages @project-serum/anchor et axios. Nous vous recommandons de copier simplement ce package.json afin de pouvoir exécuter npm i et tout installer en une seule fois.

Swap.tsx

Nous allons commencer par implémenter la fonctionnalité d’estimation de prix, qui renverra la quantité estimée d’USDC obtenue pour le montant de SOL saisi. C’est assez simple avec Jupiter : il suffit de fournir les adresses de mint des tokens d’entrée et de sortie, ainsi que le montant à échanger.

Une variable d’état est nécessaire pour stocker le montant de SOL que l’utilisateur souhaite échanger. Commençons par configurer les champs de saisie : le code ci-dessous comprend à la fois le curseur DaisyUI et le champ de texte (tous deux sous forme de balises <input>), même si un seul est nécessaire. La balise input doit disposer d’une propriété value et d’une propriété onChange afin de mettre continuellement à jour la variable d’état.

Nous pouvons maintenant créer un hook useEffect. Lorsqu’un utilisateur saisit une nouvelle quantité de SOL à convertir, nous envoyons une requête à Jupiter afin de récupérer l’estimation correspondant au montant demandé.

Quote.tsx

Passons maintenant au dossier src/api/, dans lequel nous allons créer un fichier nommé quote.tsx. C’est ici que nous enverrons à Jupiter les requêtes d’estimation des montants. Pour recevoir la requête en interne, nous devons configurer la fonction handler afin de n’autoriser que les requêtes POST. Après avoir reçu la requête du frontend contenant le montant que l’utilisateur souhaite échanger, il suffit de remplacer l’URL de la configuration par req.body.amount et d’envoyer la requête à Jupiter.

Voici un exemple de la charge utile renvoyée. Nous transmettrons cet objet au frontend afin de l’envoyer à un autre endpoint, où nous effectuerons le swap.

Notez l’abstraction { data }, qui permet d’accéder à la propriété data.data. Nous pouvons ainsi renvoyer directement data au frontend via res.status(200).json(data).

Dans la fonction return, nous allons maintenant mettre à jour la variable d’état quoted lorsque notre API interne aura répondu avec les données ci-dessus. Nous pourrons ensuite accéder à la propriété exacte d’USDC. Sa valeur doit toutefois être divisée par un million et arrondie à deux décimales pour refléter le montant correct en USD. Le principe est similaire à celui du SOL natif, exprimé en lamports et devant être divisé par un milliard.

Il suffit désormais de l’insérer dans le HTML pour l’afficher dans le frontend.

Interface Jupiter : effectuer le swap

Maintenant que nous disposons de l’objet d’estimation simulé, nous pouvons créer une fonction qui effectue le swap et envoie une requête à l’endpoint de l’API.

Nous pouvons maintenant créer un endpoint d’API pour recevoir cette requête, à l’emplacement src/api/swap. Cet exemple utilise une adresse de portefeuille typée statiquement, mais vous pouvez utiliser le hook useWallet et la transmettre à l’endpoint. Après avoir envoyé à l’endpoint de swap une requête contenant l’objet d’estimation, nous obtenons une transaction sérialisée qu’il ne reste plus qu’à signer dans le frontend. Vous pouvez la tester en enregistrant l’objet dans la console.

Après avoir reçu cette transaction sérialisée du backend, nous pouvons commencer à la préparer pour l’envoi. Nous devons d’abord récupérer le buffer de la transaction, puis la désérialiser afin de pouvoir la signer. Si vous avez suivi le guide de connexion d’un portefeuille mentionné précédemment, vous devriez pouvoir signer cette transaction avec wallet.signTransaction. Après l’avoir signée, nous la sérialisons de nouveau et l’envoyons à l’aide de la fonction sendRawTransaction.

Des fonctionnalités supplémentaires pourraient être ajoutées, comme sur le site jup.ag, où les signatures de transaction sont affichées. Pour le moment, elles sont uniquement consignées dans la console du navigateur, mais restent accessibles aux utilisateurs techniques.

Conclusion : bien démarrer avec Helius

Ce guide vous a accompagné dans la création d’une dApp qui utilise l’API de Jupiter pour récupérer des estimations de prix et effectuer des swaps de SOL vers USDC selon les données saisies par l’utilisateur. Nous espérons qu’il vous servira de référence à l’avenir. Comme toujours, n’hésitez pas à poser vos questions sur le Discord de Helius. Vous pouvez également utiliser un RPC Helius gratuit pour établir une connexion. Vous trouverez ci-dessous quelques pistes pour développer davantage ce projet. Si vous avez compris les mécanismes de création d’une dApp qui interagit avec l’API de Jupiter pour obtenir des estimations de prix et effectuer des swaps, l’étape suivante consiste à exploiter la puissance de Helius pour le monitoring et l’analyse. Jupiter étant un agrégateur qui recherche les meilleurs itinéraires de swap parmi différents DEX et AMM, les données qui le traversent sont extrêmement riches et précieuses pour comprendre la dynamique du marché.

Étapes suivantes

• Ajouter une propriété à la charge utile lors de l’envoi de l’objet d’estimation à l’endpoint swap.ts.
• Afficher la signature de transaction
• Inclure d’autres tokens ou permettre de passer d’USDC à SOL et inversement
• Gérer les erreurs et la réactivité lorsque le portefeuille n’est pas connecté
• Désérialiser et envoyer la TX dans le backend pour masquer le RPC ?

Ressources utilisées

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

‍