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.

Show DiagramClick 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

  • providers

  • handle-errors

  • helpers

  • tanstack

  • single-releaseormulti-releaseorsingle-multi-release// Depending on your needs

Providers to includeEnsure you include all the providers. These blocks need all of them

# Quick install examples
npx trustless-work add wallet-kit
npx trustless-work add escrows/single-release # If you need single-release escrows
npx trustless-work add escrows/multi-release # If you need multi-release escrows
npx trustless-work add escrows/single-multi-release # If you need fund, approve or change status
npx trustless-work add tanstack

# If you skipped the init command, add these providers
npx trustless-work add providers # All of them are required to these blocks

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

Single Release & Multi Release components#

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

# Add essentials for single-release flows
npx trustless-work add wallet-kit
npx trustless-work add tanstack

# If you skipped the init command, add these providers
npx trustless-work add providers # Only need Wallet, TrustlessWork, Escrow and ReactQueryClient

# Optional utility modules
npx trustless-work add handle-errors
npx 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

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>
  );
}
PreviousEscrow's Single Release LifecycleNextVibe Coding

Last updated

Was this helpful?