Démonstration de Jupiter Ultra Swap

Une interface utilisateur Solana d'une seule page permettant d'effectuer des échanges de jetons à l'aide de l'API Jupiter Ultra

Déployer l'application

Consulter le dépôt

Framework/bibliothèque front-end :

Next.js

Langue :

TypeScript

Outil de compilation/serveur de développement :

npm

Aperçu

Cette application monopage basée sur Solana facilite les échanges de jetons grâce à l'intégration de l'API Jupiter Ultra, associée aux technologies Quicknode RPC et Solana Wallet Adapter. L'application offre aux utilisateurs une interface fluide leur permettant d'échanger des jetons sur la blockchain Solana, avec une mise à jour en temps réel des soldes et un suivi des transactions.

Pour un guide détaillé sur l'intégration de l'API Jupiter Ultra et les modalités de mise en œuvre, consultez le guide associé : « Comment échanger des jetons avec l'API Jupiter Ultra ».

Réseau principal uniquement - Jetons réels et frais

Jupiter Ultra Swap n'est disponible que sur le réseau principal bêta de Solana. Cela signifie que les échanges effectués porteront sur de véritables tokens et entraîneront de véritables frais de réseau. Vous pourriez subir une perte de valeur en raison des fluctuations de prix, du slippage ou du choix d'une paire de tokens inadaptée. Commencez par tester avec de petits montants.

Architecture

┌─────────────────┐
│   Interface utilisateur Next.js    │
│  (Côté client)  │
└────────┬────────┘
         │
         ├─ Adaptateur de portefeuille (Phantom, Backpack, Solflare)
         │
         ├─ Routes API (côté serveur)
         │  ├─ /api/tokens
         │  ├─ /api/balances
         │  ├─ /api/quote
         │  ├─ /api/execute
         │  └─ /api/rpc
         │
         ├─ API Jupiter Ultra
         │  └─ Échanges de jetons et cotations
         │
         └─ RPC Quicknode
            └─ Interactions avec la blockchain Solana

Fonctionnalités

Prise en charge de plusieurs portefeuilles: connectez-vous avec les portefeuilles Phantom, Backpack ou Solflare
Sélection des jetons: choisissez parmi une liste complète de jetons Solana vérifiés à échanger
Soldes en temps réel: consultez les soldes de jetons en direct, directement depuis la blockchain
Cotations de swap: obtenez des cotations de swap instantanées avant d'exécuter vos transactions
Exécution des transactions: utilisez le cycle de vie « Devis → Ordre → Signature → Exécution → Statut » de Jupiter Ultra
Suivi des transactions: surveillez l'état des échanges et consultez les détails des transactions sur Solana Explorer

Prérequis

Node.js (v18 ou version ultérieure)
Un point de terminaison Quicknode pour Solana
Une clé API Jupiter pour la fonctionnalité d'échange
Un portefeuille Solana (Phantom, Backpack ou Solflare) permettant d'accéder au réseau principal
Une petite quantité de SOL de la version bêta du réseau principal pour les frais de transaction
Une petite quantité de tokens à échanger (USDC recommandé pour les tests)

Pour obtenir votre URL RPC Quicknode :

Inscrivez-vous sur Quicknode
Créer un nouveau point de terminaison Solana
Copiez l'URL du fournisseur HTTP

Structure du projet

jupiter-ultra-swap/
├── app/
│   ├── api/               # Routes API côté serveur
│   │   ├── balances/      # Requêtes de solde des jetons
│   │   ├── execute/       # Exécution des swaps
│   │   ├── quote/         # Cotations d'échange
│   │   ├── rpc/           # Proxy RPC
│   │   └── tokens/        # Liste des jetons
│   ├── providers/         # Fournisseurs de contexte React
│   ├── globals.css        # Styles globaux
│   ├── layout.tsx         # Mise en page racine
│   └── page.tsx           # Interface principale de permutation
├── components/            # Composants de l'interface utilisateur d'échange
├── hooks/                 # Hooks React personnalisés
│   ├── useWallet.ts       # Logique de connexion au portefeuille
│   ├── useTokens.ts       # Gestion des données de jetons
│   └── useSwap.ts         # Orchestration de l'échange
├── lib/                   # Bibliothèques d'utilitaires
│   ├── jupiter-client.ts  # Client API Jupiter
│   ├── solana-kit.ts      # Client RPC Solana
│   └── types.ts           # Définitions TypeScript
└── .env.example           # Modèle de variables d’environnement

Démarrer

1. Cloner le dépôt :

git clone https://github.com/quiknode-labs/qn-guide-examples.git
cd qn-guide-examples/solana/jupiter-ultra-swap

2. Installer les dépendances :

npm installer

3. Configurer les variables d'environnement :

cp .env.example .env.local

Modifier .env.local et ajoutez votre URL RPC Quicknode ainsi que votre clé API Jupiter.

# Point de terminaison RPC Quicknode pour Solana
QUICKNODE_RPC_URL=votre_point_de_terminaison_RPC_Quicknode_ici

# Clé API Jupiter pour la fonctionnalité d'échange
JUPITER_API_KEY=votre_clé_API_Jupiter_ici