@trustless-work/blocks 0.0.7 → 0.0.8

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

@@ -0,0 +1,254 @@
+import * as React from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useUpdateEscrowSchema } from "./schema";
+import { z } from "zod";
+import {
+  UpdateMultiReleaseEscrowPayload,
+  UpdateMultiReleaseEscrowResponse,
+  MultiReleaseMilestone,
+} from "@trustless-work/escrow/types";
+import { toast } from "sonner";
+import { useEscrowContext } from "@/components/tw-blocks/providers/EscrowProvider";
+import { useWalletContext } from "@/components/tw-blocks/wallet-kit/WalletProvider";
+import { useEscrowsMutations } from "@/components/tw-blocks/tanstack/useEscrowsMutations";
+import {
+  ErrorResponse,
+  handleError,
+} from "@/components/tw-blocks/handle-errors/handle";
+import { GetEscrowsFromIndexerResponse } from "@trustless-work/escrow/types";
+
+export function useUpdateEscrow() {
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
+
+  const { getMultiReleaseFormSchema } = useUpdateEscrowSchema();
+  const formSchema = getMultiReleaseFormSchema();
+
+  const { walletAddress } = useWalletContext();
+  const { selectedEscrow, setSelectedEscrow } = useEscrowContext();
+  const { updateEscrow } = useEscrowsMutations();
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      engagementId: selectedEscrow?.engagementId || "",
+      title: selectedEscrow?.title || "",
+      description: selectedEscrow?.description || "",
+      platformFee: selectedEscrow?.platformFee as unknown as
+        | number
+        | string
+        | undefined,
+      receiverMemo: selectedEscrow?.receiverMemo
+        ? String(selectedEscrow.receiverMemo)
+        : "",
+      trustline: {
+        address: selectedEscrow?.trustline?.address || "",
+        decimals: 10000000,
+      },
+      roles: {
+        approver: selectedEscrow?.roles?.approver || "",
+        serviceProvider: selectedEscrow?.roles?.serviceProvider || "",
+        platformAddress: selectedEscrow?.roles?.platformAddress || "",
+        receiver: selectedEscrow?.roles?.receiver || "",
+        releaseSigner: selectedEscrow?.roles?.releaseSigner || "",
+        disputeResolver: selectedEscrow?.roles?.disputeResolver || "",
+      },
+      milestones: (
+        (selectedEscrow?.milestones as MultiReleaseMilestone[]) ?? []
+      ).map((m) => ({
+        description: m?.description || "",
+        amount: m?.amount ?? 0,
+      })) || [
+        {
+          description: "",
+          amount: 0,
+        },
+      ],
+    },
+    mode: "onChange",
+  });
+
+  React.useEffect(() => {
+    if (!selectedEscrow) return;
+    form.reset({
+      engagementId: selectedEscrow?.engagementId || "",
+      title: selectedEscrow?.title || "",
+      description: selectedEscrow?.description || "",
+      platformFee:
+        (selectedEscrow?.platformFee as unknown as
+          | number
+          | string
+          | undefined) || "",
+      receiverMemo: selectedEscrow?.receiverMemo
+        ? String(selectedEscrow.receiverMemo)
+        : "",
+      trustline: {
+        address: selectedEscrow?.trustline?.address || "",
+        decimals: 10000000,
+      },
+      roles: {
+        approver: selectedEscrow?.roles?.approver || "",
+        serviceProvider: selectedEscrow?.roles?.serviceProvider || "",
+        platformAddress: selectedEscrow?.roles?.platformAddress || "",
+        receiver: selectedEscrow?.roles?.receiver || "",
+        releaseSigner: selectedEscrow?.roles?.releaseSigner || "",
+        disputeResolver: selectedEscrow?.roles?.disputeResolver || "",
+      },
+      milestones: (
+        (selectedEscrow?.milestones as MultiReleaseMilestone[]) ?? []
+      ).map((m) => ({
+        description: m?.description || "",
+        amount: m?.amount ?? "",
+      })) || [
+        {
+          description: "",
+          amount: "",
+        },
+      ],
+    });
+  }, [selectedEscrow, form]);
+
+  const milestones = form.watch("milestones");
+  const isAnyMilestoneEmpty = milestones.some((m) => m.description === "");
+
+  const handleAddMilestone = () => {
+    const current = form.getValues("milestones");
+    const updated = [...current, { description: "", amount: "" }];
+    form.setValue("milestones", updated);
+  };
+
+  const handleRemoveMilestone = (index: number) => {
+    const current = form.getValues("milestones");
+    const updated = current.filter((_, i) => i !== index);
+    form.setValue("milestones", updated);
+  };
+
+  const handleMilestoneAmountChange = (
+    index: number,
+    e: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    let rawValue = e.target.value;
+    rawValue = rawValue.replace(/[^0-9.]/g, "");
+
+    if (rawValue.split(".").length > 2) {
+      rawValue = rawValue.slice(0, -1);
+    }
+
+    // Limit to 2 decimal places
+    if (rawValue.includes(".")) {
+      const parts = rawValue.split(".");
+      if (parts[1] && parts[1].length > 2) {
+        rawValue = parts[0] + "." + parts[1].slice(0, 2);
+      }
+    }
+
+    // Always keep as string to allow partial input like "0." or "0.5"
+    const updatedMilestones = [...milestones];
+    updatedMilestones[index] = {
+      ...updatedMilestones[index],
+      amount: rawValue,
+    };
+    form.setValue("milestones", updatedMilestones);
+  };
+
+  const handlePlatformFeeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    let rawValue = e.target.value;
+    rawValue = rawValue.replace(/[^0-9.]/g, "");
+    if (rawValue.split(".").length > 2) rawValue = rawValue.slice(0, -1);
+    if (rawValue.includes(".")) {
+      const parts = rawValue.split(".");
+      if (parts[1] && parts[1].length > 2) {
+        rawValue = parts[0] + "." + parts[1].slice(0, 2);
+      }
+    }
+    form.setValue("platformFee", rawValue);
+  };
+
+  const handleSubmit = form.handleSubmit(async (payload) => {
+    try {
+      setIsSubmitting(true);
+
+      /**
+       * Create the final payload for the update escrow mutation
+       *
+       * @param payload - The payload from the form
+       * @returns The final payload for the update escrow mutation
+       */
+      const finalPayload: UpdateMultiReleaseEscrowPayload = {
+        contractId: selectedEscrow?.contractId || "",
+        signer: walletAddress || "",
+        escrow: {
+          engagementId: payload.engagementId,
+          title: payload.title,
+          description: payload.description,
+          platformFee:
+            typeof payload.platformFee === "string"
+              ? Number(payload.platformFee)
+              : payload.platformFee,
+          receiverMemo: payload.receiverMemo
+            ? Number(payload.receiverMemo)
+            : undefined,
+          trustline: {
+            address: payload.trustline.address,
+            decimals: 10000000,
+          },
+          roles: payload.roles,
+          milestones: payload.milestones.map((milestone) => ({
+            ...milestone,
+            amount:
+              typeof milestone.amount === "string"
+                ? Number(milestone.amount)
+                : milestone.amount,
+          })),
+        },
+      };
+
+      /**
+       * Call the update escrow mutation
+       *
+       * @param payload - The final payload for the update escrow mutation
+       * @param type - The type of the escrow
+       * @param address - The address of the escrow
+       */
+      (await updateEscrow.mutateAsync({
+        payload: finalPayload,
+        type: "multi-release",
+        address: walletAddress || "",
+      })) as UpdateMultiReleaseEscrowResponse;
+
+      if (!selectedEscrow) return;
+
+      const nextSelectedEscrow: GetEscrowsFromIndexerResponse = {
+        ...selectedEscrow,
+        ...finalPayload.escrow,
+        trustline: {
+          name:
+            selectedEscrow.trustline?.name ||
+            (selectedEscrow.trustline?.address as string) ||
+            "",
+          address: finalPayload.escrow.trustline.address,
+          decimals: finalPayload.escrow.trustline.decimals,
+        },
+      };
+
+      setSelectedEscrow(nextSelectedEscrow);
+      toast.success("Escrow updated successfully");
+    } catch (error) {
+      toast.error(handleError(error as ErrorResponse).message);
+    } finally {
+      setIsSubmitting(false);
+    }
+  });
+
+  return {
+    form,
+    isSubmitting,
+    milestones,
+    isAnyMilestoneEmpty,
+    handleSubmit,
+    handleAddMilestone,
+    handleRemoveMilestone,
+    handleMilestoneAmountChange,
+    handlePlatformFeeChange,
+  };
+}

package/templates/escrows/{single-release → single-multi-release}/approve-milestone/button/ApproveMilestone.tsx

@@ -2,7 +2,10 @@ import * as React from "react";
 import { Button } from "__UI_BASE__/button";
 import { useEscrowsMutations } from "@/components/tw-blocks/tanstack/useEscrowsMutations";
 import { useWalletContext } from "@/components/tw-blocks/wallet-kit/WalletProvider";
-import { ApproveMilestonePayload } from "@trustless-work/escrow/types";
+import {
+  ApproveMilestonePayload,
+  MultiReleaseMilestone,
+} from "@trustless-work/escrow/types";
 import { toast } from "sonner";
 import {
   ErrorResponse,
@@ -15,9 +18,9 @@ type ApproveMilestoneButtonProps = {
   milestoneIndex: number | string;
 };
 
-export default function ApproveMilestoneButton({
+export const ApproveMilestoneButton = ({
   milestoneIndex,
-}: ApproveMilestoneButtonProps) {
+}: ApproveMilestoneButtonProps) => {
   const { approveMilestone } = useEscrowsMutations();
   const { selectedEscrow, updateEscrow } = useEscrowContext();
   const { walletAddress } = useWalletContext();
@@ -49,7 +52,7 @@ export default function ApproveMilestoneButton({
        */
       await approveMilestone.mutateAsync({
         payload,
-        type: "single-release",
+        type: selectedEscrow?.type || "multi-release",
         address: walletAddress || "",
       });
 
@@ -58,8 +61,18 @@ export default function ApproveMilestoneButton({
       updateEscrow({
         ...selectedEscrow,
         milestones: selectedEscrow?.milestones.map((milestone, index) => {
-          if (index === Number(milestoneIndex)) {
-            return { ...milestone, approved: true };
+          if (index === Number(payload.milestoneIndex)) {
+            if (selectedEscrow?.type === "single-release") {
+              return { ...milestone, approved: true };
+            } else {
+              return {
+                ...milestone,
+                flags: {
+                  ...(milestone as MultiReleaseMilestone).flags,
+                  approved: true,
+                },
+              };
+            }
           }
           return milestone;
         }),
@@ -88,4 +101,4 @@ export default function ApproveMilestoneButton({
       )}
     </Button>
   );
-}
+};

package/templates/escrows/{single-release → single-multi-release}/approve-milestone/dialog/ApproveMilestone.tsx

@@ -16,7 +16,7 @@ import {
   DialogTrigger,
 } from "__UI_BASE__/dialog";
 import { Loader2 } from "lucide-react";
-import { useApproveMilestone } from "./useApproveMilestone";
+import { useApproveMilestone } from "../useApproveMilestone";
 import { useEscrowContext } from "@/components/tw-blocks/providers/EscrowProvider";
 import {
   Select,
@@ -26,7 +26,7 @@ import {
   SelectValue,
 } from "__UI_BASE__/select";
 
-export default function ApproveMilestoneDialog() {
+export const ApproveMilestoneDialog = () => {
   const { form, handleSubmit, isSubmitting } = useApproveMilestone();
   const { selectedEscrow } = useEscrowContext();
 
@@ -99,4 +99,4 @@ export default function ApproveMilestoneDialog() {
       </DialogContent>
     </Dialog>
   );
-}
+};

package/templates/escrows/{single-release → single-multi-release}/approve-milestone/form/ApproveMilestone.tsx

@@ -8,7 +8,7 @@ import {
   FormMessage,
 } from "__UI_BASE__/form";
 import { Button } from "__UI_BASE__/button";
-import { useApproveMilestone } from "./useApproveMilestone";
+import { useApproveMilestone } from "../useApproveMilestone";
 import { Loader2 } from "lucide-react";
 import { useEscrowContext } from "@/components/tw-blocks/providers/EscrowProvider";
 import {
@@ -19,7 +19,7 @@ import {
   SelectValue,
 } from "__UI_BASE__/select";
 
-export default function ApproveMilestoneForm() {
+export const ApproveMilestoneForm = () => {
   const { form, handleSubmit, isSubmitting } = useApproveMilestone();
   const { selectedEscrow } = useEscrowContext();
 
@@ -77,4 +77,4 @@ export default function ApproveMilestoneForm() {
       </form>
     </Form>
   );
-}
+};

package/templates/escrows/{single-release/approve-milestone/shared → single-multi-release/approve-milestone}/useApproveMilestone.ts

@@ -3,7 +3,10 @@ import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { approveMilestoneSchema, type ApproveMilestoneValues } from "./schema";
 import { toast } from "sonner";
-import { ApproveMilestonePayload } from "@trustless-work/escrow";
+import {
+  ApproveMilestonePayload,
+  MultiReleaseMilestone,
+} from "@trustless-work/escrow";
 import { useEscrowContext } from "@/components/tw-blocks/providers/EscrowProvider";
 import { useEscrowsMutations } from "@/components/tw-blocks/tanstack/useEscrowsMutations";
 import {
@@ -31,12 +34,6 @@ export function useApproveMilestone() {
     try {
       setIsSubmitting(true);
 
-      /**
-       * Create the final payload for the approve milestone mutation
-       *
-       * @param payload - The payload from the form
-       * @returns The final payload for the approve milestone mutation
-       */
       const finalPayload: ApproveMilestonePayload = {
         contractId: selectedEscrow?.contractId || "",
         milestoneIndex: payload.milestoneIndex,
@@ -44,16 +41,9 @@ export function useApproveMilestone() {
         newFlag: true,
       };
 
-      /**
-       * Call the approve milestone mutation
-       *
-       * @param payload - The final payload for the approve milestone mutation
-       * @param type - The type of the escrow
-       * @param address - The address of the escrow
-       */
       await approveMilestone.mutateAsync({
         payload: finalPayload,
-        type: "single-release",
+        type: selectedEscrow?.type || "multi-release",
         address: walletAddress || "",
       });
 
@@ -63,7 +53,17 @@ export function useApproveMilestone() {
         ...selectedEscrow,
         milestones: selectedEscrow?.milestones.map((milestone, index) => {
           if (index === Number(payload.milestoneIndex)) {
-            return { ...milestone, approved: true };
+            if (selectedEscrow?.type === "single-release") {
+              return { ...milestone, approved: true };
+            } else {
+              return {
+                ...milestone,
+                flags: {
+                  ...(milestone as MultiReleaseMilestone).flags,
+                  approved: true,
+                },
+              };
+            }
           }
           return milestone;
         }),

package/templates/escrows/{single-release → single-multi-release}/change-milestone-status/button/ChangeMilestoneStatus.tsx

@@ -17,11 +17,11 @@ type ChangeMilestoneStatusButtonProps = {
   milestoneIndex: number | string;
 };
 
-export default function ChangeMilestoneStatusButton({
+export const ChangeMilestoneStatusButton = ({
   status,
   evidence,
   milestoneIndex,
-}: ChangeMilestoneStatusButtonProps) {
+}: ChangeMilestoneStatusButtonProps) => {
   const { changeMilestoneStatus } = useEscrowsMutations();
   const { selectedEscrow } = useEscrowContext();
   const { walletAddress } = useWalletContext();
@@ -61,7 +61,7 @@ export default function ChangeMilestoneStatusButton({
        */
       await changeMilestoneStatus.mutateAsync({
         payload,
-        type: "single-release",
+        type: selectedEscrow?.type || "multi-release",
         address: walletAddress || "",
       });
 
@@ -90,4 +90,4 @@ export default function ChangeMilestoneStatusButton({
       )}
     </Button>
   );
-}
+};

package/templates/escrows/{single-release → single-multi-release}/change-milestone-status/dialog/ChangeMilestoneStatus.tsx

@@ -18,7 +18,7 @@ import {
   DialogTrigger,
 } from "__UI_BASE__/dialog";
 import { Loader2 } from "lucide-react";
-import { useChangeMilestoneStatus } from "./useChangeMilestoneStatus";
+import { useChangeMilestoneStatus } from "../useChangeMilestoneStatus";
 import { useEscrowContext } from "@/components/tw-blocks/providers/EscrowProvider";
 import {
   Select,
@@ -28,13 +28,13 @@ import {
   SelectValue,
 } from "__UI_BASE__/select";
 
-export default function ChangeMilestoneStatusDialog({
+export const ChangeMilestoneStatusDialog = ({
   showSelectMilestone = false,
   milestoneIndex,
 }: {
   showSelectMilestone?: boolean;
   milestoneIndex?: number | string;
-}) {
+}) => {
   const { form, handleSubmit, isSubmitting } = useChangeMilestoneStatus();
   const { selectedEscrow } = useEscrowContext();
 
@@ -164,4 +164,4 @@ export default function ChangeMilestoneStatusDialog({
       </DialogContent>
     </Dialog>
   );
-}
+};

package/templates/escrows/{single-release → single-multi-release}/change-milestone-status/form/ChangeMilestoneStatus.tsx

@@ -10,7 +10,7 @@ import {
 import { Input } from "__UI_BASE__/input";
 import { Textarea } from "__UI_BASE__/textarea";
 import { Button } from "__UI_BASE__/button";
-import { useChangeMilestoneStatus } from "./useChangeMilestoneStatus";
+import { useChangeMilestoneStatus } from "../useChangeMilestoneStatus";
 import { Loader2 } from "lucide-react";
 import { useEscrowContext } from "@/components/tw-blocks/providers/EscrowProvider";
 import {
@@ -21,7 +21,7 @@ import {
   SelectValue,
 } from "__UI_BASE__/select";
 
-export default function ChangeMilestoneStatusForm() {
+export const ChangeMilestoneStatusForm = () => {
   const { form, handleSubmit, isSubmitting } = useChangeMilestoneStatus();
   const { selectedEscrow } = useEscrowContext();
 
@@ -111,4 +111,4 @@ export default function ChangeMilestoneStatusForm() {
       </form>
     </Form>
   );
-}
+};

package/templates/escrows/{single-release/change-milestone-status/shared → single-multi-release/change-milestone-status}/useChangeMilestoneStatus.ts

@@ -59,7 +59,7 @@ export function useChangeMilestoneStatus() {
        */
       await changeMilestoneStatus.mutateAsync({
         payload: finalPayload,
-        type: "single-release",
+        type: selectedEscrow?.type || "multi-release",
         address: walletAddress || "",
       });
 

package/templates/escrows/{single-release → single-multi-release}/fund-escrow/button/FundEscrow.tsx

@@ -15,7 +15,7 @@ type FundEscrowButtonProps = {
   amount: number;
 };
 
-export default function FundEscrowButton({ amount }: FundEscrowButtonProps) {
+export const FundEscrowButton = ({ amount }: FundEscrowButtonProps) => {
   const { fundEscrow } = useEscrowsMutations();
   const { selectedEscrow, updateEscrow } = useEscrowContext();
   const { walletAddress } = useWalletContext();
@@ -55,7 +55,7 @@ export default function FundEscrowButton({ amount }: FundEscrowButtonProps) {
        */
       await fundEscrow.mutateAsync({
         payload,
-        type: "single-release",
+        type: selectedEscrow?.type || "multi-release",
         address: walletAddress || "",
       });
 
@@ -88,4 +88,4 @@ export default function FundEscrowButton({ amount }: FundEscrowButtonProps) {
       )}
     </Button>
   );
-}
+};

package/templates/escrows/{single-release → single-multi-release}/fund-escrow/dialog/FundEscrow.tsx

@@ -17,9 +17,9 @@ import {
   DialogTrigger,
 } from "__UI_BASE__/dialog";
 import { Loader2 } from "lucide-react";
-import { useFundEscrow } from "./useFundEscrow";
+import { useFundEscrow } from "../useFundEscrow";
 
-export default function FundEscrowDialog() {
+export const FundEscrowDialog = () => {
   const { form, handleSubmit, isSubmitting } = useFundEscrow();
 
   return (
@@ -74,4 +74,4 @@ export default function FundEscrowDialog() {
       </DialogContent>
     </Dialog>
   );
-}
+};

package/templates/escrows/{single-release → single-multi-release}/fund-escrow/form/FundEscrow.tsx

@@ -9,10 +9,10 @@ import {
 } from "__UI_BASE__/form";
 import { Input } from "__UI_BASE__/input";
 import { Button } from "__UI_BASE__/button";
-import { useFundEscrow } from "./useFundEscrow";
+import { useFundEscrow } from "../useFundEscrow";
 import { Loader2 } from "lucide-react";
 
-export default function FundEscrowForm() {
+export const FundEscrowForm = () => {
   const { form, handleSubmit, isSubmitting } = useFundEscrow();
 
   return (
@@ -51,4 +51,4 @@ export default function FundEscrowForm() {
       </form>
     </Form>
   );
-}
+};

package/templates/escrows/{single-release/fund-escrow/shared → single-multi-release/fund-escrow}/useFundEscrow.ts

@@ -55,7 +55,7 @@ export function useFundEscrow() {
        */
       await fundEscrow.mutateAsync({
         payload: finalPayload,
-        type: "single-release",
+        type: selectedEscrow?.type || "multi-release",
         address: walletAddress || "",
       });
 

package/templates/escrows/single-release/dispute-escrow/button/DisputeEscrow.tsx

@@ -11,7 +11,7 @@ import {
 import { useEscrowContext } from "@/components/tw-blocks/providers/EscrowProvider";
 import { Loader2 } from "lucide-react";
 
-export default function DisputeEscrowButton() {
+export const DisputeEscrowButton = () => {
   const { startDispute } = useEscrowsMutations();
   const { selectedEscrow, updateEscrow } = useEscrowContext();
   const { walletAddress } = useWalletContext();
@@ -77,4 +77,4 @@ export default function DisputeEscrowButton() {
       )}
     </Button>
   );
-}
+};

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

@@ -30,7 +30,7 @@ import {
   DialogTrigger,
 } from "__UI_BASE__/dialog";
 
-export function InitializeEscrowDialog() {
+export const InitializeEscrowDialog = () => {
   const {
     form,
     isSubmitting,
@@ -39,6 +39,7 @@ export function InitializeEscrowDialog() {
     handleSubmit,
     handleAddMilestone,
     handleRemoveMilestone,
+    fillTemplateForm,
   } = useInitializeEscrow();
 
   const handleAmountChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -107,10 +108,19 @@ export function InitializeEscrowDialog() {
                   </h2>
                 </div>
                 <p className="text-muted-foreground mt-1">
-                  A single payment will be released upon completion of all
-                  milestones
+                  Fill out the form to initialize a single release escrow
                 </p>
               </Link>
+              {process.env.NODE_ENV !== "production" && (
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={fillTemplateForm}
+                  className="cursor-pointer"
+                >
+                  Autofill
+                </Button>
+              )}
             </Card>
             <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
               <FormField
@@ -521,6 +531,4 @@ export function InitializeEscrowDialog() {
       </DialogContent>
     </Dialog>
   );
-}
-
-export default InitializeEscrowDialog;
+};