@trustless-work/blocks 1.1.8 → 1.2.1

package/bin/index.js

@@ -865,6 +865,90 @@ function copyTemplate(name, { uiBase, shouldInstall = false } = {}) {
       );
     }
 
+    try {
+      const isMultiDisputeRoot =
+        name === "escrows/multi-release/dispute-milestone";
+      const isMultiDisputeDialog =
+        name === "escrows/multi-release/dispute-milestone/dialog";
+      const isMultiDisputeForm =
+        name === "escrows/multi-release/dispute-milestone/form";
+
+      const srcSharedDir = path.join(
+        TEMPLATES_DIR,
+        "escrows",
+        "multi-release",
+        "dispute-milestone",
+        "shared"
+      );
+
+      function copyMultiDisputeSharedInto(targetDir) {
+        if (!fs.existsSync(srcSharedDir)) return;
+        const entries = fs.readdirSync(srcSharedDir, { withFileTypes: true });
+        for (const entry of entries) {
+          if (!/\.(tsx?|jsx?)$/i.test(entry.name)) continue;
+          const entrySrc = path.join(srcSharedDir, entry.name);
+          const entryDest = path.join(targetDir, entry.name);
+          writeTransformed(entrySrc, entryDest);
+        }
+      }
+
+      if (isMultiDisputeRoot) {
+        copyMultiDisputeSharedInto(path.join(destDir, "dialog"));
+        copyMultiDisputeSharedInto(path.join(destDir, "form"));
+      } else if (isMultiDisputeDialog) {
+        copyMultiDisputeSharedInto(destDir);
+      } else if (isMultiDisputeForm) {
+        copyMultiDisputeSharedInto(destDir);
+      }
+    } catch (e) {
+      console.warn(
+        "⚠️  Failed to materialize shared multi-release dispute-milestone files:",
+        e?.message || e
+      );
+    }
+
+    try {
+      const isMultiReleaseRoot =
+        name === "escrows/multi-release/release-milestone";
+      const isMultiReleaseDialog =
+        name === "escrows/multi-release/release-milestone/dialog";
+      const isMultiReleaseForm =
+        name === "escrows/multi-release/release-milestone/form";
+
+      const srcSharedDir = path.join(
+        TEMPLATES_DIR,
+        "escrows",
+        "multi-release",
+        "release-milestone",
+        "shared"
+      );
+
+      function copyMultiReleaseSharedInto(targetDir) {
+        if (!fs.existsSync(srcSharedDir)) return;
+        const entries = fs.readdirSync(srcSharedDir, { withFileTypes: true });
+        for (const entry of entries) {
+          if (!/\.(tsx?|jsx?)$/i.test(entry.name)) continue;
+          const entrySrc = path.join(srcSharedDir, entry.name);
+          const entryDest = path.join(targetDir, entry.name);
+          writeTransformed(entrySrc, entryDest);
+        }
+      }
+
+      if (isMultiReleaseRoot) {
+        copyMultiReleaseSharedInto(path.join(destDir, "dialog"));
+        copyMultiReleaseSharedInto(path.join(destDir, "form"));
+      } else if (isMultiReleaseDialog) {
+        copyMultiReleaseSharedInto(destDir);
+      } else if (isMultiReleaseForm) {
+        copyMultiReleaseSharedInto(destDir);
+      }
+    } catch (e) {
+      console.warn(
+        "⚠️  Failed to materialize shared multi-release release-milestone files:",
+        e?.message || e
+      );
+    }
+
     try {
       const isMultiUpdateRoot = name === "escrows/multi-release/update-escrow";
       const isMultiUpdateDialog =
@@ -1124,6 +1208,8 @@ function copyTemplate(name, { uiBase, shouldInstall = false } = {}) {
           "resolve-dispute",
           "update-escrow",
           "withdraw-remaining-funds",
+          "dispute-milestone",
+          "release-milestone",
         ];
 
         for (const mod of modules) {
@@ -1255,6 +1341,8 @@ function copyTemplate(name, { uiBase, shouldInstall = false } = {}) {
           "resolve-dispute",
           "update-escrow",
           "withdraw-remaining-funds",
+          "dispute-milestone",
+          "release-milestone",
         ];
 
         const baseTarget = path.join(destDir, "multi-release");

package/package.json

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

package/templates/escrows/details/GeneralInformation.tsx

@@ -96,7 +96,10 @@ export const GeneralInformation = ({
           <StatisticsCard
             title="Amount"
             icon={CircleDollarSign}
-            value={formatCurrency(totalAmount, selectedEscrow.trustline?.name)}
+            value={formatCurrency(
+              totalAmount,
+              selectedEscrow.trustline?.symbol
+            )}
           />
 
           <StatisticsCard
@@ -104,7 +107,7 @@ export const GeneralInformation = ({
             icon={Wallet}
             value={formatCurrency(
               selectedEscrow.balance ?? 0,
-              selectedEscrow.trustline?.name
+              selectedEscrow.trustline?.symbol
             )}
           />
         </div>
@@ -136,7 +139,7 @@ export const GeneralInformation = ({
                   <div className="flex-1 min-w-0">
                     <div className="flex items-center justify-between mb-2">
                       <span className="text-sm font-medium text-muted-foreground">
-                        {selectedEscrow.trustline?.name || "No Trustline"} |
+                        {selectedEscrow.trustline?.symbol || "No Trustline"} |
                         Escrow ID
                       </span>
                       <button
@@ -237,7 +240,7 @@ export const GeneralInformation = ({
                         <span className="font-medium">
                           {formatCurrency(
                             selectedEscrow.amount,
-                            selectedEscrow.trustline?.name
+                            selectedEscrow.trustline?.symbol
                           )}
                         </span>
                       </div>
@@ -256,7 +259,7 @@ export const GeneralInformation = ({
                           <span className="font-medium">
                             {formatCurrency(
                               Number(receiverAmount.toFixed(2)),
-                              selectedEscrow.trustline?.name
+                              selectedEscrow.trustline?.symbol
                             )}
                           </span>
                         </div>
@@ -276,7 +279,7 @@ export const GeneralInformation = ({
                           <span className="font-medium">
                             {formatCurrency(
                               Number(platformFeeAmount.toFixed(2)),
-                              selectedEscrow.trustline?.name
+                              selectedEscrow.trustline?.symbol
                             )}
                           </span>
                         </div>
@@ -297,7 +300,7 @@ export const GeneralInformation = ({
                         <span className="font-medium">
                           {formatCurrency(
                             Number(trustlessWorkAmount.toFixed(2)),
-                            selectedEscrow.trustline?.name
+                            selectedEscrow.trustline?.symbol
                           )}
                         </span>
                       </div>

package/templates/escrows/details/MilestoneCard.tsx

@@ -202,7 +202,10 @@ const MilestoneCardComponent = ({
         {"amount" in milestone && (
           <div className="flex items-center gap-2 py-2">
             <span className="text-2xl font-bold text-foreground">
-              {formatCurrency(milestone.amount, selectedEscrow.trustline?.name)}
+              {formatCurrency(
+                milestone.amount,
+                selectedEscrow.trustline?.symbol
+              )}
             </span>
           </div>
         )}

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

@@ -293,7 +293,7 @@ export const EscrowsByRoleCards = () => {
                               {escrow.type === "single-release"
                                 ? formatCurrency(
                                     escrow.amount,
-                                    escrow.trustline.name
+                                    escrow.trustline.symbol
                                   )
                                 : formatCurrency(
                                     escrow.milestones.reduce(
@@ -303,7 +303,7 @@ export const EscrowsByRoleCards = () => {
                                           .amount,
                                       0
                                     ),
-                                    escrow.trustline.name
+                                    escrow.trustline.symbol
                                   )}
                             </span>
                           </div>
@@ -316,7 +316,7 @@ export const EscrowsByRoleCards = () => {
                               <span className="font-medium text-green-800 dark:text-green-600">
                                 {formatCurrency(
                                   escrow.balance,
-                                  escrow.trustline.name
+                                  escrow.trustline.symbol
                                 )}
                               </span>
                             </div>
@@ -362,7 +362,7 @@ export const EscrowsByRoleCards = () => {
                                             <span className="text-muted-foreground">
                                               {formatCurrency(
                                                 milestone.amount,
-                                                escrow.trustline.name
+                                                escrow.trustline.symbol
                                               )}
                                             </span>
 

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

@@ -160,9 +160,9 @@ export const EscrowsByRoleTable = () => {
         cell: ({ row }) => (
           <span
             className="max-w-[220px] truncate block"
-            title={`${row.original.trustline.name} (${row.original.trustline.address})`}
+            title={`${row.original.trustline.symbol} (${row.original.trustline.address})`}
           >
-            {row.original.trustline.name}
+            {row.original.trustline.symbol}
           </span>
         ),
       },

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

@@ -281,7 +281,7 @@ export const EscrowsBySignerCards = () => {
                               {escrow.type === "single-release"
                                 ? formatCurrency(
                                     escrow.amount,
-                                    escrow.trustline.name
+                                    escrow.trustline.symbol
                                   )
                                 : formatCurrency(
                                     escrow.milestones.reduce(
@@ -291,7 +291,7 @@ export const EscrowsBySignerCards = () => {
                                           .amount,
                                       0
                                     ),
-                                    escrow.trustline.name
+                                    escrow.trustline.symbol
                                   )}
                             </span>
                           </div>
@@ -304,7 +304,7 @@ export const EscrowsBySignerCards = () => {
                               <span className="font-medium text-green-800 dark:text-green-600">
                                 {formatCurrency(
                                   escrow.balance,
-                                  escrow.trustline.name
+                                  escrow.trustline.symbol
                                 )}
                               </span>
                             </div>
@@ -350,7 +350,7 @@ export const EscrowsBySignerCards = () => {
                                             <span className="text-muted-foreground">
                                               {formatCurrency(
                                                 milestone.amount,
-                                                escrow.trustline.name
+                                                escrow.trustline.symbol
                                               )}
                                             </span>
 

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

@@ -150,9 +150,9 @@ export const EscrowsBySignerTable = () => {
         cell: ({ row }) => (
           <span
             className="max-w-[220px] truncate block"
-            title={`${row.original.trustline.name} (${row.original.trustline.address})`}
+            title={`${row.original.trustline.symbol} (${row.original.trustline.address})`}
           >
-            {row.original.trustline.name}
+            {row.original.trustline.symbol}
           </span>
         ),
       },

package/templates/escrows/load-escrow/dialog/LoadEscrow.tsx

@@ -22,7 +22,9 @@ import * as React from "react";
 
 export function LoadEscrowDialog() {
   const [isOpen, setIsOpen] = React.useState(false);
-  const { form, isSubmitting, onSubmit } = useLoadEscrow();
+  const { form, isSubmitting, onSubmit } = useLoadEscrow({
+    onSuccess: () => setIsOpen(false),
+  });
 
   return (
     <Dialog open={isOpen} onOpenChange={setIsOpen}>

package/templates/escrows/load-escrow/shared/useLoadEscrow.ts

@@ -12,7 +12,9 @@ import { GetEscrowsFromIndexerResponse } from "@trustless-work/escrow/types";
 import { useEscrowContext } from "@/components/tw-blocks/providers/EscrowProvider";
 import { formSchema } from "./schema";
 
-export const useLoadEscrow = () => {
+export const useLoadEscrow = ({
+  onSuccess,
+}: { onSuccess?: () => void } = {}) => {
   const { setSelectedEscrow } = useEscrowContext();
   const [isSubmitting, setIsSubmitting] = useState(false);
   const { getEscrowByContractIds } = useGetEscrowFromIndexerByContractIds();
@@ -46,6 +48,8 @@ export const useLoadEscrow = () => {
       toast.success(
         "Escrow data fetched successfully. Now you can use the selectedEscrow state"
       );
+
+      onSuccess?.();
     } catch (error) {
       toast.error(handleError(error as ErrorResponse).message);
     } finally {

package/templates/escrows/multi-release/dispute-milestone/dialog/DisputeMilestone.tsx

@@ -0,0 +1,103 @@
+import * as React from "react";
+import {
+  Form,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormMessage,
+} from "__UI_BASE__/form";
+import { Button } from "__UI_BASE__/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "__UI_BASE__/dialog";
+import { Loader2 } from "lucide-react";
+import { useDisputeMilestone } from "./useDisputeMilestone";
+import { useEscrowContext } from "@/components/tw-blocks/providers/EscrowProvider";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "__UI_BASE__/select";
+
+export const DisputeMilestoneDialog = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const { form, handleSubmit, isSubmitting } = useDisputeMilestone({
+    onSuccess: () => setIsOpen(false),
+  });
+  const { selectedEscrow } = useEscrowContext();
+
+  return (
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DialogTrigger asChild>
+        <Button type="button" className="cursor-pointer w-full">
+          Dispute Milestone
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="!w-full sm:!max-w-md">
+        <DialogHeader>
+          <DialogTitle>Dispute Milestone</DialogTitle>
+        </DialogHeader>
+        <Form {...form}>
+          <form onSubmit={handleSubmit}>
+            <FormField
+              control={form.control}
+              name="milestoneIndex"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel className="flex items-center">
+                    Milestone
+                    <span className="text-destructive ml-1">*</span>
+                  </FormLabel>
+                  <FormControl>
+                    <Select
+                      value={field.value}
+                      onValueChange={(e) => {
+                        field.onChange(e);
+                      }}
+                    >
+                      <SelectTrigger className="w-full">
+                        <SelectValue placeholder="Select milestone" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {(selectedEscrow?.milestones || []).map((m, idx) => (
+                          <SelectItem key={`ms-${idx}`} value={String(idx)}>
+                            {m?.description || `Milestone ${idx + 1}`}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <div className="mt-4 flex justify-start items-center">
+              <Button
+                type="submit"
+                disabled={isSubmitting || !selectedEscrow?.balance}
+                className="cursor-pointer"
+              >
+                {isSubmitting ? (
+                  <div className="flex items-center">
+                    <Loader2 className="h-5 w-5 animate-spin" />
+                    <span className="ml-2">Disputing...</span>
+                  </div>
+                ) : (
+                  "Dispute Milestone"
+                )}
+              </Button>
+            </div>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};

package/templates/escrows/multi-release/dispute-milestone/form/DisputeMilestone.tsx

@@ -0,0 +1,81 @@
+import * as React from "react";
+import {
+  Form,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormMessage,
+} from "__UI_BASE__/form";
+import { Button } from "__UI_BASE__/button";
+import { Loader2 } from "lucide-react";
+import { useDisputeMilestone } from "./useDisputeMilestone";
+import { useEscrowContext } from "@/components/tw-blocks/providers/EscrowProvider";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "__UI_BASE__/select";
+
+export const DisputeMilestoneForm = () => {
+  const { form, handleSubmit, isSubmitting } = useDisputeMilestone();
+  const { selectedEscrow } = useEscrowContext();
+
+  return (
+    <Form {...form}>
+      <form onSubmit={handleSubmit} className="flex flex-col space-y-6 w-full">
+        <FormField
+          control={form.control}
+          name="milestoneIndex"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel className="flex items-center">
+                Milestone
+                <span className="text-destructive ml-1">*</span>
+              </FormLabel>
+              <FormControl>
+                <Select
+                  value={field.value}
+                  onValueChange={(e) => {
+                    field.onChange(e);
+                  }}
+                >
+                  <SelectTrigger className="w-full">
+                    <SelectValue placeholder="Select milestone" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {(selectedEscrow?.milestones || []).map((m, idx) => (
+                      <SelectItem key={`ms-${idx}`} value={String(idx)}>
+                        {m?.description || `Milestone ${idx + 1}`}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <div className="mt-4">
+          <Button
+            type="submit"
+            disabled={isSubmitting || !selectedEscrow?.balance}
+            className="cursor-pointer"
+          >
+            {isSubmitting ? (
+              <div className="flex items-center">
+                <Loader2 className="h-5 w-5 animate-spin" />
+                <span className="ml-2">Disputing...</span>
+              </div>
+            ) : (
+              "Dispute Milestone"
+            )}
+          </Button>
+        </div>
+      </form>
+    </Form>
+  );
+};

package/templates/escrows/multi-release/dispute-milestone/shared/schema.ts

@@ -0,0 +1,9 @@
+import { z } from "zod";
+
+export const disputeMilestoneSchema = z.object({
+  milestoneIndex: z
+    .string({ required_error: "Milestone is required" })
+    .min(1, { message: "Milestone is required" }),
+});
+
+export type DisputeMilestoneValues = z.infer<typeof disputeMilestoneSchema>;

package/templates/escrows/multi-release/dispute-milestone/shared/useDisputeMilestone.ts

@@ -0,0 +1,99 @@
+import * as React from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+  disputeMilestoneSchema,
+  type DisputeMilestoneValues,
+} from "./schema";
+import { toast } from "sonner";
+import {
+  MultiReleaseStartDisputePayload,
+  MultiReleaseMilestone,
+} from "@trustless-work/escrow";
+import { useEscrowContext } from "@/components/tw-blocks/providers/EscrowProvider";
+import { useEscrowsMutations } from "@/components/tw-blocks/tanstack/useEscrowsMutations";
+import {
+  ErrorResponse,
+  handleError,
+} from "@/components/tw-blocks/handle-errors/handle";
+import { useWalletContext } from "@/components/tw-blocks/wallet-kit/WalletProvider";
+
+export function useDisputeMilestone({
+  onSuccess,
+}: { onSuccess?: () => void } = {}) {
+  const { startDispute } = useEscrowsMutations();
+  const { selectedEscrow, updateEscrow } = useEscrowContext();
+  const { walletAddress } = useWalletContext();
+
+  const form = useForm<DisputeMilestoneValues>({
+    resolver: zodResolver(disputeMilestoneSchema),
+    defaultValues: {
+      milestoneIndex: "0",
+    },
+    mode: "onChange",
+  });
+
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
+
+  const handleSubmit = form.handleSubmit(async (payload) => {
+    try {
+      setIsSubmitting(true);
+
+      /**
+       * Create the payload for the dispute escrow mutation
+       *
+       * @returns The payload for the dispute escrow mutation
+       */
+      const finalPayload: MultiReleaseStartDisputePayload = {
+        contractId: selectedEscrow?.contractId || "",
+        signer: walletAddress || "",
+        milestoneIndex: String(payload.milestoneIndex),
+      };
+
+      /**
+       * Call the dispute escrow mutation
+       *
+       * @param payload - The payload for the dispute escrow mutation
+       * @param type - The type of the escrow
+       * @param address - The address of the escrow
+       */
+      await startDispute.mutateAsync({
+        payload: finalPayload,
+        type: "multi-release",
+        address: walletAddress || "",
+      });
+
+      toast.success("Milestone disputed successfully");
+
+      updateEscrow({
+        ...selectedEscrow,
+        milestones: selectedEscrow?.milestones.map((milestone, index) => {
+          if (index === Number(payload.milestoneIndex)) {
+            return {
+              ...milestone,
+              flags: {
+                ...(milestone as MultiReleaseMilestone).flags,
+                disputed: true,
+              },
+            };
+          }
+          return milestone;
+        }),
+      });
+
+      onSuccess?.();
+    } catch (error) {
+      toast.error(handleError(error as ErrorResponse).message);
+    } finally {
+      setIsSubmitting(false);
+      form.reset();
+    }
+  });
+
+  return {
+    form,
+    handleSubmit,
+    isSubmitting,
+  };
+}
+

package/templates/escrows/multi-release/release-milestone/dialog/ReleaseMilestone.tsx

@@ -0,0 +1,103 @@
+import * as React from "react";
+import {
+  Form,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormMessage,
+} from "__UI_BASE__/form";
+import { Button } from "__UI_BASE__/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "__UI_BASE__/dialog";
+import { Loader2 } from "lucide-react";
+import { useReleaseMilestone } from "./useReleaseMilestone";
+import { useEscrowContext } from "@/components/tw-blocks/providers/EscrowProvider";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "__UI_BASE__/select";
+
+export const ReleaseMilestoneDialog = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const { form, handleSubmit, isSubmitting } = useReleaseMilestone({
+    onSuccess: () => setIsOpen(false),
+  });
+  const { selectedEscrow } = useEscrowContext();
+
+  return (
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DialogTrigger asChild>
+        <Button type="button" className="cursor-pointer w-full">
+          Release Milestone
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="!w-full sm:!max-w-md">
+        <DialogHeader>
+          <DialogTitle>Release Milestone</DialogTitle>
+        </DialogHeader>
+        <Form {...form}>
+          <form onSubmit={handleSubmit}>
+            <FormField
+              control={form.control}
+              name="milestoneIndex"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel className="flex items-center">
+                    Milestone
+                    <span className="text-destructive ml-1">*</span>
+                  </FormLabel>
+                  <FormControl>
+                    <Select
+                      value={field.value}
+                      onValueChange={(e) => {
+                        field.onChange(e);
+                      }}
+                    >
+                      <SelectTrigger className="w-full">
+                        <SelectValue placeholder="Select milestone" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {(selectedEscrow?.milestones || []).map((m, idx) => (
+                          <SelectItem key={`ms-${idx}`} value={String(idx)}>
+                            {m?.description || `Milestone ${idx + 1}`}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <div className="mt-4 flex justify-start items-center">
+              <Button
+                type="submit"
+                disabled={isSubmitting}
+                className="cursor-pointer"
+              >
+                {isSubmitting ? (
+                  <div className="flex items-center">
+                    <Loader2 className="h-5 w-5 animate-spin" />
+                    <span className="ml-2">Releasing...</span>
+                  </div>
+                ) : (
+                  "Release Milestone"
+                )}
+              </Button>
+            </div>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};

package/templates/escrows/multi-release/release-milestone/form/ReleaseMilestone.tsx

@@ -0,0 +1,81 @@
+import * as React from "react";
+import {
+  Form,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormMessage,
+} from "__UI_BASE__/form";
+import { Button } from "__UI_BASE__/button";
+import { Loader2 } from "lucide-react";
+import { useReleaseMilestone } from "./useReleaseMilestone";
+import { useEscrowContext } from "@/components/tw-blocks/providers/EscrowProvider";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "__UI_BASE__/select";
+
+export const ReleaseMilestoneForm = () => {
+  const { form, handleSubmit, isSubmitting } = useReleaseMilestone();
+  const { selectedEscrow } = useEscrowContext();
+
+  return (
+    <Form {...form}>
+      <form onSubmit={handleSubmit} className="flex flex-col space-y-6 w-full">
+        <FormField
+          control={form.control}
+          name="milestoneIndex"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel className="flex items-center">
+                Milestone
+                <span className="text-destructive ml-1">*</span>
+              </FormLabel>
+              <FormControl>
+                <Select
+                  value={field.value}
+                  onValueChange={(e) => {
+                    field.onChange(e);
+                  }}
+                >
+                  <SelectTrigger className="w-full">
+                    <SelectValue placeholder="Select milestone" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {(selectedEscrow?.milestones || []).map((m, idx) => (
+                      <SelectItem key={`ms-${idx}`} value={String(idx)}>
+                        {m?.description || `Milestone ${idx + 1}`}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <div className="mt-4">
+          <Button
+            type="submit"
+            disabled={isSubmitting}
+            className="cursor-pointer"
+          >
+            {isSubmitting ? (
+              <div className="flex items-center">
+                <Loader2 className="h-5 w-5 animate-spin" />
+                <span className="ml-2">Releasing...</span>
+              </div>
+            ) : (
+              "Release Milestone"
+            )}
+          </Button>
+        </div>
+      </form>
+    </Form>
+  );
+};

package/templates/escrows/multi-release/release-milestone/shared/schema.ts

@@ -0,0 +1,10 @@
+import { z } from "zod";
+
+export const releaseMilestoneSchema = z.object({
+  milestoneIndex: z
+    .string({ required_error: "Milestone is required" })
+    .min(1, { message: "Milestone is required" }),
+});
+
+export type ReleaseMilestoneValues = z.infer<typeof releaseMilestoneSchema>;
+

package/templates/escrows/multi-release/release-milestone/shared/useReleaseMilestone.ts

@@ -0,0 +1,121 @@
+import * as React from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+  releaseMilestoneSchema,
+  type ReleaseMilestoneValues,
+} from "./schema";
+import { toast } from "sonner";
+import {
+  MultiReleaseReleaseFundsPayload,
+  MultiReleaseMilestone,
+} from "@trustless-work/escrow";
+import { useEscrowContext } from "@/components/tw-blocks/providers/EscrowProvider";
+import { useEscrowsMutations } from "@/components/tw-blocks/tanstack/useEscrowsMutations";
+import {
+  ErrorResponse,
+  handleError,
+} from "@/components/tw-blocks/handle-errors/handle";
+import { useWalletContext } from "@/components/tw-blocks/wallet-kit/WalletProvider";
+import { useEscrowDialogs } from "@/components/tw-blocks/providers/EscrowDialogsProvider";
+import { useEscrowAmountContext } from "@/components/tw-blocks/providers/EscrowAmountProvider";
+
+export function useReleaseMilestone({
+  onSuccess,
+}: { onSuccess?: () => void } = {}) {
+  const { releaseFunds } = useEscrowsMutations();
+  const { selectedEscrow, updateEscrow } = useEscrowContext();
+  const dialogStates = useEscrowDialogs();
+  const { setAmounts, setLastReleasedMilestoneIndex } =
+    useEscrowAmountContext();
+  const { walletAddress } = useWalletContext();
+
+  const form = useForm<ReleaseMilestoneValues>({
+    resolver: zodResolver(releaseMilestoneSchema),
+    defaultValues: {
+      milestoneIndex: "0",
+    },
+    mode: "onChange",
+  });
+
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
+
+  const handleSubmit = form.handleSubmit(async (payload) => {
+    try {
+      setIsSubmitting(true);
+
+      /**
+       * Create the payload for the release escrow mutation
+       *
+       * @returns The payload for the release escrow mutation
+       */
+      const finalPayload: MultiReleaseReleaseFundsPayload = {
+        contractId: selectedEscrow?.contractId || "",
+        releaseSigner: walletAddress || "",
+        milestoneIndex: String(payload.milestoneIndex),
+      };
+
+      /**
+       * Call the release escrow mutation
+       *
+       * @param payload - The payload for the release escrow mutation
+       * @param type - The type of the escrow
+       * @param address - The address of the escrow
+       */
+      await releaseFunds.mutateAsync({
+        payload: finalPayload,
+        type: "multi-release",
+        address: walletAddress || "",
+      });
+
+      toast.success("Milestone released successfully");
+
+      // Ensure amounts are up to date for the success dialog
+      if (selectedEscrow) {
+        const milestone = selectedEscrow.milestones?.[Number(payload.milestoneIndex)];
+        const releasedAmount = Number(
+          (milestone as MultiReleaseMilestone | undefined)?.amount || 0
+        );
+        const platformFee = Number(selectedEscrow.platformFee || 0);
+        setAmounts(releasedAmount, platformFee);
+      }
+
+      updateEscrow({
+        ...selectedEscrow,
+        milestones: selectedEscrow?.milestones.map((milestone, index) => {
+          if (index === Number(payload.milestoneIndex)) {
+            return {
+              ...milestone,
+              flags: {
+                ...(milestone as MultiReleaseMilestone).flags,
+                released: true,
+              },
+            };
+          }
+          return milestone;
+        }),
+        balance: (selectedEscrow?.balance || 0) - (selectedEscrow?.amount || 0),
+      });
+
+      // Remember which milestone was released for the success dialog
+      setLastReleasedMilestoneIndex(Number(payload.milestoneIndex));
+
+      // Open success dialog
+      dialogStates.successRelease.setIsOpen(true);
+
+      onSuccess?.();
+    } catch (error) {
+      toast.error(handleError(error as ErrorResponse).message);
+    } finally {
+      setIsSubmitting(false);
+      form.reset();
+    }
+  });
+
+  return {
+    form,
+    handleSubmit,
+    isSubmitting,
+  };
+}
+

package/templates/escrows/multi-release/resolve-dispute/dialog/ResolveDispute.tsx

@@ -204,7 +204,7 @@ export const ResolveDisputeDialog = ({
                   <span className="font-bold">Total Balance: </span>
                   {formatCurrency(
                     selectedEscrow?.balance || 0,
-                    selectedEscrow?.trustline.name || ""
+                    selectedEscrow?.trustline.symbol || ""
                   )}
                 </p>
               </div>

package/templates/escrows/multi-release/resolve-dispute/form/ResolveDispute.tsx

@@ -184,7 +184,7 @@ export const ResolveDisputeForm = ({
               <span className="font-bold">Total Balance: </span>
               {formatCurrency(
                 selectedEscrow?.balance || 0,
-                selectedEscrow?.trustline.name || ""
+                selectedEscrow?.trustline.symbol || ""
               )}
             </p>
           </div>

package/templates/escrows/multi-release/resolve-dispute/shared/useResolveDispute.ts

@@ -17,7 +17,9 @@ import { useWalletContext } from "@/components/tw-blocks/wallet-kit/WalletProvid
 
 type DistributionInput = { address: string; amount: string | number };
 
-export function useResolveDispute({ onSuccess }: { onSuccess?: () => void } = {}) {
+export function useResolveDispute({
+  onSuccess,
+}: { onSuccess?: () => void } = {}) {
   const { resolveDispute } = useEscrowsMutations();
   const { selectedEscrow, updateEscrow } = useEscrowContext();
   const { walletAddress } = useWalletContext();
@@ -50,7 +52,12 @@ export function useResolveDispute({ onSuccess }: { onSuccess?: () => void } = {}
     const idx = Number(milestoneIndexWatch);
     const milestones = selectedEscrow.milestones as MultiReleaseMilestone[];
     const m = milestones?.[idx];
-    return Number((m?.amount as unknown as number) || 0);
+    const amount = m?.amount;
+    // Handle both string and number types
+    if (amount === undefined || amount === null) return 0;
+    const numAmount =
+      typeof amount === "string" ? Number(amount) : Number(amount);
+    return isNaN(numAmount) ? 0 : numAmount;
   }, [selectedEscrow, milestoneIndexWatch]);
 
   const distributions = form.watch("distributions") as DistributionInput[];
@@ -63,11 +70,22 @@ export function useResolveDispute({ onSuccess }: { onSuccess?: () => void } = {}
   }, [distributions]);
 
   const isExactMatch = React.useMemo(() => {
-    return Number(allowedAmount) === Number(distributedSum);
+    const allowed = Number(allowedAmount);
+    const distributed = Number(distributedSum);
+    // Use epsilon comparison for floating point numbers
+    // Round to 2 decimal places to avoid precision issues
+    const roundedAllowed = Math.round(allowed * 100) / 100;
+    const roundedDistributed = Math.round(distributed * 100) / 100;
+    return Math.abs(roundedAllowed - roundedDistributed) < 0.01;
   }, [allowedAmount, distributedSum]);
 
   const difference = React.useMemo(() => {
-    return Math.abs(Number(allowedAmount) - Number(distributedSum));
+    const allowed = Number(allowedAmount);
+    const distributed = Number(distributedSum);
+    // Round to 2 decimal places to avoid precision issues
+    const roundedAllowed = Math.round(allowed * 100) / 100;
+    const roundedDistributed = Math.round(distributed * 100) / 100;
+    return Math.abs(roundedAllowed - roundedDistributed);
   }, [allowedAmount, distributedSum]);
 
   const [isSubmitting, setIsSubmitting] = React.useState(false);

package/templates/escrows/multi-release/update-escrow/shared/schema.ts

@@ -8,6 +8,9 @@ export const useUpdateEscrowSchema = () => {
         address: z.string().min(1, {
           message: "Trustline address is required.",
         }),
+        symbol: z.string().min(1, {
+          message: "Trustline symbol is required.",
+        }),
       }),
       roles: z.object({
         approver: z

package/templates/escrows/multi-release/update-escrow/shared/useUpdateEscrow.ts

@@ -47,7 +47,6 @@ export function useUpdateEscrow({
         | undefined,
       trustline: {
         address: selectedEscrow?.trustline?.address || "",
-        symbol: selectedEscrow?.trustline?.name || "",
       },
       roles: {
         approver: selectedEscrow?.roles?.approver || "",
@@ -87,7 +86,6 @@ export function useUpdateEscrow({
           | undefined) || "",
       trustline: {
         address: selectedEscrow?.trustline?.address || "",
-        symbol: selectedEscrow?.trustline?.name || "",
       },
       roles: {
         approver: selectedEscrow?.roles?.approver || "",
@@ -207,9 +205,10 @@ export function useUpdateEscrow({
               : payload.platformFee,
           trustline: {
             address: payload.trustline.address,
+            symbol: payload.trustline.symbol,
           },
           roles: payload.roles,
-          milestones: payload.milestones.map((milestone, index) => ({
+          milestones: payload.milestones.map((milestone, index: number) => ({
             ...milestone,
             amount:
               typeof milestone.amount === "string"
@@ -240,10 +239,7 @@ export function useUpdateEscrow({
         ...selectedEscrow,
         ...finalPayload.escrow,
         trustline: {
-          name:
-            selectedEscrow.trustline?.name ||
-            (selectedEscrow.trustline?.address as string) ||
-            "",
+          symbol: selectedEscrow?.trustline?.symbol || "",
           address: finalPayload.escrow.trustline.address,
         },
       };

package/templates/escrows/multi-release/withdraw-remaining-funds/dialog/WithdrawRemainingFunds.tsx

@@ -145,7 +145,7 @@ export const WithdrawRemainingFundsDialog = () => {
                   <span className="font-bold">Total Balance: </span>
                   {formatCurrency(
                     selectedEscrow?.balance || 0,
-                    selectedEscrow?.trustline.name || ""
+                    selectedEscrow?.trustline.symbol || ""
                   )}
                 </p>
               </div>

package/templates/escrows/multi-release/withdraw-remaining-funds/form/WithdrawRemainingFunds.tsx

@@ -125,7 +125,7 @@ export const WithdrawRemainingFundsForm = () => {
               <span className="font-bold">Total Balance: </span>
               {formatCurrency(
                 selectedEscrow?.balance || 0,
-                selectedEscrow?.trustline.name || ""
+                selectedEscrow?.trustline.symbol || ""
               )}
             </p>
           </div>

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

@@ -466,6 +466,7 @@ export const InitializeEscrowDialog = () => {
                       onClick={() => handleRemoveMilestone(index)}
                       className="p-2 bg-transparent text-destructive rounded-md border-none shadow-none hover:bg-transparent hover:shadow-none hover:text-destructive focus:ring-0 active:ring-0 self-start sm:self-center cursor-pointer"
                       disabled={milestones.length === 1}
+                      type="button"
                     >
                       <Trash2 className="h-5 w-5" />
                     </Button>

package/templates/escrows/single-release/initialize-escrow/form/InitializeEscrow.tsx

@@ -445,6 +445,7 @@ export const InitializeEscrowForm = () => {
                   onClick={() => handleRemoveMilestone(index)}
                   className="p-2 bg-transparent text-destructive rounded-md border-none shadow-none hover:bg-transparent hover:shadow-none hover:text-destructive focus:ring-0 active:ring-0 self-start sm:self-center cursor-pointer"
                   disabled={milestones.length === 1}
+                  type="button"
                 >
                   <Trash2 className="h-5 w-5" />
                 </Button>

package/templates/escrows/single-release/resolve-dispute/dialog/ResolveDispute.tsx

@@ -145,7 +145,7 @@ export const ResolveDisputeDialog = () => {
                   <span className="font-bold">Total Balance: </span>
                   {formatCurrency(
                     selectedEscrow?.balance || 0,
-                    selectedEscrow?.trustline.name || ""
+                    selectedEscrow?.trustline.symbol || ""
                   )}
                 </p>
               </div>

package/templates/escrows/single-release/update-escrow/shared/useUpdateEscrow.ts

@@ -50,7 +50,6 @@ export function useUpdateEscrow({
       amount: selectedEscrow?.amount as unknown as number | string | undefined,
       trustline: {
         address: selectedEscrow?.trustline?.address || "",
-        symbol: selectedEscrow?.trustline?.name || "",
       },
       roles: {
         approver: selectedEscrow?.roles?.approver || "",
@@ -87,7 +86,6 @@ export function useUpdateEscrow({
         "",
       trustline: {
         address: selectedEscrow?.trustline?.address || "",
-        symbol: selectedEscrow?.trustline?.name || "",
       },
       roles: {
         approver: selectedEscrow?.roles?.approver || "",
@@ -181,6 +179,7 @@ export function useUpdateEscrow({
               : payload.amount,
           trustline: {
             address: payload.trustline.address,
+            symbol: selectedEscrow?.trustline?.symbol || "",
           },
           roles: payload.roles,
           milestones: payload.milestones.map((milestone, index) => ({
@@ -210,10 +209,7 @@ export function useUpdateEscrow({
         ...selectedEscrow,
         ...finalPayload.escrow,
         trustline: {
-          name:
-            selectedEscrow.trustline?.name ||
-            (selectedEscrow.trustline?.address as string) ||
-            "",
+          symbol: selectedEscrow.trustline?.address,
           address: finalPayload.escrow.trustline.address,
         },
       };

package/templates/wallet-kit/trustlines.ts

@@ -8,23 +8,23 @@
 export const trustlines = [
   // TESTNET
   {
-    name: "USDC",
+    symbol: "USDC",
     address: "GBBD47IF6LWK7P7MDEVSCWR7DPUWV3NY3DTQEVFL4NAT4AQH3ZLLFLA5",
     network: "testnet",
   },
   {
-    name: "EURC",
+    symbol: "EURC",
     address: "GA5ZSEJYB37JRC5AVCIA5MOP4RHTM335X2KGX3IHOJAPP5RE34K4KZVN",
     network: "testnet",
   },
   // MAINNET
   {
-    name: "USDC",
+    symbol: "USDC",
     address: "GA5ZSEJYB37JRC5AVCIA5MOP4RHTM335X2KGX3IHOJAPP5RE34K4KZVN",
     network: "mainnet",
   },
   {
-    name: "EURC",
+    symbol: "EURC",
     address: "GDHU6WRG4IEQXM5NZ4BMPKOXHW76MZM4Y2IEMFDVXBSDP6SJY4ITNPP2",
     network: "mainnet",
   },
@@ -37,7 +37,7 @@ export const trustlineOptions = Array.from(
       .filter((trustline) => trustline.network === "testnet")
       .map((trustline) => [
         trustline.address,
-        { value: trustline.address, label: trustline.name },
+        { value: trustline.address, label: trustline.symbol },
       ])
   ).values()
 );