@trustless-work/blocks 0.0.7 → 0.0.8

package/templates/escrows/details/MilestoneCard.tsx

@@ -11,20 +11,14 @@ import {
   CheckCheck,
   Layers,
 } from "lucide-react";
-import {
-  GetEscrowsFromIndexerResponse as Escrow,
-  Role,
-} from "@trustless-work/escrow/types";
+import { GetEscrowsFromIndexerResponse as Escrow } from "@trustless-work/escrow/types";
 import {
   MultiReleaseMilestone,
   SingleReleaseMilestone,
 } from "@trustless-work/escrow";
 import { Badge } from "__UI_BASE__/badge";
-import ApproveMilestoneButton from "../../single-release/approve-milestone/button/ApproveMilestone";
-import ResolveDisputeDialog from "../../single-release/resolve-dispute/dialog/ResolveDispute";
-import DisputeEscrowButton from "../../single-release/dispute-escrow/button/DisputeEscrow";
-import ReleaseEscrowButton from "../../single-release/release-escrow/button/ReleaseEscrow";
-import ChangeMilestoneStatusDialog from "../../single-release/change-milestone-status/dialog/ChangeMilestoneStatus";
+import { ChangeMilestoneStatusDialog } from "../../single-multi-release/change-milestone-status/dialog/ChangeMilestoneStatus";
+import { ApproveMilestoneButton } from "../../single-multi-release/approve-milestone/button/ApproveMilestone";
 import { formatCurrency } from "@/components/tw-blocks/helpers/format.helper";
 
 interface MilestoneCardProps {
@@ -32,7 +26,6 @@ interface MilestoneCardProps {
   milestoneIndex: number;
   selectedEscrow: Escrow;
   userRolesInEscrow: string[];
-  activeRole: Role[];
   onViewDetails: (
     milestone: SingleReleaseMilestone | MultiReleaseMilestone,
     index: number
@@ -44,7 +37,6 @@ const MilestoneCardComponent = ({
   milestoneIndex,
   selectedEscrow,
   userRolesInEscrow,
-  activeRole,
   onViewDetails,
 }: MilestoneCardProps) => {
   const getMilestoneStatusBadge = (
@@ -106,13 +98,11 @@ const MilestoneCardComponent = ({
   const getActionButtons = (
     milestone: SingleReleaseMilestone | MultiReleaseMilestone,
     milestoneIndex: number,
-    userRolesInEscrow: string[],
-    activeRole: Role[]
+    userRolesInEscrow: string[]
   ) => {
     const buttons = [] as React.ReactNode[];
     if (
       userRolesInEscrow.includes("serviceProvider") &&
-      activeRole.includes("serviceProvider") &&
       milestone.status !== "completed" &&
       !("flags" in milestone && milestone.flags?.approved)
     ) {
@@ -124,55 +114,71 @@ const MilestoneCardComponent = ({
       );
     }
 
+    if (
+      userRolesInEscrow.includes("approver") &&
+      (("approved" in milestone && !milestone.approved) ||
+        ("flags" in milestone &&
+          !milestone.flags?.approved &&
+          !milestone.flags?.disputed &&
+          !milestone.flags?.released &&
+          !milestone.flags?.resolved))
+    ) {
+      buttons.push(
+        <ApproveMilestoneButton
+          key={`approve-${milestoneIndex}`}
+          milestoneIndex={milestoneIndex}
+        />
+      );
+    }
+
     if (
       userRolesInEscrow.includes("releaseSigner") &&
-      activeRole.includes("releaseSigner") &&
       "flags" in milestone &&
       !milestone.flags?.disputed &&
       milestone.flags?.approved &&
       !milestone.flags?.released
     ) {
-      buttons.push(<ReleaseEscrowButton key={`release-${milestoneIndex}`} />);
+      buttons
+        .push
+        // You can add the button here, using the button from the blocks. This button is conditional based on the milestone status and the user roles. Works only with multi-release escrows.
+        // <ReleaseEscrowButton
+        //   key={`release-${milestoneIndex}`}
+        //   milestoneIndex={milestoneIndex}
+        // />
+        ();
     }
 
     if (
       (userRolesInEscrow.includes("serviceProvider") ||
         userRolesInEscrow.includes("approver")) &&
-      (activeRole.includes("serviceProvider") ||
-        activeRole.includes("approver")) &&
       "flags" in milestone &&
       !milestone.flags?.disputed &&
       !milestone.flags?.released &&
       !milestone.flags?.resolved
     ) {
-      buttons.push(<DisputeEscrowButton key={`dispute-${milestoneIndex}`} />);
+      buttons
+        .push
+        // You can add the button here, using the button from the blocks. This button is conditional based on the milestone status and the user roles. Works only with multi-release escrows.
+        // <DisputeEscrowButton
+        //   key={`dispute-${milestoneIndex}`}
+        //   milestoneIndex={milestoneIndex}
+        // />
+        ();
     }
 
     if (
       userRolesInEscrow.includes("disputeResolver") &&
-      activeRole.includes("disputeResolver") &&
       "flags" in milestone &&
       milestone.flags?.disputed
     ) {
-      buttons.push(<ResolveDisputeDialog key={`resolve-${milestoneIndex}`} />);
-    }
-
-    if (
-      userRolesInEscrow.includes("approver") &&
-      activeRole.includes("approver") &&
-      (("approved" in milestone && !milestone.approved) ||
-        ("flags" in milestone &&
-          !milestone.flags?.approved &&
-          !milestone.flags?.disputed &&
-          !milestone.flags?.released &&
-          !milestone.flags?.resolved))
-    ) {
-      buttons.push(
-        <ApproveMilestoneButton
-          key={`approve-${milestoneIndex}`}
-          milestoneIndex={milestoneIndex}
-        />
-      );
+      buttons
+        .push
+        // You can add the button here, using the button from the blocks. This button is conditional based on the milestone status and the user roles. Works only with multi-release escrows.
+        // <ResolveDisputeDialog
+        //   key={`resolve-${milestoneIndex}`}
+        //   milestoneIndex={milestoneIndex}
+        // />
+        ();
     }
 
     return buttons;
@@ -210,12 +216,7 @@ const MilestoneCardComponent = ({
           </div>
         )}
 
-        {getActionButtons(
-          milestone,
-          milestoneIndex,
-          userRolesInEscrow,
-          activeRole
-        )}
+        {getActionButtons(milestone, milestoneIndex, userRolesInEscrow)}
 
         <Button
           size="sm"
@@ -242,9 +243,7 @@ export const MilestoneCard = React.memo(
       prev.milestoneIndex === next.milestoneIndex &&
       prev.selectedEscrow?.contractId === next.selectedEscrow?.contractId &&
       prev.onViewDetails === next.onViewDetails &&
-      prev.activeRole.length === next.activeRole.length &&
       prev.userRolesInEscrow.length === next.userRolesInEscrow.length &&
-      prev.activeRole.every((r, i) => r === next.activeRole[i]) &&
       prev.userRolesInEscrow.every((r, i) => r === next.userRolesInEscrow[i])
     ) {
       return true;

package/templates/escrows/details/MilestoneDetailDialog.tsx

@@ -25,7 +25,6 @@ import {
 import {
   GetEscrowsFromIndexerResponse,
   MultiReleaseMilestone,
-  Role,
   SingleReleaseMilestone,
 } from "@trustless-work/escrow";
 import Link from "next/link";
@@ -39,7 +38,6 @@ interface MilestoneDetailDialogProps {
   } | null;
   selectedEscrow: GetEscrowsFromIndexerResponse;
   userRolesInEscrow: string[];
-  activeRole: Role[];
   evidenceVisibleMap: Record<number, boolean>;
   setEvidenceVisibleMap: React.Dispatch<
     React.SetStateAction<Record<number, boolean>>
@@ -112,6 +110,7 @@ export const MilestoneDetailDialog = ({
       new URL(url);
       return true;
     } catch (error) {
+      console.error(error);
       return false;
     }
   };

package/templates/escrows/details/Milestones.tsx

@@ -4,7 +4,6 @@ import { useCallback, useState } from "react";
 import { GetEscrowsFromIndexerResponse as Escrow } from "@trustless-work/escrow/types";
 import {
   MultiReleaseMilestone,
-  Role,
   SingleReleaseMilestone,
 } from "@trustless-work/escrow";
 import { MilestoneCard } from "./MilestoneCard";
@@ -17,7 +16,6 @@ interface MilestonesProps {
     React.SetStateAction<Record<number, boolean>>
   >;
   evidenceVisibleMap: Record<number, boolean>;
-  activeRole: Role[];
 }
 
 export const Milestones = ({
@@ -25,7 +23,6 @@ export const Milestones = ({
   userRolesInEscrow,
   setEvidenceVisibleMap,
   evidenceVisibleMap,
-  activeRole,
 }: MilestonesProps) => {
   const [selectedMilestoneForDetail, setSelectedMilestoneForDetail] = useState<{
     milestone: SingleReleaseMilestone | MultiReleaseMilestone;
@@ -65,7 +62,6 @@ export const Milestones = ({
               milestoneIndex={milestoneIndex}
               selectedEscrow={selectedEscrow}
               userRolesInEscrow={userRolesInEscrow}
-              activeRole={activeRole}
               onViewDetails={handleViewDetails}
             />
           ))}
@@ -77,7 +73,6 @@ export const Milestones = ({
           selectedMilestone={selectedMilestoneForDetail}
           selectedEscrow={selectedEscrow}
           userRolesInEscrow={userRolesInEscrow}
-          activeRole={activeRole}
           evidenceVisibleMap={evidenceVisibleMap}
           setEvidenceVisibleMap={setEvidenceVisibleMap}
         />

package/templates/escrows/details/SuccessReleaseDialog.tsx

@@ -8,7 +8,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from "__UI_BASE__/dialog";
-import EntityCard from "./EntityCard";
+import { EntityCard } from "./EntityCard";
 import { useEscrowContext } from "@/components/tw-blocks/providers/EscrowProvider";
 import { useEscrowAmountContext } from "@/components/tw-blocks/providers/EscrowAmountProvider";
 import { CircleCheckBig } from "lucide-react";
@@ -18,10 +18,10 @@ interface SuccessReleaseDialogProps {
   onOpenChange: (open: boolean) => void;
 }
 
-export function SuccessReleaseDialog({
+export const SuccessReleaseDialog = ({
   isOpen,
   onOpenChange,
-}: SuccessReleaseDialogProps) {
+}: SuccessReleaseDialogProps) => {
   const { selectedEscrow } = useEscrowContext();
   const { receiverAmount, platformFeeAmount, trustlessWorkAmount } =
     useEscrowAmountContext();
@@ -95,6 +95,4 @@ export function SuccessReleaseDialog({
       </DialogContent>
     </Dialog>
   );
-}
-
-export default SuccessReleaseDialog;
+};

package/templates/escrows/escrows-by-role/cards/EscrowsCards.tsx

@@ -11,6 +11,7 @@ import type {
 import { Card, CardContent, CardHeader, CardTitle } from "__UI_BASE__/card";
 import { Badge } from "__UI_BASE__/badge";
 import { Separator } from "__UI_BASE__/separator";
+import { Tooltip, TooltipContent, TooltipTrigger } from "__UI_BASE__/tooltip";
 import {
   Goal,
   Wallet,
@@ -20,16 +21,16 @@ import {
   FileX,
 } from "lucide-react";
 import { useEscrowsByRole } from "../useEscrowsByRole.shared";
-import Filters from "./Filters";
-import EscrowDetailDialog from "../details/EscrowDetailDialog";
+import { Filters } from "./Filters";
 import { useEscrowContext } from "@/components/tw-blocks/providers/EscrowProvider";
 import { useEscrowDialogs } from "@/components/tw-blocks/providers/EscrowDialogsProvider";
 import {
   formatCurrency,
   formatTimestamp,
 } from "../../../helpers/format.helper";
+import { EscrowDetailDialog } from "../details/EscrowDetailDialog";
 
-export function EscrowsByRoleCards() {
+export const EscrowsByRoleCards = () => {
   const {
     walletAddress,
     data,
@@ -130,21 +131,6 @@ export function EscrowsByRoleCards() {
     dialogStates.second.setIsOpen(true);
   };
 
-  /**
-   * Based on the provided roles -> https://docs.trustlesswork.com/trustless-work/technology-overview/roles-in-trustless-work
-   *
-   * You must pass one or more roles according to requirements. Acctually it's coming from the select filter.
-   *
-   * For example:
-   * - If the user is a freelancer, you must pass the "serviceProvider" and "receiver" role
-   *
-   * Depending of the role, you'll have different actions buttons
-   */
-  const activeRole: Role[] = React.useMemo(
-    () => role.split(",") as Role[],
-    [role]
-  );
-
   return (
     <>
       <div className="w-full flex flex-col gap-4">
@@ -360,9 +346,9 @@ export function EscrowsByRoleCards() {
                             <ul className="list-disc list-inside flex flex-col gap-1">
                               {escrow.milestones
                                 .slice(0, 3)
-                                .map((milestone) => (
+                                .map((milestone, index) => (
                                   <li
-                                    key={`milestone-${milestone.description}-${milestone.status}`}
+                                    key={`milestone-${milestone.description}-${milestone.status}-${index}`}
                                     className="text-xs flex justify-between"
                                   >
                                     {milestone.description}
@@ -378,33 +364,83 @@ export function EscrowsByRoleCards() {
                                               )}
                                             </span>
 
-                                            <span
-                                              className={`bg-red-800 rounded-full h-2 w-2 ml-1 ${
-                                                milestone.flags?.disputed
-                                                  ? "block"
-                                                  : "hidden"
-                                              }`}
-                                            />
-
-                                            <span
-                                              className={`bg-green-800 rounded-full h-2 w-2 ml-1 ${
-                                                milestone.flags?.resolved ||
-                                                milestone.flags?.released
-                                                  ? "block"
-                                                  : "hidden"
-                                              }`}
-                                            />
-
-                                            <span
-                                              className={`bg-yellow-800 rounded-full h-2 w-2 ml-1 ${
-                                                milestone.flags?.approved &&
-                                                !milestone.flags?.disputed &&
-                                                !milestone.flags?.resolved &&
-                                                !milestone.flags?.released
-                                                  ? "block"
-                                                  : "hidden"
-                                              }`}
-                                            />
+                                            {milestone.flags?.disputed && (
+                                              <Tooltip>
+                                                <TooltipTrigger>
+                                                  <span
+                                                    className={`bg-red-800 rounded-full h-2 w-2 ml-1 ${
+                                                      milestone.flags?.disputed
+                                                        ? "block"
+                                                        : "hidden"
+                                                    }`}
+                                                  />
+                                                </TooltipTrigger>
+                                                <TooltipContent>
+                                                  Disputed
+                                                </TooltipContent>
+                                              </Tooltip>
+                                            )}
+
+                                            {milestone.flags?.resolved && (
+                                              <Tooltip>
+                                                <TooltipTrigger>
+                                                  <span
+                                                    className={`bg-green-800 rounded-full h-2 w-2 ml-1 ${
+                                                      milestone.flags?.resolved
+                                                        ? "block"
+                                                        : "hidden"
+                                                    }`}
+                                                  />
+                                                </TooltipTrigger>
+                                                <TooltipContent>
+                                                  Resolved
+                                                </TooltipContent>
+                                              </Tooltip>
+                                            )}
+
+                                            {milestone.flags?.released && (
+                                              <Tooltip>
+                                                <TooltipTrigger>
+                                                  <span
+                                                    className={`bg-green-800 rounded-full h-2 w-2 ml-1 ${
+                                                      milestone.flags?.released
+                                                        ? "block"
+                                                        : "hidden"
+                                                    }`}
+                                                  />
+                                                </TooltipTrigger>
+                                                <TooltipContent>
+                                                  Released
+                                                </TooltipContent>
+                                              </Tooltip>
+                                            )}
+
+                                            {milestone.flags?.approved &&
+                                              !milestone.flags?.disputed &&
+                                              !milestone.flags?.resolved &&
+                                              !milestone.flags?.released && (
+                                                <Tooltip>
+                                                  <TooltipTrigger>
+                                                    <span
+                                                      className={`bg-yellow-600 rounded-full h-2 w-2 ml-1 ${
+                                                        milestone.flags
+                                                          ?.approved &&
+                                                        !milestone.flags
+                                                          ?.disputed &&
+                                                        !milestone.flags
+                                                          ?.resolved &&
+                                                        !milestone.flags
+                                                          ?.released
+                                                          ? "block"
+                                                          : "hidden"
+                                                      }`}
+                                                    />
+                                                  </TooltipTrigger>
+                                                  <TooltipContent>
+                                                    Pending Release
+                                                  </TooltipContent>
+                                                </Tooltip>
+                                              )}
                                           </div>
                                         </>
                                       )}
@@ -518,7 +554,6 @@ export function EscrowsByRoleCards() {
       {/* Dialog */}
       {dialogStates.second.isOpen ? (
         <EscrowDetailDialog
-          activeRole={activeRole}
           isDialogOpen={dialogStates.second.isOpen}
           setIsDialogOpen={dialogStates.second.setIsOpen}
           setSelectedEscrow={setSelectedEscrow}
@@ -526,6 +561,6 @@ export function EscrowsByRoleCards() {
       ) : null}
     </>
   );
-}
+};
 
 export default React.memo(EscrowsByRoleCards);

package/templates/escrows/escrows-by-role/cards/Filters.tsx

@@ -84,7 +84,7 @@ type FiltersProps = {
   setOrderDirection: (v: "asc" | "desc") => void;
 };
 
-function Filters({
+export const Filters = ({
   title,
   engagementId,
   isActive,
@@ -113,7 +113,7 @@ function Filters({
   onRefresh,
   setOrderBy,
   setOrderDirection,
-}: FiltersProps) {
+}: FiltersProps) => {
   return (
     <div className="w-full bg-card/50 backdrop-blur-sm border border-border/50 rounded-lg p-4 shadow-sm">
       {/* Header Section */}
@@ -416,6 +416,4 @@ function Filters({
       </div>
     </div>
   );
-}
-
-export default React.memo(Filters);
+};

package/templates/escrows/escrows-by-role/table/EscrowsTable.tsx

@@ -23,14 +23,14 @@ import {
   TableRow,
 } from "__UI_BASE__/table";
 import { FileX, Loader2, Wallet, RefreshCw, AlertTriangle } from "lucide-react";
-import Filters from "./Filters";
-import EscrowDetailDialog from "../details/EscrowDetailDialog";
+import { Filters } from "./Filters";
+import { EscrowDetailDialog } from "../details/EscrowDetailDialog";
 import { useEscrowDialogs } from "@/components/tw-blocks/providers/EscrowDialogsProvider";
 import { useEscrowContext } from "@/components/tw-blocks/providers/EscrowProvider";
 import { useEscrowsByRole } from "../useEscrowsByRole.shared";
 import { formatTimestamp } from "../../../helpers/format.helper";
 
-export function EscrowsByRoleTable() {
+export const EscrowsByRoleTable = () => {
   const {
     walletAddress,
     data,
@@ -213,21 +213,6 @@ export function EscrowsByRoleTable() {
     enableSortingRemoval: true,
   });
 
-  /**
-   * Based on the provided roles -> https://docs.trustlesswork.com/trustless-work/technology-overview/roles-in-trustless-work
-   *
-   * You must pass one or more roles according to requirements. Acctually it's coming from the select filter.
-   *
-   * For example:
-   * - If the user is a freelancer, you must pass the "serviceProvider" and "receiver" role
-   *
-   * Depending of the role, you'll have different actions buttons
-   */
-  const activeRole: Role[] = React.useMemo(
-    () => role.split(",") as Role[],
-    [role]
-  );
-
   const escrows = data ?? [];
 
   return (
@@ -276,8 +261,8 @@ export function EscrowsByRoleTable() {
                       const className =
                         typeof header.column.columnDef.meta === "object" &&
                         header.column.columnDef.meta &&
-                        "className" in (header.column.columnDef.meta as any)
-                          ? (header.column.columnDef.meta as any).className
+                        "className" in header.column.columnDef.meta
+                          ? header.column.columnDef.meta.className
                           : "";
                       return (
                         <TableHead
@@ -390,8 +375,8 @@ export function EscrowsByRoleTable() {
                           const className =
                             typeof cell.column.columnDef.meta === "object" &&
                             cell.column.columnDef.meta &&
-                            "className" in (cell.column.columnDef.meta as any)
-                              ? (cell.column.columnDef.meta as any).className
+                            "className" in cell.column.columnDef.meta
+                              ? (cell.column.columnDef.meta.className as string)
                               : "";
                           return (
                             <TableCell key={cell.id} className={className}>
@@ -441,7 +426,6 @@ export function EscrowsByRoleTable() {
       {/* Dialog */}
       {dialogStates.second.isOpen ? (
         <EscrowDetailDialog
-          activeRole={activeRole}
           isDialogOpen={dialogStates.second.isOpen}
           setIsDialogOpen={dialogStates.second.setIsOpen}
           setSelectedEscrow={setSelectedEscrow}
@@ -449,6 +433,4 @@ export function EscrowsByRoleTable() {
       ) : null}
     </>
   );
-}
-
-export default React.memo(EscrowsByRoleTable);
+};

package/templates/escrows/escrows-by-role/table/Filters.tsx

@@ -84,7 +84,7 @@ type FiltersProps = {
   setOrderDirection: (v: "asc" | "desc") => void;
 };
 
-function Filters({
+export const Filters = ({
   title,
   engagementId,
   isActive,
@@ -113,7 +113,7 @@ function Filters({
   onRefresh,
   setOrderBy,
   setOrderDirection,
-}: FiltersProps) {
+}: FiltersProps) => {
   return (
     <div className="w-full bg-card/50 backdrop-blur-sm border border-border/50 rounded-lg p-4 shadow-sm">
       {/* Header Section */}
@@ -416,6 +416,4 @@ function Filters({
       </div>
     </div>
   );
-}
-
-export default React.memo(Filters);
+};