# Primeiros passos ### Visão geral O Trustless Work React SDK é uma coleção de hooks e entidades tipadas. Ele usa [Axios](https://axios-http.com/docs/intro) para requisições HTTP. {% hint style="info" %} Fluxos de escrita requerem uma chave de API (`NEXT_PUBLIC_API_KEY`). Chamadas somente de leitura podem funcionar sem uma. {% endhint %} ### Links rápidos
TítuloLink
Pacote NPMhttps://www.npmjs.com/package/@trustless-work/escrow
Noções básicas da API (URLs base, Swagger, limites)/spaces/eYD33cBF7YahFsEFPbcg/pages/59dbbab88394100d6946138f8de7338651c1fbff
Enviar transações assinadas (XDR)/spaces/eYD33cBF7YahFsEFPbcg/pages/9abcf3092a06d4db2da5dd07c5cf2d5e6cef9ab5
### Configuração {% stepper %} {% step %} ### Instalação Instale o 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 %} ### Configure o provedor Você irá configurar 2 coisas: * `baseURL`: use `development` (testnet) ou `mainNet` (mainnet). * `apiKey`: a partir do dApp BackOffice. O SDK exporta `TrustlessWorkConfig`. Envolva seu app com ele para habilitar todos os hooks. {% code title="src/trustless-work-provider.tsx" overflow="wrap" fullWidth="true" %} ```typescript "use client"; // certifique-se de que este é um componente cliente import React from "react"; import { // ambiente de desenvolvimento = "https://dev.api.trustlesswork.com" development, // ambiente 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" %} Se você renderizar este provedor no servidor, os hooks irão quebrar. Mantenha-o em um componente cliente. {% endhint %} {% endstep %} {% step %} ### Envolva seu app Escolha o trecho que corresponde à sua configuração. {% 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 %} ### Use hooks e entidades Você agora pode chamar os hooks do SDK de qualquer componente sob o provedor. Fluxo típico: 1. Chame um hook para obter um **XDR não assinado**. 2. Assine o XDR com a carteira do papel (role) correta. 3. Submeta-o com `useSendTransaction`. Leitura: [useSendTransaction](/trustless-work/v1-pt/sdk-react-de-escrow/usesendtransaction.md). {% endstep %} {% endstepper %} {% hint style="success" %} Este SDK suporta **single-release** e **multi-release** escrows. Use o hook correto + tipo de payload para cada fluxo. {% 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-pt/sdk-react-de-escrow/primeiros-passos.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.