# Vibe Coding - SDK

Em todos os seus prompts de chat, você deve fornecer ao agente referências específicas de documentos, incluindo as regras globais de conteúdo 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 em 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.

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

Você é metódico, preciso e um mestre em raciocinar através de 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** como 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 suponha. Se algo estiver confuso, 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 em React & Next.js.
- Não use cd para acessar uma raiz determinada, nem use &&, | ou algo semelhante em ações de shell.
- Não verifique a build durante as implementações do 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 forma possível.
- Não planeje nem peça etapas; apenas implemente o código sem fazer perguntas.

## Contexto de Integração Trustless Work
Ao trabalhar com o Trustless Work:
- Documentação (eu fornecerei os docs no gerenciamento 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 na documentação.
- Não use any; em vez disso, sempre você deve 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.  
  - Handlers 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 todas as importações necessárias no topo.
- Use retornos antecipados (early returns) para melhorar a clareza do código.

## Verificação Antes da Entrega
Antes de finalizar:
1. Verifique se todas as importações necessárias estão presentes.
2. Garanta que o código compile em um ambiente Next.js 14+.
3. Confirme que os estilos do Tailwind e Shadcn sejam renderizados corretamente.
4. Verifique se os componentes ou hooks do Trustless Work estão inicializados corretamente.
5. Garanta que os tipos TypeScript estejam corretos e que não haja 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 configuração básica. Você deve anexar esses links como referência de docs: [Biblioteca React TW](https://docs.trustlesswork.com/trustless-work/react-library/getting-started)

{% hint style="info" %}
Certifique-se de definir a API Key em um `.env` arquivo durante esta etapa.
{% endhint %}

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

- Instale a dependência necessária.
- Configure o provider na raiz do app.
- Garanta que todas as importações estejam corretas.
- 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](https://docs.trustlesswork.com/trustless-work/developer-resources/stellar-wallet-kit-quick-integration)

```markdown
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 necessária.
- Garanta que todas as importações estejam corretas.
- Use TypeScript se os tipos forem fornecidos.
- Certifique-se de que a carteira esteja pronta para ser usada 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](https://docs.trustlesswork.com/trustless-work/react-library/getting-started) e [Types TW](https://docs.trustlesswork.com/trustless-work/developer-resources/types)

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

- Use dados fictícios para os valores do payload, exceto pelos campos explicitamente fornecidos abaixo.
- Adicione um botão que inicialize o escrow quando clicado.
- Use modo multi-release.
- Use este endereço de trustline USDC: CBIELTK6YBZJU5UP2WWQEUCYKLPU6AUNZ2BQ4WWFEIE3USCIHMXQDAMA
- Use este valor de decimals: 10000000
- 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/developer-resources/types>).
- 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 submit, sempre faça estas 3 etapas: executar a função do tw, assinar a transação com a carteira e chamar sendTransaction.
```

#### 4 - Salvar Escrow no Store Global

Este prompt ajudará você 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](https://docs.trustlesswork.com/trustless-work/react-library/getting-started) e [Types TW](https://docs.trustlesswork.com/trustless-work/developer-resources/types)

```markdown
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 de nenhum outro lugar; use apenas o que for 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](https://docs.trustlesswork.com/trustless-work/react-library/getting-started) e [Types TW](https://docs.trustlesswork.com/trustless-work/developer-resources/types)

```markdown
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 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 erro 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 todas as importações estejam presentes.
- Exiba o status da transação e quaisquer detalhes relevantes retornados pelo hook.
- Atualize o store de escrow no contexto.
- Não adicione propriedades extras ao FundEscrowPayload
- O montante deve ser o mesmo número do valor do escrow, o que significa que se tivermos 2 marcos de 5, o montante para financiar será 10
- Certifique-se de que na função de submit, sempre faça estas 3 etapas: executar a função do tw, assinar a transação com a carteira e chamar 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 escrow usando a biblioteca Trustless Work. Você deve anexar esses links como referência de docs: [Biblioteca React TW](https://docs.trustlesswork.com/trustless-work/react-library/getting-started) e [Types TW](https://docs.trustlesswork.com/trustless-work/developer-resources/types)

```markdown
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 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 mudança de status que sejam válidas para o estado atual do marco.
- Inclua tratamento de erro adequado e estados de loading.
- Após a mudança de status bem-sucedida, atualize os dados do escrow no contexto.
- Garanta que os tipos TypeScript estejam corretos e que todas as importações estejam presentes.
- Certifique-se de que na função de submit, sempre faça estas 3 etapas: executar a função do tw, assinar a transação com a carteira e chamar sendTransaction.
```

#### 7 - Aprovar Marco

Este prompt irá guiá-lo na implementação do recurso de aprovar um marco no seu fluxo de escrow usando a biblioteca Trustless Work. Você deve anexar esses links como referência de docs: [Biblioteca React TW](https://docs.trustlesswork.com/trustless-work/react-library/getting-started) e [Types TW](https://docs.trustlesswork.com/trustless-work/developer-resources/types)

```markdown
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 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 erro 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 todas as importações estejam presentes.
- Exiba uma mensagem de confirmação após a aprovação bem-sucedida.
- Certifique-se de que na função de submit, sempre faça estas 3 etapas: executar a função do tw, assinar a transação com a carteira e chamar sendTransaction.
```

#### 8 - Liberar Fundos

Este prompt irá guiá-lo na implementação do recurso de liberar fundos no seu fluxo de escrow usando a biblioteca Trustless Work. Esta função permite que clientes liberem fundos para freelancers após a aprovação de um marco. Você deve anexar esses links como referência de docs: [Biblioteca React TW](https://docs.trustlesswork.com/trustless-work/react-library/getting-started) e [Types TW](https://docs.trustlesswork.com/trustless-work/developer-resources/types)

```markdown
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 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 erro 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 todas as importações estejam presentes.
- Exiba uma mensagem de sucesso após os fundos serem liberados com sucesso.
- Certifique-se de que na função de submit, sempre faça estas 3 etapas: executar a função do tw, assinar a transação com a carteira e chamar 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](https://docs.trustlesswork.com/trustless-work/react-library/getting-started) e [Types TW](https://docs.trustlesswork.com/trustless-work/developer-resources/types)

```markdown
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 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 erro 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 todas as importações estejam presentes.
- Exiba uma confirmação após a disputa ter sido iniciada com sucesso.
- Certifique-se de que na função de submit, sempre faça estas 3 etapas: executar a função do tw, assinar a transação com a carteira e chamar 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. Esta 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](https://docs.trustlesswork.com/trustless-work/react-library/getting-started) e [Types TW](https://docs.trustlesswork.com/trustless-work/developer-resources/types)

```markdown
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 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 erro 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 todas as importações 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 submit, sempre faça estas 3 etapas: executar a função do tw, assinar a transação com a carteira e chamar sendTransaction.
```
