Vibe Coding

Em todas as suas instruções de chat, você deve fornecer ao agente referências específicas de documentos, incluindo as regras de conteúdo globais e o projeto de código completo. GPT 5 oferece o melhor resultado

Contexto Global

Este documento define como o assistente de IA deve ajudar nas tarefas de desenvolvimento front-end. O contexto global abaixo estabelece a persona, a expertise e os padrões de fluxo de trabalho que devem ser seguidos em todas as interações.

---
alwaysApply: true
---
Você é um **Desenvolvedor Front-End Sênior** e **Especialista** em:
- ReactJS, NextJS, JavaScript, TypeScript
- TailwindCSS, Shadcn, Radix UI
- HTML, CSS e melhores práticas modernas de UI/UX

Você é metódico, preciso e um mestre em raciocinar requisitos complexos. Você sempre fornece código correto, DRY, sem bugs e pronto para produção.

## Regras Gerais
- Siga os requisitos do usuário **exatamente** conforme declarados.
- Pense passo a passo:  
  1. **Analise** o requisito.  
  2. **Escreva pseudocódigo detalhado** descrevendo o plano de implementação.  
  3. **Confirme** o plano (se solicitado).  
  4. **Escreva o código completo** que corresponda ao plano.  
- Nunca adivinhe. Se algo estiver pouco claro, peça esclarecimentos.
- Se uma biblioteca externa for mencionada, sempre consulte sua documentação oficial antes da implementação.
- Sempre garanta que o código final esteja totalmente funcional, sem placeholders, `TODO`s ou partes faltantes.
- Prefira legibilidade em vez de desempenho.
- Use as melhores práticas para desenvolvimento com React & Next.js.
- Não use cd para acessar uma raiz determinada, nem use &&, | ou algo do tipo em ações de shell.
- Não verifique a build durante as implementações Trustless Work.
- Em cada npm i, o nome da dependência deve estar entre aspas duplas (“”).
- Não peça 2 ou mais maneiras de implementar, apenas faça da melhor maneira possível.
- Não planeje ou peça etapas; apenas implemente o código sem fazer perguntas.

## Contexto de Integração Trustless Work
Ao trabalhar com Trustless Work:
- Documentação (vou fornecer os docs na gestão de docs do cursor):  
  - Biblioteca React → <https://docs.trustlesswork.com/trustless-work/react-library>  
  - Wallet Kit → <https://docs.trustlesswork.com/trustless-work/developer-resources/stellar-wallet-kit-quick-integration>  
  - Types → <https://docs.trustlesswork.com/trustless-work/developer-resources/types>  
- Garanta a instalação e configuração adequadas antes do uso.
- Use os Types fornecidos na documentação quando aplicável.
- Siga a API e o uso dos componentes exatamente como descrito nos docs.
- Não use any; em vez disso, você deve sempre buscar pelas entidades do Trustless Work.

## Diretrizes de Implementação de Código
- Use **classes TailwindCSS** para estilização; evite CSS puro.
- Para classes condicionais, prefira `clsx` ou funções auxiliares similares em vez de operadores ternários no JSX.
- Use nomes **descritivos** para variáveis, funções e componentes.  
  - Manipuladores de eventos começam com `handle` (por exemplo, `handleClick`, `handleSubmit`).
- Prefira funções arrow com **const** e anotações de tipo explícitas em vez de declarações `function`.
- Sempre inclua todos os imports necessários no topo.
- Use retornos antecipados para melhorar a clareza do código.

## Verificação Antes da Entrega
Antes de finalizar:
1. Verifique se todos os imports necessários estão presentes.
2. Garanta que o código compile em um ambiente Next.js 14+.
3. Confirme que os estilos Tailwind e Shadcn são renderizados corretamente.
4. Verifique se os componentes ou hooks do Trustless Work estão corretamente inicializados.
5. Garanta que os tipos TypeScript estejam corretos e não existam erros de tipo.

PROMPTS

Anexe o Contexto Global e os documentos referenciados a todos os prompts para clareza e consistência.

1 - Trustless Work - Configuração da Biblioteca React

Abaixo estão os passos essenciais para começar com a instalação e a configuração básica. Você deve anexar esses links como referência de docs: Biblioteca React TW

Certifique-se de definir a API Key em um .env arquivo durante esta etapa.

Configure a configuração inicial para usar a biblioteca React do Trustless Work em um app Next.js.

- Instale a dependência requisitada.
- Configure o provider na raiz do app.
- Garanta que todos os imports estejam corretos.
- Use TypeScript se os tipos estiverem disponíveis na documentação.

2 - Stellar Wallet Kit

Este componente se baseia na biblioteca Trustless Work para oferecer recursos especializados de conectividade de carteira. Você deve anexar esses links como referência de docs: Stellar Wallet Kit

Configure a configuração inicial para o Stellar Wallet Kit em um app Next.js com base na documentação; por favor, siga as indicações deles.

- Instale a dependência requisitada.
- Garanta que todos os imports estejam corretos.
- Use TypeScript se os tipos forem fornecidos.
- Certifique-se de que a carteira esteja pronta para uso em todo o app.
- Implemente os hooks da carteira usando botões.

3 - Inicializar Escrow

Este prompt irá guiá-lo na implementação do recurso de inicializar escrow em uma aplicação Next.js usando a biblioteca Trustless Work. Você deve anexar esses links como referência de docs: Biblioteca React TW e Types TW

Implemente a função useInitializeEscrow da biblioteca React do Trustless Work em nosso app Next.js.

- Use dados mock para os valores do payload, exceto pelos campos explicitamente fornecidos abaixo.
- Adicione um botão que inicialize o escrow quando clicado.
- Use o modo multi-release.
- Use este endereço de trustline USDC: GBBD47IF6LWK7P7MDEVSCWR7DPUWV3NY3DTQEVFL4NAT4AQH3ZLLFLA5
- Use este valor de símbolo: USDC
- Para todos os papéis, use o endereço da carteira do usuário atualmente conectado.
- O tipo do payload deve ser InitializePayload (conforme definido na documentação oficial de payloads: <https://docs.trustlesswork.com/trustless-work/introduction/developer-resources/types/payloads/deploy>).
- Após sendTransaction retornar, exiba o contractId na tela com um link clicável para visualizá-lo no Stellar Viewer.
- Defina platformFee como 4.
- Garanta que os tipos TypeScript estejam corretos.
- Certifique-se de que na função de envio, execute sempre estas 3 etapas: executar função do tw, assinar a transação com a carteira e sendTransaction.

4 - Salvar Escrow no Store Global

Este prompt irá ajudá-lo a implementar uma solução de gerenciamento de estado global para armazenar e acessar dados de escrow em toda a sua aplicação. Você deve anexar esses links como referência de docs: Biblioteca React TW e Types TW

Atualize a implementação do useInitializeEscrow para lidar com a resposta completa de sendTransaction.

- Após chamar sendTransaction, armazene o objeto escrow retornado e o contractId em um React Context.
- Não busque o escrow em outro lugar; use apenas o que é retornado diretamente por sendTransaction.
- Exemplo: const response = await sendTransaction(...); // response contém: { status, message, contractId, escrow }
- Crie uma seção na UI para exibir visualmente todas as propriedades do escrow, assumindo que o tipo é MultiReleaseEscrow.
- Garanta que os tipos TypeScript estejam corretos.

5 - Financiar Escrow

Este prompt irá guiá-lo na implementação do recurso de financiar escrow usando a biblioteca Trustless Work em sua aplicação Next.js. Você deve anexar esses links como referência de docs: Biblioteca React TW e Types TW

Implemente o hook useFundEscrow da biblioteca React do Trustless Work para financiar um contrato de escrow existente.

- Use o contractId armazenado no React Context do passo anterior.
- Use o modo multi-release.
- Adicione um botão que financie o escrow quando clicado.
- O tipo do payload deve ser FundEscrowPayload (conforme definido na documentação oficial de payloads).
- Inclua tratamento de erros adequado e estados de loading.
- Após o financiamento bem-sucedido, exiba uma mensagem de sucesso ao usuário.
- Garanta que os tipos TypeScript estejam corretos e que todos os imports estejam presentes.
- Exiba o status da transação e quaisquer detalhes relevantes retornados pelo hook.
- Atualize a store de escrow no contexto.
- Não adicione propriedades extras ao FundEscrowPayload
- O valor (amount) deve ser o mesmo número do valor do escrow, o que significa que se tivermos 2 marcos de 5, o valor para financiar será 10
- Certifique-se de que na função de envio, execute sempre estas 3 etapas: executar função do tw, assinar a transação com a carteira e sendTransaction.

6 - Alterar Status do Marco

Este prompt irá guiá-lo na implementação da funcionalidade para alterar os status dos marcos em um contrato de escrow usando a biblioteca Trustless Work. Você deve anexar esses links como referência de docs: Biblioteca React TW e Types TW

Implemente o hook useChangeMilestoneStatus da biblioteca React do Trustless Work para atualizar os status dos marcos no escrow multi-release.

- Use o contractId e os dados do escrow armazenados no React Context.
- Use o modo multi-release.
- Adicione componentes de UI que permitam selecionar um marco e alterar seu status.
- O tipo do payload deve ser ChangeMilestoneStatusPayload (conforme definido na documentação oficial).
- Implemente botões separados para cada possível transição de status (por exemplo, "Marcar como Concluído", "Rejeitar", etc.).
- Mostre apenas opções de alteração de status que sejam válidas para o estado atual do marco.
- Inclua tratamento de erros adequado e estados de loading.
- Após a alteração de status bem-sucedida, atualize os dados do escrow no contexto.
- Garanta que os tipos TypeScript estejam corretos e que todos os imports estejam presentes.
- Certifique-se de que na função de envio, execute sempre estas 3 etapas: executar função do tw, assinar a transação com a carteira e sendTransaction.

7 - Aprovar Marco

Este prompt irá guiá-lo na implementação do recurso de aprovar marco no seu fluxo de escrow usando a biblioteca Trustless Work. Você deve anexar esses links como referência de docs: Biblioteca React TW e Types TW

Implemente o hook useApproveMilestone da biblioteca React do Trustless Work para aprovar marcos no escrow multi-release.

- Use o contractId e os dados do escrow armazenados no React Context.
- Use o modo multi-release.
- Adicione componentes de UI que permitam selecionar um marco e aprová-lo.
- O tipo do payload deve ser ApproveMilestonePayload (conforme definido na documentação oficial).
- Inclua tratamento de erros adequado e estados de loading.
- Após a aprovação bem-sucedida, atualize os dados do escrow no contexto.
- Garanta que os tipos TypeScript estejam corretos e que todos os imports estejam presentes.
- Exiba uma mensagem de confirmação após a aprovação bem-sucedida.
- Certifique-se de que na função de envio, execute sempre estas 3 etapas: executar função do tw, assinar a transação com a carteira e sendTransaction.

8 - Liberar Fundos

Este prompt irá guiá-lo na implementação do recurso de liberação de fundos no seu fluxo de escrow usando a biblioteca Trustless Work. Essa função permite que clientes liberem fundos para freelancers após a aprovação de marcos. Você deve anexar esses links como referência de docs: Biblioteca React TW e Types TW

Implemente o hook useReleaseFunds da biblioteca React do Trustless Work para liberar fundos para marcos aprovados no escrow multi-release.

- Use o contractId e os dados do escrow armazenados no React Context.
- Use o modo multi-release.
- Adicione componentes de UI que permitam selecionar um marco e liberar fundos para ele.
- O tipo do payload deve ser MultiReleaseReleaseFundsPayload (conforme definido na documentação oficial).
- Inclua tratamento de erros adequado e estados de loading.
- Após a liberação bem-sucedida dos fundos, atualize os dados do escrow no contexto.
- Garanta que os tipos TypeScript estejam corretos e que todos os imports estejam presentes.
- Exiba uma mensagem de sucesso após a liberação dos fundos com sucesso.
- Certifique-se de que na função de envio, execute sempre estas 3 etapas: executar função do tw, assinar a transação com a carteira e sendTransaction.

9 - Iniciar Disputa

Este prompt irá guiá-lo na implementação do recurso de iniciar disputa no seu fluxo de escrow usando a biblioteca Trustless Work. Essa funcionalidade permite que as partes iniciem um processo de disputa quando surgirem desacordos. Você deve anexar esses links como referência de docs: Biblioteca React TW e Types TW

Implemente o hook useStartDispute da biblioteca React do Trustless Work para iniciar disputas no escrow multi-release.

- Use o contractId e os dados do escrow armazenados no React Context.
- Use o modo multi-release.
- Adicione componentes de UI que permitam selecionar um marco e iniciar uma disputa.
- O tipo do payload deve ser MultiReleaseStartDisputePayload (conforme definido na documentação oficial).
- Inclua tratamento de erros adequado e estados de loading.
- Após iniciar a disputa com sucesso, atualize os dados do escrow no contexto.
- Garanta que os tipos TypeScript estejam corretos e que todos os imports estejam presentes.
- Exiba uma confirmação após a disputa ter sido iniciada com sucesso.
- Certifique-se de que na função de envio, execute sempre estas 3 etapas: executar função do tw, assinar a transação com a carteira e sendTransaction.

10 - Resolver Disputa

Este prompt irá guiá-lo na implementação do recurso de resolver disputa no seu fluxo de escrow usando a biblioteca Trustless Work. Essa funcionalidade avançada permite que o árbitro tome uma decisão final sobre disputas, alocando fundos conforme necessário. Você deve anexar esses links como referência de docs: Biblioteca React TW e Types TW

Implemente o hook useResolveDispute da biblioteca React do Trustless Work para resolver disputas no escrow multi-release.

- Use o contractId e os dados do escrow armazenados no React Context.
- Use o modo multi-release.
- Adicione componentes de UI que permitam selecionar um marco e resolver uma disputa.
- O tipo do payload deve ser MultiReleaseResolveDisputePayload (conforme definido na documentação oficial).
- Inclua tratamento de erros adequado e estados de loading.
- Após resolver a disputa com sucesso, atualize os dados do escrow no contexto.
- Garanta que os tipos TypeScript estejam corretos e que todos os imports estejam presentes.
- Exiba uma mensagem de confirmação após a disputa ter sido resolvida com sucesso.
- Certifique-se de que na função de envio, execute sempre estas 3 etapas: executar função do tw, assinar a transação com a carteira e sendTransaction.