DeFi en Solana: interfaz de Jupiter Swap (2023)

Introducción

Jupiter es un agregador de distintos DEX y AMM que encuentra los swaps más eficientes entre estos exchanges. Jupiter busca las rutas de swap con el mejor precio entre otros DEX y AMM para garantizar que obtengas el mejor precio. Ya sea que solo quieras cambiar tus tokens por stablecoins o interactuar con los tokens de tu juego DeFi favorito, interactuar con Jupiter es esencial.

Interfaz de Jupiter Swap: descripción general

¡Aprende a interactuar con Jupiter mediante código con esta breve guía! Esta guía te mostrará cómo crear una dApp que usa la API de Jupiter para obtener cotizaciones y ejecutar swaps de SOL a USDC según los datos ingresados por el usuario. Esta aplicación incluye funciones útiles, como la obtención de cotizaciones en tiempo real y la firma de transacciones de swap por parte del usuario. Mientras avanzas en este blog, puedes consultar el siguiente repositorio, que contiene todo el código terminado.

Este es el repositorio completo: GitHub - Tidelaw/jup-ui

Requisitos previos

Asegúrate de tener instalado lo siguiente:

• Node.js
• Next.js
• Tailwind (puede estar incluido en Next.js)

Dependencias

Te recomendamos seguir el blog Conectar billetera para configurar correctamente la carpeta contexts, lo que permitirá al usuario conectar su billetera y firmar las transacciones de swap.

Las únicas dependencias adicionales que no se incluyen al crear inicialmente el proyecto ni en el blog sobre cómo conectar una billetera son los paquetes @project-serum/anchor y axios. Te recomendamos copiar este package.json para que puedas ejecutar npm i e instalarlos todos a la vez.

Swap.tsx

Primero implementaremos la función de cotizaciones, que devuelve la cantidad estimada de USDC que recibirás por la cantidad de SOL ingresada. Esto es bastante sencillo con Jupiter: solo debemos proporcionar las direcciones de mint de los tokens de entrada y salida, además de la cantidad que queremos intercambiar.

Necesitamos una variable de estado para almacenar la cantidad de SOL que el usuario quiere intercambiar. Primero configuraremos las entradas: el siguiente código incluye tanto el control deslizante de DaisyUI como el campo de texto (ambos como etiquetas <input>), aunque solo necesitas uno. La etiqueta input debe tener las propiedades value y onChange para actualizar constantemente la variable de estado.

Ahora podemos crear un hook useEffect. Cuando un usuario ingrese una nueva cantidad de SOL para convertir, enviaremos una solicitud a Jupiter para obtener la cotización de la cantidad solicitada.

Quote.tsx

Ahora podemos ir a la carpeta src/api/, donde crearemos un archivo llamado quote.tsx. Allí enviaremos solicitudes a Jupiter para obtener las cantidades cotizadas. Para recibir la solicitud internamente, debemos configurar la función handler, que solo permitirá solicitudes POST. Después de recibir desde el frontend la solicitud con la cantidad que el usuario quiere intercambiar, solo debemos cambiar la URL de config a req.body.amount y enviar la solicitud a Jupiter.

Este es un ejemplo del payload devuelto. Enviaremos este objeto de vuelta al frontend para pasarlo a otro endpoint, donde realizaremos el swap.

Observa la abstracción { data }, que accede a la propiedad data.data. Así podemos enviar data directamente al frontend mediante res.status(200).json(data).

Ahora, en la función return, actualizaremos la variable de estado quoted cuando nuestra API interna responda con los datos anteriores. Después podremos acceder a la propiedad exacta de USDC, aunque debemos dividirla entre un millón y redondearla a 2 decimales para reflejar correctamente la cantidad en USD. Esto es similar a cómo SOL nativo se expresa en lamports y debe dividirse entre mil millones.

Ahora solo debemos insertarla en el HTML para que se muestre en el frontend.

Interfaz de Jupiter: ejecutar el swap

Ahora que tenemos el objeto de cotización simulado, podemos crear una nueva función que ejecute el swap y envíe una solicitud al endpoint de la API.

Ahora podemos crear un endpoint de la API para recibir esta solicitud en la ruta src/api/swap. Este ejemplo usa una dirección de billetera con tipado estático, pero puedes usar el hook useWallet y pasarla al endpoint. Después de enviar una solicitud al endpoint de swap con el objeto de cotización, obtendremos una transacción serializada que solo debe firmarse en el frontend. Puedes probarlo registrando el objeto en la consola.

Después de recibir esta transacción serializada desde el backend, podemos comenzar a prepararla para enviarla. Primero debemos obtener el búfer de la transacción y luego deserializarla para poder firmarla. Si seguiste la guía para conectar una billetera anterior, deberías poder firmar esta transacción con wallet.signTransaction. Después de firmarla, volveremos a serializarla y enviaremos la transacción mediante la función sendRawTransaction.

Podríamos incluir funciones adicionales, como mostrar las firmas de las transacciones tal como lo hace el sitio jup.ag. Sin embargo, por ahora solo se registran en la consola del navegador, donde un usuario técnico aún puede acceder a ellas.

Conclusión: comienza a usar Helius

Esta guía te mostró cómo crear una dApp que usa la API de Jupiter para obtener cotizaciones y ejecutar swaps de SOL a USDC según los datos ingresados por el usuario. Esperamos que te resulte útil como referencia en el futuro. Como siempre, puedes hacer cualquier pregunta en el Discord de Helius. También puedes usar un RPC gratuito de Helius para establecer una conexión. A continuación encontrarás algunas ideas para seguir ampliando este proyecto. Si comprendiste cómo crear una dApp que interactúa con la API de Jupiter para obtener cotizaciones y realizar swaps, el siguiente paso es aprovechar Helius para monitoreo y análisis. Como Jupiter es un agregador que encuentra las mejores rutas de swap entre distintos DEX y AMM, los datos que fluyen a través de él son muy valiosos para comprender la dinámica del mercado.

Próximos pasos

• Agregar una propiedad al payload al enviar el objeto de cotización al endpoint swap.ts.
• Mostrar la firma de la transacción
• Incluir otros tokens o permitir el intercambio inverso entre USDC y SOL
• Manejar errores y capacidad de respuesta cuando la billetera no esté conectada
• ¿Deserializar y enviar la TX en el backend para ocultar el RPC?

Recursos utilizados

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

‍