# Blocos Dependentes

Alguns blocos exigem outros blocos para funcionar corretamente. Certifique-se de adicionar suas dependências antes de usá-los.

Importante

Se você não seguir as instruções abaixo, pode encontrar problemas com os blocos não funcionando corretamente.

### Diagrama de Dependências# <a href="#diagram-of-dependencies" id="diagram-of-dependencies"></a>

Alguns blocos exigem outros blocos para funcionar corretamente. Certifique-se de adicionar suas dependências antes de usá-los.

Mostrar DiagramaClique para carregar o diagrama interativo de dependências

### Dependências por Grupo de Blocos# <a href="#dependencies-by-block-group" id="dependencies-by-block-group"></a>

#### Escrows por Signatário ([Tabela](https://blocks.trustlesswork.com/blocks/escrows-escrows-by-signer-table),[Cartões](https://blocks.trustlesswork.com/blocks/escrows-escrows-by-signer-cards)) & Escrows por Função ([Tabela](https://blocks.trustlesswork.com/blocks/escrows-escrows-by-role-table),[Cartões](https://blocks.trustlesswork.com/blocks/escrows-escrows-by-role-cards))# <a href="#escrows-by-signer-and-role" id="escrows-by-signer-and-role"></a>

Esses blocos de listagem/detalhe dependem de vários módulos e provedores compartilhados:

* `wallet-kit`
* `providers`
* `handle-errors`
* `helpers`
* `tanstack`
* `single-release`ou`multi-release`ou`single-multi-release`// Dependendo das suas necessidades

Provedores a incluirCertifique-se de incluir **todos os provedores. Esses blocos precisam de todos eles**

```
# Exemplos rápidos de instalação
npx trustless-work add wallet-kit
npx trustless-work add escrows/single-release # Se você precisa de escrows single-release
npx trustless-work add escrows/multi-release # Se você precisa de escrows multi-release
npx trustless-work add escrows/single-multi-release # Se você precisa financiar, aprovar ou alterar status
npx trustless-work add tanstack

# Se você pulou o comando init, adicione estes provedores
npx trustless-work add providers # Todos eles são necessários para esses blocos

# Módulos utilitários opcionais
npx trustless-work add handle-errors
npx trustless-work add helpers
```

#### Componentes Single Release & Multi Release# <a href="#single-release-multi-release-components" id="single-release-multi-release-components"></a>

Todas as ações single-release e multi-release ([Inicializar Escrow](https://blocks.trustlesswork.com/blocks/escrows-initialize-escrow), [Financiar Escrow](https://blocks.trustlesswork.com/blocks/escrows-fund-escrow), [Alterar Status do Marco](https://blocks.trustlesswork.com/blocks/escrows-change-milestone-status), [Aprovar Marco](https://blocks.trustlesswork.com/blocks/escrows-approve-milestone), [Liberar](https://blocks.trustlesswork.com/blocks/escrows-release-escrow), [Disputa](https://blocks.trustlesswork.com/blocks/escrows-dispute-escrow), [Resolver](https://blocks.trustlesswork.com/blocks/escrows-resolve-dispute), [Atualizar Escrow](https://blocks.trustlesswork.com/blocks/escrows-update-escrow)) requerem:

* `wallet-kit`
* `providers`
* `handle-errors`
* `tanstack`
* `helpers`

```
# Adicione o essencial para fluxos single-release
npx trustless-work add wallet-kit
npx trustless-work add tanstack

# Se você pulou o comando init, adicione estes provedores
npx trustless-work add providers # Só é necessário Wallet, TrustlessWork, Escrow e ReactQueryClient

# Módulos utilitários opcionais
npx trustless-work add handle-errors
npx trustless-work add helpers
```

### Envelopamento de Provedores (ordem importa)# <a href="#provider-wrapping" id="provider-wrapping"></a>

Envolva seu app com os seguintes provedores, nesta ordem. Inclua`EscrowDialogsProvider`e `EscrowAmountProvider`quando uma página usar diálogos ou contexto de valor.

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