# Introdução - Blocos

## Visão geral

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

* [**react-hook-form**](https://react-hook-form.com/) — Biblioteca performática e flexível para gerenciar formulários em React.
* [**zod**](https://zod.dev/) — Biblioteca de validação de esquema com foco em TypeScript.
* [**@trustless-work/escrow**](https://www.npmjs.com/package/@trustless-work/escrow) — SDK para lidar com lógica de escrow em aplicativos descentralizados.
* [**@tanstack/react-query**](https://tanstack.com/query/latest) — Biblioteca de busca e cache de dados para React.
* [**@tanstack/react-query-devtools**](https://tanstack.com/query/latest/docs/react/guides/devtools) — Ferramentas de desenvolvedor para inspecionar o estado do React Query.
* [**@hookform/resolvers**](https://react-hook-form.com/docs/useform/#resolver) — Resolvers para integrar bibliotecas de validação (como Zod) com React Hook Form.
* [**@creit.tech/stellar-wallets-kit**](https://www.npmjs.com/package/@creit.tech/stellar-wallets-kit) — Kit de conexão de carteiras para a blockchain Stellar.
* [**axios**](https://axios-http.com/) — Cliente HTTP baseado em Promise para fazer requisições de API.
* [**@tanstack/react-table**](https://tanstack.com/table/latest) — Biblioteca headless de tabelas para construir grades de dados flexíveis.
* [**react-day-picker**](https://react-day-picker.js.org/) — Componente leve de seletor de data para React.
* [**recharts**](https://recharts.org/en-US/) — Biblioteca de gráficos construída com React e D3.

***

## Links

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

## Configuração

{% stepper %}
{% step %}

### Instalação

Comece instalando o Trustless Work Blocks

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

```sh
npm install @trustless-work/blocks
```

{% endtab %}

{% tab title="yarn" %}

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

{% endtab %}
{% endtabs %}
{% endstep %}

{% step %}

### Inicializar Configuração

Configure seu projeto com blocks

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

```sh
npx trustless-work init
```

{% endtab %}
{% endtabs %}
{% endstep %}

{% step %}

### Configurar Ambiente

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

* `baseURL`: URL do Trustless Work, este deve ser o ambiente principal ou de desenvolvimento. Nós 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 customizados e entidades para todo o projeto. Para 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) {
  /**
   * Pegue 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 com Providers <a href="#wrap-app-with-providers" id="wrap-app-with-providers"></a>

***Devem ser usados obrigatoriamente:*** ReactQueryClientProvider | TrustlessWorkProvider | WalletProvider.

Se você quiser usar alguns blocks, você deve envolver seu app com os providers deles. Veja mais em: [Dependências](https://blocks.trustlesswork.com/get-started/dependencies)
{% endstep %}

{% step %}

### Adicione seu Primeiro Componente

Adicione conectividade de carteira ao seu app:

```
npx trustless-work add wallet-kit
```

Exemplo de uso em uma página:

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

```typescript
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">Meus Escrows</h1>
        <WalletButton />
      </div>
    </div>
  );
}
```

{% endcode %}
{% endstep %}
{% endstepper %}

Agora, você pode interagir com os blocks do Trustless Work.
