# Primeros pasos

### Resumen

Trustless Work Blocks es un conjunto de bloques de UI en React, hooks y providers.

Incluye (o espera) estas bibliotecas principales:

* [**react-hook-form**](https://react-hook-form.com/) — Biblioteca flexible y de alto rendimiento para gestionar formularios en React.
* [**zod**](https://zod.dev/) — Biblioteca de validación de esquemas orientada a TypeScript.
* [**@trustless-work/escrow**](https://www.npmjs.com/package/@trustless-work/escrow) — SDK para manejar la lógica de escrow en aplicaciones descentralizadas.
* [**@tanstack/react-query**](https://tanstack.com/query/latest) — Biblioteca para obtención y cacheo de datos en React.
* [**@tanstack/react-query-devtools**](https://tanstack.com/query/latest/docs/react/guides/devtools) — Herramientas de desarrollador para inspeccionar el estado de React Query.
* [**@hookform/resolvers**](https://react-hook-form.com/docs/useform/#resolver) — Resolvers para integrar bibliotecas de validación (como Zod) con React Hook Form.
* [**@creit.tech/stellar-wallets-kit**](https://www.npmjs.com/package/@creit.tech/stellar-wallets-kit) — Kit de herramientas para conexión de wallets en la blockchain Stellar.
* [**axios**](https://axios-http.com/) — Cliente HTTP basado en promesas para realizar solicitudes a APIs.
* [**@tanstack/react-table**](https://tanstack.com/table/latest) — Biblioteca headless de tablas para construir rejillas de datos flexibles.
* [**react-day-picker**](https://react-day-picker.js.org/) — Componente ligero de selector de fechas para React.
* [**recharts**](https://recharts.org/en-US/) — Biblioteca de gráficos construida con React y D3.

***

### Enlaces

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

### Configuración

{% stepper %}
{% step %}

### Instalación

Comienza instalando 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 configuración

Inicializa tu proyecto con la CLI.

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

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

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

{% step %}

### Configurar entorno

El siguiente paso es configurar el provider de Trustless Work. Necesitas configurar lo siguiente:

* `baseURL`: URL de la API de Trustless Work. Usa `mainNet` o `development`.
* `apiKey`: Autorización proporcionada por nuestra dApp para usar la API.

Crea un provider que envuelva tu app con `TrustlessWorkConfig`.

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

```typescript
"use client"; // asegúrate de que este es un componente cliente

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

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

interface TrustlessWorkProviderProps {
  children: React.ReactNode;
}

export function TrustlessWorkProvider({
  children,
}: TrustlessWorkProviderProps) {
  /**
   * Obtén la clave API de las variables de entorno
   */
  const apiKey = process.env.NEXT_PUBLIC_API_KEY || "";

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

```

{% endcode %}

{% hint style="info" %}
Los flujos de solo lectura pueden funcionar sin una clave API.\
Los flujos de escritura (deploy/fund/release/…) requieren una clave válida.
{% endhint %}
{% endstep %}

{% step %}

### Envuelve tu app con providers

Debes envolver tu app con estos providers:

* `ReactQueryClientProvider`
* `TrustlessWorkProvider`
* `WalletProvider`

Si quieres usar algunos bloques, deberías envolver tu app con sus providers. Ver más en: [Dependencias](https://blocks.trustlesswork.com/get-started/dependencies)
{% endstep %}

{% step %}

### Agrega tu primer componente

Agrega conectividad de wallet a tu app:

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

Ejemplo de uso en una 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">Mis Escrows</h1>
        <WalletButton />
      </div>
    </div>
  );
}
```

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

Ahora, puedes interactuar con los bloques de Trustless Work.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.trustlesswork.com/trustless-work/v1-es/escrow-blocks-sdk/primeros-pasos.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.