Getting Started

Overview

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

Links

Logonpm: @trustless-work/escrownpm
LogoGitHub - Trustless-Work/react-library-trustless-work: An open-source library that makes integrating Trustless Work simple and seamless.GitHub

Setup

1

Installation

Start by installing Trustless Work React Library.

npm i @trustless-work/escrow

2

Configure the provider

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

Wrap your app in the provider

Wrap your app in the provider just created.

app.tsx
import { TrustlessWorkProvider} from "@/trustless-work-provider.tsx";
 
export function App() {
  return (
    <TrustlessWorkProvider>
      <YourApp />
    </TrustlessWorkProvider>
  );
}

Notice that if you are using Next.js app routes, you should place the provider in the root layout file.

app/layout.tsx
import { TrustlessWorkProvider} from "@/trustless-work-provider.tsx";
 
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <TrustlessWorkProvider>
          {children}
        </TrustlessWorkProvider>
      </body>
    </html>
  );
}
4

Using hooks and entities

You can now use the Trustless Work React hooks and entities from any component wrapped by the root provider!

Important: This library offers seamless integration and allows flexibility with single-release or multi-release escrow options. Simply use the appropriate type parameter and required payload for your needs

PreviousReact LibraryNextuseSendTransaction

Last updated

Was this helpful?