> ## Documentation Index
> Fetch the complete documentation index at: https://www.helius.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Interface de Swap Personalizada
> Use a ferramenta Helius AI para construir uma interface de swap personalizada Solana.
## 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](/docs/pt-BR/agents/overview).
Este guia apresenta as seguintes tecnologias:
* Integração de carteira [Phantom](/docs/pt-BR/agents/skills/phantom)
* [DFlow](/docs/pt-BR/agents/skills/dflow) para cotações e swaps
* [Helius Sender](/docs/pt-BR/sending-transactions/sender) para envio rápido de transações
* [Helius Enhanced Transactions](/docs/pt-BR/enhanced-transactions/overview) para análise de transações
## Resultado final
## Configuração
Antes de começar, instale o [plugin Helius Claude Code](/docs/pt-BR/agents/claude-code-plugin) para Claude Code:
```bash theme={"system"}
claude plugin install helius @claude-plugins-official
```
Ou instale-o no marketplace Helius dentro do Claude Code:
```
/plugin marketplace add helius-labs/core-ai
/plugin install helius@helius-labs
```
Neste guia, utilizaremos o modelo Opus 4.6. Por favor, mude se necessário.
Este guia é destinado como demonstração. A saída de modelos de linguagem de grande porte (LLM) é inerentemente aleatória, portanto, mesmo que você use exatamente os mesmos prompts deste guia, seus resultados podem ser diferentes.
## Prompt inicial
Use este prompt para definir a interface completa e o comportamento em uma única passagem:
Construa uma interface de swap de token personalizada para Solana.
Adicione uma interface de swap de token no estilo regular: uma caixa centralizada com dois seletores de token e um botão de swap.
À direita, exiba uma lista de pares de tokens que o usuário pode escolher diretamente. Exiba o logotipo de cada token ao lado de seu nome.
Para calcular a lista, faça o seguinte: Depois que um usuário conectar sua carteira, olhe para o histórico de swaps e extraia os 10 pares de negociação mais recentes que ele usou. Ordene-os pela frequência de swaps.
Este prompt estabelece:
* O layout principal (caixa de swap + painel de pares recentes)
* A regra de personalização (histórico da carteira)
* A estratégia de classificação (frequência de uso recente)
No nosso caso, o modelo propôs o seguinte:
> Deixe-me estruturar o projeto. Vou criar um aplicativo Vite + React + TypeScript com conexão de carteira Phantom, swaps DFlow via Helius Sender, e histórico de swaps da Helius Wallet API.
Esta é uma pilha sensata:
* Vite + React + TypeScript para uma interface moderna e segura
* Phantom para conexão e assinatura de carteira
* DFlow para as 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 de API Helius. Depois de fazer isso, iniciamos o aplicativo com `npm run dev`:
## 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 que investigasse:
Não está mostrando Bonk / SOL como Par Recente, mesmo tendo swaps recentes. Você pode verificar por quê?
2BnyMbNYLjYorNwbPjhUBHSQBTbCTjuqouQwZiYY6auh
Para resolver esse problema, o agente precisava conhecer o histórico de transações da carteira dada. Como fornecemos apenas o endereço da carteira, ele decidiu usar duas ferramentas [Helius MCP](/docs/pt-BR/agents/mcp) diretamente para obter essa informação: `getTransactionHistory` e `parseTransactions`.
Isso permitiu identificar rapidamente o bug:
> O código depende apenas de events.swap em vez de analisar as transferências reais de tokens.
> Deixe-me corrigir a extração do histórico de swaps para usar tokenTransfers e
> nativeTransfers diretamente.
Assim, corrigiu o problema mudando a forma como detectamos os pares de negociação: Agora simplesmente verificamos quais tokens foram transferidos dentro e fora da carteira em uma transação.
Agora vemos todos os nossos pares de negociação no aplicativo:
## Refinamento da UI
Embora o design geral do aplicativo já seja bom, o layout da interface de swap ainda precisa de alguns ajustes:
Corrija o design da caixa do seletor de token:
Coloque o seletor de token à direita.
Faça a largura do campo de entrada para o montante flexível para que se encaixe perfeitamente na caixa.
O agente prontamente implementou essas mudanças na UI:
## Exibição de cotação
No momento, os valores de token na interface de swap têm que ser definidos manualmente. Isso significa que o usuário não vê quantos tokens receberá em troca.
Seria útil preencher automaticamente o campo de quantidade de token por uma cotação recente do DFlow.
Quando o usuário tiver inserido um valor para um token, obtenha uma cotação e exiba o valor de saída para o outro token.
Para implementar isso, o agente usou sua habilidade [DFlow](/docs/pt-BR/agents/skills/dflow) para encontrar o endpoint certo para obter cotações.
A interface de swap agora busca e exibe dinamicamente o valor de saída cotado:
## Adicionar informações do swap
Uma vez que um swap é concluído, o usuário não tem como verificá-lo na blockchain. Vamos adicionar isso à interface:
Por favor, imprima a assinatura completa da transação uma vez que o swap seja bem-sucedido. Também faça um link para um explorer.
Para testar, fazemos um swap de exemplo:
Agora, a informação é exibida na interface:
