# Bloques dependientes Algunos bloques dependen de módulos compartidos (providers, helpers, query, etc.). Instala las dependencias primero. {% hint style="warning" %} Si omites las dependencias, encontrarás errores de contexto faltante en tiempo de ejecución. {% endhint %} ### Diagrama de dependencias Usa el diagrama de dependencias interactivo para confirmar qué necesita un bloque. {% embed url="" %} *** ### Dependencias por grupo de bloques #### Listados (Escrows por Signatario / Escrows por Rol) Se aplica a: * Escrows por Signatario: [Tabla](https://blocks.trustlesswork.com/blocks/escrows-escrows-by-signer-table), [Tarjetas](https://blocks.trustlesswork.com/blocks/escrows-escrows-by-signer-cards) * Escrows por Rol: [Tabla](https://blocks.trustlesswork.com/blocks/escrows-escrows-by-role-table), [Tarjetas](https://blocks.trustlesswork.com/blocks/escrows-escrows-by-role-cards) 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) {% hint style="info" %} Incluir **todos** providers para listados. Los listados abren diálogos de detalles y necesitan los contextos dialog + amount. {% endhint %} {% code title="CLI (ejemplos)" %} ```sh # 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 ``` {% endcode %} #### Acciones (single-release / multi-release) Todas las acciones single-release y multi-release ([Inicializar Escrow](https://blocks.trustlesswork.com/blocks/escrows-initialize-escrow), [Financiar Escrow](https://blocks.trustlesswork.com/blocks/escrows-fund-escrow), [Cambiar estado del hito](https://blocks.trustlesswork.com/blocks/escrows-change-milestone-status), [Aprobar hito](https://blocks.trustlesswork.com/blocks/escrows-approve-milestone), [Liberar](https://blocks.trustlesswork.com/blocks/escrows-release-escrow), [Disputar](https://blocks.trustlesswork.com/blocks/escrows-dispute-escrow), [Resolver](https://blocks.trustlesswork.com/blocks/escrows-resolve-dispute), [Actualizar Escrow](https://blocks.trustlesswork.com/blocks/escrows-update-escrow)) requieren: * `wallet-kit` * `providers` * `handle-errors` * `tanstack` * `helpers` {% code title="CLI (mínimo para acciones)" %} ```sh 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 ``` {% endcode %} *** ### 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. {% hint style="danger" %} No reordenes los providers. La mayoría de los problemas de “hooks que no funcionan” provienen del orden de los providers. {% endhint %} {% code title="app/layout.tsx" overflow="wrap" %} ```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 ( {children} ); } ``` {% endcode %}