Getting Started

Introduction Installation Guide Start from Scratch

Required Blocks

Escrow's Single Release Lifecycle

Step by Step Guide to implement Escrow's Single Release Lifecycle

Important

It does not work for a real use case, only for testing purposes. But if you want to implement it, you can use the code below as a reference and customize it to your needs.

Create a Next.js Project

Start by creating a new Next.js project with TypeScript and Tailwind CSS:

1npx create-next-app@latest

Navigate to your project directory:

1cd my-trustless-app

Install Trustless Work Blocks

Install the main library package:

1npm install @trustless-work/blocks

Run the CLI Setup

Initialize your project with the Trustless Work CLI:

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

Add Wallet Connectivity

Add wallet connectivity to your app:

1npx trustless-work add wallet-kit

Example usage in a page:

Add wallet connectivity to your app:

app/layout.tsx

1"use client";
2
3import { WalletButton } from "@/components/tw-blocks/wallet-kit/WalletButtons";
4
5export default function Home() {
6  return (
7    <div className="font-sans grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20">
8      <header className="flex justify-between items-center w-full">
9        <h2 className="text-2xl font-bold">Trustless Work</h2>
10
11        {/* Wallet Button */}
12        <WalletButton />
13      </header>
14    </div>
15  );
16}
17

Add Helpers

Add helpers to your app:

1npx trustless-work add helpers

Add Tanstack Query

Add Tanstack Query to your app:

1npx trustless-work add tanstack

Add Handle Errors

Add Handle Errors to your app:

1npx trustless-work add handle-errors

Add Providers (If you skipped the init command)

Add Providers to your app:

1npx trustless-work add providers

Add Escrow Context

Add Escrow Context to your app:

1npx trustless-work add escrows/escrow-context

Add Escrows by Role Cards

Add Escrows by Role Cards to your app:

1npx trustless-work add escrows/escrows-by-role/cards

Add Single Release Escrows

Add Single Release Escrows to your app:

1npx trustless-work add escrows/single-release

Manual Provider Setup

Wrap your app with the required providers in this specific order:

app/layout.tsx

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/escrows/escrow-context/EscrowProvider";
5import { EscrowDialogsProvider } from "@/components/tw-blocks/escrows/escrow-context/EscrowDialogsProvider";
6import { EscrowAmountProvider } from "@/components/tw-blocks/escrows/escrow-context/EscrowAmountProvider";
7import { Toaster } from "@/components/ui/sonner";
8
9export default function RootLayout({
10  children,
11}: {
12  children: React.ReactNode;
13}) {
14  return (
15    <html lang="en">
16      <body>
17        <ReactQueryClientProvider>
18          <TrustlessWorkProvider>
19            <WalletProvider>
20              <EscrowProvider>
21                <EscrowDialogsProvider>
22                  <EscrowAmountProvider>
23
24                    {children}
25                    <Toaster />
26
27                  </EscrowAmountProvider>
28                </EscrowDialogsProvider>
29              </EscrowProvider>
30            </WalletProvider>
31          </TrustlessWorkProvider>
32        </ReactQueryClientProvider>
33      </body>
34    </html>
35  );
36}

Provider Order Matters

The providers must be nested in this exact order for proper functionality.

Example usage in a page:

Now, you are able to interact with the entire escrow lifecycle.

app/layout.tsx

1"use client";
2
3import EscrowsByRoleCards from "@/components/tw-blocks/escrows/escrows-by-role/cards/EscrowsCards";
4import InitializeEscrowDialog from "@/components/tw-blocks/escrows/single-release/initialize-escrow/dialog/InitializeEscrow";
5import { WalletButton } from "@/components/tw-blocks/wallet-kit/WalletButtons";
6
7export default function Home() {
8  return (
9    <div className="font-sans grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20">
10      <header className="flex justify-between items-center w-full">
11        <h2 className="text-2xl font-bold">Trustless Work</h2>
12        <WalletButton />
13      </header>
14      <main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
15        <div className="container">
16          <div className="flex w-full mb-4 justify-end">
17            <div className="flex w-1/6">
18              <InitializeEscrowDialog />
19            </div>
20          </div>
21
22          <EscrowsByRoleCards />
23        </div>
24      </main>
25    </div>
26  );
27}
28
29

All the blocks were added, now use them!

You already have all the required blocks to start using the single-release escrow lifecycle.

Final UI

By using these components, you'll be able to completed the entire escrow lifecycle.

Important Usage Advice

- This cards components works by role. In the filters section, you can select the role you want to see the escrows for. Based on that, the actions buttons will be rendered.
- Before you start using the UI, you must add the USDC asset to your wallet. If not, you wont be able to interact with Trustless Work.

Wallet Connection Dialog

Show the wallet connection dialog:

Cards by Role

Show the cards by role:

Initialize Escrow Dialog

Show the initialize escrow dialog:

Escrow Details Dialog

Show the escrow details dialog:

The easiest way to implement escrows in blockchain."

Installation Guide

Dependencies