Dependent Blocks

Some blocks depend on shared modules (providers, helpers, query, etc).

Install the dependencies first.

If you skip dependencies, you’ll hit missing context errors at runtime.

Dependency diagram

Use the interactive dependency diagram to confirm what a block needs.

Trustless Work Blocks | React Components for Blockchain EscrowsTrustless Work Blocks

Dependencies by block group

Listings (Escrows by Signer / Escrows by Role)

Applies to:

Escrows by Signer: Table, Cards
Escrows by Role: Table, Cards

Required modules:

wallet-kit
providers
handle-errors
helpers
tanstack
escrows/single-release or escrows/multi-release or escrows/single-multi-release (depends on which actions you want enabled)

Include all providers for listings.

Listings open details dialogs and need the dialog + amount contexts.

CLI (examples)

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

# Actions (pick what you need)
npx trustless-work add escrows/single-release
# npx trustless-work add escrows/multi-release
# npx trustless-work add escrows/single-multi-release

# Optional utility modules
npx trustless-work add handle-errors
npx trustless-work add helpers

Actions (single-release / multi-release)

All single-release and multi-release actions (Initialize Escrow, Fund Escrow, Change Milestone Status, Approve Milestone, Release, Dispute, Resolve, Update Escrow) require:

wallet-kit
providers
handle-errors
tanstack
helpers

CLI (minimum for actions)

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

Provider wrapping (order matters)

Wrap your app with these providers, in this exact order.

Include EscrowDialogsProvider and EscrowAmountProvider when you use dialogs or amount context.

Do not reorder providers.

Most “hooks not working” issues come from provider order.

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