Introdução - Blocos

Visão geral

A biblioteca Trustless Work React é uma coleção de hooks e entidades React. Ela combina os seguintes pacotes:

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

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

• @trustless-work/escrow — SDK para lidar com 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 Promise para fazer requisições de API.

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

• react-day-picker — Componente leve de seletor de data 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

Configure seu projeto com blocks

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 do Trustless Work, este deve ser o ambiente principal ou de desenvolvimento. Nós fornecemos mainNete developmentconstantes. Então você só precisa importar uma delas e passá-la para a prop baseURL.

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

O Trustless Work React fornece o TrustlessWorkConfig para fornecer todos os hooks customizados e entidades para todo o projeto. Para isso você precisará criar um Provider.

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) {
  /**
   * Pegue 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>
  );
}

4

Envolva seu App com Providers

Devem ser usados obrigatoriamente: ReactQueryClientProvider | TrustlessWorkProvider | WalletProvider.

Se você quiser usar alguns blocks, você 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 blocks do Trustless Work.