@trustless-work/blocks 0.0.1

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

@@ -0,0 +1,82 @@
+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 { Loader2 } from "lucide-react";
+
+export default function ResolveDisputeForm() {
+  const { form, handleSubmit, isSubmitting } = useResolveDispute();
+
+  return (
+    <Form {...form}>
+      <form onSubmit={handleSubmit}>
+        <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>
+        </div>
+      </form>
+    </Form>
+  );
+}

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

@@ -0,0 +1,82 @@
+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.",
+        }
+      ),
+  });
+};
+
+export const resolveDisputeSchema = getFormSchema();
+
+export type ResolveDisputeValues = z.infer<typeof resolveDisputeSchema>;

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

@@ -0,0 +1,58 @@
+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 { SingleReleaseResolveDisputePayload } from "@trustless-work/escrow";
+import { useEscrowContext } from "../../../escrow-context/EscrowProvider";
+import { useEscrowsMutations } from "@/components/tw-blocks/tanstak/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 } = useEscrowContext();
+  const { walletAddress } = useWalletContext();
+
+  const form = useForm<ResolveDisputeValues>({
+    resolver: zodResolver(resolveDisputeSchema),
+    defaultValues: {
+      approverFunds: 0,
+      receiverFunds: 0,
+    },
+    mode: "onChange",
+  });
+
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
+
+  const handleSubmit = form.handleSubmit(async (payload) => {
+    try {
+      setIsSubmitting(true);
+
+      const finalPayload: SingleReleaseResolveDisputePayload = {
+        contractId: selectedEscrow?.contractId || "",
+        disputeResolver: walletAddress || "",
+        approverFunds: Number(payload.approverFunds),
+        receiverFunds: Number(payload.receiverFunds),
+      };
+
+      await resolveDispute.mutateAsync({
+        payload: finalPayload,
+        type: "single-release",
+        address: walletAddress || "",
+      });
+
+      toast.success("Dispute resolved successfully");
+    } catch (error) {
+      toast.error(handleError(error as ErrorResponse).message);
+    } finally {
+      setIsSubmitting(false);
+      form.reset();
+    }
+  });
+
+  return { form, handleSubmit, isSubmitting };
+}