Solana DeFi: interface do Jupiter Swap (2023)

Introdução

A Jupiter é uma agregadora de várias DEXs e AMMs que encontra os swaps mais eficientes entre essas diferentes exchanges. Ela identifica para você as rotas de swap com os melhores preços em outras DEXs e AMMs, garantindo o melhor valor. Seja para simplesmente trocar por stablecoins ou interagir com os tokens do seu jogo DeFi favorito, a integração com a Jupiter é essencial.

Interface do Jupiter Swap: visão geral

Aprenda a interagir com a Jupiter de forma programática neste breve guia! Você criará uma dApp que usa a API da Jupiter para buscar cotações e executar swaps de SOL por USDC com base nos dados inseridos pelo usuário. O aplicativo demonstra recursos úteis, como a busca de cotações em tempo real e transações de swap assinadas pelo usuário. Durante a leitura deste artigo, consulte à vontade o repositório abaixo, que contém todo o código finalizado.

Este é o repositório completo: GitHub — Tidelaw/jup-ui

Pré-requisitos

Confira se os seguintes itens estão instalados:

• Node.js
• Next.js
• Tailwind (pode estar incluído no Next.js)

Dependências

É altamente recomendável seguir o artigo Connect Wallet para configurar corretamente a pasta de contextos, permitindo que o usuário conecte a carteira e assine as transações de swap.

As únicas dependências adicionais, não incluídas na criação inicial do projeto nem no artigo Connect Wallet, são os pacotes @project-serum/anchor e axios. Recomendamos simplesmente copiar este package.json para executar npm i e instalar todos os pacotes de uma só vez.

Swap.tsx

Primeiro, implementaremos o recurso de cotação, que retorna a quantidade estimada de USDC recebida pelo valor de SOL informado. Isso é bem simples com a Jupiter: precisamos fornecer apenas os endereços de mint dos tokens de entrada e saída, além da quantidade que queremos trocar.

Precisamos de uma variável de estado para armazenar a quantidade de SOL que o usuário quer trocar. Primeiro, configuraremos os campos de entrada: o código abaixo inclui tanto o controle deslizante do DaisyUI quanto o campo de texto, ambos como tags <input>, embora apenas um seja necessário. A tag de entrada precisará das propriedades value e onChange para atualizar continuamente a variável de estado.

Agora, podemos criar um hook useEffect. Quando o usuário informar um novo valor de SOL a ser convertido, faremos uma solicitação à Jupiter para buscar a cotação da quantidade solicitada.

Quote.tsx

Agora podemos acessar a pasta src/api/ e criar um arquivo chamado quote.tsx, no qual faremos solicitações à Jupiter para obter as cotações. Para receber a solicitação internamente, precisaremos configurar a função handler, permitindo apenas solicitações POST. Após recebermos do front-end a solicitação com a quantidade que o usuário quer trocar, basta alterar a URL da configuração para req.body.amount e fazer a solicitação à Jupiter.

Este é um exemplo do payload retornado. Enviaremos esse objeto de volta ao front-end para repassá-lo a outro endpoint, no qual faremos o swap.

Observe a desestruturação { data }, que acessa a propriedade data.data. Com isso, podemos enviar data diretamente de volta ao front-end por meio de res.status(200).json(data).

Agora, na função de retorno, atualizaremos a variável de estado da cotação quando nossa API interna responder com os dados acima. Depois disso, podemos acessar a propriedade específica de USDC, embora seja necessário dividi-la por 1 milhão e arredondá-la para duas casas decimais para representar corretamente o valor em USD. Isso é semelhante à forma como SOL nativo é expresso em lamports e precisa ser dividido por 1 bilhão.

Agora, basta inseri-lo no HTML para que seja exibido no front-end.

Interface da Jupiter: executando o swap

Agora que temos o objeto de cotação simulada, podemos criar uma nova função que executa o swap e envia uma solicitação ao endpoint da API.

Agora podemos criar um endpoint da API para receber essa solicitação usando o caminho de arquivo src/api/swap . Este exemplo usa um endereço de carteira definido estaticamente, mas você pode usar o hook useWallet e passá-lo ao endpoint. Após fazermos uma solicitação ao endpoint de swap com o objeto de cotação, teremos uma transação serializada que precisará apenas ser assinada no front-end. Você pode testar isso registrando o objeto no console.

Depois de recebermos essa transação serializada do back-end, podemos começar a prepará-la para envio. Primeiro, precisaremos obter o buffer da transação e desserializá-la para que possa ser assinada. Se você seguiu o Guia Connect Wallet mencionado anteriormente, deverá conseguir assinar essa transação usando wallet.signTransaction. Após assinar a transação, vamos serializá-la novamente e enviá-la usando a função sendRawTransaction.

Seria possível incluir outros recursos, como a exibição das assinaturas de transação no próprio site jup.ag. No momento, porém, elas são registradas apenas no console do navegador, onde ainda ficam acessíveis para um usuário técnico.

Conclusão: primeiros passos com a Helius

Este guia mostrou como criar uma dApp que usa a API da Jupiter para buscar cotações e executar swaps de SOL por USDC com base nos dados inseridos pelo usuário. Esperamos que ele seja útil para consultas futuras. Como sempre, fique à vontade para tirar dúvidas no Discord da Helius. Você também pode usar um RPC gratuito da Helius para estabelecer uma conexão. Para conhecer algumas ideias de como ampliar este projeto, veja as sugestões a seguir. Se você entendeu os mecanismos usados na criação de uma dApp que interage com a API da Jupiter para obter cotações e realizar swaps, a próxima etapa é aproveitar o poder da Helius para monitoramento e análise. Como a própria Jupiter é uma agregadora que encontra as melhores rotas de swap entre várias DEXs e AMMs, os dados que passam por ela são extremamente ricos e valiosos para entender a dinâmica do mercado.

Próximas etapas

• Adicionar uma propriedade ao payload ao enviar o objeto de cotação para o endpoint swap.ts.
• Exibir a assinatura da transação
• Incluir outros tokens ou permitir a conversão nos dois sentidos entre USDC e SOL
• Tratar erros e responsividade quando a carteira não estiver conectada
• Desserializar e enviar a TX no back-end para ocultar o RPC?

Recursos utilizados

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

‍