@trustless-work/blocks 0.0.6 → 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,10 +8,9 @@ import {
   DialogHeader,
   DialogTitle,
 } from "__UI_BASE__/dialog";
-import { Card } from "__UI_BASE__/card";
-import EntityCard from "./EntityCard";
-import { useEscrowContext } from "../../escrow-context/EscrowProvider";
-import { useEscrowAmountContext } from "../../escrow-context/EscrowAmountProvider";
+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";
 
 interface SuccessReleaseDialogProps {
@@ -19,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();
@@ -96,6 +95,4 @@ export function SuccessReleaseDialog({
       </DialogContent>
     </Dialog>
   );
-}
-
-export default SuccessReleaseDialog;
+};

package/templates/escrows/details/useDetailsEscrow.ts

@@ -1,8 +1,8 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { GetEscrowsFromIndexerResponse as Escrow } from "@trustless-work/escrow/types";
 import { useWalletContext } from "@/components/tw-blocks/wallet-kit/WalletProvider";
-import { useEscrowContext } from "../../escrow-context/EscrowProvider";
-import { useEscrowAmountContext } from "../../escrow-context/EscrowAmountProvider";
+import { useEscrowContext } from "@/components/tw-blocks/providers/EscrowProvider";
+import { useEscrowAmountContext } from "@/components/tw-blocks/providers/EscrowAmountProvider";
 
 interface EscrowDetailDialogProps {
   setIsDialogOpen: (value: boolean) => void;

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 { useEscrowContext } from "../../escrow-context/EscrowProvider";
-import { useEscrowDialogs } from "../../escrow-context/EscrowDialogsProvider";
+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,
@@ -75,6 +76,17 @@ export function EscrowsByRoleCards() {
 
   const dialogStates = useEscrowDialogs();
 
+  const handleRefresh = React.useCallback(() => {
+    void refetch();
+  }, [refetch]);
+
+  const setRoleStable = React.useCallback(
+    (v: Role | undefined) => {
+      if (v) setRole(v);
+    },
+    [setRole]
+  );
+
   function allMilestonesReleasedOrResolved(
     milestones: MultiReleaseMilestone[]
   ) {
@@ -119,18 +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[] = role.split(",") as Role[];
-
   return (
     <>
       <div className="w-full flex flex-col gap-4">
@@ -150,19 +150,19 @@ export function EscrowsByRoleCards() {
           setEngagementId={setEngagementId}
           setIsActive={setIsActive}
           setValidateOnChain={setValidateOnChain}
-          setType={(v) => setType(v as typeof type)}
-          setStatus={(v) => setStatus(v as typeof status)}
+          setType={setType}
+          setStatus={setStatus}
           setMinAmount={setMinAmount}
           setMaxAmount={setMaxAmount}
           setDateRange={setDateRange}
-          setRole={(v) => setRole(v as Role)}
+          setRole={setRoleStable}
           onClearFilters={onClearFilters}
-          onRefresh={() => refetch()}
+          onRefresh={handleRefresh}
           isRefreshing={isFetching}
           orderBy={orderBy}
           orderDirection={orderDirection}
-          setOrderBy={(v) => setOrderBy(v)}
-          setOrderDirection={(v) => setOrderDirection(v)}
+          setOrderBy={setOrderBy}
+          setOrderDirection={setOrderDirection}
         />
 
         <div className="w-full py-2 sm:py-4">
@@ -346,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}
@@ -364,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>
                                         </>
                                       )}
@@ -502,14 +552,15 @@ export function EscrowsByRoleCards() {
       </div>
 
       {/* Dialog */}
-      <EscrowDetailDialog
-        activeRole={activeRole}
-        isDialogOpen={dialogStates.second.isOpen}
-        setIsDialogOpen={dialogStates.second.setIsOpen}
-        setSelectedEscrow={setSelectedEscrow}
-      />
+      {dialogStates.second.isOpen ? (
+        <EscrowDetailDialog
+          isDialogOpen={dialogStates.second.isOpen}
+          setIsDialogOpen={dialogStates.second.setIsOpen}
+          setSelectedEscrow={setSelectedEscrow}
+        />
+      ) : null}
     </>
   );
-}
+};
 
-export default EscrowsByRoleCards;
+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);
+};