Comenzando - Bloques

Resumen

La biblioteca Trustless Work React es una colección de hooks y entidades de React. Combina los siguientes paquetes:

• react-hook-form — Biblioteca eficiente y flexible para gestionar formularios en React.

• zod — Biblioteca de validación de esquemas con TypeScript como prioridad.

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

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

• @tanstack/react-query-devtools — Herramientas para desarrolladores 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 — Conjunto de herramientas de conexión de billeteras para 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

2

Inicializar Configuración

Configura tu proyecto con blocks

npm

npx trustless-work init

3

Configurar el Entorno

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

• baseURL: URL de Trustless Work, esto debe ser el entorno principal o de desarrollo. Proveemos mainNety developmentconstantes. Así que solo necesitas importar una de ellas y pasarla a la prop baseURL.

• apiKey: Autorización proporcionada por nuestra dApp para usar la API.

Trustless Work React proporciona el TrustlessWorkConfig para proporcionar todos los hooks personalizados y entidades a todo el proyecto. Para lograr esto necesitarás crear un Provider.

src/trustless-work-provider.tsx

"use client"; // asegúrate de que este sea 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 API key de las variables de entorno
   */
  const apiKey = process.env.NEXT_PUBLIC_API_KEY || "";

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

4

Envuelve tu App con Providers

Debe ser usado absolutamente: ReactQueryClientProvider | TrustlessWorkProvider | WalletProvider.

Si quieres usar algunos blocks, deberías envolver tu app con sus providers. Ver más en: Dependencias

5

Agrega tu Primer Componente

Agrega conectividad de billetera 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 blocks de Trustless Work.