@trustless-work/blocks 1.0.5 → 1.0.7

package/package.json

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

package/templates/dashboard/dashboard-01/Dashboard.tsx

@@ -11,7 +11,7 @@ import {
 import { Separator } from "__UI_BASE__/separator";
 import { useDashboard } from "./useDashboard";
 import { formatCurrency } from "../../helpers/format.helper";
-import { Activity, Layers3, PiggyBank } from "lucide-react";
+import { Activity, Layers3, PiggyBank, CloudOff } from "lucide-react";
 import {
   AreaChart,
   Area,
@@ -29,6 +29,13 @@ import {
   ChartTooltipContent,
   type ChartConfig,
 } from "__UI_BASE__/chart";
+import {
+  Empty,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+  EmptyDescription,
+} from "__UI_BASE__/empty";
 
 const chartConfigBar: ChartConfig = {
   desktop: {
@@ -86,7 +93,7 @@ export const Dashboard01 = () => {
     <div className="grid gap-6">
       {/* KPI Cards */}
       <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
-        <Card>
+        <Card className="gap-3">
           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
             <CardTitle className="text-sm font-medium">Escrows</CardTitle>
             <Layers3 className="h-4 w-4 text-muted-foreground" />
@@ -101,7 +108,7 @@ export const Dashboard01 = () => {
           </CardContent>
         </Card>
 
-        <Card>
+        <Card className="gap-3">
           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
             <CardTitle className="text-sm font-medium">Total Amount</CardTitle>
             <Activity className="h-4 w-4 text-muted-foreground" />
@@ -116,7 +123,7 @@ export const Dashboard01 = () => {
           </CardContent>
         </Card>
 
-        <Card>
+        <Card className="gap-3">
           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
             <CardTitle className="text-sm font-medium">Total Balance</CardTitle>
             <PiggyBank className="h-4 w-4 text-muted-foreground" />
@@ -137,7 +144,7 @@ export const Dashboard01 = () => {
       {/* Charts */}
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
         {/* Bar chart: Amounts by date (shadcn pattern) */}
-        <Card>
+        <Card className="gap-3">
           <CardHeader>
             <CardTitle>Escrow Amounts</CardTitle>
             <CardDescription>Amounts by date</CardDescription>
@@ -147,26 +154,42 @@ export const Dashboard01 = () => {
               className="w-full h-56 sm:h-64 lg:h-72"
               config={chartConfigBar}
             >
-              <BarChart accessibilityLayer data={barData}>
-                <CartesianGrid vertical={false} />
-                <XAxis
-                  dataKey="month"
-                  tickLine={false}
-                  tickMargin={10}
-                  axisLine={false}
-                  tickFormatter={(value) =>
-                    new Date(String(value)).toLocaleDateString("en-US", {
-                      month: "short",
-                      day: "numeric",
-                    })
-                  }
-                />
-                <ChartTooltip
-                  cursor={false}
-                  content={<ChartTooltipContent hideLabel />}
-                />
-                <Bar dataKey="desktop" fill="var(--color-desktop)" radius={8} />
-              </BarChart>
+              {barData.length > 0 ? (
+                <BarChart accessibilityLayer data={barData}>
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                    dataKey="month"
+                    tickLine={false}
+                    tickMargin={10}
+                    axisLine={false}
+                    tickFormatter={(value) =>
+                      new Date(String(value)).toLocaleDateString("en-US", {
+                        month: "short",
+                        day: "numeric",
+                      })
+                    }
+                  />
+                  <ChartTooltip
+                    cursor={false}
+                    content={<ChartTooltipContent hideLabel />}
+                  />
+                  <Bar
+                    dataKey="desktop"
+                    fill="var(--color-desktop)"
+                    radius={8}
+                  />
+                </BarChart>
+              ) : (
+                <Empty className="border border-dashed">
+                  <EmptyHeader>
+                    <EmptyMedia variant="icon">
+                      <CloudOff />
+                    </EmptyMedia>
+                    <EmptyTitle>No data</EmptyTitle>
+                    <EmptyDescription>No Data Available</EmptyDescription>
+                  </EmptyHeader>
+                </Empty>
+              )}
             </ChartContainer>
           </CardContent>
         </Card>
@@ -182,22 +205,34 @@ export const Dashboard01 = () => {
               config={chartConfigDonut}
               className="w-full h-56 sm:h-64 lg:h-72"
             >
-              <PieChart>
-                <ChartTooltip
-                  cursor={false}
-                  content={<ChartTooltipContent hideLabel />}
-                />
-                <Pie
-                  data={donutData}
-                  dataKey="visitors"
-                  nameKey="browser"
-                  innerRadius={60}
-                >
-                  {donutData.map((slice, idx) => (
-                    <Cell key={`cell-${idx}`} fill={slice.fill} />
-                  ))}
-                </Pie>
-              </PieChart>
+              {donutData.some((d) => Number(d.visitors) > 0) ? (
+                <PieChart>
+                  <ChartTooltip
+                    cursor={false}
+                    content={<ChartTooltipContent hideLabel />}
+                  />
+                  <Pie
+                    data={donutData}
+                    dataKey="visitors"
+                    nameKey="browser"
+                    innerRadius={60}
+                  >
+                    {donutData.map((slice, idx) => (
+                      <Cell key={`cell-${idx}`} fill={slice.fill} />
+                    ))}
+                  </Pie>
+                </PieChart>
+              ) : (
+                <Empty className="border border-dashed">
+                  <EmptyHeader>
+                    <EmptyMedia variant="icon">
+                      <CloudOff />
+                    </EmptyMedia>
+                    <EmptyTitle>No data</EmptyTitle>
+                    <EmptyDescription>No Data Available</EmptyDescription>
+                  </EmptyHeader>
+                </Empty>
+              )}
             </ChartContainer>
             <div className="mt-4 flex items-center justify-center gap-6">
               <div className="flex items-center gap-2">
@@ -229,36 +264,48 @@ export const Dashboard01 = () => {
               className="w-full h-56 sm:h-64 lg:h-72"
               config={chartConfigArea}
             >
-              <AreaChart
-                accessibilityLayer
-                data={areaData}
-                margin={{ left: 12, right: 12 }}
-              >
-                <CartesianGrid vertical={false} />
-                <XAxis
-                  dataKey="month"
-                  tickLine={false}
-                  axisLine={false}
-                  tickMargin={8}
-                  tickFormatter={(value) =>
-                    new Date(String(value)).toLocaleDateString("en-US", {
-                      month: "short",
-                      day: "numeric",
-                    })
-                  }
-                />
-                <ChartTooltip
-                  cursor={false}
-                  content={<ChartTooltipContent indicator="line" />}
-                />
-                <Area
-                  dataKey="desktop"
-                  type="natural"
-                  fill="var(--color-desktop)"
-                  fillOpacity={0.4}
-                  stroke="var(--color-desktop)"
-                />
-              </AreaChart>
+              {areaData.length > 0 ? (
+                <AreaChart
+                  accessibilityLayer
+                  data={areaData}
+                  margin={{ left: 12, right: 12 }}
+                >
+                  <CartesianGrid vertical={false} />
+                  <XAxis
+                    dataKey="month"
+                    tickLine={false}
+                    axisLine={false}
+                    tickMargin={8}
+                    tickFormatter={(value) =>
+                      new Date(String(value)).toLocaleDateString("en-US", {
+                        month: "short",
+                        day: "numeric",
+                      })
+                    }
+                  />
+                  <ChartTooltip
+                    cursor={false}
+                    content={<ChartTooltipContent indicator="line" />}
+                  />
+                  <Area
+                    dataKey="desktop"
+                    type="natural"
+                    fill="var(--color-desktop)"
+                    fillOpacity={0.4}
+                    stroke="var(--color-desktop)"
+                  />
+                </AreaChart>
+              ) : (
+                <Empty className="border border-dashed">
+                  <EmptyHeader>
+                    <EmptyMedia variant="icon">
+                      <CloudOff />
+                    </EmptyMedia>
+                    <EmptyTitle>No data</EmptyTitle>
+                    <EmptyDescription>No Data Available</EmptyDescription>
+                  </EmptyHeader>
+                </Empty>
+              )}
             </ChartContainer>
           </CardContent>
         </Card>

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