Demostración de Jupiter Ultra Swap

Interfaz de usuario de Solana de una sola página que muestra intercambios de tokens mediante la API de Jupiter Ultra

Implementar la aplicación

Ver repositorio

Marco de trabajo o biblioteca de front-end:

Next.js

Idioma:

TypeScript

Herramienta de compilación/servidor de desarrollo:

npm

Vista previa de la aplicación de ejemplo

Resumen

Esta aplicación de una sola página basada en Solana facilita el intercambio de tokens mediante la integración de la API de Jupiter Ultra, junto con las tecnologías RPC de Quicknode y el adaptador de cartera de Solana. La aplicación ofrece una interfaz fluida que permite a los usuarios intercambiar tokens en la cadena de bloques de Solana, con actualizaciones de saldo en tiempo real y seguimiento de las transacciones.

Para obtener una explicación detallada sobre la integración de la API de Jupiter Ultra y los detalles de su implementación, consulta la guía complementaria: «Cómo intercambiar tokens con la API de Jupiter Ultra».

Solo en la red principal: tokens reales y comisiones

Jupiter Ultra Swap solo está disponible en la red principal beta de Solana. Esto significa que al realizar intercambios se negociarán tokens reales y se incurrirá en comisiones de red reales. Podrías perder valor debido a las fluctuaciones de precio, al deslizamiento de precios o a la selección de un par de tokens incorrecto. Prueba primero con pequeñas cantidades.

Arquitectura

┌─────────────────┐
│   Interfaz de usuario de Next.js    │
│  (Lado del cliente)  │
└────────┬────────┘
         │
         ├─ Adaptador de monedero (Phantom, Backpack, Solflare)
         │
         ├─ Rutas de la API (lado del servidor)
         │  ├─ /api/tokens
         │  ├─ /api/saldo
         │  ├─ /api/quote
         │  ├─ /api/execute
         │  └─ /api/rpc
         │
         ├─ API de Jupiter Ultra
         │  └─ Intercambios de tokens y cotizaciones
         │
         └─ RPC de Quicknode
            └─ Interacciones con la cadena de bloques de Solana

Características

Compatibilidad con varias carteras: conéctate con las carteras Phantom, Backpack o Solflare
Selección de tokens: elige entre una amplia lista de tokens de Solana verificados para el intercambio
Saldos en tiempo real: consulta los saldos de tokens en tiempo real directamente desde la cadena de bloques
Cotizaciones de swap: Obtén cotizaciones de swap al instante antes de ejecutar las operaciones
Ejecución de operaciones: Utiliza el ciclo de vida «Cotización → Orden → Firma → Ejecución → Estado» de Jupiter Ultra
Seguimiento de transacciones: supervisa el estado de los intercambios y consulta los detalles de las transacciones en Solana Explorer

Requisitos previos

Node.js (v18 o superior)
Un punto de conexión de Quicknode para Solana
Una clave API de Jupiter para la función de intercambio
Una cartera de Solana (Phantom, Backpack o Solflare) con acceso a la red principal
Una pequeña cantidad de SOL de la red principal beta para cubrir las comisiones de transacción
Una pequeña cantidad de tokens para intercambiar (se recomienda usar USDC para las pruebas)

Para obtener tu URL RPC de Quicknode:

Regístrate en Quicknode
Crear un nuevo punto final de Solana
Copia la URL del proveedor HTTP

Estructura del proyecto

jupiter-ultra-swap/
├── app/
│   ├── api/               # Rutas de la API del lado del servidor
│   │   ├── balances/      # Consultas de saldo de tokens
│   │   ├── execute/       # Ejecución de intercambios
│   │   ├── quote/         # Cotizaciones de intercambio
│   │   ├── rpc/           # Proxy RPC
│   │   └── tokens/        # Lista de tokens
│   ├── providers/         # Proveedores de contexto de React
│   ├── globals.css        # Estilos globales
│   ├── layout.tsx         # Diseño raíz
│   └── page.tsx           # Interfaz principal de intercambio
├── components/            # Componentes de la interfaz de usuario de Swap
├── hooks/                 # Hooks personalizados de React
│   ├── useWallet.ts       # Lógica de conexión con el monedero
│   ├── useTokens.ts       # Gestión de datos de tokens
│   └── useSwap.ts         # Coordinación del intercambio
├── lib/                   # Bibliotecas de utilidades
│   ├── jupiter-client.ts  # Cliente de la API de Jupiter
│   ├── solana-kit.ts      # Cliente RPC de Solana
│   └── types.ts           # Definiciones de TypeScript
└── .env.example           # Plantilla de variables de entorno

Primeros pasos

1. Clona el repositorio:

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

2. Instalar las dependencias:

npm instalar

3. Configurar las variables de entorno:

cp .env.example .env.local

Editar .env.local y añade tu URL RPC de Quicknode y tu clave API de Jupiter.

# Punto final RPC de Quicknode para Solana
QUICKNODE_RPC_URL=tu_punto_final_rpc_de_quicknode_aquí

# Clave API de Jupiter para la funcionalidad de intercambio
JUPITER_API_KEY=tu_clave_API_de_Jupiter_aquí

4. Ejecuta el servidor de desarrollo:

npm ejecutar dev

5. Abre la aplicación:

Accede a http://localhost:3000 en tu navegador.

Puntos de conexión de la API

La aplicación incluye las siguientes rutas de la API del lado del servidor:

/api/tokens: Devuelve la lista de tokens disponibles para el intercambio
/api/saldos: Obtiene los saldos de los tokens de una cartera conectada
/api/quote: Obtiene cotizaciones de swap a través de la API de Jupiter Ultra
/api/execute: Ejecuta la operación de intercambio
/api/rpc: Redirige las solicitudes RPC a Quicknode