Skip to main content

​
Introdução

Este guia conduz você por um fluxo de desenvolvimento assistido por IA para construir uma interface de swap de token no Solana. Seu recurso de destaque é um painel que exibe os pares negociados com mais frequência pelo usuário e permite que ele selecione um com um único clique. Isso torna a experiência personalizada. Cada seção mostra os prompts exatos que foram usados, o que o modelo produziu como saída e como usamos a ferramenta Helius AI. Este guia apresenta as seguintes tecnologias:

​
Resultado final

Interface de swap personalizada com painel de pares recentes

Interface de swap personalizada com painel de pares recentes

​
Configuração

Antes de começar, instale o plugin Helius Claude Code. Dentro do Claude Code, execute estes como dois comandos separados:
Neste guia, usaremos o Opus 4.6 como modelo. Mude se necessário.
Este guia é destinado a demonstração. A saída de modelos de linguagem grandes (LLM) é inerentemente aleatória, portanto, mesmo que você use exatamente os mesmos prompts deste guia, seus resultados podem variar.

​
Prompt inicial

Use este prompt para definir totalmente a interface do usuário e o comportamento em uma única etapa:

Prompt

Construa uma interface personalizada de troca de tokens para Solana.Adicione uma interface de troca de tokens no estilo regular: uma caixa centralizada com dois seletores de token e um botão de troca.À direita, exiba uma lista de pares de tokens que o usuário pode escolher diretamente. Exiba o logotipo de cada token ao lado do nome.Para calcular a lista, faça o seguinte: Depois que o usuário conectar sua carteira, verifique o histórico de trocas e extraia os 10 pares de negociação mais recentes que ele usou. Classifique-os pela frequência das trocas.
Este prompt estabelece:
  • O layout principal (caixa de troca + trilho de pares recentes)
  • A regra de personalização (histórico da carteira)
  • A estratégia de classificação (frequência a partir do uso recente)
No nosso caso, o modelo propôs isso:
Deixe-me estruturar o projeto. Vou criar um aplicativo Vite + React + TypeScript com conexão de carteira Phantom, trocas DFlow via Helius Sender e histórico de troca da Helius Wallet API.
Esta é uma pilha sensata:
  • Vite + React + TypeScript para uma interface moderna e segura por tipos
  • Phantom para conexão e assinatura de carteira
  • DFlow para melhores cotações
  • APIs Helius para histórico de carteira
  • Helius Sender para envio de transações
O modelo nos instruiu a adicionar um arquivo .env com nossa chave API Helius. Depois de fazer isso, iniciamos o app com npm run dev:
Versão inicial do app

Versão inicial do app

​
Pares recentes ausentes

Após conectar nossa carteira, observamos que o painel de pares recentes estava faltando alguns pares de negociação que trocamos recentemente. Então, pedimos ao agente para investigar:

Prompt

Não está mostrando Bonk / SOL como Par Recentes, embora tenha trocas recentes. Você pode verificar por quê?2BnyMbNYLjYorNwbPjhUBHSQBTbCTjuqouQwZiYY6auh
Para resolver esse problema, o agente precisava conhecer o histórico de transações da carteira fornecida. Como apenas fornecemos o endereço da carteira, ele decidiu usar duas ferramentas Helius MCP diretamente para obter essa informação: getTransactionHistory e parseTransactions. Isso permitiu identificar rapidamente o erro:
O código depende apenas de events.swap em vez de analisar transferências reais de tokens.
Deixe-me corrigir a extração do histórico de troca para usar tokenTransfers e nativeTransfers diretamente.
Então, corrigiu o problema alterando como detectamos pares de negociação: Agora, simplesmente verificamos quais tokens foram transferidos para dentro e fora da carteira em uma transação. Agora vemos todos os nossos pares de negociação no app:
Todos os pares de negociação mostrados

Todos os pares de negociação mostrados

​
Refinamento da UI

Embora o design geral do app já seja bom, o layout da interface de troca ainda precisa de algum refinamento:

Prompt

Corrija o design da caixa do seletor de token:Coloque o seletor de token à direita.Ajuste a largura do campo de entrada do valor para que se encaixe perfeitamente na caixa.
O agente prontamente implementou essas mudanças de UI:
Novo layout para a caixa do seletor de token

Novo layout para a caixa do seletor de token

​
Exibição de cotação

No momento, as quantidades de tokens na interface de troca precisam ser definidas manualmente. Isso significa que o usuário não vê quantos tokens ele receberá em troca. Seria útil preencher automaticamente o campo de quantidade de tokens com uma cotação recente do DFlow.

Prompt

Quando o usuário tiver inserido um valor para um token, obtenha uma cotação e exiba a quantidade de saída para o outro token.
Para implementar isso, o agente usou sua habilidade DFlow para encontrar o endpoint certo para obter cotações. A interface de troca agora busca e exibe dinamicamente a quantidade de saída cotada:
Pré-visualização de cotação mostrando a quantidade de saída no campo de recebimento

Pré-visualização de cotação mostrando a quantidade de saída no campo de recebimento

​
Adicionar informações de troca

Uma vez que uma troca é realizada, o usuário não tem como verificá-la na blockchain. Vamos adicionar isso à UI:

Prompt

Por favor, imprima a assinatura completa da transação assim que a troca for bem-sucedida. Também ligue a um explorador.
Para testar, fazemos uma troca de amostra:
Popup de confirmação da carteira durante assinatura de troca

Popup de confirmação da carteira durante assinatura de troca

Agora, a informação é exibida na UI:
Saída de troca bem-sucedida com assinatura completa e link para explorador

Saída de troca bem-sucedida com assinatura completa e link para explorador