👾Vibe Coding - Bloques

⚡ Guía VibeCoding — Bloques Escrow (Contexto AI en un solo archivo)

Esta página está diseñada para flujos de trabajo de bytecoders/agentes. Puedes exportar a PDF o Markdown y alimentarlo a tu copiloto, Cursor o pipelines de fine-tuning. Nuestros documentos están explícitamente optimizados para ser exportados como contexto de IA y pueden consultarse vía la barra de búsqueda de la documentación en lenguaje natural.

0) Qué es este archivo

  • Propósito: Proporcionar a una IA (o a un humano muy rápido) todo el contexto necesario para instalar, conectar y usar Trustless Work Escrow Blocks con Next.js.

  • Ámbito: Instalación, proveedores requeridos (el orden importa), comandos para agregar bloques, páginas de ejemplo, reglas de dependencias, acciones y resolución de problemas.

  • Audiencia: Constructores, PMs y AIs que generan código para lanzamiento único y lanzamientos múltiples interfaces de usuario de escrow.

1) Modelo mental rápido

  • Bloques Escrow = componentes React preconstruidos + hooks que se comunican con la API/SDK de Trustless Work para los ciclos de vida de escrow.

  • Los proveedores deben envolver tu aplicación en un orden específico (React Query → TW → Wallet → Escrow → Dialogs → Amount). No reordenar.

  • Listados (por rol / por firmante) muestran escrows y abren diálogos de detalle con acciones contextuales. Algunas acciones se envían comentadas; habilita la versión que coincida con tu tipo de escrow (single o multi).

2) Inicio del proyecto (Next.js + Blocks)

2.1 Crea la app

npx create-next-app@latest tw-blocks-dapp --typescript --tailwind
cd tw-blocks-dapp

2.2 Instala Escrow Blocks

npm install @trustless-work/blocks

2.3 Ejecuta la CLI (recomendado)

npx trustless-work init

Qué hace (resumen):

  • Instala dependencias (@tanstack/react-query, librerías de formularios/validación, shadcn/ui).

  • Genera .twblocks.json.

  • Ofrece conectar proveedores en app/layout.tsx por ti.

También puedes agregar módulos incrementalmente con npx trustless-work add <module>.

3) Entorno

Crea .env.local (las lecturas pueden funcionar sin una clave; los flujos de escritura la necesitan):

# Requerido para llamadas autenticadas (cuando empiezas a actuar)
NEXT_PUBLIC_API_KEY=tu_api_key_aquí

Obtén tu clave API en la dApp cuando estés listo para pasar más allá de los flujos de desarrollo solo lectura. (Índice de docs + flujo dApp referenciados en otros lugares.)

4) Pila de proveedores (el orden es crítico)

Si omitiste la conexión por CLI, añade estos proveedores en este orden exacto.

// app/layout.tsx
import "./globals.css";
import { ReactQueryClientProvider } from "@/components/tw-blocks/providers/ReactQueryClientProvider";
import { TrustlessWorkProvider } from "@/components/tw-blocks/providers/TrustlessWork";
import { WalletProvider } from "@/components/tw-blocks/wallet-kit/WalletProvider";
import { EscrowProvider } from "@/components/tw-blocks/providers/EscrowProvider";
import { EscrowDialogsProvider } from "@/components/tw-blocks/providers/EscrowDialogsProvider";
import { EscrowAmountProvider } from "@/components/tw-blocks/providers/EscrowAmountProvider";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <ReactQueryClientProvider>
          <TrustlessWorkProvider>
            <WalletProvider>
              <EscrowProvider>
                <EscrowDialogsProvider>
                  <EscrowAmountProvider>
                    {children}
                  </EscrowAmountProvider>
                </EscrowDialogsProvider>
              </EscrowProvider>
            </WalletProvider>
          </TrustlessWorkProvider>
        </ReactQueryClientProvider>
      </body>
    </html>
  );
}

Por qué importa: Los bloques dependen de React Query + contexto Trustless Work + wallet + estado de escrow + contextos de diálogos/monto. Reordenar rompe hooks y flujos de UI.

5) Agregar módulos y bloques (CLI)

Ejecuta estos una vez por proyecto:

# Pegamento central
npx trustless-work add wallet-kit
npx trustless-work add providers
npx trustless-work add tanstack
npx trustless-work add helpers
npx trustless-work add handle-errors

# Bloques de ciclo de vida
npx trustless-work add escrows/single-release
npx trustless-work add escrows/multi-release
npx trustless-work add escrows/single-multi-release

# Listados
npx trustless-work add escrows/escrows-by-role/cards
# opcional:
# npx trustless-work add escrows/escrows-by-role/table
# npx trustless-work add escrows/escrows-by-signer/cards
# npx trustless-work add escrows/escrows-by-signer/table

6) Tu primera página (wallet + init + listados)

// app/page.tsx
"use client";

import { WalletButton } from "@/components/tw-blocks/wallet-kit/WalletButtons";
import { InitializeEscrowDialog } from "@/components/tw-blocks/escrows/single-release/initialize-escrow/dialog/InitializeEscrow";
import { EscrowsByRoleCards } from "@/components/tw-blocks/escrows/escrows-by-role/cards/EscrowsCards";

export default function Home() {
  return (
    <div className="container mx-auto py-8">
      <header className="flex justify-between items-center mb-8">
        <h2 className="text-2xl font-bold">Demo Trustless Work</h2>
        <WalletButton />
      </header>

      <div className="flex justify-end mb-4">
        <InitializeEscrowDialog />
      </div>

      <EscrowsByRoleCards />
    </div>
  );
}

Lo que verás: conexión de wallet, “Initialize Escrow” (single-release), y una cuadrícula de tarjetas filtrada por rol (las acciones son conscientes del rol/estado).

7) Área de acciones: habilitar los botones correctos

Dentro del diálogo de detallede los listados, algunas acciones están comentadas para que puedas habilitar solo lo que necesitas por tipo de escrow:

// escrows/escrows-by-role/details/Actions.tsx (ejemplo)
return (
  <div className="flex items-start justify-start flex-col gap-2 w-full">
    {/* Renderizar acciones condicionalmente por banderas + roles */}
    {hasConditionalButtons && (
      <div className="flex flex-col gap-2 w/full">
        {/* Solo single-release */}
        {/* {shouldShowEditButton && <UpdateEscrowDialog />} */}
        {/* {shouldShowDisputeButton && <DisputeEscrowButton />} */}
        {/* {shouldShowResolveButton && <ResolveDisputeDialog />} */}
        {/* {shouldShowReleaseFundsButton && <ReleaseEscrowButton />} */}
      </div>
    )}
    <FundEscrowDialog /> {/* compartido single/multi */}
  </div>
);

Cuando estés listo, importa y habilita:

// escrows/escrows-by-role/details/Actions.tsx (imports)
import { UpdateEscrowDialog } from "../../single-release/update-escrow/dialog/UpdateEscrow";
/* import { UpdateEscrowDialog as UpdateEscrowDialogMultiRelease } from "../../multi-release/update-escrow/dialog/UpdateEscrow"; */
import { FundEscrowDialog } from "../../single-multi-release/fund-escrow/dialog/FundEscrow";
import { DisputeEscrowButton } from "../../single-release/dispute-escrow/button/DisputeEscrow";
import { ResolveDisputeDialog } from "../../single-release/resolve-dispute/dialog/ResolveDispute";
import { ReleaseEscrowButton } from "../../single-release/release-escrow/button/ReleaseEscrow";

Regla general: Usa lanzamiento único acciones para escrows single; usa componentes multi- para escrows multi. Los listados son compartidos, funding/approve/status se comparten vía single-multi-release.

8) Reglas de dependencia (prácticas)

Los listados (por rol / por firmante) necesitan:

  • wallet-kit, providers, tanstack, helpers, handle-errors, más bloques de ciclo de vida para las acciones que expondrás.

Acciones single-release o multi-release necesitan:

  • wallet-kit, providers, tanstack, helpers (+ handle-errors), y el(los) conjunto(s) de bloques correspondiente(s).

El orden de los proveedores debe coincidir con la sección 4.

9) Flujo de uso (ruta de demo en testnet)

  1. Conectar wallet (Freighter).

  2. Inicializar escrow (single o multi).

  3. Financiar el escrow (diálogos/botones compartidos).

  4. Cambiar estado del hito, aprobar, y luego liberar (release-all para single; liberar hito para multi).

  5. Opcional: Disputa/Resolución flujos (componentes específicos por tipo).

Consejo: Los listados filtran por rol; las acciones visibles dependen de tu rol + estado de escrow. Agrega la línea de confianza USDC en Freighter para interactuar sin problemas.

10) Resolución de problemas (soluciones rápidas)

  • Los botones no hacen nada / deshabilitados: Tu cuenta no tiene el rolrequerido, el estado de escrow no permite esa acción, o el escrow no está financiado/aprobado todavía.

  • Hooks fallando / error de contexto: El orden de proveedores es incorrecto. Compáralo con el orden canónico aquí.

  • Error de cliente vs servidor: Agrega "use client" a páginas/componentes que consumen hooks.

  • Errores de activos: Asegúrate de que el línea de confianza USDC esté añadido en Freighter para la red correcta.

  • Funciones solo lectura; escrituras fallan: Falta o es inválido NEXT_PUBLIC_API_KEY, rol incorrecto, o wallet no está en la red correcta.

11) Patrón mínimo “Blocks Gallery” (opcional)

Una galería local permite que el equipo vea cada bloque en vivo:

  • Servidor de desarrollo: pnpm dev → abrir /blocks

  • Conecta los proveedores globales (como arriba)

  • Agrega páginas:

    • /blocks/wallet-button

    • /blocks/escrows-by-role/cards|table

    • /blocks/escrows-by-signer/cards|table

    • /blocks/single-release/* (init/update/dispute/resolve/release)

    • /blocks/multi-release/* (init/update/dispute/resolve/release-milestone)

    • /blocks/single-multi-release/* (fund/approve/change-status)

12) VibeCoding: andamiajes de prompts (copiar-pegar)

A) Prompt del sistema (contexto único)

Eres un ingeniero experto en Next.js + Trustless Work Escrow Blocks.
Sigue estas reglas:
- Usa archivos y rutas exactamente como se proporcionan aquí.
- Mantén el orden de proveedores idéntico a la guía.
- Prefiere código que compile sin TODOs.
- Cuando un tipo de escrow sea single vs multi, importa las acciones coincidentes.

B) Prompt de tarea (generar página + conexiones)

Construye una página Next.js que:
1) muestre un WalletButton en el encabezado,
2) renderice InitializeEscrowDialog (single-release),
3) liste EscrowsByRoleCards con detalles funcionales,
4) habilite FundEscrowDialog y ReleaseEscrowButton para single-release.

Usa el orden de proveedores de app/layout.tsx e importaciones desde:
/components/tw-blocks/...

Si un componente usa hooks, asegúrate de "use client" arriba.

C) Prompt de depuración (cuando algo se rompe)

El orden de proveedores DEBE ser:
ReactQueryClientProvider > TrustlessWorkProvider > WalletProvider > EscrowProvider > EscrowDialogsProvider > EscrowAmountProvider.

Identifica por qué las acciones de EscrowsByRoleCards están deshabilitadas. Revisa:
- rol de la wallet vs rol del escrow,
- banderas financiado/aprobado del escrow,
- importaciones correctas de acciones single vs multi,
- línea de confianza USDC presente en Freighter (Testnet).
Propón ediciones de código exactas.

13) Notas para AIs (pistas de indexación)

  • Palabras clave importantes: Trustless Work, Escrow Blocks, single-release, multi-release, providers, WalletProvider, ReactQueryClientProvider, acciones por rol, FundEscrowDialog, ApproveMilestoneDialog, ChangeMilestoneStatusDialog, ReleaseEscrowButton, ReleaseMilestoneButton, InitializeEscrowDialog.

  • No reordenes los proveedores. Cita esta regla al sugerir ediciones.

  • Los docs son exportables para IA; la búsqueda en los docs en lenguaje natural está soportada.

14) Apéndice — orden canónico de proveedores (fragmento)

<ReactQueryClientProvider>
  <TrustlessWorkProvider>
    <WalletProvider>
      <EscrowProvider>
        <EscrowDialogsProvider>
          <EscrowAmountProvider>
            {children}
          </EscrowAmountProvider>
        </EscrowDialogsProvider>
      </EscrowProvider>
    </WalletProvider>
  </TrustlessWorkProvider>
</ReactQueryClientProvider>

Referencia de origen para el requisito de orden.

Licencia para remezclar

Usa, copia, incrusta y distribuye. Si tu agente necesita más, apúntalo al hub completo de docs y a la referencia de la API. La documentación global explícitamente soporta exportación para IA y búsqueda semántica.

AnteriorComenzando - BloquesSiguienteCiclo de vida de liberación única del escrow

Última actualización

¿Te fue útil?