Skip to main content

​
Introducción

Esta guía te muestra un flujo de desarrollo asistido por IA para crear una UI de swaps de tokens en Solana. Su función destacada es un panel que muestra los pares que el usuario intercambia con más frecuencia y le permite seleccionar uno con un solo clic. Esto crea una experiencia personalizada. Cada sección muestra los prompts exactos que se usaron, el resultado que produjo el modelo y cómo usamos el kit de herramientas de IA de Helius. Esta guía presenta las siguientes tecnologías:

​
Resultado final

UI de swaps personalizada con panel de pares recientes

Personalized swap UI with recent pairs panel

​
Configuración

Antes de comenzar, instala el plugin de Helius para Claude Code. Dentro de Claude Code, ejecuta estos comandos por separado:
En esta guía, usaremos Opus 4.6 como modelo. Cámbialo si es necesario.
Esta guía tiene fines demostrativos. El resultado de un modelo de lenguaje grande (LLM) es inherentemente aleatorio, por lo que tus resultados pueden variar incluso si usas exactamente los mismos prompts que aparecen en esta guía.

​
Prompt inicial

Usa este prompt para definir toda la UI y su comportamiento de una sola vez:

Prompt

Crea una interfaz personalizada para hacer swaps de tokens en Solana.Agrega una UI de swaps de tokens con el estilo habitual: un cuadro centrado con dos selectores de tokens y un botón de swap.A la derecha, muestra una lista de pares de tokens que el usuario pueda elegir directamente. Muestra el logotipo de cada token junto a su nombre.Para generar la lista, haz lo siguiente: después de que un usuario conecte su billetera, consulta su historial de swaps y extrae los 10 pares de trading más recientes que usó. Ordénalos según la frecuencia de los swaps.
Este prompt establece:
  • El diseño principal (cuadro de swap + panel lateral de pares recientes)
  • La regla de personalización (historial de la billetera)
  • La estrategia de clasificación (frecuencia de uso reciente)
En nuestro caso, el modelo propuso lo siguiente:
Voy a crear la estructura inicial del proyecto. Crearé una aplicación con Vite + React + TypeScript que incluya conexión con la billetera Phantom, swaps de DFlow mediante Helius Sender e historial de swaps de la API de billeteras de Helius.
Esta es una combinación de tecnologías adecuada:
  • Vite + React + TypeScript para una UI moderna y con seguridad de tipos
  • Phantom para conectar la billetera y firmar
  • DFlow para obtener las mejores cotizaciones
  • Las API de Helius para consultar el historial de la billetera
  • Helius Sender para enviar transacciones
El modelo nos indicó que agregáramos un archivo .env con nuestra clave de API de Helius. Después, iniciamos la aplicación con npm run dev:
Versión inicial de la aplicación

Initial version of the app

​
Faltan pares recientes

Después de conectar nuestra billetera, observamos que en el panel de pares recientes faltaban algunos pares con los que habíamos hecho swaps recientemente. Por eso, le pedimos al agente que investigara:

Prompt

No muestra Bonk / SOL como par reciente, aunque tiene swaps recientes. ¿Puedes revisar por qué?2BnyMbNYLjYorNwbPjhUBHSQBTbCTjuqouQwZiYY6auh
Para resolver este problema, el agente necesitaba conocer el historial de transacciones de la billetera proporcionada. Como solo proporcionamos la dirección de la billetera, decidió usar directamente dos herramientas de Helius MCP para obtener esa información: getTransactionHistory y parseTransactions. Esto le permitió identificar rápidamente el error:
El código depende únicamente de events.swap en lugar de analizar las transferencias reales de tokens.
Voy a corregir la extracción del historial de swaps para que use tokenTransfers y nativeTransfers directamente.
Así, solucionó el problema cambiando la forma en que detectamos los pares de trading: ahora simplemente comprobamos qué tokens se transfirieron hacia y desde la billetera en una transacción. Ahora vemos todos nuestros pares de trading en la aplicación:
Se muestran todos los pares de trading

All trading pairs shown

​
Ajustes de la UI

Aunque el diseño general de la aplicación ya es bueno, la disposición de la UI de swaps aún necesita algunos ajustes:

Prompt

Corrige el diseño del cuadro de selección de tokens:Coloca el selector de tokens a la derecha.Haz que el ancho del campo de entrada del importe sea flexible para que encaje correctamente en el cuadro.
El agente implementó rápidamente estos cambios en la UI:
Nuevo diseño del cuadro de selección de tokens

New layout for the token selector box

​
Visualización de la cotización

Por el momento, los importes de los tokens en la UI de swaps deben establecerse manualmente. Esto significa que el usuario no puede ver cuántos tokens recibirá a cambio. Sería útil completar automáticamente el campo del importe de tokens con una cotización reciente de DFlow.

Prompt

Cuando el usuario haya ingresado un importe para un token, obtén una cotización y muestra el importe de salida del otro token.
Para implementar esto, el agente usó su habilidad de DFlow para encontrar el endpoint adecuado para obtener cotizaciones. Ahora, la UI de swaps obtiene y muestra dinámicamente el importe de salida cotizado:
Vista previa de la cotización que muestra el importe de salida en el campo de recepción

Quote preview showing the output amount in the receive field

​
Agregar información del swap

Una vez que se confirma un swap, el usuario no tiene forma de verificarlo en la cadena. Agreguemos esta función a la UI:

Prompt

Muestra la firma completa de la transacción cuando el swap se complete correctamente. Agrega también un enlace a un explorador.
Para probarlo, hacemos un swap de ejemplo:
Ventana emergente de confirmación de la billetera durante la firma del swap

Wallet confirmation popup during swap signing

Ahora, la información se muestra en la UI:
Resultado de un swap exitoso con la firma completa y un enlace al explorador

Successful swap output with full signature and explorer link