Introdução

Um conjunto pronto para produção de blocos React para integrar os fluxos de escrow do Trustless Work.

Quer personalizar os blocos?

Edite os componentes gerados como quiser.

---

O que você recebe

• Blocos de UI (cards/tabelas/diálogos/formulários) para listar e gerenciar escrowes

• Providers para configuração da API, contexto de carteira, diálogos e valores

• Hooks do TanStack Query para buscar e mutar escrowes

• Helpers do wallet-kit e utilitários de tratamento de erros

Links

Trustless Work Blocks | React Components for Blockchain Escrowsblocks.trustlesswork.com

https://github.com/Trustless-Work/react-library-trustless-work-blocksgithub.com

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

Listar todos os blocos disponíveis

Use o CLI para imprimir todos os blocos disponíveis:

CLI

npx trustless-work list

Esta é a maneira mais rápida de descobrir os caminhos das pastas para npx trustless-work add ....

API de Contexto

A API de contexto é um armazenamento global de escrowes. Ela é usada para armazenar os escrowes que são buscados da API. Também é usada para armazenar o escrow selecionado.

Você não precisa usar essa abordagem de contexto.

Você pode usar Redux, Zustand ou qualquer outra coisa. Apenas certifique-se de que os dados do escrow alvo estejam disponíveis para cada hook de endpoint.

Como o contexto é usado pelos hooks de endpoint

Ao implementar os endpoints, precisamos passar os dados de um escrow específico para cada endpoint. Mas como fazemos isso? Nossa biblioteca fornece um contexto chamado EscrowContext, que inclui alguns utilitários muito importantes. Entre eles estãoselectedEscrowe setSelectedEscrow, que nos permitem fazer o seguinte:

selectedEscrow

Atualmente, selectedEscrow mantém um escrow específico ao qual estamos apontando. Com isso, todos os hooks de endpoint interagem com esse estado para extrair dados dele, como contractId, papéis, etc. Por exemplo, no seletor de alteração de status do milestone, os milestoneIndex valores são carregados com base no escrow atualmente selecionado. Portanto, sesetSelectedEscrow estiver indefinido, eles não serão carregados.

useChangeMilestoneStatus.ts

const { selectedEscrow } = useEscrowContext();

const handleSubmit = form.handleSubmit(async (payload) => {             
  /**
   * Cria o payload final para a mutação de alteração do status do milestone
   *
   * @param payload - O payload do formulário
   * @returns O payload final para a mutação de alteração do status do milestone
  */
  const finalPayload: ChangeMilestoneStatusPayload = {
    contractId: selectedEscrow?.contractId || '', // contractId do selectedEscrow
    milestoneIndex: payload.milestoneIndex,
    newStatus: payload.status,
    newEvidence: payload.evidence || undefined,
    serviceProvider: walletAddress || '',
  };

  /**
   * Chama a mutação de alteração do status do milestone
   *
   * @param payload - O payload final para a mutação de alteração do status do milestone
   * @param type - O tipo do escrow
   * @param address - O endereço do escrow
  */
  await changeMilestoneStatus.mutateAsync({
    payload: finalPayload,
    type: selectedEscrow?.type || 'multi-release',
    address: walletAddress || '',
  });
}

setSelectedEscrow

setSelectedEscrow armazena o escrow selecionado no contexto.

Outros hooks e blocos de UI podem então ler selectedEscrow para obter contractId, papéis, etc. Exemplo: a visualização de cards armazena o escrow selecionado antes de abrir o diálogo de detalhes.

EscrowsCards.tsx

const { setSelectedEscrow } = useEscrowContext();

const onCardClick = (escrow: Escrow) => {
  setSelectedEscrow(escrow);
  dialogStates.second.setIsOpen(true);
};

updateEscrow

Nossa updateEscrow função atualiza o selectedEscrow existente no contexto. É útil para atualizar uma flag ou outros campos. Por exemplo, usamos para atualizar o status do escrow após uma mutação de alteração de status do milestone.

useChangeMilestoneStatus.ts

const { selectedEscrow, updateEscrow } = useEscrowContext();

const handleSubmit = form.handleSubmit(async (payload) => { 
  /**
    * Chama a mutação de alteração do status do milestone
    *
    * @param payload - O payload final para a mutação de alteração do status do milestone
    * @param type - O tipo do escrow
    * @param address - O endereço do escrow
  */
  await changeMilestoneStatus.mutateAsync({
    payload: finalPayload,
    type: selectedEscrow?.type || "multi-release", // tipo do selectedEscrow
    address: walletAddress || "",
  });

  toast.success("Status do milestone atualizado com sucesso");

  // Atualiza o escrow selecionado no contexto com o novo status e evidência
  updateEscrow({
    ...selectedEscrow,
    milestones: selectedEscrow?.milestones.map((milestone, index) => {
      if (index === Number(payload.milestoneIndex)) {
        return {
          ...milestone,
          status: payload.status,
          evidence: payload.evidence || undefined,
        };
      }
      return milestone;
    }),
  });
}

Instalar blocos por caminho de pasta

Você pode instalar pastas inteiras (e todos os blocos filhos) com um comando.

Instalar um diretório pai

npx trustless-work add escrows

Instala todos os blocos de escrow.

Instalar uma subpasta específica

npx trustless-work add escrows/single-release

Instala apenas os blocos de escrow single-release.

Quanto mais profundo o caminho da pasta, mais específica será a instalação.

Comece amplo (escrows), depois afine conforme necessário (escrows/single-release/...).

Guia de Instalação