# Comenzar

### 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.