Primeiros Passos

Visão geral

Trustless Work Blocks é um conjunto de blocos de UI React, hooks e providers.

Ele inclui (ou espera) estas bibliotecas principais:

• react-hook-form — Biblioteca performática e flexível para gerenciamento de formulários em React.

• zod — Biblioteca de validação de schemas com foco em TypeScript.

• @trustless-work/escrow — SDK para lidar com a lógica de escrow em aplicativos descentralizados.

• @tanstack/react-query — Biblioteca de busca e cache de dados para React.

• @tanstack/react-query-devtools — Ferramentas de desenvolvedor para inspecionar o estado do React Query.

• @hookform/resolvers — Resolvers para integrar bibliotecas de validação (como Zod) com React Hook Form.

• @creit.tech/stellar-wallets-kit — Kit de conexão de carteiras para a blockchain Stellar.

• axios — Cliente HTTP baseado em Promises para fazer requisições API.

• @tanstack/react-table — Biblioteca headless de tabelas para construir grades de dados flexíveis.

• react-day-picker — Componente de seleção de data leve para React.

• recharts — Biblioteca de gráficos construída com React e D3.

---

Links

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

Configuração

1

Instalação

Comece instalando o Trustless Work Blocks

npm

npm install @trustless-work/blocks

yarn

2

Inicializar Configuração

Inicie seu projeto com o CLI.

npm

npx trustless-work init

3

Configurar Ambiente

O próximo passo é configurar o provider do Trustless Work. Você precisa configurar o seguinte:

• baseURL: URL da API do Trustless Work. Use mainNet ou desenvolvimento.

• apiKey: Autorização fornecida pelo nosso dApp para usar a API.

Crie um provider que envolva seu app com TrustlessWorkConfig.

src/trustless-work-provider.tsx

"use client"; // certifique-se de que este é um componente client

import React from "react";
import {
  // ambiente de desenvolvimento = "https://dev.api.trustlesswork.com"
  desenvolvimento,

  // ambiente mainnet = "https://api.trustlesswork.com"
  mainNet,
  TrustlessWorkConfig,
} from "@trustless-work/escrow";

interface TrustlessWorkProviderProps {
  children: React.ReactNode;
}

export function TrustlessWorkProvider({
  children,
}: TrustlessWorkProviderProps) {
  /**
   * Obtenha a chave da API das variáveis de ambiente
   */
  const apiKey = process.env.NEXT_PUBLIC_API_KEY || "";

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

Fluxos somente leitura podem funcionar sem uma chave de API. Fluxos de escrita (deploy/fund/release/…) requerem uma chave válida.

4

Envolva seu app com providers

Você deve envolver seu app com estes providers:

• ReactQueryClientProvider

• TrustlessWorkProvider

• WalletProvider

Se você quiser usar alguns blocos, deve envolver seu app com os providers deles. Veja mais em: Dependências

5

Adicione seu Primeiro Componente

Adicione conectividade de carteira ao seu app:

npx trustless-work add wallet-kit

Exemplo de uso em uma 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">Meus Escrows</h1>
        <WalletButton />
      </div>
    </div>
  );
}

Agora, você pode interagir com os blocos do Trustless Work.