Introducción

Un conjunto de bloques React listo para producción para integrar los flujos de escrow de Trustless Work.

¿Quieres personalizar los bloques?

Edita los componentes generados como quieras.

---

Lo que obtienes

• Bloques de UI (tarjetas/tablas/dialogos/formularios) para listar y gestionar escrows

• Proveedores para config de API, contexto de wallet, diálogos y montos

• Hooks de TanStack Query para obtener y mutar escrows

• Helpers de wallet-kit y utilidades de manejo de errores

Enlaces

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

Lista todos los bloques disponibles

Usa la CLI para imprimir todos los bloques disponibles:

CLI

npx trustless-work list

Esta es la forma más rápida de descubrir rutas de carpetas para npx trustless-work add ....

API de Contexto

La API de contexto es un almacenamiento global de escrows. Se usa para guardar los escrows que se obtienen desde la API. También se usa para guardar el escrow seleccionado.

No tienes que usar este enfoque de contexto.

Puedes usar Redux, Zustand, o cualquier otra cosa. Solo asegúrate de que los datos del escrow objetivo estén disponibles para cada hook de endpoint.

Cómo los hooks de endpoint usan el contexto

Al implementar los endpoints, necesitamos pasar los datos de un escrow específico a cada endpoint. ¿Pero cómo lo hacemos? Nuestra librería proporciona un contexto llamado EscrowContext, que incluye algunas utilidades muy importantes. Entre ellas estánselectedEscrowy setSelectedEscrow, que nos permiten hacer lo siguiente:

selectedEscrow

Actualmente, selectedEscrow mantiene un escrow específico al que estamos apuntando. Con esto, todos los hooks de endpoint interactúan con ese estado para extraer datos de él, como contractId, roles, etc. Por ejemplo, en el selector de cambio de estado del milestone, los milestoneIndex valores se cargan en función del escrow actualmente seleccionado. Por lo tanto, sisetSelectedEscrow está indefinido, no se cargarán.

useChangeMilestoneStatus.ts

const { selectedEscrow } = useEscrowContext();

const handleSubmit = form.handleSubmit(async (payload) => {             
  /**
   * Crea el payload final para la mutación de cambio de estado del milestone
   *
   * @param payload - El payload del formulario
   * @returns El payload final para la mutación de cambio de estado del milestone
  */
  const finalPayload: ChangeMilestoneStatusPayload = {
    contractId: selectedEscrow?.contractId || '', // contractId del selectedEscrow
    milestoneIndex: payload.milestoneIndex,
    newStatus: payload.status,
    newEvidence: payload.evidence || undefined,
    serviceProvider: walletAddress || '',
  };

  /**
   * Llama a la mutación de cambio de estado del milestone
   *
   * @param payload - El payload final para la mutación de cambio de estado del milestone
   * @param type - El tipo del escrow
   * @param address - La dirección del escrow
  */
  await changeMilestoneStatus.mutateAsync({
    payload: finalPayload,
    type: selectedEscrow?.type || 'multi-release',
    address: walletAddress || '',
  });
}

setSelectedEscrow

setSelectedEscrow almacena el escrow seleccionado en el contexto.

Otros hooks y bloques de UI pueden entonces leer selectedEscrow para obtener contractId, roles, etc. Ejemplo: la vista de tarjetas almacena el escrow seleccionado antes de abrir el diálogo de detalles.

EscrowsCards.tsx

const { setSelectedEscrow } = useEscrowContext();

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

updateEscrow

Nuestra updateEscrow función actualiza el selectedEscrow existente en el contexto. Es útil para actualizar una bandera u otros campos. Por ejemplo, la usamos para actualizar el estado del escrow después de una mutación de cambio de estado del milestone.

useChangeMilestoneStatus.ts

const { selectedEscrow, updateEscrow } = useEscrowContext();

const handleSubmit = form.handleSubmit(async (payload) => { 
  /**
    * Llama a la mutación de cambio de estado del milestone
    *
    * @param payload - El payload final para la mutación de cambio de estado del milestone
    * @param type - El tipo del escrow
    * @param address - La dirección del escrow
  */
  await changeMilestoneStatus.mutateAsync({
    payload: finalPayload,
    type: selectedEscrow?.type || "multi-release", // tipo del selectedEscrow
    address: walletAddress || "",
  });

  toast.success("Estado del milestone actualizado con éxito");

  // Actualiza el escrow seleccionado en el contexto con el nuevo estado y evidencia
  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 bloques por ruta de carpeta

Puedes instalar carpetas enteras (y todos los bloques hijos) con un solo comando.

Instalar un directorio padre

npx trustless-work add escrows

Instala todos los bloques de escrow.

Instalar una subcarpeta específica

npx trustless-work add escrows/single-release

Instala solo los bloques de escrow single-release.

Cuanto más profunda la ruta de la carpeta, más específica es la instalación.

Empieza amplio (escrows), luego afiná según sea necesario (escrows/single-release/...).

Guía de instalación