Getting Started - Blocks

Overview

Trustless Work React library is a collection of React hooks and entities. It combines the following packages:

• 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

Setup your project with blocks

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 URL, this should be the main or development environment. We provide mainNetand developmentconstants. So you only need to import one of them and pass it to the baseURL prop.

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

Trustless Work React provides the TrustlessWorkConfig to provides all the custom hooks and entities to the whole project. To achieve this you'll need to create a Provider.

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>
  );
}

4

Wrap your App with Providers

Absolutely must be used: 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.