Bloques dependientes

Algunos bloques dependen de módulos compartidos (providers, helpers, query, etc.).

Instala las dependencias primero.

Si omites las dependencias, encontrarás errores de contexto faltante en tiempo de ejecución.

Diagrama de dependencias

Usa el diagrama de dependencias interactivo para confirmar qué necesita un bloque.

Trustless Work Blocks | React Components for Blockchain EscrowsTrustless Work Blocks

---

Dependencias por grupo de bloques

Listados (Escrows por Signatario / Escrows por Rol)

Se aplica a:

• Escrows por Signatario: Tabla, Tarjetas

• Escrows por Rol: Tabla, Tarjetas

Módulos requeridos:

• wallet-kit

• providers

• handle-errors

• helpers

• tanstack

• escrows/single-release o escrows/multi-release o escrows/single-multi-release (depende de qué acciones quieras habilitar)

Incluir todos providers para listados.

Los listados abren diálogos de detalles y necesitan los contextos dialog + amount.

CLI (ejemplos)

# Núcleo
npx trustless-work add wallet-kit
npx trustless-work add tanstack
npx trustless-work add providers

# Acciones (elige lo que necesitas)
npx trustless-work add escrows/single-release
# npx trustless-work add escrows/multi-release
# npx trustless-work add escrows/single-multi-release

# Módulos utilitarios opcionales
npx trustless-work add handle-errors
npx trustless-work add helpers

Acciones (single-release / multi-release)

Todas las acciones single-release y multi-release (Inicializar Escrow, Financiar Escrow, Cambiar estado del hito, Aprobar hito, Liberar, Disputar, Resolver, Actualizar Escrow) requieren:

• wallet-kit

• providers

• handle-errors

• tanstack

• helpers

CLI (mínimo para acciones)

npx trustless-work add wallet-kit
npx trustless-work add tanstack
npx trustless-work add providers

npx trustless-work add handle-errors
npx trustless-work add helpers

---

Wrapper de providers (el orden importa)

Envuelve tu app con estos providers, en este orden exacto.

Incluir EscrowDialogsProvider y EscrowAmountProvider cuando uses diálogos o el contexto de amount.

No reordenes los providers.

La mayoría de los problemas de “hooks que no funcionan” provienen del orden de los providers.

app/layout.tsx

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>
  );
}