@trustless-work/blocks 1.0.6 → 1.0.7

package/package.json

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

package/templates/deps.json

@@ -4,7 +4,7 @@
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.53.0",
     "zod": "^3.23.8",
-    "@trustless-work/escrow": "^3.0.0",
+    "@trustless-work/escrow": "^3.0.2",
     "@tanstack/react-query": "^5.75.0",
     "@tanstack/react-query-devtools": "^5.75.0",
     "tailwindcss": "^3.3.3",

package/templates/escrows/details/Actions.tsx

@@ -91,8 +91,7 @@ export const Actions = ({
     userRolesInEscrow.includes("platformAddress") &&
     !selectedEscrow?.flags?.disputed &&
     !selectedEscrow?.flags?.resolved &&
-    !selectedEscrow?.flags?.released &&
-    selectedEscrow?.balance === 0;
+    !selectedEscrow?.flags?.released;
 
   const shouldShowDisputeButton =
     selectedEscrow.type === "single-release" &&

package/templates/escrows/details/Entities.tsx

@@ -1,13 +1,26 @@
 "use client";
 
-import { GetEscrowsFromIndexerResponse as Escrow } from "@trustless-work/escrow/types";
+import {
+  GetEscrowsFromIndexerResponse as Escrow,
+  MultiReleaseMilestone,
+} from "@trustless-work/escrow/types";
 import { EntityCard } from "./EntityCard";
+import { Separator } from "__UI_BASE__/separator";
 
 interface EntitiesProps {
   selectedEscrow: Escrow;
 }
 
 export const Entities = ({ selectedEscrow }: EntitiesProps) => {
+  const receivers =
+    selectedEscrow.type === "single-release"
+      ? (selectedEscrow.roles as { receiver?: string })?.receiver
+        ? [(selectedEscrow.roles as { receiver?: string }).receiver as string]
+        : []
+      : (selectedEscrow.milestones || [])
+          .map((m) => (m as MultiReleaseMilestone | undefined)?.receiver)
+          .filter((r): r is string => Boolean(r));
+
   return (
     <>
       <div className="flex justify-between items-center mb-6">
@@ -41,7 +54,15 @@ export const Entities = ({ selectedEscrow }: EntitiesProps) => {
           type="releaseSigner"
           entity={selectedEscrow.roles?.releaseSigner}
         />
-        <EntityCard type="receiver" entity={selectedEscrow.roles?.receiver} />
+      </div>
+
+      <Separator className="my-4" />
+
+      <h2 className="text-lg font-semibold">Receivers</h2>
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mt-4">
+        {receivers.map((r, idx) => (
+          <EntityCard key={`receiver-${idx}-${r}`} type="receiver" entity={r} />
+        ))}
       </div>
     </>
   );

package/templates/escrows/details/GeneralInformation.tsx

@@ -159,7 +159,7 @@ export const GeneralInformation = ({
                 </div>
               </div>
 
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div className="grid grid-cols-1 gap-4">
                 <div className="p-4 bg-muted/50 rounded-lg border">
                   <div className="flex items-center gap-3 mb-3">
                     <Users className="h-5 w-5 text-primary flex-shrink-0" />
@@ -185,18 +185,6 @@ export const GeneralInformation = ({
                     })}
                   </div>
                 </div>
-
-                <div className="p-4 bg-muted/50 rounded-lg border">
-                  <div className="flex items-center gap-3 mb-2">
-                    <Info className="h-5 w-5 text-primary flex-shrink-0" />
-                    <span className="text-sm font-medium text-muted-foreground">
-                      Memo
-                    </span>
-                  </div>
-                  <span className="font-medium text-foreground">
-                    {selectedEscrow?.receiverMemo || "No Memo"}
-                  </span>
-                </div>
               </div>
 
               <div className="grid grid-cols-1 md:grid-cols-2 gap-4">

package/templates/escrows/details/MilestoneCard.tsx

@@ -221,7 +221,7 @@ const MilestoneCardComponent = ({
         <Button
           size="sm"
           variant="outline"
-          className="w-full border-border text-muted-foreground"
+          className="w-full border-border text-muted-foreground cursor-pointer"
           onClick={(e) => {
             e.stopPropagation();
             onViewDetails(milestone, milestoneIndex);

package/templates/escrows/details/MilestoneDetailDialog.tsx

@@ -10,7 +10,6 @@ import {
 import { Card, CardContent, CardHeader, CardTitle } from "__UI_BASE__/card";
 import { Badge } from "__UI_BASE__/badge";
 import {
-  DollarSign,
   FileCheck2,
   User,
   Calendar,
@@ -28,6 +27,9 @@ import {
   SingleReleaseMilestone,
 } from "@trustless-work/escrow";
 import Link from "next/link";
+import { formatCurrency } from "@/components/tw-blocks/helpers/format.helper";
+import { useEscrowContext } from "@/components/tw-blocks/providers/EscrowProvider";
+import { EntityCard } from "./EntityCard";
 
 interface MilestoneDetailDialogProps {
   isOpen: boolean;
@@ -49,6 +51,8 @@ export const MilestoneDetailDialog = ({
   onClose,
   selectedMilestone,
 }: MilestoneDetailDialogProps) => {
+  const { selectedEscrow } = useEscrowContext();
+
   const getMilestoneStatusBadge = (
     milestone: SingleReleaseMilestone | MultiReleaseMilestone
   ) => {
@@ -115,11 +119,15 @@ export const MilestoneDetailDialog = ({
     }
   };
 
+  const currentReceiver =
+    selectedEscrow?.type === "multi-release" &&
+    ((selectedMilestone?.milestone as MultiReleaseMilestone)?.receiver ?? "");
+
   if (!selectedMilestone) return null;
 
   return (
     <Dialog open={isOpen} onOpenChange={onClose}>
-      <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
+      <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
         <DialogHeader className="pb-4 border-b border-border">
           <div className="flex items-center gap-3">
             <div className="flex items-center justify-center w-10 h-10 bg-primary/10 rounded-full">
@@ -154,6 +162,28 @@ export const MilestoneDetailDialog = ({
             {getMilestoneStatusBadge(selectedMilestone.milestone)}
           </div>
 
+          {"amount" in selectedMilestone.milestone && (
+            <div className="flex items-center justify-between p-4  rounded-lg border border-border">
+              <div className="flex items-center gap-3">
+                <div className="flex items-center justify-center w-8 h-8 bg-background rounded-full shadow-sm border border-border">
+                  <Calendar className="w-4 h-4 text-primary" />
+                </div>
+                <div>
+                  <p className="text-sm font-medium text-foreground">Amount</p>
+                  <p className="text-xs text-muted-foreground">
+                    The amount of the milestone
+                  </p>
+                </div>
+              </div>
+              <span className="font-bold text-foreground">
+                {formatCurrency(
+                  selectedMilestone.milestone.amount,
+                  selectedEscrow?.trustline?.name ?? "USDC"
+                )}
+              </span>
+            </div>
+          )}
+
           <Card className="border border-border shadow-sm">
             <CardHeader className="pb-3">
               <CardTitle className="text-lg flex items-center gap-2">
@@ -171,21 +201,6 @@ export const MilestoneDetailDialog = ({
                   {selectedMilestone.milestone.description}
                 </p>
               </div>
-
-              {"amount" in selectedMilestone.milestone && (
-                <div className="space-y-2">
-                  <label className="text-sm font-medium text-foreground flex items-center gap-2">
-                    <DollarSign className="w-4 h-4 text-green-600 dark:text-green-400" />
-                    Amount
-                  </label>
-                  <div className="flex items-center gap-2 bg-green-500/10 dark:bg-green-400/10 p-3 rounded-md border-l-4 border-green-500/20 dark:border-green-400/20">
-                    <DollarSign className="w-5 h-5 text-green-600 dark:text-green-400" />
-                    <span className="text-lg font-bold text-green-700 dark:text-green-300">
-                      {selectedMilestone.milestone.amount}
-                    </span>
-                  </div>
-                </div>
-              )}
             </CardContent>
           </Card>
 
@@ -193,7 +208,7 @@ export const MilestoneDetailDialog = ({
             <Card className="border border-border shadow-sm">
               <CardHeader className="pb-3">
                 <CardTitle className="text-lg flex items-center gap-2">
-                  <div className="w-1 h-6 bg-green-600 dark:bg-green-400 rounded-full"></div>
+                  <div className="w-1 h-6  rounded-full"></div>
                   Evidence
                 </CardTitle>
               </CardHeader>
@@ -203,7 +218,7 @@ export const MilestoneDetailDialog = ({
                     <FileCheck2 className="w-4 h-4 text-green-600 dark:text-green-400" />
                     Evidence URL
                   </label>
-                  <div className="bg-muted/50 p-3 rounded-md border-l-4 border-green-500/20 dark:border-green-400/20">
+                  <div className="bg-muted/50 p-3 rounded-md border-l-4">
                     {(() => {
                       const result = isValidUrl(
                         selectedMilestone.milestone.evidence
@@ -269,6 +284,10 @@ export const MilestoneDetailDialog = ({
             </Card>
           )}
         </div>
+
+        {currentReceiver && (
+          <EntityCard type="receiver" entity={currentReceiver} />
+        )}
       </DialogContent>
     </Dialog>
   );

package/templates/escrows/details/SuccessReleaseDialog.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useMemo } from "react";
+import { useMemo } from "react";
 import {
   Dialog,
   DialogContent,
@@ -12,6 +12,7 @@ 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";
+import { MultiReleaseMilestone } from "@trustless-work/escrow";
 
 interface SuccessReleaseDialogProps {
   isOpen: boolean;
@@ -23,8 +24,12 @@ export const SuccessReleaseDialog = ({
   onOpenChange,
 }: SuccessReleaseDialogProps) => {
   const { selectedEscrow } = useEscrowContext();
-  const { receiverAmount, platformFeeAmount, trustlessWorkAmount } =
-    useEscrowAmountContext();
+  const {
+    receiverAmount,
+    platformFeeAmount,
+    trustlessWorkAmount,
+    lastReleasedMilestoneIndex,
+  } = useEscrowAmountContext();
 
   const platformFee = Number(selectedEscrow?.platformFee || 0);
   const trustlessPercentage = 0.3;
@@ -32,8 +37,15 @@ export const SuccessReleaseDialog = ({
 
   const currency = selectedEscrow?.trustline?.name ?? "";
 
-  const cards = useMemo(
-    () => [
+  const cards = useMemo<
+    Array<{
+      type: string;
+      entity?: string;
+      percentage?: number;
+      amount?: number;
+    }>
+  >(() => {
+    const baseCards = [
       {
         type: "Platform",
         entity: selectedEscrow?.roles?.platformAddress,
@@ -46,24 +58,62 @@ export const SuccessReleaseDialog = ({
         percentage: trustlessPercentage,
         amount: trustlessWorkAmount,
       },
-      {
-        type: "Receiver",
-        entity: selectedEscrow?.roles?.receiver,
-        percentage: receiverPercentage,
-        amount: receiverAmount,
-      },
-    ],
-    [
-      platformFee,
-      receiverPercentage,
-      trustlessPercentage,
-      platformFeeAmount,
-      trustlessWorkAmount,
-      receiverAmount,
-      selectedEscrow?.roles?.platformAddress,
-      selectedEscrow?.roles?.receiver,
-    ]
-  );
+    ];
+
+    if (selectedEscrow?.type === "single-release") {
+      return [
+        ...baseCards,
+        {
+          type: "Receiver",
+          entity: (selectedEscrow?.roles as { receiver?: string })?.receiver,
+          percentage: receiverPercentage,
+          amount: receiverAmount,
+        },
+      ];
+    }
+
+    // Multi-release: show only the receiver for the just-released milestone
+    const idx =
+      typeof lastReleasedMilestoneIndex === "number"
+        ? lastReleasedMilestoneIndex
+        : -1;
+    const milestone = selectedEscrow?.milestones?.[idx] as
+      | MultiReleaseMilestone
+      | undefined;
+    const receiverForReleased = milestone?.receiver;
+
+    if (receiverForReleased) {
+      return [
+        ...baseCards,
+        {
+          type: "Receiver",
+          entity: receiverForReleased,
+          percentage: receiverPercentage,
+          amount: receiverAmount,
+        },
+      ];
+    }
+
+    // Fallback: if no index available, list all receivers (legacy behavior)
+    const receiverCards = (selectedEscrow?.milestones || [])
+      .map((m) => (m as MultiReleaseMilestone | undefined)?.receiver)
+      .filter((r): r is string => Boolean(r))
+      .map((r) => ({ type: "Receiver", entity: r }));
+
+    return [...baseCards, ...receiverCards];
+  }, [
+    platformFee,
+    receiverPercentage,
+    trustlessPercentage,
+    platformFeeAmount,
+    trustlessWorkAmount,
+    receiverAmount,
+    selectedEscrow?.roles?.platformAddress,
+    selectedEscrow?.type,
+    selectedEscrow?.milestones,
+    selectedEscrow?.roles,
+    lastReleasedMilestoneIndex,
+  ]);
 
   return (
     <Dialog open={isOpen} onOpenChange={onOpenChange}>
@@ -81,13 +131,19 @@ export const SuccessReleaseDialog = ({
         <div className="flex flex-col gap-3">
           {cards.map((c) => (
             <EntityCard
-              key={c.type}
+              key={`${c.type}-${c.entity ?? "unknown"}`}
               type={c.type}
               entity={c.entity}
-              hasPercentage
-              percentage={Number(c.percentage.toFixed(2))}
-              hasAmount
-              amount={Number(c.amount.toFixed(2))}
+              hasPercentage={c.percentage !== undefined}
+              percentage={
+                c.percentage !== undefined
+                  ? Number(c.percentage.toFixed(2))
+                  : undefined
+              }
+              hasAmount={c.amount !== undefined}
+              amount={
+                c.amount !== undefined ? Number(c.amount.toFixed(2)) : undefined
+              }
               currency={currency}
             />
           ))}

package/templates/escrows/details/useDetailsEscrow.ts

@@ -1,5 +1,8 @@
 import { useCallback, useEffect, useRef, useState } from "react";
-import { GetEscrowsFromIndexerResponse as Escrow } from "@trustless-work/escrow/types";
+import {
+  GetEscrowsFromIndexerResponse as Escrow,
+  MultiReleaseMilestone,
+} from "@trustless-work/escrow/types";
 import { useWalletContext } from "@/components/tw-blocks/wallet-kit/WalletProvider";
 import { useEscrowContext } from "@/components/tw-blocks/providers/EscrowProvider";
 import { useEscrowAmountContext } from "@/components/tw-blocks/providers/EscrowAmountProvider";
@@ -60,7 +63,17 @@ const useEscrowDetailDialog = ({
         name: "disputeResolver",
         address: selectedEscrow.roles.disputeResolver,
       },
-      { name: "receiver", address: selectedEscrow.roles.receiver },
+      {
+        name: "receiver",
+        address:
+          selectedEscrow.type === "single-release"
+            ? (selectedEscrow.roles as { receiver?: string })?.receiver
+            : (
+                selectedEscrow.milestones?.[0] as
+                  | MultiReleaseMilestone
+                  | undefined
+              )?.receiver,
+      },
     ];
 
     const userRoles = roleMappings

package/templates/escrows/multi-release/initialize-escrow/dialog/InitializeEscrow.tsx

@@ -29,6 +29,7 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "__UI_BASE__/dialog";
+import { Separator } from "__UI_BASE__/separator";
 
 export const InitializeEscrowDialog = () => {
   const {
@@ -130,7 +131,7 @@ export const InitializeEscrowDialog = () => {
                 </Button>
               )}
             </Card>
-            <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
               <FormField
                 control={form.control}
                 name="title"
@@ -174,7 +175,9 @@ export const InitializeEscrowDialog = () => {
                   </FormItem>
                 )}
               />
+            </div>
 
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
               <FormField
                 control={form.control}
                 name="trustline.address"
@@ -211,6 +214,34 @@ export const InitializeEscrowDialog = () => {
                   </FormItem>
                 )}
               />
+
+              <FormField
+                control={form.control}
+                name="platformFee"
+                render={() => (
+                  <FormItem>
+                    <FormLabel className="flex items-center">
+                      Platform Fee
+                      <span className="text-destructive ml-1">*</span>
+                    </FormLabel>
+                    <FormControl>
+                      <div className="relative">
+                        <Percent
+                          className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500"
+                          size={18}
+                        />
+                        <Input
+                          placeholder="Enter platform fee"
+                          className="pl-10"
+                          value={form.watch("platformFee")?.toString() || ""}
+                          onChange={handlePlatformFeeChange}
+                        />
+                      </div>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
             </div>
 
             <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
@@ -320,7 +351,7 @@ export const InitializeEscrowDialog = () => {
               />
             </div>
 
-            <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+            <div className="grid grid-cols-1 gap-4">
               <FormField
                 control={form.control}
                 name="roles.platformAddress"
@@ -328,7 +359,7 @@ export const InitializeEscrowDialog = () => {
                   <FormItem>
                     <FormLabel className="flex items-center justify-between">
                       <span className="flex items-center">
-                        Platform Address
+                        Platform
                         <span className="text-destructive ml-1">*</span>
                       </span>
                     </FormLabel>
@@ -346,83 +377,6 @@ export const InitializeEscrowDialog = () => {
                   </FormItem>
                 )}
               />
-              <FormField
-                control={form.control}
-                name="roles.receiver"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel className="flex items-center justify-between">
-                      <span className="flex items-center">
-                        Receiver<span className="text-destructive ml-1">*</span>
-                      </span>
-                    </FormLabel>
-
-                    <FormControl>
-                      <Input
-                        placeholder="Enter receiver address"
-                        {...field}
-                        onChange={(e) => {
-                          field.onChange(e);
-                        }}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-            </div>
-
-            <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
-              <FormField
-                control={form.control}
-                name="platformFee"
-                render={() => (
-                  <FormItem>
-                    <FormLabel className="flex items-center">
-                      Platform Fee
-                      <span className="text-destructive ml-1">*</span>
-                    </FormLabel>
-                    <FormControl>
-                      <div className="relative">
-                        <Percent
-                          className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500"
-                          size={18}
-                        />
-                        <Input
-                          placeholder="Enter platform fee"
-                          className="pl-10"
-                          value={form.watch("platformFee")?.toString() || ""}
-                          onChange={handlePlatformFeeChange}
-                        />
-                      </div>
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              <FormField
-                control={form.control}
-                name="receiverMemo"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel className="flex items-center">
-                      Receiver Memo (opcional)
-                    </FormLabel>
-                    <FormControl>
-                      <Input
-                        type="text"
-                        placeholder="Enter the escrow receiver Memo"
-                        {...field}
-                        onChange={(e) => {
-                          field.onChange(e);
-                        }}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
             </div>
 
             <FormField
@@ -453,19 +407,32 @@ export const InitializeEscrowDialog = () => {
               </FormLabel>
               {milestones.map((milestone, index) => (
                 <div key={index} className="space-y-4">
-                  <div className="flex flex-col sm:flex-row items-start sm:items-center space-y-2 sm:space-y-0 sm:space-x-4">
-                    <Input
-                      placeholder="Milestone Description"
-                      value={milestone.description}
-                      className="w-full sm:w-3/5"
-                      onChange={(e) => {
-                        const updatedMilestones = [...milestones];
-                        updatedMilestones[index].description = e.target.value;
-                        form.setValue("milestones", updatedMilestones);
-                      }}
-                    />
+                  <div className="grid grid-cols-1 md:grid-cols-12 gap-4 items-center">
+                    <div className="md:col-span-4">
+                      <Input
+                        placeholder="Enter receiver address"
+                        value={milestone.receiver}
+                        onChange={(e) => {
+                          const updatedMilestones = [...milestones];
+                          updatedMilestones[index].receiver = e.target.value;
+                          form.setValue("milestones", updatedMilestones);
+                        }}
+                      />
+                    </div>
+
+                    <div className="md:col-span-4">
+                      <Input
+                        placeholder="Milestone description"
+                        value={milestone.description}
+                        onChange={(e) => {
+                          const updatedMilestones = [...milestones];
+                          updatedMilestones[index].description = e.target.value;
+                          form.setValue("milestones", updatedMilestones);
+                        }}
+                      />
+                    </div>
 
-                    <div className="relative w-full sm:w-2/5">
+                    <div className="md:col-span-3 relative">
                       <DollarSign
                         className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500"
                         size={18}
@@ -478,21 +445,29 @@ export const InitializeEscrowDialog = () => {
                       />
                     </div>
 
-                    <Button
-                      onClick={() => handleRemoveMilestone(index)}
-                      className="p-2 bg-transparent text-red-500 rounded-md border-none shadow-none hover:bg-transparent hover:shadow-none hover:text-red-500 focus:ring-0 active:ring-0 self-start sm:self-center"
-                      disabled={milestones.length === 1}
-                      type="button"
-                    >
-                      <Trash2 className="h-5 w-5" />
-                    </Button>
+                    <div className="md:col-span-1 flex justify-end">
+                      <Button
+                        onClick={() => handleRemoveMilestone(index)}
+                        className="p-2 bg-transparent text-red-500 hover:text-red-600"
+                        disabled={milestones.length === 1}
+                        type="button"
+                      >
+                        <Trash2 className="h-5 w-5" />
+                      </Button>
+                    </div>
                   </div>
 
+                  {/* Separator */}
+                  {index < milestones.length - 1 && (
+                    <Separator className="w-full" />
+                  )}
+
+                  {/* Add button */}
                   {index === milestones.length - 1 && (
                     <div className="flex justify-end mt-4">
                       <Button
                         disabled={isAnyMilestoneEmpty}
-                        className="w-full md:w-1/4"
+                        className="w-full md:w-fit md:min-w-40 cursor-pointer"
                         variant="outline"
                         onClick={handleAddMilestone}
                         type="button"