# Introdução - SDK

## Visão geral

A biblioteca Trustless Work React é uma coleção de hooks e entidades React. Ela combina os seguintes pacotes:

* [**Axios**](https://axios-http.com/es/docs/intro) para requisições https.

***

## Links

{% embed url="<https://www.npmjs.com/package/@trustless-work/escrow>" %}

## Configuração

{% stepper %}
{% step %}

### Instalação

Comece instalando a Biblioteca Trustless Work React.

{% tabs %}
{% tab title="npm" %}

```sh
npm i @trustless-work/escrow
```

{% endtab %}

{% tab title="yarn" %}

```sh
yarn add @trustless-work/escrow
```

{% endtab %}
{% endtabs %}

{% endstep %}

{% step %}

#### Configure o provedor

O próximo passo é configurar o provedor Trustless Work. Você precisa configurar o seguinte:

* `baseURL`: URL do Trustless Work, isso deve ser o ambiente principal ou de desenvolvimento. Fornecemos `mainNet`e `development`constantes. Então você só precisa importar uma delas e passá-la para a prop baseURL.
* `apiKey`: Autorização fornecida pelo nosso dApp para usar a API.

O Trustless Work React fornece o `TrustlessWorkConfig` para fornecer todos os hooks personalizados e entidades para todo o projeto. Para conseguir isso você precisará criar um Provider.

{% code title="src/trustless-work-provider.tsx" overflow="wrap" fullWidth="true" %}

```typescript
"use client"; // certifique-se de que este é um componente cliente

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

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

interface TrustlessWorkProviderProps {
  children: React.ReactNode;
}

export function TrustlessWorkProvider({
  children,
}: TrustlessWorkProviderProps) {
  /**
   * Obtenha a chave da API das variáveis de ambiente
   */
  const apiKey = process.env.NEXT_PUBLIC_API_KEY || "";

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

```

{% endcode %}
{% endstep %}

{% step %}

#### Envolva seu app no provedor

Envolva seu app com o provedor recém-criado.

{% code title="app.tsx" %}

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

{% endcode %}

Observe que se você estiver usando rotas de app do Next.js, você deve colocar o provedor no arquivo de layout raiz.

{% code title="app/layout.tsx" %}

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

{% endcode %}
{% endstep %}

{% step %}

#### Usando hooks e entidades

Agora você pode usar os hooks e entidades Trustless Work React de qualquer componente envolvido pelo provedor raiz!

{% endstep %}
{% endstepper %}

**Importante:** Esta biblioteca oferece integração contínua e permite flexibilidade com **single-release** ou **multi-release** opções de escrow. Simplesmente use o `type` parâmetro e o `payload` necessários para suas necessidades
