@trustless-work/blocks 0.0.7 → 0.0.8

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

@@ -0,0 +1,156 @@
+import * as React from "react";
+import {
+  Form,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormMessage,
+} from "__UI_BASE__/form";
+import { Input } from "__UI_BASE__/input";
+import { Button } from "__UI_BASE__/button";
+import { useResolveDispute } from "./useResolveDispute";
+import { useEscrowContext } from "@/components/tw-blocks/providers/EscrowProvider";
+import { Loader2 } from "lucide-react";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "__UI_BASE__/select";
+import { formatCurrency } from "../../../../helpers/format.helper";
+
+export const ResolveDisputeForm = ({
+  showSelectMilestone = false,
+  milestoneIndex,
+}: {
+  showSelectMilestone?: boolean;
+  milestoneIndex?: number | string;
+}) => {
+  const { form, handleSubmit, isSubmitting, totalAmount } = useResolveDispute();
+  const { selectedEscrow } = useEscrowContext();
+
+  React.useEffect(() => {
+    if (
+      !showSelectMilestone &&
+      milestoneIndex !== undefined &&
+      milestoneIndex !== null
+    ) {
+      form.setValue("milestoneIndex", String(milestoneIndex));
+    }
+  }, [showSelectMilestone, milestoneIndex, form]);
+
+  return (
+    <Form {...form}>
+      <form onSubmit={handleSubmit} className="flex flex-col space-y-6 w-full">
+        {showSelectMilestone && (
+          <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="grid grid-cols-1 lg:grid-cols-2 gap-4">
+          <FormField
+            control={form.control}
+            name="approverFunds"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Approver Funds</FormLabel>
+                <FormControl>
+                  <Input
+                    type="text"
+                    inputMode="decimal"
+                    placeholder="Enter approver funds"
+                    value={field.value as unknown as string}
+                    onChange={(e) => field.onChange(e.target.value)}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="receiverFunds"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Receiver Funds</FormLabel>
+                <FormControl>
+                  <Input
+                    type="text"
+                    inputMode="decimal"
+                    placeholder="Enter receiver funds"
+                    value={field.value as unknown as string}
+                    onChange={(e) => field.onChange(e.target.value)}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        </div>
+
+        <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">Resolving...</span>
+              </div>
+            ) : (
+              "Resolve"
+            )}
+          </Button>
+
+          <p className="text-xs text-muted-foreground">
+            <span className="font-bold">Total Amount: </span>
+            {formatCurrency(totalAmount, selectedEscrow?.trustline.name || "")}
+          </p>
+
+          <p className="text-xs text-muted-foreground">
+            <span className="font-bold">Total Balance: </span>
+            {formatCurrency(
+              selectedEscrow?.balance || 0,
+              selectedEscrow?.trustline.name || ""
+            )}
+          </p>
+        </div>
+      </form>
+    </Form>
+  );
+};

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

@@ -0,0 +1,85 @@
+import { z } from "zod";
+
+export const getFormSchema = () => {
+  return z.object({
+    approverFunds: z
+      .union([z.string(), z.number()])
+      .refine(
+        (val) => {
+          if (typeof val === "string") {
+            if (val === "" || val === "." || val.endsWith(".")) {
+              return true;
+            }
+            const numVal = Number(val);
+            return !isNaN(numVal) && numVal >= 0;
+          }
+          return val >= 0;
+        },
+        {
+          message: "Approver funds must be 0 or greater.",
+        }
+      )
+      .refine(
+        (val) => {
+          if (typeof val === "string") {
+            if (val === "" || val === "." || val.endsWith(".")) {
+              return true;
+            }
+            const numVal = Number(val);
+            if (isNaN(numVal)) return false;
+            const decimalPlaces = (numVal.toString().split(".")[1] || "")
+              .length;
+            return decimalPlaces <= 2;
+          }
+          const decimalPlaces = (val.toString().split(".")[1] || "").length;
+          return decimalPlaces <= 2;
+        },
+        {
+          message: "Approver funds can have a maximum of 2 decimal places.",
+        }
+      ),
+    receiverFunds: z
+      .union([z.string(), z.number()])
+      .refine(
+        (val) => {
+          if (typeof val === "string") {
+            if (val === "" || val === "." || val.endsWith(".")) {
+              return true;
+            }
+            const numVal = Number(val);
+            return !isNaN(numVal) && numVal >= 0;
+          }
+          return val >= 0;
+        },
+        {
+          message: "Receiver funds must be 0 or greater.",
+        }
+      )
+      .refine(
+        (val) => {
+          if (typeof val === "string") {
+            if (val === "" || val === "." || val.endsWith(".")) {
+              return true;
+            }
+            const numVal = Number(val);
+            if (isNaN(numVal)) return false;
+            const decimalPlaces = (numVal.toString().split(".")[1] || "")
+              .length;
+            return decimalPlaces <= 2;
+          }
+          const decimalPlaces = (val.toString().split(".")[1] || "").length;
+          return decimalPlaces <= 2;
+        },
+        {
+          message: "Receiver funds can have a maximum of 2 decimal places.",
+        }
+      ),
+    milestoneIndex: z
+      .string({ required_error: "Milestone is required" })
+      .min(1, { message: "Milestone is required" }),
+  });
+};
+
+export const resolveDisputeSchema = getFormSchema();
+
+export type ResolveDisputeValues = z.infer<typeof resolveDisputeSchema>;

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

@@ -0,0 +1,105 @@
+import * as React from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { resolveDisputeSchema, type ResolveDisputeValues } from "./schema";
+import { toast } from "sonner";
+import {
+  MultiReleaseResolveDisputePayload,
+  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 useResolveDispute() {
+  const { resolveDispute } = useEscrowsMutations();
+  const { selectedEscrow, updateEscrow } = useEscrowContext();
+  const { walletAddress } = useWalletContext();
+
+  const form = useForm<ResolveDisputeValues>({
+    resolver: zodResolver(resolveDisputeSchema),
+    defaultValues: {
+      approverFunds: 0,
+      receiverFunds: 0,
+      milestoneIndex: "0",
+    },
+    mode: "onChange",
+  });
+
+  const totalAmount = React.useMemo(() => {
+    if (selectedEscrow?.type !== "multi-release") return 0;
+    const milestones = selectedEscrow.milestones as MultiReleaseMilestone[];
+    return milestones.reduce(
+      (acc, milestone) => acc + Number(milestone.amount),
+      0
+    );
+  }, [selectedEscrow]);
+
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
+
+  const handleSubmit = form.handleSubmit(async (payload) => {
+    try {
+      setIsSubmitting(true);
+
+      /**
+       * Create the final payload for the resolve dispute mutation
+       *
+       * @param payload - The payload from the form
+       * @returns The final payload for the resolve dispute mutation
+       */
+      const finalPayload: MultiReleaseResolveDisputePayload = {
+        contractId: selectedEscrow?.contractId || "",
+        disputeResolver: walletAddress || "",
+        approverFunds: Number(payload.approverFunds),
+        receiverFunds: Number(payload.receiverFunds),
+        milestoneIndex: String(payload.milestoneIndex),
+      };
+
+      /**
+       * Call the resolve dispute mutation
+       *
+       * @param payload - The final payload for the resolve dispute mutation
+       * @param type - The type of the escrow
+       * @param address - The address of the escrow
+       */
+      await resolveDispute.mutateAsync({
+        payload: finalPayload,
+        type: "multi-release",
+        address: walletAddress || "",
+      });
+
+      toast.success("Dispute resolved successfully");
+
+      updateEscrow({
+        ...selectedEscrow,
+        milestones: selectedEscrow?.milestones.map((milestone, index) => {
+          if (index === Number(payload.milestoneIndex)) {
+            return {
+              ...milestone,
+              flags: {
+                ...(milestone as MultiReleaseMilestone).flags,
+                disputed: false,
+                resolved: true,
+              },
+            };
+          }
+          return milestone;
+        }),
+        balance:
+          selectedEscrow?.balance ||
+          Number(payload.approverFunds) + Number(payload.receiverFunds),
+      });
+    } catch (error) {
+      toast.error(handleError(error as ErrorResponse).message);
+    } finally {
+      setIsSubmitting(false);
+      form.reset();
+    }
+  });
+
+  return { form, handleSubmit, isSubmitting, totalAmount };
+}