Trustless Work
HomeHome

Getting Started

IntroductionInstallation GuideStart from ScratchComponents

Required Blocks

Dependencies

Support

Common Issues

Installation Guide#

Complete setup guide for Trustless Work React blocks with detailed configuration and best practices.

Install Trustless Work Blocks#

Install the main library package:

1npm install @trustless-work/blocks

Run the CLI Setup#

Configure Trustless Work Blocks to your project:

1npx trustless-work init
What the init command does:
  • Installs shadcn/ui components (with interactive prompts)
  • Installs required dependencies: @tanstack/react-query, @trustless-work/escrow, axios, zod, react-hook-form, @creit.tech/stellar-wallets-kit, react-day-picker, etc.
  • Creates .twblocks.json configuration file
  • Optionally wires providers into your Next.js app/layout.tsx

Environment Configuration#

Create a .env file in your project root:

.env
1# Required: Your Trustless Work API key 
2NEXT_PUBLIC_API_KEY=your_api_key_here

Configuration Files (Optional)#

.twblocks.json#

The CLI creates a configuration file to manage UI component paths:

.twblocks.json
1{
2  "uiBase": "@/components/ui"
3}

Custom UI Base Path#

If your UI components are in a different location, specify the path when adding blocks:

1npx trustless-work add escrows/escrows-by-role/cards --ui-base "@/lib/ui"

Wrap your App with Providers#

If you want to use some blocks, you should wrap your app with their providers. See more in: Dependencies

Absolutely must be used: ReactQueryClientProvider | TrustlessWorkProvider | WalletProvider.

Add Your First Component#

Add wallet connectivity to your app:

1npx trustless-work add wallet-kit

Example usage in a page:

app/home/page.tsx
1import { WalletButton } from "@/components/tw-blocks/wallet-kit/WalletButtons";
2
3export default function HomePage() {
4  return (
5    <div className="container mx-auto py-8">
6      <div className="flex justify-between items-center mb-8">
7        <h1 className="text-3xl font-bold">My Escrows</h1>
8        <WalletButton />
9      </div>
10    </div>
11  );
12}

Now, you are able to interact with the wallet.

Introduction

Start from Scratch