Getting Started
Required Blocks
Support
Dependent Blocks#
Some blocks require other blocks to work properly. Make sure to add their dependencies before using them.
Starting with the current version, the CLI automatically resolves peer dependencies for each block. When you run trustless-work add <block>, the required peer blocks (providers, wallet-kit, tanstack, handle-errors, helpers) and shadcn/ui components are installed automatically. The manual steps listed below are for reference or for users who used the --no-install flag.
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.
Dependencies by Block Group#
These dependencies are installed automatically when you add the block. You only need to run the manual commands if you used --no-install.
Escrows by Signer (Table, Cards) & Escrows by Role (Table, Cards)#
These listing/detail blocks depend on several shared modules and providers:
wallet-kitprovidershandle-errorshelperstanstacksingle-releaseormulti-releaseorsingle-multi-release// Depending on your needs
1npx trustless-work add escrows/escrows-by-role/cards
2# All peer dependencies (wallet-kit, tanstack, providers, handle-errors, helpers) are installed automatically
3
4# If you also need escrow actions:
5npx trustless-work add escrows/single-release # For single-release escrows
6npx trustless-work add escrows/multi-release # For multi-release escrows
7npx trustless-work add escrows/single-multi-release # For fund, approve or change statusSingle Release & Multi Release components#
All single-release and multi-release actions (Initialize Escrow, Fund Escrow, Change Milestone Status, Approve Milestone, Release, Dispute, ResolveWithdraw Remaining Funds, Update Escrow, Load Escrow) require:
wallet-kitprovidershandle-errorstanstackhelpers
1npx trustless-work add escrows/single-release
2# All peer dependencies (wallet-kit, tanstack, providers, handle-errors, helpers) are installed automatically
3
4npx trustless-work add escrows/multi-release
5# Same automatic resolution for multi-releaseIndicators Balance Progress#
All indicators balance progress (Balance Progress) require:
providerstanstackhelpers
1npx trustless-work add indicators/balance-progress
2# All peer dependencies (providers, tanstack, helpers) are installed automaticallyDashboard#
All dashboard (Basic Dashboard) require:
providerstanstackwallet-kit
1npx trustless-work add dashboard/dashboard-01
2# All peer dependencies (providers, tanstack, wallet-kit) are installed automaticallyProvider Wrapping (order matters)#
Wrap your app with the following providers, in this order. IncludeEscrowDialogsProviderand EscrowAmountProviderwhen a page uses dialogs or amount context.
1import { ReactQueryClientProvider } from "@/components/tw-blocks/providers/ReactQueryClientProvider";
2import { TrustlessWorkProvider } from "@/components/tw-blocks/providers/TrustlessWork";
3import { WalletProvider } from "@/components/tw-blocks/providers/WalletProvider";
4import { EscrowProvider } from "@/components/tw-blocks/providers/EscrowProvider";
5import { EscrowDialogsProvider } from "@/components/tw-blocks/providers/EscrowDialogsProvider";
6import { EscrowAmountProvider } from "@/components/tw-blocks/providers/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}