Getting Started
Required Blocks
Support
Dependent Blocks#
Some blocks require other blocks to work properly. Make sure to add their dependencies before using them.
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#
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
1# Quick install examples
2npx trustless-work add wallet-kit
3npx trustless-work add escrows/single-release # If you need single-release escrows
4npx trustless-work add escrows/multi-release # If you need multi-release escrows
5npx trustless-work add escrows/single-multi-release # If you need fund, approve or change status
6npx trustless-work add tanstack
7
8# If you skipped the init command, add these providers
9npx trustless-work add providers # All of them are required to these blocks
10
11# Optional utility modules
12npx trustless-work add handle-errors
13npx trustless-work add helpersSingle 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) require:
wallet-kitprovidershandle-errorstanstackhelpers
1# Add essentials for single-release flows
2npx trustless-work add wallet-kit
3npx trustless-work add tanstack
4
5# If you skipped the init command, add these providers
6npx trustless-work add providers # Only need Wallet, TrustlessWork, Escrow and ReactQueryClient
7
8# Optional utility modules
9npx trustless-work add handle-errors
10npx trustless-work add helpersIndicators Balance Progress#
All indicators balance progress (Balance Progress) require:
providerstanstackhelpers
1# Add essentials for indicators balance progress
2npx trustless-work add tanstack
3
4# If you skipped the init command, add these providers
5npx trustless-work add providers # Only need ReactQueryClient and TrustlessWork
6
7# Optional utility modules
8npx trustless-work add helpersDashboard#
All dashboard (Basic Dashboard) require:
providerstanstackwallet-kit
1# Add essentials for dashboard
2npx trustless-work add tanstack
3
4# If you skipped the init command, add these providers
5npx trustless-work add providers # Only need ReactQueryClient, TrustlessWork and WalletProvider
6
7# Optional utility modules
8npx trustless-work add wallet-kitProvider 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/wallet-kit/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}