circle-check
Our docs are AI-ready. Use them as context for any AI, or ask questions via the search bar.

flag-checkeredPrimeiros Passos

Visão geral

O Trustless Work React SDK é uma coleção de hooks e entidades tipadas.

Ele usa Axiosarrow-up-right para requisições HTTP.

circle-info

Fluxos de escrita requerem uma chave de API (NEXT_PUBLIC_API_KEY). Chamadas somente de leitura podem funcionar sem uma.

Configuração

1

Instalação

Instale o SDK.

npm install "@trustless-work/escrow"
2

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.

src/trustless-work-provider.tsx
"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 (
    <TrustlessWorkConfig baseURL={development} apiKey={apiKey}>
      {children}
    </TrustlessWorkConfig>
  );
}
circle-exclamation
3

Envolva seu app

Escolha o trecho que corresponde à sua configuração.

app/layout.tsx
import { TrustlessWorkProvider } from "@/trustless-work-provider";
 
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <TrustlessWorkProvider>{children}</TrustlessWorkProvider>
      </body>
    </html>
  );
}
4

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.

circle-check

Atualizado

Isto foi útil?