@trustless-work/blocks 1.0.6 → 1.0.7

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

@@ -22,6 +22,7 @@ import { useInitializeEscrow } from "./useInitializeEscrow";
 import { Trash2, DollarSign, Percent, Loader2 } from "lucide-react";
 import Link from "next/link";
 import { trustlineOptions } from "@/components/tw-blocks/wallet-kit/trustlines";
+import { Separator } from "__UI_BASE__/separator";
 
 export const InitializeEscrowForm = () => {
   const {
@@ -86,7 +87,7 @@ export const InitializeEscrowForm = () => {
   return (
     <Form {...form}>
       <form onSubmit={handleSubmit} className="flex flex-col space-y-6">
-        <Card className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 p-4">
+        <Card className="flex w-full max-w-3xl flex-col sm:flex-row justify-between items-start sm:items-center gap-4 p-4">
           <Link
             className="flex-1"
             href="https://docs.trustlesswork.com/trustless-work/technology-overview/escrow-types"
@@ -111,7 +112,7 @@ export const InitializeEscrowForm = () => {
             </Button>
           )}
         </Card>
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
           <FormField
             control={form.control}
             name="title"
@@ -155,7 +156,9 @@ export const InitializeEscrowForm = () => {
               </FormItem>
             )}
           />
+        </div>
 
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
           <FormField
             control={form.control}
             name="trustline.address"
@@ -192,6 +195,34 @@ export const InitializeEscrowForm = () => {
               </FormItem>
             )}
           />
+
+          <FormField
+            control={form.control}
+            name="platformFee"
+            render={() => (
+              <FormItem>
+                <FormLabel className="flex items-center">
+                  Platform Fee
+                  <span className="text-destructive ml-1">*</span>
+                </FormLabel>
+                <FormControl>
+                  <div className="relative">
+                    <Percent
+                      className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500"
+                      size={18}
+                    />
+                    <Input
+                      placeholder="Enter platform fee"
+                      className="pl-10"
+                      value={form.watch("platformFee")?.toString() || ""}
+                      onChange={handlePlatformFeeChange}
+                    />
+                  </div>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
         </div>
 
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
@@ -301,7 +332,7 @@ export const InitializeEscrowForm = () => {
           />
         </div>
 
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+        <div className="grid grid-cols-1 gap-4">
           <FormField
             control={form.control}
             name="roles.platformAddress"
@@ -309,7 +340,7 @@ export const InitializeEscrowForm = () => {
               <FormItem>
                 <FormLabel className="flex items-center justify-between">
                   <span className="flex items-center">
-                    Platform Address
+                    Platform
                     <span className="text-destructive ml-1">*</span>
                   </span>
                 </FormLabel>
@@ -327,82 +358,6 @@ export const InitializeEscrowForm = () => {
               </FormItem>
             )}
           />
-          <FormField
-            control={form.control}
-            name="roles.receiver"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel className="flex items-center justify-between">
-                  <span className="flex items-center">
-                    Receiver<span className="text-destructive ml-1">*</span>
-                  </span>
-                </FormLabel>
-
-                <FormControl>
-                  <Input
-                    placeholder="Enter receiver address"
-                    {...field}
-                    onChange={(e) => {
-                      field.onChange(e);
-                    }}
-                  />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-        </div>
-
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
-          <FormField
-            control={form.control}
-            name="platformFee"
-            render={() => (
-              <FormItem>
-                <FormLabel className="flex items-center">
-                  Platform Fee<span className="text-destructive ml-1">*</span>
-                </FormLabel>
-                <FormControl>
-                  <div className="relative">
-                    <Percent
-                      className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500"
-                      size={18}
-                    />
-                    <Input
-                      placeholder="Enter platform fee"
-                      className="pl-10"
-                      value={form.watch("platformFee")?.toString() || ""}
-                      onChange={handlePlatformFeeChange}
-                    />
-                  </div>
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-
-          <FormField
-            control={form.control}
-            name="receiverMemo"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel className="flex items-center">
-                  Receiver Memo (opcional)
-                </FormLabel>
-                <FormControl>
-                  <Input
-                    type="text"
-                    placeholder="Enter the escrow receiver Memo"
-                    {...field}
-                    onChange={(e) => {
-                      field.onChange(e);
-                    }}
-                  />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
         </div>
 
         <FormField
@@ -432,20 +387,33 @@ export const InitializeEscrowForm = () => {
             Milestones<span className="text-destructive ml-1">*</span>
           </FormLabel>
           {milestones.map((milestone, index) => (
-            <div key={index} className="space-y-4">
-              <div className="flex flex-col sm:flex-row items-start sm:items-center space-y-2 sm:space-y-0 sm:space-x-4">
-                <Input
-                  placeholder="Milestone Description"
-                  value={milestone.description}
-                  className="w-full sm:w-3/5"
-                  onChange={(e) => {
-                    const updatedMilestones = [...milestones];
-                    updatedMilestones[index].description = e.target.value;
-                    form.setValue("milestones", updatedMilestones);
-                  }}
-                />
+            <div key={index} className="space-y-4 max-w-3xl">
+              <div className="grid grid-cols-1 md:grid-cols-12 gap-4 items-center">
+                <div className="md:col-span-4">
+                  <Input
+                    placeholder="Enter receiver address"
+                    value={milestone.receiver}
+                    onChange={(e) => {
+                      const updatedMilestones = [...milestones];
+                      updatedMilestones[index].receiver = e.target.value;
+                      form.setValue("milestones", updatedMilestones);
+                    }}
+                  />
+                </div>
+
+                <div className="md:col-span-4">
+                  <Input
+                    placeholder="Milestone description"
+                    value={milestone.description}
+                    onChange={(e) => {
+                      const updatedMilestones = [...milestones];
+                      updatedMilestones[index].description = e.target.value;
+                      form.setValue("milestones", updatedMilestones);
+                    }}
+                  />
+                </div>
 
-                <div className="relative w-full sm:w-2/5">
+                <div className="md:col-span-3 relative">
                   <DollarSign
                     className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500"
                     size={18}
@@ -458,21 +426,29 @@ export const InitializeEscrowForm = () => {
                   />
                 </div>
 
-                <Button
-                  onClick={() => handleRemoveMilestone(index)}
-                  className="p-2 bg-transparent text-red-500 rounded-md border-none shadow-none hover:bg-transparent hover:shadow-none hover:text-red-500 focus:ring-0 active:ring-0 self-start sm:self-center"
-                  disabled={milestones.length === 1}
-                  type="button"
-                >
-                  <Trash2 className="h-5 w-5" />
-                </Button>
+                <div className="md:col-span-1 flex justify-end">
+                  <Button
+                    onClick={() => handleRemoveMilestone(index)}
+                    className="p-2 bg-transparent text-red-500 hover:text-red-600"
+                    disabled={milestones.length === 1}
+                    type="button"
+                  >
+                    <Trash2 className="h-5 w-5" />
+                  </Button>
+                </div>
               </div>
 
+              {/* Separator */}
+              {index < milestones.length - 1 && (
+                <Separator className="w-full" />
+              )}
+
+              {/* Add button */}
               {index === milestones.length - 1 && (
                 <div className="flex justify-end mt-4">
                   <Button
                     disabled={isAnyMilestoneEmpty}
-                    className="w-full md:w-1/4"
+                    className="w-full md:w-fit md:min-w-40 cursor-pointer"
                     variant="outline"
                     onClick={handleAddMilestone}
                     type="button"

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

@@ -50,14 +50,6 @@ export const useInitializeEscrowSchema = () => {
           .refine((value) => isValidWallet(value), {
             message: "Dispute resolver must be a valid wallet.",
           }),
-        receiver: z
-          .string()
-          .min(1, {
-            message: "Receiver address is required.",
-          })
-          .refine((value) => isValidWallet(value), {
-            message: "Receiver address must be a valid wallet.",
-          }),
       }),
       engagementId: z.string().min(1, {
         message: "Engagement is required.",
@@ -104,16 +96,6 @@ export const useInitializeEscrowSchema = () => {
             message: "Platform fee can have a maximum of 2 decimal places.",
           }
         ),
-      receiverMemo: z
-        .string()
-        .optional()
-        .refine((val) => !val || val.length >= 1, {
-          message: "Receiver Memo must be at least 1.",
-        })
-        .refine((val) => !val || /^[1-9][0-9]*$/.test(val), {
-          message:
-            "Receiver Memo must be a whole number greater than 0 (no decimals).",
-        }),
     });
   };
 
@@ -124,6 +106,14 @@ export const useInitializeEscrowSchema = () => {
       milestones: z
         .array(
           z.object({
+            receiver: z
+              .string()
+              .min(1, {
+                message: "Receiver address is required.",
+              })
+              .refine((value) => isValidWallet(value), {
+                message: "Receiver address must be a valid wallet.",
+              }),
             description: z.string().min(1, {
               message: "Milestone description is required.",
             }),

package/templates/escrows/multi-release/initialize-escrow/shared/useInitializeEscrow.ts

@@ -34,7 +34,6 @@ export function useInitializeEscrow() {
       title: "",
       description: "",
       platformFee: undefined,
-      receiverMemo: "",
       trustline: {
         address: "",
       },
@@ -42,25 +41,27 @@ export function useInitializeEscrow() {
         approver: "",
         serviceProvider: "",
         platformAddress: "",
-        receiver: "",
         releaseSigner: "",
         disputeResolver: "",
       },
-      milestones: [{ description: "", amount: "" }],
+      milestones: [{ receiver: "", description: "", amount: "" }],
     },
     mode: "onChange",
   });
 
   const milestones = form.watch("milestones");
   const isAnyMilestoneEmpty = milestones.some(
-    (milestone) => milestone.description === ""
+    (milestone) =>
+      milestone.description === "" ||
+      milestone.receiver === "" ||
+      milestone.amount === ""
   );
 
   const handleAddMilestone = () => {
     const currentMilestones = form.getValues("milestones");
     const updatedMilestones = [
       ...currentMilestones,
-      { description: "", amount: "" },
+      { receiver: "", description: "", amount: "" },
     ];
     form.setValue("milestones", updatedMilestones);
   };
@@ -79,7 +80,6 @@ export function useInitializeEscrow() {
       title: "Design Landing Page",
       description: "Landing for the new product of the company.",
       platformFee: 5,
-      receiverMemo: "123",
       trustline: {
         address: usdc?.value || "",
       },
@@ -87,14 +87,25 @@ export function useInitializeEscrow() {
         approver: walletAddress || "",
         serviceProvider: walletAddress || "",
         platformAddress: walletAddress || "",
-        receiver: walletAddress || "",
         releaseSigner: walletAddress || "",
         disputeResolver: walletAddress || "",
       },
       milestones: [
-        { description: "Design the wireframe", amount: 2 },
-        { description: "Develop the wireframe", amount: 2 },
-        { description: "Deploy the wireframe", amount: 2 },
+        {
+          receiver: walletAddress || "",
+          description: "Design the wireframe",
+          amount: 2,
+        },
+        {
+          receiver: walletAddress || "",
+          description: "Develop the wireframe",
+          amount: 2,
+        },
+        {
+          receiver: walletAddress || "",
+          description: "Deploy the wireframe",
+          amount: 2,
+        },
       ],
     };
 
@@ -105,7 +116,6 @@ export function useInitializeEscrow() {
 
     // Explicitly set the trustline field
     form.setValue("trustline.address", usdc?.value || "");
-    form.setValue("trustline.decimals", 10000000);
   };
 
   const handleSubmit = form.handleSubmit(async (payload) => {
@@ -124,7 +134,6 @@ export function useInitializeEscrow() {
           typeof payload.platformFee === "string"
             ? Number(payload.platformFee)
             : payload.platformFee,
-        receiverMemo: Number(payload.receiverMemo) ?? 0,
         signer: walletAddress || "",
         milestones: payload.milestones.map((milestone) => ({
           ...milestone,

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

@@ -26,7 +26,8 @@ export const ReleaseMilestoneButton = ({
   const { releaseFunds } = useEscrowsMutations();
   const { selectedEscrow, updateEscrow } = useEscrowContext();
   const dialogStates = useEscrowDialogs();
-  const { setAmounts } = useEscrowAmountContext();
+  const { setAmounts, setLastReleasedMilestoneIndex } =
+    useEscrowAmountContext();
   const { walletAddress } = useWalletContext();
   const [isSubmitting, setIsSubmitting] = React.useState(false);
 
@@ -87,6 +88,9 @@ export const ReleaseMilestoneButton = ({
         balance: (selectedEscrow?.balance || 0) - (selectedEscrow?.amount || 0),
       });
 
+      // Remember which milestone was released for the success dialog
+      setLastReleasedMilestoneIndex(Number(milestoneIndex));
+
       // Open success dialog
       dialogStates.successRelease.setIsOpen(true);
     } catch (error) {