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 — Biblioteca flexible y de alto rendimiento para gestionar formularios en React.

• zod — Biblioteca de validación de esquemas orientada a TypeScript.

• @trustless-work/escrow — SDK para manejar la lógica de escrow en aplicaciones descentralizadas.

• @tanstack/react-query — Biblioteca para obtención y cacheo de datos en React.

• @tanstack/react-query-devtools — Herramientas de desarrollador para inspeccionar el estado de React Query.

• @hookform/resolvers — Resolvers para integrar bibliotecas de validación (como Zod) con React Hook Form.

• @creit.tech/stellar-wallets-kit — Kit de herramientas para conexión de wallets en la blockchain Stellar.

• axios — Cliente HTTP basado en promesas para realizar solicitudes a APIs.

• @tanstack/react-table — Biblioteca headless de tablas para construir rejillas de datos flexibles.

• react-day-picker — Componente ligero de selector de fechas para React.

• recharts — Biblioteca de gráficos construida con React y D3.

---

Enlaces

https://www.npmjs.com/package/@trustless-work/blockswww.npmjs.com

Configuración

1

Instalación

Comienza instalando Trustless Work Blocks

npm

npm install @trustless-work/blocks

yarn

yarn add @trustless-work/blocks

2

Inicializar configuración

Inicializa tu proyecto con la CLI.

npm

npx trustless-work init

3

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.

src/trustless-work-provider.tsx

"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>
  );
}

Los flujos de solo lectura pueden funcionar sin una clave API. Los flujos de escritura (deploy/fund/release/…) requieren una clave válida.

4

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

5

Agrega tu primer componente

Agrega conectividad de wallet a tu app:

npx trustless-work add wallet-kit

Ejemplo de uso en una página:

page.tsx

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

Ahora, puedes interactuar con los bloques de Trustless Work.