Trustless Work React library is a collection of React hooks and entities. It combines the following packages:
for https requests.
from fetching data.
Links
Setup
1
Installation
Start by installing Trustless Work React Library.
npm i @trustless-work/escrow
yarn add @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!
