> For the complete documentation index, see [llms.txt](https://docs.trustlesswork.com/trustless-work/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.trustlesswork.com/trustless-work/v1-pt/ia/vibe-coding-or-sdk-react.md). # Vibe Coding | SDK React 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. ```markdown --- 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 → - Wallet Kit → - 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](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 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](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 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](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 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: ). - 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](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 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](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 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](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 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](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 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](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 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](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 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](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 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. ``` --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.trustlesswork.com/trustless-work/v1-pt/ia/vibe-coding-or-sdk-react.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.