Blocos dependentes

Alguns blocos dependem de módulos compartilhados (providers, helpers, query, etc).

Instale as dependências primeiro.

Se você pular dependências, encontrará erros de contexto ausente em tempo de execução.

Diagrama de dependências

Use o diagrama de dependências interativo para confirmar do que um bloco precisa.

Trustless Work Blocks | React Components for Blockchain EscrowsTrustless Work Blocks

---

Dependências por grupo de blocos

Listagens (Escrows por Signatário / Escrows por Função)

Aplica-se a:

• Escrows por Signatário: Tabela, Cartões

• Escrows por Função: Tabela, Cartões

Módulos necessários:

• wallet-kit

• providers

• handle-errors

• helpers

• tanstack

• escrows/single-release ou escrows/multi-release ou escrows/single-multi-release (depende de quais ações você quer habilitar)

Incluir todos providers para listagens.

As listagens abrem diálogos de detalhes e precisam dos contextos dialog + amount.

CLI (exemplos)

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

# Actions (escolha o que você precisa)
npx trustless-work add escrows/single-release
# npx trustless-work add escrows/multi-release
# npx trustless-work add escrows/single-multi-release

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

Ações (single-release / multi-release)

Todas as ações single-release e multi-release (Inicializar Escrow, Financiar Escrow, Alterar Status do Marco, Aprovar Marco, Liberar, Disputar, Resolver, Atualizar Escrow) requerem:

• wallet-kit

• providers

• handle-errors

• tanstack

• helpers

CLI (mínimo para ações)

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

---

Encapsulamento de providers (a ordem importa)

Encapsule seu app com esses providers, nesta ordem exata.

Incluir EscrowDialogsProvider e EscrowAmountProvider quando você usa diálogos ou o contexto de amount.

Não reordene os providers.

A maioria dos problemas de “hooks não funcionando” vem da ordem dos 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>
  );
}