@trustless-work/blocks 1.1.7 → 1.2.0

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.7",
+  "version": "1.2.0",
   "author": "Trustless Work",
   "keywords": [
     "react",

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/initialize-escrow/shared/useInitializeEscrow.ts

@@ -17,7 +17,9 @@ import {
 import { useEscrowContext } from "@/components/tw-blocks/providers/EscrowProvider";
 import { trustlineOptions } from "@/components/tw-blocks/wallet-kit/trustlines";
 
-export function useInitializeEscrow({ onSuccess }: { onSuccess?: () => void } = {}) {
+export function useInitializeEscrow({
+  onSuccess,
+}: { onSuccess?: () => void } = {}) {
   const [isSubmitting, setIsSubmitting] = React.useState(false);
 
   const { getMultiReleaseFormSchema } = useInitializeEscrowSchema();
@@ -122,6 +124,15 @@ export function useInitializeEscrow({ onSuccess }: { onSuccess?: () => void } =
     try {
       setIsSubmitting(true);
 
+      const trustline = trustlineOptions.find(
+        (t) => t.value === payload.trustline.address
+      );
+
+      if (!trustline) {
+        toast.error("Invalid trustline address");
+        return;
+      }
+
       /**
        * Create the final payload for the initialize escrow mutation
        *
@@ -142,6 +153,10 @@ export function useInitializeEscrow({ onSuccess }: { onSuccess?: () => void } =
               ? Number(milestone.amount)
               : milestone.amount,
         })),
+        trustline: {
+          address: trustline.value,
+          symbol: trustline.label,
+        },
       };
 
       /**

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/single-release/initialize-escrow/shared/useInitializeEscrow.ts

@@ -17,7 +17,9 @@ import {
 import { useEscrowContext } from "@/components/tw-blocks/providers/EscrowProvider";
 import { trustlineOptions } from "@/components/tw-blocks/wallet-kit/trustlines";
 
-export function useInitializeEscrow({ onSuccess }: { onSuccess?: () => void } = {}) {
+export function useInitializeEscrow({
+  onSuccess,
+}: { onSuccess?: () => void } = {}) {
   const [isSubmitting, setIsSubmitting] = React.useState(false);
 
   const { getSingleReleaseFormSchema } = useInitializeEscrowSchema();
@@ -108,6 +110,15 @@ export function useInitializeEscrow({ onSuccess }: { onSuccess?: () => void } =
     try {
       setIsSubmitting(true);
 
+      const trustline = trustlineOptions.find(
+        (t) => t.value === payload.trustline.address
+      );
+
+      if (!trustline) {
+        toast.error("Invalid trustline address");
+        return;
+      }
+
       /**
        * Create the final payload for the initialize escrow mutation
        *
@@ -126,6 +137,10 @@ export function useInitializeEscrow({ onSuccess }: { onSuccess?: () => void } =
             : payload.platformFee,
         signer: walletAddress || "",
         milestones: payload.milestones,
+        trustline: {
+          address: trustline.value,
+          symbol: trustline.label,
+        },
       };
 
       /**