@trustless-work/blocks 1.0.0 → 1.0.2

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

@@ -11,14 +11,14 @@ import {
 import { useEscrowContext } from "@/components/tw-blocks/providers/EscrowProvider";
 import { Loader2 } from "lucide-react";
 
+type Distribution = { address: string; amount: number };
+
 type ResolveDisputeButtonProps = {
-  approverFunds: number;
-  receiverFunds: number;
+  distributions: Distribution[];
 };
 
 export const ResolveDisputeButton = ({
-  approverFunds,
-  receiverFunds,
+  distributions,
 }: ResolveDisputeButtonProps) => {
   const { resolveDispute } = useEscrowsMutations();
   const { selectedEscrow, updateEscrow } = useEscrowContext();
@@ -27,42 +27,22 @@ export const ResolveDisputeButton = ({
 
   async function handleClick() {
     try {
-      if (
-        approverFunds == null ||
-        Number.isNaN(approverFunds) ||
-        receiverFunds == null ||
-        Number.isNaN(receiverFunds)
-      ) {
-        toast.error("Both amounts are required");
-        return;
-      }
-
-      if (approverFunds < 0 || receiverFunds < 0) {
-        toast.error("Amounts must be >= 0");
+      const hasInvalid = distributions.some(
+        (d) => !d.address || Number.isNaN(d.amount) || d.amount < 0
+      );
+      if (hasInvalid) {
+        toast.error("Invalid distributions");
         return;
       }
 
       setIsSubmitting(true);
 
-      /**
-       * Create the payload for the resolve dispute mutation
-       *
-       * @returns The payload for the resolve dispute mutation
-       */
       const payload: SingleReleaseResolveDisputePayload = {
         contractId: selectedEscrow?.contractId || "",
         disputeResolver: walletAddress || "",
-        approverFunds: Number(approverFunds),
-        receiverFunds: Number(receiverFunds),
+        distributions: distributions as [Distribution],
       };
 
-      /**
-       * Call the resolve dispute mutation
-       *
-       * @param payload - The payload for the resolve dispute mutation
-       * @param type - The type of the escrow
-       * @param address - The address of the escrow
-       */
       await resolveDispute.mutateAsync({
         payload,
         type: "single-release",
@@ -70,6 +50,10 @@ export const ResolveDisputeButton = ({
       });
 
       toast.success("Dispute resolved successfully");
+      const sumDistributed = distributions.reduce(
+        (acc, d) => acc + Number(d.amount || 0),
+        0
+      );
       updateEscrow({
         ...selectedEscrow,
         flags: {
@@ -77,7 +61,7 @@ export const ResolveDisputeButton = ({
           disputed: false,
           resolved: true,
         },
-        balance: selectedEscrow?.balance || 0,
+        balance: (selectedEscrow?.balance || 0) - sumDistributed || 0,
       });
     } catch (error) {
       toast.error(handleError(error as ErrorResponse).message);

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

@@ -16,13 +16,27 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "__UI_BASE__/dialog";
-import { Loader2 } from "lucide-react";
+import { Loader2, Trash2 } from "lucide-react";
 import { useResolveDispute } from "./useResolveDispute";
 import { useEscrowContext } from "@/components/tw-blocks/providers/EscrowProvider";
 import { formatCurrency } from "../../../../helpers/format.helper";
 
 export const ResolveDisputeDialog = () => {
-  const { form, handleSubmit, isSubmitting } = useResolveDispute();
+  const {
+    form,
+    handleSubmit,
+    isSubmitting,
+    distributions,
+    handleAddDistribution,
+    handleRemoveDistribution,
+    handleDistributionAddressChange,
+    handleDistributionAmountChange,
+    isAnyDistributionEmpty,
+    allowedAmount,
+    distributedSum,
+    isExactMatch,
+    difference,
+  } = useResolveDispute();
   const { selectedEscrow } = useEscrowContext();
 
   return (
@@ -32,58 +46,116 @@ export const ResolveDisputeDialog = () => {
           Resolve Dispute
         </Button>
       </DialogTrigger>
-      <DialogContent>
+      <DialogContent className="!w-full sm:!max-w-3xl max-h-[95vh] overflow-y-auto">
         <DialogHeader>
           <DialogTitle>Resolve Dispute</DialogTitle>
         </DialogHeader>
         <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>
-                )}
-              />
+            <FormLabel className="flex items-center my-4">
+              Distributions<span className="text-destructive ml-1">*</span>
+            </FormLabel>
 
-              <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>
-                )}
-              />
+            {distributions.map((d, idx) => (
+              <div
+                key={`dist-${idx}`}
+                className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-[1fr_minmax(140px,220px)_auto] gap-3 sm:gap-4 items-end mb-2"
+              >
+                <FormField
+                  control={form.control}
+                  name={`distributions.${idx}.address` as const}
+                  render={() => (
+                    <FormItem className="sm:col-span-2 lg:col-span-1">
+                      <FormLabel>Address</FormLabel>
+                      <FormControl>
+                        <Input
+                          type="text"
+                          placeholder="Receiver address"
+                          value={d.address}
+                          onChange={(e) =>
+                            handleDistributionAddressChange(idx, e.target.value)
+                          }
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name={`distributions.${idx}.amount` as const}
+                  render={() => (
+                    <FormItem>
+                      <FormLabel>Amount</FormLabel>
+                      <FormControl>
+                        <Input
+                          type="text"
+                          inputMode="decimal"
+                          placeholder="0.00"
+                          value={(d.amount as string) ?? ""}
+                          onChange={(e) =>
+                            handleDistributionAmountChange(idx, e)
+                          }
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <Button
+                  type="button"
+                  onClick={() => handleRemoveDistribution(idx)}
+                  className="justify-self-end self-end p-2 bg-transparent text-destructive rounded-md border-none shadow-none hover:bg-transparent hover:shadow-none hover:text-destructive focus:ring-0 active:ring-0"
+                  disabled={distributions.length <= 2}
+                >
+                  <Trash2 className="h-5 w-5" />
+                </Button>
+              </div>
+            ))}
+
+            <div className="flex justify-between items-center mt-4">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={handleAddDistribution}
+                disabled={isAnyDistributionEmpty}
+                className="cursor-pointer"
+              >
+                Add Item
+              </Button>
+
+              <div className="flex items-center gap-4">
+                <div className="text-xs text-muted-foreground">
+                  <p>
+                    <span className="font-bold">Total Amount: </span>
+                    {distributedSum.toFixed(2)} / {allowedAmount.toFixed(2)}
+                  </p>
+                  {!isExactMatch && (
+                    <p className="text-destructive">
+                      <span className="font-bold">Difference: </span>
+                      {difference.toFixed(2)}
+                    </p>
+                  )}
+                </div>
+
+                <p className="text-xs text-muted-foreground">
+                  <span className="font-bold">Total Balance: </span>
+                  {formatCurrency(
+                    selectedEscrow?.balance || 0,
+                    selectedEscrow?.trustline.name || ""
+                  )}
+                </p>
+              </div>
             </div>
 
-            <div className="mt-4 flex justify-between items-center">
+            <div className="mt-4 flex justify-start items-center">
               <Button
                 type="submit"
-                disabled={isSubmitting}
+                disabled={
+                  isSubmitting || isAnyDistributionEmpty || !isExactMatch
+                }
                 className="cursor-pointer"
               >
                 {isSubmitting ? (
@@ -95,22 +167,6 @@ export const ResolveDisputeDialog = () => {
                   "Resolve"
                 )}
               </Button>
-
-              <p className="text-xs text-muted-foreground">
-                <span className="font-bold">Total Amount: </span>
-                {formatCurrency(
-                  selectedEscrow?.amount || 0,
-                  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/single-release/resolve-dispute/form/ResolveDispute.tsx

@@ -10,60 +10,115 @@ import {
 import { Input } from "__UI_BASE__/input";
 import { Button } from "__UI_BASE__/button";
 import { useResolveDispute } from "./useResolveDispute";
-import { Loader2 } from "lucide-react";
+import { Loader2, Trash2 } from "lucide-react";
 
 export const ResolveDisputeForm = () => {
-  const { form, handleSubmit, isSubmitting } = useResolveDispute();
+  const {
+    form,
+    handleSubmit,
+    isSubmitting,
+    distributions,
+    handleAddDistribution,
+    handleRemoveDistribution,
+    handleDistributionAddressChange,
+    handleDistributionAmountChange,
+    isAnyDistributionEmpty,
+    allowedAmount,
+    distributedSum,
+    isExactMatch,
+    difference,
+  } = useResolveDispute();
 
   return (
     <Form {...form}>
       <form onSubmit={handleSubmit} className="flex flex-col space-y-6 w-full">
-        <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>
-            )}
-          />
+        <FormLabel className="flex items-center my-4">
+          Distributions<span className="text-destructive ml-1">*</span>
+        </FormLabel>
 
-          <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>
-            )}
-          />
+        {distributions.map((d, idx) => (
+          <div
+            key={`dist-${idx}`}
+            className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-[1fr_minmax(140px,220px)_auto] gap-3 sm:gap-4 items-end mb-2"
+          >
+            <FormField
+              control={form.control}
+              name={`distributions.${idx}.address` as const}
+              render={() => (
+                <FormItem className="sm:col-span-2 lg:col-span-1">
+                  <FormLabel>Address</FormLabel>
+                  <FormControl>
+                    <Input
+                      type="text"
+                      placeholder="Receiver address"
+                      value={d.address}
+                      onChange={(e) =>
+                        handleDistributionAddressChange(idx, e.target.value)
+                      }
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name={`distributions.${idx}.amount` as const}
+              render={() => (
+                <FormItem>
+                  <FormLabel>Amount</FormLabel>
+                  <FormControl>
+                    <Input
+                      type="text"
+                      inputMode="decimal"
+                      placeholder="0.00"
+                      value={(d.amount as string) ?? ""}
+                      onChange={(e) => handleDistributionAmountChange(idx, e)}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <Button
+              type="button"
+              onClick={() => handleRemoveDistribution(idx)}
+              className="justify-self-end self-end p-2 bg-transparent text-destructive rounded-md border-none shadow-none hover:bg-transparent hover:shadow-none hover:text-destructive focus:ring-0 active:ring-0"
+              disabled={distributions.length <= 2}
+            >
+              <Trash2 className="h-5 w-5" />
+            </Button>
+          </div>
+        ))}
+
+        <div className="flex justify-end">
+          <Button
+            type="button"
+            variant="outline"
+            onClick={handleAddDistribution}
+            disabled={isAnyDistributionEmpty}
+            className="cursor-pointer"
+          >
+            Add Item
+          </Button>
         </div>
 
-        <div className="mt-4">
+        <div className="mt-4 space-y-2">
+          <p className="text-xs text-muted-foreground">
+            <span className="font-bold">Total Amount: </span>
+            {distributedSum.toFixed(2)} / {allowedAmount.toFixed(2)}
+          </p>
+          {!isExactMatch && (
+            <p className="text-xs text-destructive">
+              <span className="font-bold">Difference: </span>
+              {difference.toFixed(2)}
+            </p>
+          )}
           <Button
             type="submit"
-            disabled={isSubmitting}
+            disabled={isSubmitting || isAnyDistributionEmpty || !isExactMatch}
             className="cursor-pointer"
           >
             {isSubmitting ? (

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

@@ -1,80 +1,77 @@
 import { z } from "zod";
+import { isValidWallet } from "../../../../wallet-kit/validators";
 
 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;
+  const amountSchema = z
+    .union([z.string(), z.number()])
+    .refine(
+      (val) => {
+        if (typeof val === "string") {
+          if (val === "" || val === "." || val.endsWith(".")) {
+            return true; // Allow partial input
           }
-          return val >= 0;
-        },
-        {
-          message: "Approver funds must be 0 or greater.",
+          const numVal = Number(val);
+          return !isNaN(numVal) && numVal >= 0;
         }
-      )
-      .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;
+        return val >= 0;
+      },
+      { message: "Amount must be 0 or greater." }
+    )
+    .refine(
+      (val) => {
+        if (typeof val === "string") {
+          if (val === "" || val === "." || val.endsWith(".")) {
+            return true; // Allow partial input
           }
-          const decimalPlaces = (val.toString().split(".")[1] || "").length;
+          const numVal = Number(val);
+          if (isNaN(numVal)) return false;
+          const decimalPlaces = (numVal.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.",
+        const decimalPlaces = (val.toString().split(".")[1] || "").length;
+        return decimalPlaces <= 2;
+      },
+      { message: "Amount can have a maximum of 2 decimal places." }
+    );
+
+  return z
+    .object({
+      distributions: z
+        .array(
+          z.object({
+            address: z
+              .string()
+              .min(1, { message: "Address is required." })
+              .refine((addr) => isValidWallet(addr), {
+                message: "Invalid Stellar address.",
+              }),
+            amount: amountSchema,
+          })
+        )
+        .min(2, { message: "At least two distributions are required." }),
+    })
+    .superRefine((data, ctx) => {
+      const seen = new Map<string, number>();
+      data.distributions.forEach((item, idx) => {
+        const key = (item.address || "").trim().toUpperCase();
+        if (!key) return;
+        if (seen.has(key)) {
+          const firstIdx = seen.get(key)!;
+          ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            path: ["distributions", idx, "address"],
+            message: "Duplicate address. Each recipient must be unique.",
+          });
+          ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            path: ["distributions", firstIdx, "address"],
+            message: "Duplicate address. Each recipient must be unique.",
+          });
+        } else {
+          seen.set(key, idx);
         }
-      ),
-  });
+      });
+    });
 };
 
 export const resolveDisputeSchema = getFormSchema();