📓Bloques de escrow

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

¿Te gustaría personalizar los bloques? Puedes hacerlo editando los bloques como consideres adecuado.

---

Lo que obtienes

• Bloques de interfaz (tarjetas/tablas/diálogos/formularios) para listar y gestionar escrows

• Providers para configuración de API, contexto de wallet, diálogos y montos

• Hooks de TanStack Query para obtener y mutar escrows

• Helpers de wallet-kit y utilidades para 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

Listar todos los bloques disponibles#

Con la CLI puedes listar todos los bloques disponibles:

npx trustless-work list

El comando init hará:

• Mostrar todos los bloques disponibles.

API de Contexto#

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

Importante

Si no quieres usar nuestro enfoque para recuperar los datos del escrow, eres completamente libre de cambiarlo. Puedes usar Redux, Zustand u otra solución en su lugar. Sin embargo, es importante que te asegures de que el escrow deseado se pase al endpoint.

Entendiendo cómo funciona el contexto en los endpoints de escrows.#

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

Uso de selectedEscrow#

Actualmente, selectedEscrow mantiene un escrow específico al que estamos apuntando. Con esto, todos los hooks de endpoints interactúan con ese estado para extraer datos de él, como contractId, roles, etc. Por ejemplo, en el selector de cambio de estado, 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) => {             
  /**
   * Crear la carga final para la mutación de cambio de estado del hito
   *
   * @param payload - La carga del formulario
   * @returns La carga final para la mutación de cambio de estado del hito
  */
  const finalPayload: ChangeMilestoneStatusPayload = {
    contractId: selectedEscrow?.contractId || '', // contractId del selectedEscrow
    milestoneIndex: payload.milestoneIndex,
    newStatus: payload.status,
    newEvidence: payload.evidence || undefined,
    serviceProvider: walletAddress || '',
  };

  /**
   * Llamar a la mutación de cambio de estado del hito
   *
   * @param payload - La carga final para la mutación de cambio de estado del hito
   * @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 || '',
  });
}

Uso de setSelectedEscrow#

La función setSelectedEscrow guarda el escrow seleccionado en el contexto, de modo que todos los hooks de endpoints interactúen con ese estado para extraer datos de él, como contractId, roles, etc. Por ejemplo, en las tarjetas de escrows por firmante guardamos el escrow seleccionado en el contexto, para que podamos usarlo en el diálogo de detalles.

/EscrowsCards.tsx

const { setSelectedEscrow } = useEscrowContext();

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

Uso de updateEscrow#

Nuestro updateEscrow la 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 hito.

/useChangeMilestoneStatus.ts

const { selectedEscrow, updateEscrow } = useEscrowContext();

const handleSubmit = form.handleSubmit(async (payload) => { 
  /**
    * Llamar a la mutación de cambio de estado del hito
    *
    * @param payload - La carga final para la mutación de cambio de estado del hito
    * @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 hito actualizado correctamente");

  // Actualizar 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;
    }),
  });
}

Instalación basada en la ruta de la carpeta#

Si necesitas todos los bloques hijos, puedes instalarlos apuntando a su directorio padre, así no tendrás que instalarlos uno por uno.

npx trustless-work escrows // o el directorio de bloques del otro padre

Instalar directorio padre

npx trustless-work add escrows

Instala TODOS los bloques de escrow

Instalar subcarpeta específica

npx trustless-work add escrows/single-release

Instala solo los bloques de escrow single-release

💡 Consejo profesional: Instalación jerárquica

Cuanto más profundo vayas en la estructura de carpetas, más específicos se vuelven los bloques. Comienza con directorios padre para funcionalidad integral y luego profundiza en componentes específicos según lo necesites.

Guía de instalación