# Primeros pasos ### Descripción general El Trustless Work React SDK es una colección de hooks y entidades tipadas. Utiliza [Axios](https://axios-http.com/docs/intro) para solicitudes HTTP. {% hint style="info" %} Los flujos de escritura requieren una clave de API (`NEXT_PUBLIC_API_KEY`). Las llamadas de solo lectura pueden funcionar sin una. {% endhint %} ### Enlaces rápidos
TítuloEnlace
Paquete NPMhttps://www.npmjs.com/package/@trustless-work/escrow
Conceptos básicos de la API (URLs base, Swagger, límites)/spaces/6ApCBGd8DBKwXmXE2YQS/pages/b266c4851dd58f24a9067ccb8e2c9bcf601bb61b
Enviar transacciones firmadas (XDR)/spaces/6ApCBGd8DBKwXmXE2YQS/pages/462903029c63aa469bfb7ece47ba79893eb479c0
### Configuración {% stepper %} {% step %} ### Instalación Instala el SDK. {% tabs %} {% tab title="npm" %} ```sh npm install "@trustless-work/escrow" ``` {% endtab %} {% tab title="yarn" %} ```sh yarn add "@trustless-work/escrow" ``` {% endtab %} {% endtabs %} {% endstep %} {% step %} ### Configura el proveedor Configurarás 2 cosas: * `baseURL`: usa `development` (testnet) o `mainNet` (mainnet). * `apiKey`: desde el dApp BackOffice. El SDK exporta `TrustlessWorkConfig`. Envuelve tu aplicación con él para habilitar todos los hooks. {% code title="src/trustless-work-provider.tsx" overflow="wrap" fullWidth="true" %} ```typescript "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) { const apiKey = process.env.NEXT_PUBLIC_API_KEY || ""; return ( {children} ); } ``` {% endcode %} {% hint style="warning" %} Si renderizas este proveedor en el servidor, los hooks fallarán. Mantenlo en un componente cliente. {% endhint %} {% endstep %} {% step %} ### Envuelve tu aplicación Elige el fragmento que coincida con tu configuración. {% tabs %} {% tab title="Next.js (App Router)" %} {% code title="app/layout.tsx" %} ```typescript import { TrustlessWorkProvider } from "@/trustless-work-provider"; export default function RootLayout({ children }: { children: React.ReactNode }) { return ( {children} ); } ``` {% endcode %} {% endtab %} {% tab title="React (SPA)" %} {% code title="src/app.tsx" %} ```typescript import { TrustlessWorkProvider } from "./trustless-work-provider"; export function App() { return ( ); } ``` {% endcode %} {% endtab %} {% endtabs %} {% endstep %} {% step %} ### Usa hooks y entidades Ahora puedes llamar a los hooks del SDK desde cualquier componente bajo el proveedor. Flujo típico: 1. Llama a un hook para obtener un **XDR sin firmar**. 2. Firma el XDR con la wallet del rol correcto. 3. Envíalo con `useSendTransaction`. Leer: [useSendTransaction](/trustless-work/v1-es/escrow-react-sdk/usesendtransaction.md). {% endstep %} {% endstepper %} {% hint style="success" %} Este SDK soporta **single-release** y **multi-release** escrows. Usa el hook y el tipo de payload correctos para cada flujo. {% endhint %} --- # 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-react-sdk/primeros-pasos.md?ask= ``` 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.