@trustless-work/blocks 0.0.7 → 0.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trustless-work/blocks",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "author": "Trustless Work",
   "keywords": [
     "react",

package/templates/escrows/details/Actions.tsx

@@ -1,149 +1,144 @@
-import {
-  DollarSign,
-  CheckCircle,
-  CheckSquare,
-  AlertTriangle,
-  Edit,
-  Scale,
-  Unlock,
-  Wallet,
-  Settings,
-  Briefcase,
-} from "lucide-react";
-import {
-  GetEscrowsFromIndexerResponse as Escrow,
-  Role,
-} from "@trustless-work/escrow/types";
-import DisputeEscrowButton from "../../single-release/dispute-escrow/button/DisputeEscrow";
-import ResolveDisputeDialog from "../../single-release/resolve-dispute/dialog/ResolveDispute";
-import ReleaseEscrowButton from "../../single-release/release-escrow/button/ReleaseEscrow";
-import FundEscrowDialog from "../../single-release/fund-escrow/dialog/FundEscrow";
-import UpdateEscrowDialog from "../../single-release/update-escrow/dialog/UpdateEscrow";
-
-interface ActionsProps {
-  selectedEscrow: Escrow;
-  userRolesInEscrow: string[];
-  areAllMilestonesApproved: boolean;
-  activeRole: Role[];
-}
-
-export const roleActions: {
-  role: Role;
-  actions: string[];
-  icon: React.ReactNode;
-  color: string;
-}[] = [
-  {
-    role: "signer",
-    actions: ["fundEscrow"],
-    icon: <Wallet className="h-6 w-6 text-primary" />,
-    color: "",
-  },
-  {
-    role: "approver",
-    actions: ["fundEscrow", "approveMilestone", "startDispute"],
-    icon: <CheckCircle className="h-6 w-6 text-primary" />,
-    color: "0",
-  },
-  {
-    role: "serviceProvider",
-    actions: ["fundEscrow", "completeMilestone", "startDispute"],
-    icon: <Briefcase className="h-6 w-6 text-primary" />,
-    color: "0",
-  },
-  {
-    role: "disputeResolver",
-    actions: ["fundEscrow", "resolveDispute"],
-    icon: <Scale className="h-6 w-6 text-primary" />,
-    color: "00",
-  },
-  {
-    role: "releaseSigner",
-    actions: ["fundEscrow", "releasePayment"],
-    icon: <Unlock className="h-6 w-6 text-primary" />,
-    color: "",
-  },
-  {
-    role: "platformAddress",
-    actions: ["fundEscrow", "editEscrow"],
-    icon: <Settings className="h-6 w-6 text-primary" />,
-    color: "0",
-  },
-  {
-    role: "receiver",
-    actions: ["fundEscrow"],
-    icon: <DollarSign className="h-6 w-6 text-primary" />,
-    color: "",
-  },
-];
-
-export const actionIcons: Record<string, React.ReactNode> = {
-  fundEscrow: <DollarSign className="h-6 w-6 text-primary/60" />,
-  approveMilestone: <CheckCircle className="h-6 w-6 text-primary/60" />,
-  completeMilestone: <CheckSquare className="h-6 w-6 text-primary/60" />,
-  startDispute: <AlertTriangle className="h-6 w-6 text-primary/60" />,
-  resolveDispute: <Scale className="h-6 w-6 text-primary/60" />,
-  releasePayment: <Unlock className="h-6 w-6 text-primary/60" />,
-  editEscrow: <Edit className="h-6 w-6 text-primary/60" />,
-};
-
-export const Actions = ({
-  selectedEscrow,
-  userRolesInEscrow,
-  areAllMilestonesApproved,
-  activeRole,
-}: ActionsProps) => {
-  const shouldShowEditButton =
-    userRolesInEscrow.includes("platformAddress") &&
-    !selectedEscrow?.flags?.disputed &&
-    !selectedEscrow?.flags?.resolved &&
-    !selectedEscrow?.flags?.released &&
-    activeRole.includes("platformAddress");
-
-  const shouldShowDisputeButton =
-    selectedEscrow.type === "single-release" &&
-    (userRolesInEscrow.includes("approver") ||
-      userRolesInEscrow.includes("serviceProvider")) &&
-    (activeRole.includes("approver") ||
-      activeRole.includes("serviceProvider")) &&
-    !selectedEscrow?.flags?.disputed &&
-    !selectedEscrow?.flags?.resolved;
-
-  const shouldShowResolveButton =
-    selectedEscrow.type === "single-release" &&
-    userRolesInEscrow.includes("disputeResolver") &&
-    activeRole.includes("disputeResolver") &&
-    !selectedEscrow?.flags?.resolved &&
-    selectedEscrow?.flags?.disputed;
-
-  const shouldShowReleaseFundsButton =
-    selectedEscrow.type === "single-release" &&
-    areAllMilestonesApproved &&
-    userRolesInEscrow.includes("releaseSigner") &&
-    !selectedEscrow.flags?.released &&
-    activeRole.includes("releaseSigner");
-
-  const hasConditionalButtons =
-    shouldShowEditButton ||
-    shouldShowDisputeButton ||
-    shouldShowResolveButton ||
-    shouldShowReleaseFundsButton;
-
-  return (
-    <div className="flex items-start justify-start flex-col gap-2 w-full">
-      {hasConditionalButtons && (
-        <div className="flex flex-col sm:flex-row gap-2 w-full">
-          {shouldShowEditButton && <UpdateEscrowDialog />}
-
-          {shouldShowDisputeButton && <DisputeEscrowButton />}
-
-          {shouldShowResolveButton && <ResolveDisputeDialog />}
-
-          {shouldShowReleaseFundsButton && <ReleaseEscrowButton />}
-        </div>
-      )}
-
-      <FundEscrowDialog />
-    </div>
-  );
-};
+import {
+  DollarSign,
+  CheckCircle,
+  CheckSquare,
+  AlertTriangle,
+  Edit,
+  Scale,
+  Unlock,
+  Wallet,
+  Settings,
+  Briefcase,
+} from "lucide-react";
+import {
+  GetEscrowsFromIndexerResponse as Escrow,
+  Role,
+} from "@trustless-work/escrow/types";
+import { FundEscrowDialog } from "../../single-multi-release/fund-escrow/dialog/FundEscrow";
+
+interface ActionsProps {
+  selectedEscrow: Escrow;
+  userRolesInEscrow: string[];
+  areAllMilestonesApproved: boolean;
+}
+
+export const roleActions: {
+  role: Role;
+  actions: string[];
+  icon: React.ReactNode;
+  color: string;
+}[] = [
+  {
+    role: "signer",
+    actions: ["fundEscrow"],
+    icon: <Wallet className="h-6 w-6 text-primary" />,
+    color: "",
+  },
+  {
+    role: "approver",
+    actions: ["fundEscrow", "approveMilestone", "startDispute"],
+    icon: <CheckCircle className="h-6 w-6 text-primary" />,
+    color: "0",
+  },
+  {
+    role: "serviceProvider",
+    actions: ["fundEscrow", "completeMilestone", "startDispute"],
+    icon: <Briefcase className="h-6 w-6 text-primary" />,
+    color: "0",
+  },
+  {
+    role: "disputeResolver",
+    actions: ["fundEscrow", "resolveDispute"],
+    icon: <Scale className="h-6 w-6 text-primary" />,
+    color: "00",
+  },
+  {
+    role: "releaseSigner",
+    actions: ["fundEscrow", "releasePayment"],
+    icon: <Unlock className="h-6 w-6 text-primary" />,
+    color: "",
+  },
+  {
+    role: "platformAddress",
+    actions: ["fundEscrow", "editEscrow"],
+    icon: <Settings className="h-6 w-6 text-primary" />,
+    color: "0",
+  },
+  {
+    role: "receiver",
+    actions: ["fundEscrow"],
+    icon: <DollarSign className="h-6 w-6 text-primary" />,
+    color: "",
+  },
+];
+
+export const actionIcons: Record<string, React.ReactNode> = {
+  fundEscrow: <DollarSign className="h-6 w-6 text-primary/60" />,
+  approveMilestone: <CheckCircle className="h-6 w-6 text-primary/60" />,
+  completeMilestone: <CheckSquare className="h-6 w-6 text-primary/60" />,
+  startDispute: <AlertTriangle className="h-6 w-6 text-primary/60" />,
+  resolveDispute: <Scale className="h-6 w-6 text-primary/60" />,
+  releasePayment: <Unlock className="h-6 w-6 text-primary/60" />,
+  editEscrow: <Edit className="h-6 w-6 text-primary/60" />,
+};
+
+export const Actions = ({
+  selectedEscrow,
+  userRolesInEscrow,
+  areAllMilestonesApproved,
+}: ActionsProps) => {
+  const shouldShowEditButton =
+    userRolesInEscrow.includes("platformAddress") &&
+    !selectedEscrow?.flags?.disputed &&
+    !selectedEscrow?.flags?.resolved &&
+    !selectedEscrow?.flags?.released &&
+    selectedEscrow?.balance === 0;
+
+  const shouldShowDisputeButton =
+    selectedEscrow.type === "single-release" &&
+    (userRolesInEscrow.includes("approver") ||
+      userRolesInEscrow.includes("serviceProvider")) &&
+    !selectedEscrow?.flags?.disputed &&
+    !selectedEscrow?.flags?.resolved;
+
+  const shouldShowResolveButton =
+    selectedEscrow.type === "single-release" &&
+    userRolesInEscrow.includes("disputeResolver") &&
+    !selectedEscrow?.flags?.resolved &&
+    selectedEscrow?.flags?.disputed;
+
+  const shouldShowReleaseFundsButton =
+    selectedEscrow.type === "single-release" &&
+    areAllMilestonesApproved &&
+    userRolesInEscrow.includes("releaseSigner") &&
+    !selectedEscrow.flags?.released;
+
+  const hasConditionalButtons =
+    shouldShowEditButton ||
+    shouldShowDisputeButton ||
+    shouldShowResolveButton ||
+    shouldShowReleaseFundsButton;
+
+  return (
+    <div className="flex items-start justify-start flex-col gap-2 w-full">
+      {/* You can add the buttons here, using the buttons from the blocks. These actions are conditional based on the escrow flags and the user roles. */}
+      {hasConditionalButtons && (
+        <div className="flex flex-col gap-2 w-full">
+          {/* UpdateEscrowDialog component should be rendered based on the escrow type. It means that if the selectedEscrow.type is "single-release", then the UpdateEscrowDialog (from the single-release block) component should be rendered. If the selectedEscrow.type is "multi-release", then the UpdateEscrowDialog (from the multi-release block) component should be rendered. */}
+          {/* {shouldShowEditButton && <UpdateEscrowDialog />} */}
+
+          {/* Works only with single-release escrows */}
+          {/* {shouldShowDisputeButton && <DisputeEscrowButton />} */}
+
+          {/* Works only with single-release escrows */}
+          {/* {shouldShowResolveButton && <ResolveDisputeDialog />} */}
+
+          {/* Works only with single-release escrows */}
+          {/* {shouldShowReleaseFundsButton && <ReleaseEscrowButton />} */}
+        </div>
+      )}
+
+      <FundEscrowDialog />
+    </div>
+  );
+};

package/templates/escrows/details/Entities.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { GetEscrowsFromIndexerResponse as Escrow } from "@trustless-work/escrow/types";
-import EntityCard from "./EntityCard";
+import { EntityCard } from "./EntityCard";
 
 interface EntitiesProps {
   selectedEscrow: Escrow;

package/templates/escrows/details/EntityCard.tsx

@@ -22,7 +22,7 @@ interface EntityCardProps {
   inDispute?: boolean;
 }
 
-const EntityCard = ({
+export const EntityCard = ({
   entity,
   type,
   hasPercentage,
@@ -94,5 +94,3 @@ const EntityCard = ({
     </Card>
   );
 };
-
-export default EntityCard;

package/templates/escrows/details/EscrowDetailDialog.tsx

@@ -13,29 +13,31 @@ import Link from "next/link";
 import { Card } from "__UI_BASE__/card";
 import { Info, Users, ListChecks } from "lucide-react";
 import { useEscrowDialogs } from "@/components/tw-blocks/providers/EscrowDialogsProvider";
-import type {
-  GetEscrowsFromIndexerResponse as Escrow,
-  Role,
-} from "@trustless-work/escrow/types";
+import type { GetEscrowsFromIndexerResponse as Escrow } from "@trustless-work/escrow/types";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "__UI_BASE__/tabs";
 import { Milestones } from "./Milestones";
 import { Entities } from "./Entities";
 import { GeneralInformation } from "./GeneralInformation";
 import { useEscrowContext } from "@/components/tw-blocks/providers/EscrowProvider";
-import SuccessReleaseDialog from "./SuccessReleaseDialog";
+import { SuccessReleaseDialog } from "./SuccessReleaseDialog";
+
+/**
+ * Based on the provided roles -> https://docs.trustlesswork.com/trustless-work/technology-overview/roles-in-trustless-work
+ *
+ * The roles that the user assigns in the escrow initialization are in the userRolesInEscrow state. Based on these roles, you'll have different actions buttons.
+ *
+ */
 
 interface EscrowDetailDialogProps {
   isDialogOpen: boolean;
-  activeRole: Role[];
   setIsDialogOpen: (value: boolean) => void;
   setSelectedEscrow: (selectedEscrow?: Escrow) => void;
 }
 
-const EscrowDetailDialog = ({
+export const EscrowDetailDialog = ({
   isDialogOpen,
   setIsDialogOpen,
   setSelectedEscrow,
-  activeRole,
 }: EscrowDetailDialogProps) => {
   const { selectedEscrow } = useEscrowContext();
   const dialogStates = useEscrowDialogs();
@@ -115,7 +117,6 @@ const EscrowDetailDialog = ({
             <div className="flex-1 min-h-0">
               <TabsContent value="general" className="mt-4 h-full">
                 <GeneralInformation
-                  activeRole={activeRole}
                   selectedEscrow={selectedEscrow}
                   userRolesInEscrow={userRolesInEscrow}
                   dialogStates={dialogStates}
@@ -130,7 +131,6 @@ const EscrowDetailDialog = ({
               <TabsContent value="milestones" className="mt-4 h-full">
                 <Card className="p-4 h-full">
                   <Milestones
-                    activeRole={activeRole}
                     selectedEscrow={selectedEscrow}
                     userRolesInEscrow={userRolesInEscrow}
                     setEvidenceVisibleMap={setEvidenceVisibleMap}
@@ -143,12 +143,12 @@ const EscrowDetailDialog = ({
         </DialogContent>
       </Dialog>
 
-      <SuccessReleaseDialog
-        isOpen={dialogStates.successRelease.isOpen}
-        onOpenChange={dialogStates.successRelease.setIsOpen}
-      />
+      {dialogStates.successRelease.isOpen && (
+        <SuccessReleaseDialog
+          isOpen={dialogStates.successRelease.isOpen}
+          onOpenChange={dialogStates.successRelease.setIsOpen}
+        />
+      )}
     </>
   );
 };
-
-export default React.memo(EscrowDetailDialog);

package/templates/escrows/details/GeneralInformation.tsx

@@ -2,6 +2,7 @@
 
 import React, { useMemo } from "react";
 import { Card } from "__UI_BASE__/card";
+import { Tooltip, TooltipTrigger, TooltipContent } from "__UI_BASE__/tooltip";
 import { cn } from "@/lib/utils";
 import { MultiReleaseMilestone } from "@trustless-work/escrow";
 import {
@@ -14,30 +15,26 @@ import {
   Users,
   Check,
   Copy,
+  BriefcaseBusiness,
+  BookOpen,
 } from "lucide-react";
 import { Actions, roleActions } from "./Actions";
-import type {
-  DialogStates,
-  StatusStates,
-} from "@/components/tw-blocks/providers/EscrowDialogsProvider";
-import {
-  GetEscrowsFromIndexerResponse,
-  Role,
-} from "@trustless-work/escrow/types";
+import type { DialogStates } from "@/components/tw-blocks/providers/EscrowDialogsProvider";
+import { GetEscrowsFromIndexerResponse } from "@trustless-work/escrow/types";
 import { useEscrowAmountContext } from "@/components/tw-blocks/providers/EscrowAmountProvider";
 import { StatisticsCard } from "./StatisticsCard";
 import {
   formatAddress,
   formatCurrency,
+  formatRole,
 } from "@/components/tw-blocks/helpers/format.helper";
 import { useCopy } from "@/components/tw-blocks/helpers/useCopy";
 
 interface GeneralInformationProps {
   selectedEscrow: GetEscrowsFromIndexerResponse;
   userRolesInEscrow: string[];
-  dialogStates: DialogStates & StatusStates;
+  dialogStates: DialogStates;
   areAllMilestonesApproved: boolean;
-  activeRole: Role[];
 }
 
 export const GeneralInformation = ({
@@ -45,7 +42,6 @@ export const GeneralInformation = ({
   userRolesInEscrow,
   dialogStates,
   areAllMilestonesApproved,
-  activeRole,
 }: GeneralInformationProps) => {
   const { trustlessWorkAmount, receiverAmount, platformFeeAmount } =
     useEscrowAmountContext();
@@ -117,7 +113,6 @@ export const GeneralInformation = ({
             selectedEscrow={selectedEscrow}
             userRolesInEscrow={userRolesInEscrow}
             areAllMilestonesApproved={areAllMilestonesApproved}
-            activeRole={activeRole}
           />
         </div>
       </div>
@@ -176,14 +171,16 @@ export const GeneralInformation = ({
                     {userRolesInEscrow.map((role) => {
                       const roleData = roleActions.find((r) => r.role === role);
                       return (
-                        <div
-                          key={role}
-                          className="p-2 bg-primary/10 rounded-md hover:bg-primary/20 transition-colors"
-                        >
-                          {roleData?.icon || (
-                            <Users className="h-4 w-4 text-primary" />
-                          )}
-                        </div>
+                        <Tooltip key={role}>
+                          <TooltipTrigger>
+                            <div className="p-2 bg-primary/10 rounded-md hover:bg-primary/20 transition-colors cursor-pointer">
+                              {roleData?.icon || (
+                                <Users className="h-4 w-4 text-primary" />
+                              )}
+                            </div>
+                          </TooltipTrigger>
+                          <TooltipContent>{formatRole(role)}</TooltipContent>
+                        </Tooltip>
                       );
                     })}
                   </div>
@@ -205,7 +202,7 @@ export const GeneralInformation = ({
               <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                 <div className="p-4 bg-muted/50 rounded-lg border">
                   <div className="flex items-center gap-3 mb-2">
-                    <CircleDollarSign className="h-5 w-5 text-primary flex-shrink-0" />
+                    <BriefcaseBusiness className="h-5 w-5 text-primary flex-shrink-0" />
                     <span className="text-sm font-medium text-muted-foreground">
                       Engagement ID
                     </span>
@@ -217,7 +214,7 @@ export const GeneralInformation = ({
 
                 <div className="p-4 bg-muted/50 rounded-lg border">
                   <div className="flex items-center gap-3 mb-2">
-                    <CircleDollarSign className="h-5 w-5 text-primary flex-shrink-0" />
+                    <BookOpen className="h-5 w-5 text-primary flex-shrink-0" />
                     <span className="text-sm font-medium text-muted-foreground">
                       Type
                     </span>