Installation Guide

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:

npm

npm install @trustless-work/blocks

Run the CLI Setup#

Configure Trustless Work Blocks to your project:

npx 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#

Documentation

Create a .env file in your project root:

.env

# Required: Your Trustless Work API key 
NEXT_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

{
  "uiBase": "@/components/ui"
}

Custom UI Base Path#

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

npx 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:

npx trustless-work add wallet-kit

Example usage in a page:

app/home/page.tsx

import { WalletButton } from "@/components/tw-blocks/wallet-kit/WalletButtons";

export default function HomePage() {
  return (
    <div className="container mx-auto py-8">
      <div className="flex justify-between items-center mb-8">
        <h1 className="text-3xl font-bold">My Escrows</h1>
        <WalletButton />
      </div>
    </div>
  );
}

Now, you are able to interact with the wallet.