Getting Started

Overview

Trustless Work Blocks is a set of React UI blocks, hooks, and providers.

It bundles (or expects) these core libraries:

• react-hook-form — Performant, flexible library for managing forms in React.

• zod — TypeScript-first schema validation library.

• @trustless-work/escrow — SDK for handling escrow logic in decentralized apps.

• @tanstack/react-query — Data-fetching and caching library for React.

• @tanstack/react-query-devtools — Developer tools for inspecting React Query state.

• @hookform/resolvers — Resolvers for integrating validation libraries (like Zod) with React Hook Form.

• @creit.tech/stellar-wallets-kit — Wallet connection toolkit for Stellar blockchain.

• axios — Promise-based HTTP client for making API requests.

• @tanstack/react-table — Headless table library for building flexible data grids.

• react-day-picker — Lightweight date picker component for React.

• recharts — Charting library built with React and D3.

---

Links

https://www.npmjs.com/package/@trustless-work/blockswww.npmjs.com

Setup

1

Installation

Start by installing Trustless Work Blocks

npm

npm install @trustless-work/blocks

yarn

2

Initialize Configuration

Initialize your project with the CLI.

npm

npx trustless-work init

3

Configure Environment

The next step is to configure the Trustless Work provider. You need to configure the following:

• baseURL: Trustless Work API URL. Use mainNet or development.

• apiKey: Authorization provided by our dApp to use the API.

Create a provider that wraps your app with TrustlessWorkConfig.

src/trustless-work-provider.tsx

"use client"; // make sure this is a client component

import React from "react";
import {
  // development environment = "https://dev.api.trustlesswork.com"
  development,

  // mainnet environment = "https://api.trustlesswork.com"
  mainNet,
  TrustlessWorkConfig,
} from "@trustless-work/escrow";

interface TrustlessWorkProviderProps {
  children: React.ReactNode;
}

export function TrustlessWorkProvider({
  children,
}: TrustlessWorkProviderProps) {
  /**
   * Get the API key from the environment variables
   */
  const apiKey = process.env.NEXT_PUBLIC_API_KEY || "";

  return (
    <TrustlessWorkConfig baseURL={development} apiKey={apiKey}>
      {children}
    </TrustlessWorkConfig>
  );
}

Read-only flows can work without an API key. Write flows (deploy/fund/release/…) require a valid key.

4

Wrap your app with providers

You must wrap your app with these providers:

• ReactQueryClientProvider

• TrustlessWorkProvider

• WalletProvider

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

5

Add your First Component

Add wallet connectivity to your app:

npx trustless-work add wallet-kit

Example usage in a page:

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 Trustless Work blocks.