# Vibe Coding | React SDK

En todos tus prompts de chat, debes proporcionar al agente referencias específicas de documentos, incluyendo las reglas de contenido globales y el proyecto de código completo. ***GPT 5 ofrece el mejor resultado***

### **Contexto Global**

Este documento define cómo el asistente de IA debe ayudar con tareas de desarrollo front-end. El contexto global abajo establece la persona, la experiencia y los patrones de flujo de trabajo que deben seguirse en todas las interacciones.

```markdown
---
alwaysApply: true
---
Eres un **Desarrollador Front-End Senior** y **Experto** en:
- ReactJS, NextJS, JavaScript, TypeScript
- TailwindCSS, Shadcn, Radix UI
- HTML, CSS y las mejores prácticas modernas de UI/UX

Eres metódico, preciso y un maestro en razonar sobre requisitos complejos. Siempre proporcionas código correcto, DRY, libre de errores y listo para producción.

## Reglas Generales
- Sigue los requisitos del usuario **exactamente** como se indican.
- Piensa paso a paso:  
  1. **Analizar** el requisito.  
  2. **Escribir pseudocódigo detallado** que describa el plan de implementación.  
  3. **Confirmar** el plan (si se solicita).  
  4. **Escribir código completo** que coincida con el plan.  
- Nunca adivines. Si algo no está claro, pide aclaración.
- Si se menciona una librería externa, siempre consulta su documentación oficial antes de implementarla.
- Asegúrate siempre de que el código final sea totalmente funcional, sin marcadores de posición, `TODO`s ni partes faltantes.
- Prefiere la legibilidad sobre el rendimiento.
- Usa las mejores prácticas para el desarrollo con React y Next.js.
- No uses cd para acceder a una raíz determinada, ni uses &&, | u algo similar en acciones de shell.
- No verifiques la compilación durante las implementaciones de Trustless Work.
- En cada npm i, el nombre de la dependencia debe estar entre comillas dobles (“”).
- No pidas 2 o más formas de implementar, simplemente hazlo de la mejor manera posible.
- No planees ni pidas pasos; simplemente implementa el código sin hacer preguntas.

## Contexto de Integración de Trustless Work
Al trabajar con Trustless Work:
- Documentación (te proporcionaré los docs en la gestión de docs del 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>  
  - Tipos → <https://docs.trustlesswork.com/trustless-work/developer-resources/types>  
- Asegura la instalación y configuración apropiadas antes de su uso.
- Usa los Types proporcionados por la documentación cuando corresponda.
- Sigue la API y el uso de componentes exactamente como se describen en los docs.
- No uses any, en su lugar siempre debes buscar las entidades de Trustless Work.

## Pautas de Implementación de Código
- Usa **clases de TailwindCSS** para el estilo; evita CSS puro.
- Para clases condicionales, prefiere `clsx` u funciones auxiliares similares en lugar de operadores ternarios en JSX.
- Usa nombres **descriptivos** para variables, funciones y componentes.  
  - Los manejadores de eventos comienzan con `handle` (por ejemplo, `handleClick`, `handleSubmit`).
- Prefiere funciones arrow con **const** y anotaciones de tipo explícitas sobre declaraciones `function`.
- Incluye siempre todas las importaciones necesarias en la parte superior.
- Usa retornos tempranos para mejorar la claridad del código.

## Verificación Antes de la Entrega
Antes de finalizar:
1. Verifica que todas las importaciones requeridas estén presentes.
2. Asegúrate de que el código compile en un entorno Next.js 14+.
3. Confirma que los estilos de Tailwind y Shadcn se renderizan correctamente.
4. Verifica que los componentes o hooks de Trustless Work estén correctamente inicializados.
5. Asegura que los tipos de TypeScript sean correctos y que no haya errores de tipo.

```

### PROMPTS

Adjunta el Contexto Global y los documentos referenciados a todos los prompts para claridad y consistencia.

#### 1 - Trustless Work - Configuración de la Biblioteca React

A continuación están los pasos esenciales para comenzar con la instalación y la configuración básica. Debes adjuntar estos enlaces como referencia de docs: [Biblioteca React TW](https://docs.trustlesswork.com/trustless-work/react-library/getting-started)

{% hint style="info" %}
Asegúrate de establecer la clave API en un `.env` archivo durante este paso.
{% endhint %}

```markdown
Configura la configuración inicial para usar la biblioteca React de Trustless Work en una app Next.js.

- Instala la dependencia requerida.
- Configura el provider en la raíz de la app.
- Asegúrate de que todas las importaciones sean correctas.
- Usa TypeScript si hay tipos disponibles en la documentación.
```

#### 2 - Stellar Wallet Kit

Este componente se construye sobre la biblioteca base de Trustless Work para ofrecer funciones especializadas de conectividad de wallet. Debes adjuntar estos enlaces como referencia de docs: [Stellar Wallet Kit](https://docs.trustlesswork.com/trustless-work/developer-resources/stellar-wallet-kit-quick-integration)

```markdown
Configura la configuración inicial para el Stellar Wallet Kit en una app Next.js basándote en la documentación, por favor sigue sus indicaciones.

- Instala la dependencia requerida.
- Asegúrate de que todas las importaciones sean correctas.
- Usa TypeScript si se proporcionan tipos.
- Asegúrate de que la wallet esté lista para ser usada en toda la app.
- Implementa los hooks de la wallet usando botones.
```

#### 3 - Inicializar Escrow

Este prompt te guiará para implementar la función de inicializar escrow en una aplicación Next.js usando la biblioteca Trustless Work. Debes adjuntar estos enlaces como referencia de docs: [Biblioteca React TW](https://docs.trustlesswork.com/trustless-work/react-library/getting-started) y [Tipos TW](https://docs.trustlesswork.com/trustless-work/developer-resources/types)

```markdown
Implementa la función useInitializeEscrow de la biblioteca React de Trustless Work en nuestra app Next.js.

- Usa datos mock para los valores del payload, excepto para los campos proporcionados explícitamente abajo.
- Agrega un botón que inicialice el escrow al hacer clic.
- Usa el modo multi-release.
- Usa esta dirección de trustline de USDC: GBBD47IF6LWK7P7MDEVSCWR7DPUWV3NY3DTQEVFL4NAT4AQH3ZLLFLA5
- Usa este valor de símbolo: USDC
- Para todos los roles, usa la dirección de wallet del usuario actualmente conectado.
- El tipo de payload debe ser InitializePayload (como está definido en la documentación oficial de payloads: <https://docs.trustlesswork.com/trustless-work/introduction/developer-resources/types/payloads/deploy>).
- Después de que sendTransaction retorne, muestra el contractId en pantalla con un enlace clickable para verlo en Stellar Viewer.
- Establece platformFee en 4.
- Asegura que los tipos de TypeScript sean correctos.
- Asegúrate de que en la función de submit siempre se hagan estos 3 pasos: ejecutar la función de tw, firmar la transacción con la wallet y sendTransaction.
```

#### 4 - Guardar Escrow en el Store Global

Este prompt te ayudará a implementar una solución de gestión de estado global para almacenar y acceder a los datos de escrow en toda tu aplicación. Debes adjuntar estos enlaces como referencia de docs: [Biblioteca React TW](https://docs.trustlesswork.com/trustless-work/react-library/getting-started) y [Tipos TW](https://docs.trustlesswork.com/trustless-work/developer-resources/types)

```markdown
Actualiza la implementación de useInitializeEscrow para manejar la respuesta completa de sendTransaction.

- Después de llamar a sendTransaction, almacena el objeto escrow devuelto y el contractId en un React Context.
- No obtengas el escrow desde ningún otro lugar; usa únicamente el que se devuelve directamente desde sendTransaction.
- Ejemplo: const response = await sendTransaction(...); // response contiene: { status, message, contractId, escrow }
- Crea una sección en la UI para mostrar visualmente todas las propiedades del escrow, asumiendo que el tipo es MultiReleaseEscrow.
- Asegura que los tipos de TypeScript sean correctos.
```

#### 5 - Financiar Escrow

Este prompt te guiará para implementar la función de financiar escrow usando la biblioteca Trustless Work en tu aplicación Next.js. Debes adjuntar estos enlaces como referencia de docs: [Biblioteca React TW](https://docs.trustlesswork.com/trustless-work/react-library/getting-started) y [Tipos TW](https://docs.trustlesswork.com/trustless-work/developer-resources/types)

```markdown
Implementa el hook useFundEscrow de la biblioteca React de Trustless Work para financiar un contrato de escrow existente.

- Usa el contractId almacenado en el React Context del paso anterior.
- Usa el modo multi-release.
- Agrega un botón que financie el escrow al hacer clic.
- El tipo de payload debe ser FundEscrowPayload (como está definido en la documentación oficial de payloads).
- Incluye manejo adecuado de errores y estados de carga.
- Después de un financiamiento exitoso, muestra un mensaje de éxito al usuario.
- Asegura que los tipos de TypeScript sean correctos y que todas las importaciones estén presentes.
- Muestra el estado de la transacción y cualquier detalle relevante devuelto por el hook.
- Actualiza el store de escrow en el contexto.
- No agregues propiedades extra a FundEscrowPayload
- La cantidad debe ser el mismo número que el monto del escrow, lo cual significa que si tenemos 2 hitos de 5, la cantidad para financiar será 10
- Asegúrate de que en la función de submit siempre se hagan estos 3 pasos: ejecutar la función de tw, firmar la transacción con la wallet y sendTransaction.
```

#### 6 - Cambiar Estado del Hito

Este prompt te guiará para implementar la funcionalidad de cambiar los estados de los hitos en un contrato escrow usando la biblioteca Trustless Work. Debes adjuntar estos enlaces como referencia de docs: [Biblioteca React TW](https://docs.trustlesswork.com/trustless-work/react-library/getting-started) y [Tipos TW](https://docs.trustlesswork.com/trustless-work/developer-resources/types)

```markdown
Implementa el hook useChangeMilestoneStatus de la biblioteca React de Trustless Work para actualizar los estados de los hitos en el escrow multi-release.

- Usa el contractId y los datos del escrow almacenados en el React Context.
- Usa el modo multi-release.
- Agrega componentes de UI que permitan seleccionar un hito y cambiar su estado.
- El tipo de payload debe ser ChangeMilestoneStatusPayload (como está definido en la documentación oficial).
- Implementa botones separados para cada posible transición de estado (por ejemplo, "Marcar como Completado", "Rechazar", etc.).
- Solo muestra opciones de cambio de estado que sean válidas para el estado actual del hito.
- Incluye manejo adecuado de errores y estados de carga.
- Después de un cambio de estado exitoso, actualiza los datos del escrow en el contexto.
- Asegura que los tipos de TypeScript sean correctos y que todas las importaciones estén presentes.
- Asegúrate de que en la función de submit siempre se hagan estos 3 pasos: ejecutar la función de tw, firmar la transacción con la wallet y sendTransaction.
```

#### 7 - Aprobar Hito

Este prompt te guiará para implementar la función de aprobar hitos en tu flujo de escrow usando la biblioteca Trustless Work. Debes adjuntar estos enlaces como referencia de docs: [Biblioteca React TW](https://docs.trustlesswork.com/trustless-work/react-library/getting-started) y [Tipos TW](https://docs.trustlesswork.com/trustless-work/developer-resources/types)

```markdown
Implementa el hook useApproveMilestone de la biblioteca React de Trustless Work para aprobar hitos en el escrow multi-release.

- Usa el contractId y los datos del escrow almacenados en el React Context.
- Usa el modo multi-release.
- Agrega componentes de UI que permitan seleccionar un hito y aprobarlo.
- El tipo de payload debe ser ApproveMilestonePayload (como está definido en la documentación oficial).
- Incluye manejo adecuado de errores y estados de carga.
- Después de una aprobación exitosa, actualiza los datos del escrow en el contexto.
- Asegura que los tipos de TypeScript sean correctos y que todas las importaciones estén presentes.
- Muestra un mensaje de confirmación después de la aprobación exitosa.
- Asegúrate de que en la función de submit siempre se hagan estos 3 pasos: ejecutar la función de tw, firmar la transacción con la wallet y sendTransaction.
```

#### 8 - Liberar Fondos

Este prompt te guiará para implementar la función de liberar fondos en tu flujo de escrow usando la biblioteca Trustless Work. Esta función permite a los clientes liberar fondos a los freelancers después de la aprobación del hito. Debes adjuntar estos enlaces como referencia de docs: [Biblioteca React TW](https://docs.trustlesswork.com/trustless-work/react-library/getting-started) y [Tipos TW](https://docs.trustlesswork.com/trustless-work/developer-resources/types)

```markdown
Implementa el hook useReleaseFunds de la biblioteca React de Trustless Work para liberar fondos de hitos aprobados en el escrow multi-release.

- Usa el contractId y los datos del escrow almacenados en el React Context.
- Usa el modo multi-release.
- Agrega componentes de UI que permitan seleccionar un hito y liberar fondos para el mismo.
- El tipo de payload debe ser MultiReleaseReleaseFundsPayload (como está definido en la documentación oficial).
- Incluye manejo adecuado de errores y estados de carga.
- Después de una liberación de fondos exitosa, actualiza los datos del escrow en el contexto.
- Asegura que los tipos de TypeScript sean correctos y que todas las importaciones estén presentes.
- Muestra un mensaje de éxito después de que los fondos se hayan liberado correctamente.
- Asegúrate de que en la función de submit siempre se hagan estos 3 pasos: ejecutar la función de tw, firmar la transacción con la wallet y sendTransaction.
```

#### 9 - Iniciar Disputa

Este prompt te guiará para implementar la función de iniciar una disputa en tu flujo de escrow usando la biblioteca Trustless Work. Esta funcionalidad permite a las partes iniciar un proceso de disputa cuando surgen desacuerdos. Debes adjuntar estos enlaces como referencia de docs: [Biblioteca React TW](https://docs.trustlesswork.com/trustless-work/react-library/getting-started) y [Tipos TW](https://docs.trustlesswork.com/trustless-work/developer-resources/types)

```markdown
Implementa el hook useStartDispute de la biblioteca React de Trustless Work para iniciar disputas en el escrow multi-release.

- Usa el contractId y los datos del escrow almacenados en el React Context.
- Usa el modo multi-release.
- Agrega componentes de UI que permitan seleccionar un hito e iniciar una disputa.
- El tipo de payload debe ser MultiReleaseStartDisputePayload (como está definido en la documentación oficial).
- Incluye manejo adecuado de errores y estados de carga.
- Después de iniciar una disputa con éxito, actualiza los datos del escrow en el contexto.
- Asegura que los tipos de TypeScript sean correctos y que todas las importaciones estén presentes.
- Muestra una confirmación después de que la disputa se haya iniciado correctamente.
- Asegúrate de que en la función de submit siempre se hagan estos 3 pasos: ejecutar la función de tw, firmar la transacción con la wallet y sendTransaction.
```

#### 10 - Resolver Disputa

Este prompt te guiará para implementar la función de resolver disputas en tu flujo de escrow usando la biblioteca Trustless Work. Esta funcionalidad avanzada permite al árbitro tomar una decisión final sobre las disputas, asignando fondos en consecuencia. Debes adjuntar estos enlaces como referencia de docs: [Biblioteca React TW](https://docs.trustlesswork.com/trustless-work/react-library/getting-started) y [Tipos TW](https://docs.trustlesswork.com/trustless-work/developer-resources/types)

```markdown
Implementa el hook useResolveDispute de la biblioteca React de Trustless Work para resolver disputas en el escrow multi-release.

- Usa el contractId y los datos del escrow almacenados en el React Context.
- Usa el modo multi-release.
- Agrega componentes de UI que permitan seleccionar un hito y resolver una disputa.
- El tipo de payload debe ser MultiReleaseResolveDisputePayload (como está definido en la documentación oficial).
- Incluye manejo adecuado de errores y estados de carga.
- Después de resolver una disputa con éxito, actualiza los datos del escrow en el contexto.
- Asegura que los tipos de TypeScript sean correctos y que todas las importaciones estén presentes.
- Muestra un mensaje de confirmación después de que la disputa se haya resuelto correctamente.
- Asegúrate de que en la función de submit siempre se hagan estos 3 pasos: ejecutar la función de tw, firmar la transacción con la wallet y sendTransaction.
```