Dependent Blocks

Some blocks require other blocks to work properly. Make sure to add their dependencies before using them.

Important

If you don't follow the instructions below, you may run into issues with the blocks not working properly.

Diagram of Dependencies

Some blocks require other blocks to work properly. Make sure to add their dependencies before using them.

Click to load the interactive dependencies diagram

Dependencies by Block Group

Escrows by Signer (Table, Cards) & Escrows by Role (Table, Cards)

These listing/detail blocks depend on several shared modules and providers:

wallet-kit
escrow-context
handle-errors
helpers
tanstack
single-release

Providers to include

Ensure you include both EscrowDialogsProvider and EscrowAmountProvider around your escrow UIs when needed.

1# Quick install examples
2npx trustless-work add wallet-kit
3npx trustless-work add escrows/escrow-context
4npx trustless-work add escrows/single-release
5npx trustless-work add tanstack
6
7# If you skipped the init command, add these providers
8npx trustless-work add providers
9
10# Optional utility modules
11npx trustless-work add handle-errors
12npx trustless-work add helpers

Single-release components

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

wallet-kit
escrow-context
handle-errors
tanstack

1# Add essentials for single-release flows
2npx trustless-work add wallet-kit
3npx trustless-work add escrows/escrow-context
4npx trustless-work add tanstack
5
6# If you skipped the init command, add these providers
7npx trustless-work add providers
8
9# Optional utility modules
10npx trustless-work add handle-errors
11npx trustless-work add helpers

Provider Wrapping (order matters)

Wrap your app with the following providers, in this order. IncludeEscrowDialogsProviderand EscrowAmountProviderwhen a page uses dialogs or amount context.

app/layout.tsx

1import { ReactQueryClientProvider } from "@/components/tw-blocks/providers/ReactQueryClientProvider";
2import { TrustlessWorkProvider } from "@/components/tw-blocks/providers/TrustlessWork";
3import { WalletProvider } from "@/components/tw-blocks/wallet-kit/WalletProvider";
4import { EscrowProvider } from "@/components/tw-blocks/escrows/escrow-context/EscrowProvider";
5import { EscrowDialogsProvider } from "@/components/tw-blocks/escrows/escrow-context/EscrowDialogsProvider";
6import { EscrowAmountProvider } from "@/components/tw-blocks/escrows/escrow-context/EscrowAmountProvider";
7
8export default function RootLayout({ children }: { children: React.ReactNode }) {
9  return (
10    <html lang="en">
11      <body>
12        <ReactQueryClientProvider>
13          <TrustlessWorkProvider>
14            <WalletProvider>
15              <EscrowProvider>
16                <EscrowDialogsProvider>
17                  <EscrowAmountProvider>
18                    {children}
19                  </EscrowAmountProvider>
20                </EscrowDialogsProvider>
21              </EscrowProvider>
22            </WalletProvider>
23          </TrustlessWorkProvider>
24        </ReactQueryClientProvider>
25      </body>
26    </html>
27  );
28}

Start from Scratch