@trustless-work/blocks 1.0.5 → 1.0.7

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

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

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) {